CSS复习小记

2022-10-16

预计阅读时间：2分钟

虽然在本科期间已经对HTML相关知识进行了系统的学习，但时常在做页面样式调整时会犯迷糊，遂打算再复习一下CSS3相关理论知识来巩固一下：

样式种类

行内样式：直接在元素标签中添加style属性直接设置需要的样式，下面给出示例：

<p style="font-size:10px;color:red">这是一个示例</p>

内嵌样式：在页面头部<head>中添加<style>设置需要的样式，下面哥给出示例：

<head>
    <style type="text/css">
        p{
            font-size:10px;
            color:red;    
         }
    </style>
</head>

外链式：将css层叠样式表以连接的形式引入html文件，下面给出示例：

<head>
  <link href="./image/common.css" rel="stylesheet" />  
</head>

选择器种类

id选择器，#后面不带空格

#test{
    font-size:10px;
    color:red;
}

通配符（用来清除HTML标签默认样式，效率不高，很少使用）
```
*{
    font-size:10px;
    color:red;
}
```

类选择器

.test{
    font-size:10px;
    color:#FFF;
}

标签选择器，如下：
```
html{
    margin:10px;
}
```
后代选择器，用空格隔开每一层

后代选择器可以简写，也可以补全，但是必须有一个相对应的嵌套
```
div p{
    color:red;
}
.test p{
    color:red;
}
```
交并集选择器
```
/*交集选择器(设一个p标签组的某个特定p标签class为para),中间不需要加空格*/
p.para{
    font-size:10px;
    color:#FFF;
}
/*并集选择器*/
div,p,h1,h2,h3{
    padding:0;
    margin:0;
    font-size:10px;
    color:#FFF;
}
```
选择器权重：id选择器 > 类选择器 > 标签选择器，如果多种选择器同时选中一个元素，则权重高的选择器中设置的样式会层叠掉权重低的选择器中设置的样式

比较选择器权重（层叠性）：
- 先比较id选择器的数量，id选择器数量多的权重高；
- id选择器数量相同，就比较类选择器的属性，类选择器的数量多的权重高；
- id和类选择器的数量相同，就比较标签选择器的数量，标签选择器数量多的权重高；
- id、类选择器，以及标签选择器的数量都相同，就看哪种选择器写在最后，写在最后的选择器设置的样式则为最后被采用的样式
继承性：
- 遵循就近原则，如果距离相同，则根据选择器的权重原则来判断子元素最终采用的样式
!important:
- !important加在属性值的后面，分号前面
- 选中元素时，!important权重最高
- 没选中元素时，不影响就近原则
- !important它只能调高一个属性的权重，不是选择器所有的属性
- 单行文本的垂直居中方法：将文本的line-height属性设置为容器（盒子）的高度
- 使用百分比设置的文本的行高属性以文本自身的大小为参考，例如字体大小为20px，行高设置为200%后，一行文本占用的行高则为20px×2=40px
- 使用复合属性设置样式时，多个属性之间使用空格来隔开

CSS复习小记

样式种类

选择器种类

本页内容

相关文章