共计 3277 个字符，预计需要花费 9 分钟才能阅读完成。
CSS 属性
1. 通用选择器
(1) 作用：能够抉择到页面中的所有标签
(2) 语法：*{}
(3) 举例：
示例 1：
<body>
<h2> 通用选择器 </h2>
</body>
阐明：应用浏览器控制台，右键查看选项，能够分明地看到标签自带的款式（比方：h2 标签自带 margin）
示例 2：
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
- {
/ margin: 外边距 /
margin: 0;
/ padding：内填充 /
padding: 0;
}
</style>
</head>
<body>
<h2> 通用选择器 </h2>
<span>span 标签 </span>
<div>div 标签 </div>
<ul>
<li> 哈哈 </li>
<li> 哈哈 </li>
</ul>
</body>
后果：
阐明：如后果所示, h2 自带的 margin 曾经被去掉，无序列表自带的点也被去掉了。
论断：
- 个别应用 *{margin:0;padding:0} 去掉所有标签自带的款式
-
div 和 span 标签
- div 标签：划分网页的板块
- span 标签：用来选中文本设置款式
留神：div 和 span 都是不带任何自带款式，是最洁净的标签。
区别：div 独占一行，span 在同一行显示
2. 后辈选择器
（1）语法：选择器 选择器{}
（2）特点：
- 选择器与选择器之间用 空格隔开
- 选择器和选择器之间 必须是后辈（标签的嵌套）关系
- 选择器的类型不固定（标签 /id/ 类选择器等等都能够）
- 选择器之间是 能够跨代 的（只有是先人和后辈的关系即可）
- 选择器的个数个别也不限度
（3）举例：为前两个字设置红色字体
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
.box span {
color: red;
}
</style>
</head>
<body>
<ul class=’box’>
<li>
<span> 哈哈 </span> 哈
</li>
</ul>
</body>
后果：
阐明：除了间接应用 span 标签选择器外，span 是 li 和 ul 的后辈元素，所以能够通过为 ul 或者 li 设置 class 属性，应用后辈选择器（如.box span）抉择。
3. 选择器的权重
（1）概念：通过不同的选择器，抉择同一个标签，设置了雷同的属性，然而设置了不同的属性值，则会 产生抵触。
（2）权重值：
- 行内款式 1000
- id 选择器 100
- class 选择器和伪类选择器 10
- 标签选择器 1
- 继承的优先级最低
（3）优先级的规定
- 当权重值雷同的时候，依据就近准则
- 权重值越高，越优先显示
- 后辈选择器 的权重值是所有选择器的权重值 相加 之和
- 自带款式的标签，须要间接批改本人自身
示例 1：
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p> 我是段落标签
<span> 我是 span</span>
</p>
</body>后果：
示例 2：
<head>
<meta charset=”UTF-8″>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>
超链接
</p>
</body>后果：
阐明：比拟示例 1 和示例 2，咱们能够看到，span/ a 标签的字体应该从父元素 p 继承而来，然而示例 2 的后果并未扭转 a 的字体色彩。
示例 3：
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
a {
color: red;
}
</style>
</head>
<body>
<p> 我是段落标签
超链接
</p>
</body>后果：
论断：对于自带款式的标签（a 标签），须要间接批改本人自身
4. 群组选择器
- 语法：选择器，选择器{}
- 规定：选择器的个数和类型不限度
-
特点：
- 将有公共款式的选择器放到一组，用逗号隔开
- 群组选择器的权重值是 每个选择器本人自身，和其余选择器无关
示例：
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
.box {
color: blue;
}#un,p {
color: red;
}
</style>
</head>
<body>
<div id=’un’> 我是 div 标签 </div>
<p class=’box’> 我是段落标签 </p>
</body>后果：
阐明：因为群组选择器的权重只与本人自身无关，所以标签（p）的权重值 1，class 类（.box）的权重值为 10，则显示类选择器设置的蓝色。
5. 字体属性
（1）字体大小
- 属性：font-size
-
属性值：
- 数值 +px; 个别数值设置为偶数
（2）字体类型
- 属性：font-family
-
属性值
- 中文要加引号
- 英文一个单词的能够不加引号，多个单词组成的字体类型须要设置引号
- 多个字体之间用逗号隔开，从左向右检索，零碎有该字体则间接显示，没有则显示默认字体
<style>
p {
font-family: ‘ 宋体 ’，Arial, ‘Times New Roman’;
}
</style>
（3）字体加粗
- 属性：font-weight
-
属性值：
- bold 加粗
- normal 去掉加粗
（4）字体歪斜
- 属性：font-style
-
属性值：
- italic 歪斜
- normal 去掉歪斜
6. 文本属性
（1）ps 快捷键
- 放大 / 放大 alt+ 滚轮
- 显示 / 暗藏标尺 ctr+r
- 批改像素单位 ctr+k-> 单位与标尺 -> 标尺单位抉择像素 -> 显示信息面板窗口 -> 信息勾选就行
（2）文本色彩
- 属性：color
-
属性值(三种形式)
- 英文单词
- 十六进制
- rgb(r,g,b) rgb 的取值 0 -255
（3）文本对齐形式
- 属性：text-align
-
属性值
- left（居左，默认值）
- right (居右)
- center（居中）
- justify (两端对齐)
（4）文本润饰
- 属性：text-decoration
-
属性值：
- underline (下划线)
- overline (上划线）
- line-through (删除线)
- none (去掉下划线)
（5）文本缩进
- 属性：text-indent
-
属性值
- 数值 +px/ 数值 +em(以后字体大小的倍数，个别设置 2em)
- 能够设置正数
（6）文本大小写转换
- 属性：text-transform
-
属性值：
- capitalize 全副首字母大写
- uppercase 全副大写
- lowercase 全副小写
- none
（7）文本行高
- 属性：line-height
- 属性值：数值 +px
-
利用：
- 多行文本：加大行与行之间的间隔
- 单行文本：实现单行文本的 垂直居中
- 量取：从某一行的头量到下一行的头
（8）字间距
-
属性：letter-spacing
- 中文：每个汉字之间的间隔
- 英文：每个字母之间的间隔
（9）词间距
- 属性：word-spacing
- 英文单词之间的间隔
（10）字体复合写法
-
font: 字体加粗 字体歪斜 字体大小 / 行高 字体类型
- 字体加粗 字体歪斜两者有值间接写，没有能够省略
- 字体大小 / 行高 字体类型 三者不能够省略，并且程序不能变
7. 堆色块
（1）先用标尺拉出版心的范畴
（2）从上往下写板块，剖析板块
- 版心之外没有色彩，只写一个 div，代表版心。设置宽 / 高 / 背景色 / 居中
-
版心之外有色彩，写两个 div。
- 外层是通栏，设置高度 / 背景色
- 里层是版心，设置宽 / 高 / 背景色 / 居中
小结：
1. 选择器：
- 通用选择器 星号*
- 后辈选择器 选择器之间 空格 连贯 / 权重为所有之和
- 群组选择器 选择器之间 逗号 连贯 / 权重只与本人自身无关
-
权重：
- 1) 行内 1000
- 2) id 100
- 3) 类和伪类 10
- 4) 标签 1
- 5) 继承权重最低
2. 字体属性
- 字体大小 font-size
- 字体类型 font-family
- 字体加粗 font-weight
- 字体歪斜 font-style
3. 文本属性
- 文本色彩 color
- 文本对齐形式 text-align（四类）
- 文本润饰 text-decoration（四类）
- 文本缩进 text-indent
- 文本大小写转换 text-transform
- 文本行高 line-height
- 字间距 letter-spacing
- 词间距 word-spacing
-
复合写法：
- font: 字体加粗 字体歪斜 字体大小 / 行高 字体类型（前两个没有可省略，后三个不能省，且程序不能变）