CSS2基础

基础

简介

【全称】Cascading Style Sheets，又名层叠样式表

• 层叠：一层一层涂上去
• 表：列表
• 样式：如文字大小，颜色，元素宽高等。

CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

语言类型

标记语言，为HTML结构美化样式，实现语义与效果的分离，更好地美化网页，优化网页结构

作用于HTML的方式

行内样式（不推荐）

语法：

    
title

缺点：

• 工作量大，效率低下
• html和css耦合性太高，css使html结构与样式分离的作用微乎其微

内部样式

语法：

优点：

• 结构和样式已经初步分开，代码可以进行服用

缺点：

• 需要复制到另一个html文件才可以实现样式复用，耗费时间

[!NOTE]

一开始写CSS样式的时候，可以使用内部样式，不用再开一个.css文件来赋予结构样式，

到后来熟练了可以使用外部样式，写在.css文件中

外部样式

语法：

/*CSS文件*/
h1{
    color: skyblue;
}
h2{
    color: gray;
}

最常使用的方式，实际开发几乎都使用外部样式表

优点：

• 当第一次通过浏览器渲染后，CSS样式就会因为与.html文件的分离而进行缓存，下次渲染则可以提高访问速度

样式的优先级

顺序：

行内样式 > 内部样式 = 外部样式

attention

• 遵循“后来者居上”的原则
• 相当于涂鸦，涂了第二层，第一层就会看不见了

语法规范

结构：

h2{
    color: gray;
}

代码风格

CSS选择器

基本选择器

通配选择器

作用：

选中所有的HTML元素（清除样式的时候有用）

* {
	color: red;
}

元素选择器

作用：

为某种元素统一设置，无法实现同类型的差异化

标签名 {
    属性名: 属性值;
}

类选择器

作用：

通过元素中的class的属性值来进行可以自己分类的样式分配

元素中的class属性的属性值可以有多个，用空格隔开

class属性的属性值尽量为字母+数字，用-连接，避免纯数字的出现

/*假设有一个元素h1，它的class属性的属性值为skyblue*/
.skyblue {
    color: skyblue;
}

ID选择器

作用：

选中唯一的元素通过id属性的属性值（其中的原理是不同的元素，id属性的属性值必须不同）

/*假设有一个元素h1，它的id属性的属性值为special*/
#special {
    color: skyblue;
}

复合选择器

交集选择器

作用：

选中同时符合多个条件的元素

选择器1选2选3 {
    color: skyblue;
}
/*比如p.blue 就是说class属性的属性值为blue的p标签（双重筛选）*/

[!NOTE]

• 有标签名必须写在前面
• 不可能同时出现两个元素选择器

并集选择器

作用：

选中多个选择器对应的元素

h2,
h3,
p {
            font-size: large;
        }
/*
选择器1，
选择器2，
选择器3 {
 属性名： 属性值；
}

*/

• 一般竖着写
• 集体声明，可以缩小样式表的体积

HTML元素之间的关系

• 父元素
• 子元素
• 祖先元素（爸爸也算是祖先）
• 后代元素（儿子也算是后代）
• 兄弟元素

为后面的后代选择器等选择器做知识储备

后代选择器（id，类也可）

作用：

选中指定元素中，符合要求的后代元素

        
l
        
o
        
v
        
e
        

            love
        
        

            

                
1
 
            
        
    

[!TIP]

• 最后选中的是后代，不包括祖先
• 须符合html的嵌套要求 （可以跨代寻找）
• 子代和孙子辈以及等等可以同时兼顾

子代选择器

作用：

选中指定元素中符合要求的子代元素

选1>选2>选3 {
 color： skyblue；
}
/*
选择器可以不从最外面开始找寻元素
*/

兄弟选择器

作用：

选中指定元素后，符合条件的相邻兄弟元素

分类：

    

        

            
love
            
like
        
        

            
long
            
lonely
        
        
paragrah
        
title333
        
title2
        
title3
        
title33


