本文详细介绍了CSS样式的三种引用方式：内部样式表、行内样式和外部样式表，以及各自的优缺点和适用场景。同时，讲解了背景样式的相关属性，如背景颜色、背景图片、背景定位、背景重复和背景附件，以及如何通过复合属性设置背景。此外，还涵盖了字体样式的各个属性，包括字体族、字体大小、字体粗细、字体颜色和字体斜体。这些内容有助于理解CSS在网页设计中的重要性和灵活性。
一、样式引用
1.内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
2.行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
3.外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
二、背景样式（background）
背景颜色 background-color
• background-color:red
• 背景颜色的值可以是英文，可以是十六进制颜色值，可以是 rgb，也可以是
rgba
背景图片 background-image
• background-image:url(bg01.jpg);
• 背景图片的大小可以和容器大小不一样
• 背景图片不会占位
• 如果容器大，背景图片小，背景图片会平铺 铺满整个容器
背景图片位置 background-position
• background-position:10px 100px;
• 背景图片定位的值是两个单位，分别代表坐标 x，y轴
• 背景图片定位的值可以是应为 left，right，top，bottom，center
• 背景图片定位的值也可以是百分比或者像素
背景图片重复 background-repeat
• background-repeat:no-repeat
•repeat 默认值 垂直方向和水平方向平铺 即：完全平铺
•repeat-x 水平方向平铺 x轴
•repeat-y 垂直方向平铺 y轴
• no-repeat 设置图像不平铺
• round 自动缩放直到适应并填充满整个容器
• space 以相同的间距平铺且填充满整个容器
背景图片定位 background-attachment
• background-attachment:fixed
• 背景图像是否固定或者随着页面的其余部分滚动
• background-attachment 的值可以是 scroll（跟随滚动），fixed（固定）
background 缩写
• background:#ff0000 url(bg01.jpg) no-repeat fixed center
三、字体样式（font）
字体族 font-family
• font-family:"微软雅黑","黑体";
使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）
字体大小 font-size
• font-size:12px;
• 网页默认字体大小是 16px
• 单位px/em，% 等
• x-large;(特大) xx-small;（极小）
字体异体 font-variant
• normal(正常)
• small-caps（小体大写字母）
字体粗细 font-weight
• font-weight:400 ;
• normal（默认）
• bold（加粗）
• bolder（相当于<strong>和<b>标签）
• light 细
• lighter （常规）更细
• 100 ~ 900 整百（400=normal，700=bold）
字体颜色 color
• 颜色的英文单词 color:red;
• 十六进制色： color: #FFFF00;
• RGB(红绿蓝) color:rgb(255,255,0)
• RGBA（红绿蓝透明度）A是透明度在 0~1之间取值。 color:rgba(255,255,0,0.5)
字体斜体 font-style
• font-style:italic
• normal 文本正常显示
• italic 文本斜体显示
• oblique 文本倾斜显示
font-stretch：收缩或拉伸当前的字体系列2
•Normal（默认值。把缩放比例设置为标准）
•Wider（把伸展比例设置为更进一步的伸展值）
•Narrower（把收缩比例设置为更进一步的收缩值）
·ultra-condensed
·extra-condensed
·condensed
·semi-condensed
·semi-expanded
·expanded
·extra-expanded
·ultra-expanded
（设置 font-family 的缩放比例。）
"ultra-condensed" 是最宽的值，而 "ultra-expanded" 是最窄的值。
复合属性 font
font:italic small-caps bold 12px 宋体;
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
