CSS字体样式属性
font-size:字号大小
**font-family:字体：**规定元素的字体系列。
font-weight:字体粗细设置或检索对象中文本字体的粗细（数值最大900）
- normal：正常的字体，相当于数字值400
- bold：粗体，相当于数字值700
- bolder：定义更粗的字符
- lighter 定义更细的字符
font-style:字体风格
- normal：默认值，浏览器显示一个标准的字体样式
- italic：浏览器会显示一个斜体的字体样式。
常用技巧
- 现在网页中谱表使用14px+
- 尽量使用偶数的数字字号
- 各种字体之间必须使用英文逗号隔开
- 中文字体需要加英文状态下的引号，英文字题一般不需要加引号，当设置设置英文字体时，英文字体必须位于中文字体前
- 如果字体名中含有空格、￥、#等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-size:“Times New Roman”;
- 尽量使用系统默认字体，保证在任何用户的浏览器中都可以正确显示
CSS Unicode字体
在CSS中设置字体名称，直接写中文是可以的，但在文件编码不匹配时会产生乱码错误。
方案一：用英文代替，比如：font-family:“Microsoft Yahei”
方案二：在CSS直接使用Unicode编码来写字体名称可以避免错误，使用Unicode编码写中文字体名称，浏览器是可以正确解析的，例如，font-family:"\5FAE\8F6F\96C5\9ED1"，表示微软雅黑
CSS注释
/*需要注释的内容*/
font字体综合样式
选择器{
font:font-style font-weight font-size/line-heigjt font-family;
}
使用font属性时，必须按顺序写，不能更改顺序，各个属性空格隔开
其中不需要设置的属性可以省略，但必须保留font-size和font-famile属性
选择器
标签选择器标签作为选择器
类选择器
.类名{ /*声明类样式*/
属性:属性值；
}
标签调用时用 class="类名"调用
命名规范
- 长名称或词组可以使用中横线来为选择器命名
- 不建议使用“_”下划线来命名选择器
- 尽量使用英文字母来命名
案例
<head>
<style>
span{
font-size:100px
}
.blue{
color:blue;
}
.red{
color:red;
}
.green{
color:#6C0;
}
.orange{
color:orange;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
多类名选择器
有时设置一个样式需要选择多个选择器类名，这时我们可以在class中写，类名之间空格隔开，先后顺序无影响，只受css样式书写的上下顺序影响。
class="类名1 类名2 ...."
id选择器
在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
#类名{
属性：属性值；
}
调用： id="类名"
id选择器与类选择器的区别
- 类选择器可以多次重复使用，类似于姓名重名
- id选择器不能重复使用，类似于身份证号，是唯一的
通配符选择器（了解）
匹配页面中所有元素
*{
属性：属性值；
}
伪类选择器
用于像某些选择器添加特殊效果，比如给链接添加特殊效果，用":"
链接伪类选择器
- :link 向未被访问的链接添加样式
- :visited 向已被访问的链接添加样式
- :hover 当鼠标悬浮在元素上方时，向元素添加样式
- :active 向被激活的元素添加样式
a:link{
font-size:20px;
color:#999;
font-weight:bold;
}
a:visited{
font-size:20px;
color:orange;
font-weight:bold;
}
a:hover{
font-size:20px;
color:red;
font-weight:bold;
}
a:active{
font-size:20px;
color:red;
font-weight:bold;
}
顺序尽量不要颠倒
一般情况下，我们不需要用到4个
常用写法：
a {
font-size:20px;
font-weight:bold;
color:#999;
}
a:hover{
color:red;
}
结构（位置）伪类选择器（CSS3）
- :first-child：选取属于其父元素的首个子元素的指定选择器
- :last-child：选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n)：匹配属于其父元素的第N个子元素，不论元素的类型 even 偶数 odd 奇数 n 从0开始，例如，偶数可以表示2n，奇数可以表示2n+1
- :nth-last-child(n)：选择器匹配属于其元素的第N个子元素的每个元素，不论元素类型，从最后一个子元素开始计数，n可以是数字、关键词或公式
li:first-child{
color:pink;
}
li:last-child{
color:purple;
}
li:nth-child(4){
color:red;
}
<ul>
<li>第一首诗</li>
<li>第二首诗</li>
<li>第三首诗</li>
<li>第四首诗</li>
<li>第五首诗</li>
<li>第六首诗</li>
<li>第七首诗</li>
</ul>
li:nth-child(even){
color:#C3F;
}
<ul>
<li>第一首诗</li>
<li>第二首诗</li>
<li>第三首诗</li>
<li>第四首诗</li>
<li>第五首诗</li>
<li>第六首诗</li>
<li>第七首诗</li>
</ul>
目标伪类选择器
:target目标伪类选择器，选择器用于选取当前活动的目标元素
:target{
属性：属性值;
}
CSS外观属性
color:文本颜色
color属性用于设置文本颜色，取值方法有：
- 预定义颜色的值，例如，red，pink
- 十六进制，如#FF0000，#FF6600
- RGB代码，如红色是rgb(255,0,0)，或rgb(100%，0%，0%)
line-height:行间距 设置行与行的间距
text-align:水平对齐方式
用于设置文本内容的水平对齐，相当于html的align属性。属性值为：
left：左对齐
right：右对齐
center：居中对齐
text-indent:首行缩进 建议em为单位
letter-spacing:字间距
word-spacing:单词间距 针对英文
word-break:自动换行
颜色半透明（CSS3）
color:rgba(r,g,b,a); a是alpha 透明的意思 取值范围0~1
color:rgba(0,0,0,0.3);
文字阴影（CSS3）
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
h-shadow：必需。水平阴影部分，允许负值
v-shadow：必需。垂直阴影位置，允许负值
blur：可选。模糊的距离
color：可选。阴影的颜色
引入CSS样式表
内部样式表
内部样式表就是将CSS代码集中写在HTML文档的head头部标签中，并且用style定义，基本语法：
<head>
<style type="text/css">
选择器{
属性：属性值1;
}
</style>
</head>
行内式（内联样式）
通过style标签来设置元素的样式，适合样式比较少的情况
<标签 style=“属性:属性值;”>内容</标签>
外部样式表（外联式）
外联式是将所有的样式放在一个或多个以CSS为扩展名的外部样式表文件中，通过link标签将外部样式表链接到HTML文档中，其基本语法结构如下：
<head>
<link href="css文件路径" type="text/css" rel="stylesheet" />
</head>
- href：定义所外接样式表的URL
- type：定义所链接文档的类型
- rel：定义当前文档与链接文档之间的关系
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式结构相分离 | 较少 | 控制一个标签（少） |
| 内嵌样式表 | 部分结构与样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外联样式表 | 完全实现样式结构相分离 | 需要引入 | 最多 | 控制整个站点（多） |
标签显示模式（display）
规定元素应该生成的框的类型。
块级元素（block-level）
每个块元素通常会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，通常用于网页布局和网页结构搭建
块级元素的特点：
- 总是从新行开始
- 高度、行高、外边框以及内边框都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其它元素
行内元素（inline-level）
不占有独立的区域，仅仅靠自身的字体大小和图像的吃醋来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式
行内元素的特点：
- 和相邻行内元素在一行上
- 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素（a特殊）
注意：
- 只有文字才能组成段落，因此p里面不能放块级元素，同理，h1，h2，h3，h4，h5，h6，dt都是文字类块级元素，里面不能放其他块级元素
- 链接里面不能再放链接
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对他们设置宽高和对齐属性，有些资料可能会称他们为行内块元素
行内块元素的特点：
- 和相邻行内元素（行内快）在一行上，但是之间会有空白缝隙
- 默认宽度就是它本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制
标签显示模式转换 display
块级元素转换为行内元素：display:inline;
行内元素转换为块级元素：display:block;
块级、行内元素转换为行内块元素：display:inline-block;
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
并集选择器
并集选择器是各个选择器通过“逗号”连接而成的，任何形式的选择器（包括标签选择器、class选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择其定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签发生嵌套时，内层标签就成为外层标签的后代
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间用‘>’进行连接，注意，符号左右两侧各保留一个空格
测试选择器的掌握
<!--主导航栏-->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<!--侧导航栏-->
<div class="sitenav">
<div class="site-l">左侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
任务：
- 链接登录的颜色为红色，主导航栏里所有文字改为粉色
.nav a{
color:pink;
}
.site-r a{
color:red;
}
- 主导航栏和侧导航栏里面的文字都是14px且为微软雅黑
.nav,.sitenav{
font-size:14px;
font-family:Microsoft Yahei;
}
- 主导航栏里的一级菜单为绿色
.nav > ul > li > a{
color:green;
}
最终效果：
属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
标签[属性]
标签[属性=属性值]
标签[属性^=val] 属性值包含val，并以val开头
标签[属性*=val] 属性值包含val，val可在任一位置
标签[属性$=val] 属性值包含val，并以val结束
伪元素选择器
标签::first-letter 第一个文字
标签::first-line 文本第一行
标签::selection 可改变选中的文本样式
标签::before 在元素内部开始位置创建一个行内元素，必须结合content属性使用（content:属性值;）
标签::after 在元素内部结束位置创建一个行内元素，必须结合content属性使用
CSS书写规范
空格规范
- 选择器与’{'之间必须包含空格
- 属性名与之后的‘:’之间不允许包含空格，‘:‘与属性值之间必须包含空格
选择器规范
- 当一个rule含有多个selector时，每个选择器必须独占一行
- 选择器的嵌套层次应不大于3级，位置靠后的限定条件应尽可能精准
属性规范
- 属性定义必须另起一行
- 属性定义后必须以’;‘结尾
1191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
