总结这周学习的css的知识

层叠样式表：

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