层叠样式表：
用于定义html文档的样式（外观）字体大小，粗体，边框，背景颜色
页面的基础，可以控制布局，控制元素的渲染，页面的基础，可以控制布局，控制元素的渲染
注释：主要用于描述代码功能，
浏览器不会显示出来
格式：/*注释内容*/
快捷键：ctr+?
规则：代码由一个一个的规则组成，每个规则指定了对那些（1到多个）元素应用什么样式。
基础/基本选择器：
通配符选择器：
*
{
color: ;
}
元素选择器：
h1
{
color: ;
}
p
{
color: ;
}
组合选择器：
h1,h2,h3,h4
{
color: ;
}
类选择器：例： clas = " .f46 "
属性名 值
.f46
{
color: ;
}
类选择器特点：1.选择器必须以点号（英文）开始；
2.包含字母-数字-连字符（-）-下划线（_）;
3.点号后面的字母必须是字母开始；
4.区分大小写；
5.一个选择器（类名）可以应用到多个标签
Id 选择器：不能用，留给js
层次选择器：
后代选择器：
格式：祖先元素 空格 后代元素
例 ：祖先 后代
{
}
子级选择器：格式 ：父级元素大于号子级元素 { }
兄弟选择器： 格式;兄弟元素A+兄弟元素B{ } 注：当使用兄弟选择器的时候：选择A元素后的B元素，并且AB必须是紧邻的，即AB之间不许有其他元素
通用选择器： 格式：兄弟元素A+兄弟元素B 选择匹配的B元素，即A元素后面的所有B元素。
伪类选择器：
静态伪类选择器：
1 .链接未访问用：link 例：a 标签 （a:link { }） 只适用于a标签
2 .已访问 用：visited 例：a 标签 （a :visited { }）只适用于a标签
动态伪类选择器：
3 . 鼠标悬停时使用： hover
4 .点击时使用(只会停留几秒)： active
5 .focus 触发焦点（tab键）时的样式 focus要用在 hover的前面，但是不用focus
结构伪类选择器：
例1：
<nav>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</nav>
改变第一个li的颜色 li : first-child{ }
改变最后一个li的颜色 li : last-child { }
改变第二个li的颜色 li : nth-child(2){ }
例2：
<div>
<nav>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</nav>
</div>
用祖先元素选择器改变第二个li的颜色 div li : nth-child(2）{ }
用子级元素选择器改变第4个li的颜色 div>ul> li : nth-child(4）{ }
用子级元素选择器改变倒数第二个li的颜色 div>ul> li : nth-last-child(2）{ } nth-last-child(2) 从后面往前数
选取奇数项：方法1：祖先元素选择器 div li：nth-child(2n+1){ }
方法2：祖先元素选择器 div li：nth-child(odd){ }
选取偶数项：方法1：祖先元素选择器 div li：nth-child(2n){ }
方法2：祖先元素选择器 div li：nth-child(even){ }
例3:
<div>
<p> </p>
<em> </em>
<p> </p>
<em> </em>
<p> </p>
<em> </em>
</div>
快捷键：div>(p+em)*3
用子级元素改变p标签的颜色 div>p:empty{ }
改变的颜色em（有且仅有一个em 实现）div>em:only-child{ }
伪元素选择器：格式:以两个冒号开始
例：
<p class="testselect">
lorem................
</p>
1 .selection的规则只能有color和backgroung-color,background
.testselect::selection
{
color: ;
background-color: ;
}
2 选中第一个首字母 .testselect::first-letter{ }
3 .选中第一行改变 .testselect::first-lin{ }
例2：
<i>世界</i>
<em>你好</em>
.在i标签之前添加内容 i::before{content:"你好," color: ;}
在em标签之后添加内容 em::after{content:"世界" color: ;}
属性选择器：
格式：
标签名+[属性名="属性值"]
<input type ="text"> 例： input[ type="text"] { }
<input type ="number"> 例： input[ type="nmber"]{ }
<input type ="email"> 例： input[ type="email"]{ }
<input type ="date"> 例： input[ type="date"]{ }
常见css属性：
属性 示例 描述
color color : red 颜色
text-align text-align : center 对齐方式
font-size font-size : 28px 文字大小
font-weight font-weight : bold 文字粗细
background-color background-color : red 背景颜色
font-size:1最低12px ;2不许取奇数
颜色单位:rgba a单位透明度取0-1的值 （例:0.5）
长度单位：一个尺寸是由长度+单位组成
绝对长度：px一个像素的具体大小会根据设备的分辨率有所不同
相对长度：
%在不同的css属性中，有不同的含义；
em相对于当前元素的字体大小；
rem相对于根元素的大小。
声明冲突：如何解决冲突：层叠机制
比较优先级：优先级从低到高
1.浏览器默认样式表的声明；
2.用户样式表的普通声明； x
3.作者样式表的普通声明；
4.作者样式表的重要声明；
5.用户样式表的重要声明； x
比较特殊性：
每一个声明都有一个权重（特殊性，特指度SpecifiCity）;
当发生冲突时，特殊性高的保留，反之淘；
一个声明的特殊性，取决于规则适用范围的大小；
规则适用范围越大，特殊性越低，适用范围越小，特殊性越高；
特殊性从高到低：行内样式>id选择器>类选择器>元素选择器>通配符选择器
比较特殊性的具体规则：
a.若声明是行内样式，则为1，否则为0；
b.规则中id选择器的个数；
c.规则中类选择器，伪类选择器，属性选择器的个数；
d.规则中元素选择器，伪元素选择器的个数；
选择器 a b c d
style 1 0 0 0
id 0 1 0 0
class,属性，伪类 0 0 1 0
元素，伪元素 0 0 0 1
比较源次序：最后出现的声明，反之淘汰
继承：
译：继承inherit，是指子元素会：自动拥有父元素的某些css属性，继承具有传递性。
可被继承的属性：color font-size foot-weight text-align
继承发生的场景：一个元素的某个css属性，只有满足下面2个条件，才会继承父元素：1,该属性是可被继承的属性；2,该属性在样式表中没有声明。
强制继承：又叫显示继承，指将css属性值被设置为 例：{ font-size:inherit ; }
不可被继承的属性：background-color border
渲染的顺序：在渲染时，按照从上到小
属性:
字体类型：
font-famiy:sans-serif 非衬线字体
font-famiy:serif 衬线字体
字体风格：
font-style : normal 正常
font-variant:small-caps 全部小写
字体的粗细：
font-weight : bolder 更粗
字体的大小:
font-size: 28px
tesxt-transform : noen 没有变化
tesxt-transform : upperercase 全部大写
tesxt-transform : lowercase 全部小写
tesxt-transform : capitalize 首字母大写
文本阴影 tesxt-shadow : 5px 6 px 7 px yellow
5px x轴 代表水平方向
6px y轴 代表垂直方向
7px 模糊值 值越大 ，模糊范围越大
文本装饰线：
text-indent : 5em 不建议用
text-decornation : undline 下划线
text-decornation : overline 上划线
text-decornation : line-through 删除线
对齐方式：
text-align : center 居中
line-height : 100px 行高
word-spacing : 20px 词间距
letter-spacing : 20px 字间距
width height
在css里面写路径 backgrond-img : url ( " 路径 " )
背景图片的平铺方式：
background-repeat: no-repeat ;不平铺
background-repeat: repeat-x ; 水平方向平铺
background-repeat: repeat-y ; 垂直方向平铺
background-repeat: repeat ; 默认值
背景尺寸：
background-size: auto; 自动
background-size: cover; 保持图片尺寸，等比例缩放，平铺整个区域；如果图片尺寸大于容器尺寸则会超出
background-size: contain; 平铺整个区域，图片不会超出
background-attachment : fixed; 固定定位
背景图片：
background-image：linear-gradient( totop ,red,blue yellow);
可以和其他属性一起写：
background : red url( " 路径" )no-repeat top-left