时间戳

首页 > 技术文章 > CSS层叠样式表

CSS层叠样式表

gengfenglog 2021-03-04 20:27 原文

CSS介绍

Cascading Style Sheet 层叠样式表，是专门用来为HTML标签添加样式的。

把HTML认为是网页的骨架
那么CSS就是用于对HTML骨架进行修饰,比如加背景色、显示方式、位置等等属性

CSS语法

一个完整的CSS样式需要具备两大部分：
# 1、选择器
# 2、声明
声明由属性和属性值组成，属性和属性值用冒号隔开，以分号结尾，如下图

 

 

CSS 四种引入方式：

1.行内式

• 行内式是在标签的style属性中设定CSS样式（一般不采用）
​
  <div style="color: green">行内式</div>

2.嵌入式 

• 嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。
​
<head>
    <style type="text/css">
        p{
            color: red
        }
    </style>
</head>
​

3.导入式

• 将一个独立的.css文件引入HTML文件中，导入式使用@import引入外部CSS文件，<style>标记也是写在<head>标记中。
• 导入式会在整个网页装载完后再装载CSS文件。
​
<head>
    ...
    <style type="text/css">
        @import "My.css"; 此处注意.css文件的路径
    </style>
</head>

4.链接式

• 将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。
• 链接式会以网页文件主体装载前装载CSS文件。
​
<head>
    ...
    <link href="My.css" rel="stylesheet" type="text/css">
</head>

 

CSS选择器

1.基本选择器

id选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#id名{样式}（id名不能以数字开头，不能是html的关键字）
#p2 {
    color: red;
}

类选择器

匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
标签中的class属性如果有多个，要用空格分隔
.ppp {
     color: green;
}

元素/标签选择器

匹配所有使用 div 标签的元素（可以匹配所有标签）
div {
    color: yellow
}

通用选择器

* 表示应用到所有的标签。
* {
  color: yellow
}

 

 

2.组合选择器

后代选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔
div p {
      color: red;
}
​
<div>
    <p>哈哈</p>
    <div>
         <p>嘿嘿</p>
    </div>
    <p>呵呵</p>
</div>

子元素选择器

匹配所有div标签里嵌套的子P标签，之间用>分隔
div>p {
      color: green;
}
​
<div>
    <p>哈哈</p>
    <p>呵呵</p>
</div>

毗邻选择器

匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）
div+p {
      color: red;
}
​
<div>哈哈</div>
<p>嚯嚯</p>

通用兄弟选择器（弟弟选择器）

匹配所有div标签之后的同级标签p，之间用~分隔，无论有没有被隔开，都可以被选中，
div~p {
      color: pink;
}
​
<div>哈哈</div>
<br>
<p>嚯嚯</p>
<p>嘿嘿</p>

 

 

3.序列选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列选择器</title>
    <style>
        /*同级别的第一个*/
        p:first-child {
            color: red;
        }
        /*同级别的最后一个*/
        p:last-child {
            color: green;
        }
​
        /*同级别的第3个*/
        p:nth-child(3) {
            color: yellow;
        }
​
        /*同级别的倒数第3个*/
        p:nth-last-child(3) {
            color: yellow;
        }
​
        /*同级别同类型的第一个*/
        p:first-of-type {
            color: red;
        }
        /*同级别同类型的最后一个*/
        p:last-of-type {
            color: red;
        }
​
        /*同级别同类型的第3个*/
        p:nth-of-type(3) {
            color: red;
        }
        /*同级别同类型的倒数第3个*/
        p:nth-last-of-type(3) {
            color: red;
        }
​
         /*同级别的唯一一个*/
        P:only-child {
            color: red;
        }
​
         /*同类型的唯一一个*/
        p:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
    <br>
    <p>我是儿子7</p>
    <p>我是儿子8</p>
    <p>我是儿子9</p>
    <a href="">点我啊</a>
    <span>aaaa</span>
    <div>
        <span>xxxxx</span>
        <p>yyyyyyy</p>
        <p>zzzz</p>
    </div>
</div>
<p>我是段落7</p>
<hr>
</body>
</html>
序列选择器

4.属性选择器

根据指定的属性名称找到对应的标签，然后设置属性
该选择器，最常用于input标签，属性选择器是以[ ]作为标志的
 /*找到所有包含id属性的标签*/
[id] {
     color: red;
}
​
/*找到所有包含id属性的p标签*/
p[id] {
     font-size: 30px;
}
​
/*找到所有class属性值为part1的p标签*/
p[class="part1"] {
    color: green;
}
​
/*找到所有href属性值以https开头的a标签*/
a[href^="https"] {
    font-size: 50px;
}
    
