层叠样式表：

用于定义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