作业（css）

样式

内部样式

写在</head>上一行 

写成<style>   css选择器{css样式}     </style>

追求结构（html）、表现（css）、行为（js）相分离

外部样式

文件的后缀是.css

要将外部css文件引入html文件中

写法：<link  rel="stylesheet"   href="">      写在</head>上一行

外部样式表必须使用link标签的href属性引入到html页面

行内样式

直接给标签添加了style属性          “”内采用键值对的属性

例如<div  style=“color：red;”></div>  

css选择器

标签选择器

标签选择器：使用标签名作为选择器，只要是这个标签名的标签都会被选中

                      缺点是同名的标签无法做到差异化

类选择器

类选择器写法： .类名{属性名：属性值；}

一个类选择器可以被多个有需要的标签使用

一个标签可以有多个类名，多个类名用空格隔开

id选择器

写法：   #id属性值{属性名：属性值;}

id属性值不能重复

同样的id选择器，在一个页面中只能使用一次

通配符选择器

可以查找页面当中所有的标签

写法  *{属性名：属性值；}

一般用来清除页面中某些默认的样式

尺寸和颜色

width：；宽

height：；高

background-color：；背景颜色

a链接，span标签 无法设置宽高

字体相关的样式

字体颜色：color：；

字体大小（字号）：font-size：；   单位是px

字体倾斜：font-style： ；      normal正常       italic倾斜

行高：line-height：；    数字+px      如果只有数字表示 当前字体大小的几倍

                                      可以利用行高实现单行文本的垂直居中

字体：font-family：；    楷体

字体粗细：font-weight：；  填写100-700， 400为正常     700为加粗     或填bold（加粗）

复合的写法：font：； 一次对于多个字体相关的值

                  顺序要求font：是否倾斜   是否加粗     字体大小/行高     字体；

                使用font属性后，字号和字体是必须书写的，其他的不书写表示使用默认的

文本缩进

文本缩进text-indent：1em；     1em表示当前一个字符的大小

文本对齐方式

文本水平对齐方式  text-align：；  center居中   left/right 左/右

文本装饰线

text-decoration：；   none表示没有装饰线   line-through删除线

                                 underline下划线   overline上划线

改文字的颜色

1.color：关键色;

2.   color：rgb(数字，数字，数字);      （通过三元色调色）

3.   color:rgba（数字，数字，数字，数字）；最后一个数字表示透明度

                                                               0-1表示透明值，越靠近0越透明

4.background-color：#+16进制；

选择器

复合选择器

 两个及两个以上的选择器
后代选择器：某个元素的所有后代元素     写法：父选择器  子选择器{  }
子代选择器：某个元素下面的子代元素(最近的子集)   写法：父类选择器>子类选择器{  }

并集选择器：一次性选中多个标签 ，多个选择器之间用逗号隔开

                     例如：div，p，span{  }       或   .one，p，span{  }  （<div  class="one"></div>）

交集选择器：选中同时满足多个条件的标签 ，并且选择器之间没有任何的间隔和符号

                      写法：选择器1选择器2{  }    两个选择器之间不需要任何东西

伪类选择器

表示选择元素的某个状态        写法：冒号+属性值

：hover      表示鼠标悬停时

a：link       表示（超链接）访问前

a：visited   表示（超链接）访问后

a：active   表示（超链接）访问时

想要全部使用需要顺序要求：LVHA  （先link，再visited,再hover，最后active）    

:checked  选择所有选中的表单元素

:disabled 选择所有禁用的表单元素

:empty     选择所有没有子元素的p元素

:enabled   选择所有启用的表单元素

:first-of-type  选择的每个p元素是其父元素的第一个p元素

:nth-child(数字)   选中某个元素下的子元素

例如：1.  ul  li:nth-child(3){  }   表示选中ul下的第三个li

            2.p:nth-child(3){  }    表示选中p标签的父元素下的子元素，且第三个子元素为p标签

:first-child  父元素下的第一个子元素

:last-child  父元素下的最后一个子元素

:nth-child(2n+1) 奇数个

:nth-child(2n)   偶数个

:nth-of- type(1)   表示第一个p标签  

:focus{  }   表示聚焦状态（选中状态） 

属性选择器

写法：标签【属性=属性值】{  }      （具有xx属性的xx标签）

           标签【属性^=x】  以x为开头的标签

           标签【属性$=x】  以x为结尾的标签

           标签【属性*=x 】  含有x的标签

其他

兄+弟：紧挨着兄标签的下一个弟标签，并且具有相同的父元素

兄~弟：选取兄弟元素后面所有的相同元素，要求不必紧紧跟随并且是同一个父元素

伪元素选择器

写法：  标签：：before{ content：“111”；}    表示在标签前加111

             标签：：after{ content：“111”；}    表示在标签后加111

css的特性

继承性：子集默认继承