前端CSS学习笔记

尚硅谷HTML5+css3视频中css3部分学习笔记（一）

前言

HTML、css、js分别在网页形成过程中负责不同的板块。HTML控制网页的结构，css控制网页的表现，js控制网页的行为。该笔记主要针对于其中的css，css又名层叠样式表，网页实际上是一个多层的结构，通过css可以分别为网页的每一层设置样式，但我们看见的始终是网页的最上层。

css编写位置

内联样式（行内样式）

编写在元素的style属性中，该样式编写一次只能应用于一个指定元素。

内部样式

编写在head标签内的style属性中，该样式编写一次可应用于同一页面中拥有共同特征的元素。

外部样式

编写在外部的css文件中，在HTML文件中通过link标签引用，该样式编写一次可应用于不同页面同一特征的元素。

css基本语法

内部样式、外部样式语法规范

    选择器 {                /*{}为一个声明块*/
        样式名：样式值;     /* 每一组名值对都是一个声明 */
        ......
    }

内联样式语法规范

style="样式名:样式值;....."

选择器

功能

选择页面中具有某一特征的所有元素。

选择器的权重

样式冲突

我们通过不同选择器，选中相同的元素，并且为相同的样式设置不同值时，就发生了样式冲突，此时我们需要根据选择器的权重来判断该元素所应用的样式。

权重排序（高位较大的优先级高）

内联样式：1,0,0,0
id选择器: 0,1,0,0
类和伪类选择器： 0,0,1,0
元素选择器：0,0,0,1
通配选择器： 0,0,0,0
继承的样式：无优先级

注：比较时，需要将所有选择器的优先级相加计算，若优先级相同，则应用位置较后的那个，并集选择器需要分别计算。

分类

基础选择器

元素选择器：通过标签名来选中指定元素

    标签名 {
    }

类选择器：通过类名来选中指定元素

    .类名 {
    }

id选择器：通过id值来选中指定元素

    #id值 {
    }

通配选择器：选中所有元素

    * {
    }

复合选择器

交集选择器：选中同时符合多个条件的元素

    选择器1选择器2... {    /*当其中含有元素选择器时，必须用元素选择器开头*/
    }

并集选择器：选中符合并集选择器中任一选择器的所有元素

    选择器1,选择器2，... {    
    }

关系选择器

子元素选择器：选中指定父元素的指定子元素

    选择器1>选择器2 {   
    }

后代元素选择器：选中指定元素的所有后代元素

    选择器1 选择器2... {    
    }

兄弟选择器+：选中指定元素后紧挨的一个指定兄弟元素（中间不能有其他元素）

    选择器1+选择器2... {    
    }

兄弟选择器~：选中指定元素后所有指定兄弟元素（中间可以有其他元素）

    选择器1~选择器2... {    
    }

属性选择器

指定元素中拥有指定属性名的元素

    选择器1[属性]... {    
    }

指定元素中拥有指定属性名以及属性值的元素

    选择器1[属性名=属性值]... {    
    }

指定元素中拥有指定属性名以及属性值以指定值开头的元素

    选择器1[属性名^=指定值]... {    
    }

指定元素中拥有指定属性名以及属性值以指定值结尾的元素

    选择器1[属性名$=指定值]... {    
    }

指定元素中拥有指定属性名以及属性值含有指定值的元素

    选择器1[属性名*=指定值]... {    
    }

伪类选择器

用于描述一个元素的特殊状态

:first-child : 选中同级第一个子元素
:last-child : 选中同级最后一个子元素
:nth-child(value) : 选中第value个子元素
- 当value取数值时，表示选中该数值位的子元素
- 当value取n时，表示选中所有子元素
- 当value取2n|even时，表示选中偶数位的子元素
- 当value取2n+1|odd时，表示选中奇数位的子元素

注：以上三个伪元素根据所有子元素来进行位置计算。

:first-of-type : 功能类似于:first-child
:last-of-type : 功能类似于:last-child
:nth-of-type : 功能类似于:nth-child

注：以上三个伪元素根据同类型子元素来进行位置计算。

:not() : 否定伪类，将符合条件的元素从选择器中去除
:link : 表示未访问过的链接
:visited : 表示访问过的链接，由于隐私的原因，这个伪类中只能修改链接颜色

注：:link，:visited伪类是a标签独有的伪类

:hover : 表示鼠标移入时的状态
:active : 表示鼠标点击时的状态

伪元素选择器

对元素内的一些特殊位置进行样式的修改，起到一个看似被元素包裹的作用

::first-letter : 表示指定元素中的第一个字母
::first-line : 表示指定元素中的第一行
::selection : 表示鼠标选中的内容
::before : 表示指定元素内部起始位置
::after : 表示指定元素内部末尾位置

注：::before和::after内必须设定content，且由这两个伪类添加的内容无法被鼠标选中。

继承

定义

我们为一个元素设置的部分样式会同样应用于它的后代元素中，其发生在祖先后代元素之间。

优点

方便了我们的开发，我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次，所有的后代元素都可以应用。

单位

长度单位

绝对单位

像素（px）: 使用该单位的元素属性值不会受其他元素影响。

相对单位

em：使用该单位的元素属性值会相对于最近被设定过字体大小的祖先元素。
rem：使用该单位的元素属性值大小会相对于HTML根元素字体大小。
百分比（%）：其设置规则如下表，参考本篇csdn文章

属性	设置百分比的相对值
width	父元素的width
height	父元素的height
margin	父元素的width
padding	父元素的width
left, top, right, bottom	父元素的width, height, width, height
font-size	继承得到的font-size
line-height	当前字体的font-size
transform(left, top)	自身的left, top