属性选择器
作用：
选中属性值符合一定要求的元素
 /* 第一种写法，选中具有相同属性的元素 */
        [title] {
            color: skyblue;
        }
        /* 第二种写法，选中属性以及属性值都相同的元素 */
        [title = "1"] {
            color: aquamarine;
        }
        /* 第三种写法，选中属性相同，且属性值开头相同的元素 */
        [title^="a"] {
            color: yellow;
        }
        /* 第四种写法，选中属性相同，且属性值结尾相同的元素 */
        [title$="e"] {
            font-size: larger;
        }
        /* 第五种写法，选中属性相同，且属性值中包含部分值的元素 */
        [title*="1"] {
            color: brown;
        }

伪类选择器
概念解析：
不是真的类class，而是元素的一种状态
分类：



动态伪类
意思
结构伪类
意思




link（超链接独有）
尚未连接
first-child
第一个孩子


visted（超链接独有）
连接过
last-child
最后一个孩子


hover
鼠标悬停
nth-child（n）
第n个孩子


active
元素激活（按下鼠标不松开）
first-of-type
第一个同类型孩子


focus
获取焦点（表单元素）
last-of-type
最后一个同类型孩子




nth-of-type（n）
第n个同类型孩子





















结构伪类补充
1.关于括号中的n

0或不写：什么都不选
n：选中所有（几乎不用）
1~正无穷：选中对应序号
2n或even：选中序号为偶数
2n+1或odd：选中序号为奇数
-n+3：选中前三个


原理：an + b

2.细节：
类似于立嫡立长，即取第一个儿子，孙子...(同时)

例子：
div p:first-child
意思是找div中的第一个儿子，孙子...是不是p，是就赋予样式
p:first-child
意思是找body中的第一个儿子，孙子...是不是p，是就赋予样式

否定伪类
作用：
排除满足括号中条件的元素
语法：
:not(选择器)
p:not(:first-child) {
            color: skyblue;
        }

UI伪类
分类：



what
意思




checked
被选中的复选框或单选框


enable
可用的表单元素


disabled
不可用的表单元素



 /* 选中的是被选中的复选框和单选框 */
        input:checked {
            width: 100px;
            height: 100px;
        }
        /* 选中的是被禁用的input元素 */
        input:disabled {
            background-color: gray;
        }
        /* 选中的是可用的input元素 */
        input:enabled {
            background-color: skyblue;
        }

目标伪类（了解）
作用：
选中指定的锚点元素
/* 选中锚点指向的元素 */
        div:target{
            background-color: gray;
        }

语言伪类（了解）
作用：
根据指定的语言选择元素
 div:lang(en) {
            color: skyblue;
        }

伪元素选择器
作用：
选中元素中的一些特殊位置（在元素里）
分类：



what
意思




first-letter
第一个文字


first-line
第一行文字


selection
被鼠标选中


placeholder
提示文字（输入框中）


before
最开始的位置创建子元素


after
最后的位置创建子元素



/* 选中元素中的第一个文字 */
        div::first-letter {
            color:skyblue;
        }
        /* 选中元素中的第一行文字 */
        div::first-line {
            color: gray;
        }
        /* 选中的是鼠标选中的文字 */
        div::selection {
            color: red;
            background-color: gainsboro;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color:skyblue;
        }
        /* 在p元素一开始的位置，创建一个子元素 */
        p::before {
            content: "￥";
        }
        /* 在p元素最后的位置，创建一个子元素 */
        p::after {
            content: "millions";
        }


[!WARNING]
first-letter 和first-line内容若出现使用重叠，first-letter所使用的样式会覆盖first-line的样式


选择器优先级
原则：

通过权重来区分到底哪个样式最优先
行内样式和!important出现就不计较权重谁大谁小

细节呈现：
权重语法：（a，b，c）{a,b,c为个数}



a
ID




b
类，伪类，属性


c
元素，为元素



权重比较方式
一个一个进行比较，当a比出结果，权重就出结果，若没有，就接着往下让b进行比较，以此类推

[!IMPORTANT]
!important > 行内样式 > 一切权重
!important不到情急不可进行使用，因为这种做法会使工作的交接细节出现问题，
即使使用了，过后也需要删除，找到无法用权重方式使样式变更的原因，并解决

快捷方式：
只要将鼠标放在选择器上，则可以出现权重，无需计算

之前的讲解是为了了解其中的权重计算原理，而非只是表面的计算