这是我参与「第五届青训营」伴学笔记创作活动的第 16 天
文本属性
---> 5、文本属性.html
- color 文本颜色，可以采用预定义的颜色值、16进制、rgb（...）等三种形式
- text-align 文本对齐方式， left左对齐(默认值) center居中 right右对齐
- text-indent 文本首行缩进， 10px是绝对值 2em是相对值，首行缩进目前文字大小的两倍
- text-decoration 文本装饰， none没有装饰线（默认）、underline下划线、overline上划线、line-through删除线
line-height 文本行间距，上间距+字行高+下间距
CSS的三种样式表
按书写的位置即引入的方式分为一下三种
- 行内样式表（行内式-一个标签）：将标签写到html文件具体标签里（适合修改简单样式）
- 内部样式表（嵌入式-一个页面）：写到html文件head头部，单独放在标签内
- 外部样式表（链接式-多个页面）：将样式单独写到CSS文件中，之后将CSS文件引入到html页面中使用先新建一个.css后缀的文件，将样式写入该文件中；
在html文件中，使用标签引入该文件
例如： ---> 6、外部样式表.html
7、综合案例 ---> 要想使图片居中对齐，就用p标签包裹一下 用text-align即可
Emmet语法
div*10 能够快速生成十个div标签
ul>li 父标签与子标签
p.one p标签 class为one --- p#one p标签 id为one
.demo$*5 生成默认div标签5个 类名依次demo1、demo2、demo3、demo4、demo5
div{我是皮妍玲} --->
我是皮妍玲
元素的显示模式
元素（标签）以什么方式进行显示
- 块元素：自己独占一行；
高度、宽度、外边距以及内边距都可以控制；
宽度默认父级的100%；
是一个容器及盒子，里面可以放行内或者块级元素；
文字类元素（p、h1-h6）内不允许放块级元素（div）
- 行内元素(内联元素)：相邻的行内元素在一行上，一行可以显示多个；
宽高的设置是无效的，默认宽度是本身内容字体显示宽度；
行内元素只能容纳文本或其他行内元素；
a标签内里面可以放块级元素，但不能再放a标签链接
- 行内块元素：同时具有块元素和行内元素的特点 img、input、td
和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行显示多个；
默认宽度是它本身内容的宽度；
高度、行高、外边距以及内边距都可以控制；
- 元素显示模式的转换：一个模式的元素需要另一个模式的特性 ---> 9、元素模式转换.html
背景元素
页面可以同时加背景颜色和背景图片，但背景图片会压住背景颜色，也就是说背景颜色在最底层
- 背景颜色（background-color）： transparent（透明、默认）/颜色
- 背景图片（background-image）：超小和超大图片一般采用背景图片来做 none/url指定图片
tips:背景图片的设置必须同时设置宽高，否则无效
- 背景平铺（background-repeat）: repeat为默认状态
repeat：图片平铺，直到铺满盒子高度为止（则有可能会出现多张相同图片）
no-repeat：图片不平铺，无论盒子多大，也只有一张图片
repeat-x：以x轴长度为标准铺满
repeat-y：以y轴长度为标准铺满
- 背景图片位置（background-position）：可以改变图片在背景中的位置
方位名字：top、center、bottom、left、right
两者无先后顺序 left top和top left没有区别；
如果只指定一个方位名词，则第二个默认居中对齐；
精确单位（x和y）：如果只写一个精确方位，那么y一定是居中；
混合单位（方位名词+精确单位）：x+y顺序不可变
- 背景图像固定（background-attachment）：可以制作视差滚动的效果
滚动（scroll）：默认状态，随着内容的滚动而滚动
固定（fixed）:背景图像固定
背景属性复合写法：背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置；（非固定顺序，是一般情况顺序）
背景半透明：background：rgba(0,0,0,0.3)
CSS的三大特性
- 层叠性：相同的选择器设置相同的样式，如果样式冲突，就近原则；如果不冲突，不会层叠；
- 继承性：子标签会继承父标签的某些（并不是所有属性都可以被继承）样式（文本颜色和字号 text-系列 font-系列 行高，背景等元素不可以继承 ）
- 优先级：当同一个元素指定多个选择器，会有优先级的产生
选择器相同，样式层叠；选择器不同，按优先级执行样式
!important > 行内样式 > ID选择器 > 类选择器、伪类选择器 > 元素选择器 > 继承或者*
tips: div { color: pink!important;}
复合选择器会有权重叠加的问题
- 总的：作者样式表！important > 作者样式表的普通样式 > 浏览器默认样式表中的样式
- 作者样式表的普通样式 内特殊性比较（具体规则，通过选择器，计算出四位数xxxx）
- 千位 ：如果是行内样式表，记1，否则记0
- 百位 ：等于选择器中所有id选择器的数量
- 十位 ：等于选择器中所有类选择器、属性选择器、伪类选择器（a:hove...）的数量
- 个位 ：等于选择器中所有元素选择器，伪元素选择器（操作的并不是真实的dom节点 ::firstline ::firstletter ::before ::after）的数量
- 常见的重置样式表：
- normalize.css
- reset.css
- meyer.css