/*找到所有src属性值以png结尾的img标签*/
img[src$="png"] {
    width: 100px;
}
​
/*找到所有class属性值中包含par的标签*/
[class*="par"] {
    text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        /*找到所有包含id属性的标签*/
        [id] {
            color: red;
        }
        /*找到所有包含id属性的p标签*/
        p[id] {
            font-size: 30px;
        }
        /*找到所有class属性值为part1的p标签*/
        p[class="part1"] {
            color: green;
        }
        /*找到所有href属性值以https开头的a标签*/
        a[href^="https"] {
            font-size: 50px;
        }
        /*找到所有src属性值以png结尾的img标签*/
        img[src$="png"] {
            width: 100px;
        }
        /*找到所有class属性值中包含par的标签*/
        [class*="par"] {
            text-decoration: line-through;
        }

    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落1</p>
    <p class="part1">我是段落2</p>
    <p class="xxx part2 yyy">我是段落3</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
示例

5.伪类选择器

link、visited、hover、active

  • a：link（未访问的链接状态）,用于定义了常规的链接状态。

  • a：visited（已访问过的链接状态）,可以看出已经访问过的链接。

  • a：hover（鼠标放在链接上的状态，悬浮态）,用于产生视觉效果。

  • a：active（在链接上按下鼠标不松开的状态，激活态）。

a:link{color: red}  /*未访问前为红色*/
a:visited{color: green}  /*访问后为绿色*/
a:hover{color: pink}  /*悬浮在上面为粉色*/
a:active{color: yellow} /*按下不松手为黄色*/
 
 
<a href="https:www.jd.com">你好呀</a>

以a标签为例，我们可以控制点击前、鼠标悬浮、鼠标点击、访问后的属性变化，如颜色变化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link { /*未访问前为红色*/
            color: red;
        }
        a:visited { /*访问后为绿色*/
            color: green;
        }
        a:hover { /*鼠标悬浮在上面为粉色*/
            color: pink;
        }
        a:active { /*鼠标按下不松手为黄色*/
            color: yellow;
        }
        div {    /*设置背景大小，颜色为黑色*/
            width: 200px;
            height: 200px;
            
        }
        div:hover { /*悬浮变绿色*/
            
        }
     
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">哈哈哈</a>
<div></div>
</body>
</html>
伪类选择器
注意：hover是所有其他标签都可以使用的
　　　focus只给input标签使用
input{
       outline: none;  /*设置边框无轮廓*/
       color: #e606d5; /*设置input框输入的字体颜色*/
}
input:focus {
       color: aqua;  /*设置鼠标点击input框内字体显示效果*/
        /*点击边框背景为黄色*/
}
​
输入名字<input type="text">

6.伪元素选择器

first-letter、before、after

  • first-letter 每个元素首字符添加样式

  • before 在每个元素的内容之前插入内容;

  • after 在每个元素的内容之后插入内容。

p:first-letter {   /*将第一个字符改为100px大小*/
   font-size: 100px;
}
​
p:before {  /*在所有p标签的内容前面加上一个红色的！*/
   content: "！";
   color: red;
}
    
p:after {  /*在所有p标签的内容后面加上一个绿色？/
   content: "?";
   color: green;
}
 
<p> 哈哈 </p>　
<p> 嘿嘿 </p>　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter {   /*将第一个字符改为100px大小*/
            font-size: 100px;
        }
        p:before {  /*在所有p标签的内容前面加上一个红色的！*/
            content: "！";
            color: red;
        }

        p:after {  /*在所有p标签的内容后面加上一个绿色？*/
            content: "?";
            color: green;
        }
        .box1:before { /*在所有box1类内容的前面加一个绿色的* */
            content: "*";
            color: green;
        }
    </style>
</head>
<body>
<p>你好哈哈哈</p>
<p>你好哈哈哈</p>
<p>你好哈哈哈</p>
<p>你好哈哈哈</p>

<div class="box1">
    <span>aaaaa</span>
</div>
</body>
</html>
伪元素选择器

 

7.CSS的三大特性

  • 继承性

    • 继承性是指当子标签没有设置样式时，会继承父标签的样式。
    • 比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

    　　可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）

           应用场景：通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

       ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>

    <style type="text/css">
        div {
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div>
    <h1>我是标题</h1>
    <p><a href="#">下雨没伞</a></p>
    <ul>
        <li>我是大头1</li>
        <li>我是大头2</li>
        <li>我是大头2</li>
    </ul>
</div>
<div>
    <div>
        <p>毛毛雨</p>
    </div>
    <div>
        <p>雷阵雨</p>
    </div>
</div>
</body>
</html>

继承性示例
    继承性示例

  • 层叠性

    • 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。
    • 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）

    层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。

    注意：这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性示例</title>

    <style type="text/css">

        p {
            color: red;
        }

        .ppp {
            color: green;
        }

    </style>
</head>
<body>

<p class="ppp">我是洋葱</p>


</body>
</html>
    覆盖示例

  • 优先级

    • 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
      在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

      • 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的 样式会覆盖继承来的样式。

      • 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

      • 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

    • CSS定义了一个!important命令，!important其实是CSS的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。即使行内样式离得近，最终生效的还是!important标注的属性
    • 优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

      总结优先级：

      1. 使用了 !important声明的规则。

      2. 内嵌在 HTML 元素的 style属性里面的声明。

      3. 使用了 ID 选择器的规则。

      4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

      5. 使用了元素选择器的规则。

      6. 只包含一个通用选择器的规则。

      7. 同一类选择器则遵循就近原则。

      8. 总结：权重是优先级的算法，层叠是优先级的表现

推荐阅读