CSS层叠样式表

文章目录

- CSS层叠样式表

CSS层叠样式表

 CSS: 层叠样式表(英文全称：Cascading Style Sheets)
 
 作用
     1.实现了样式和html的代码分离
     2.弥补html对属性的的控制不足
     3.精确的控制页面的布局
     4.可以提高页面的执行效率
     5.css还有特殊的功能

1
2
3
4
5
6
7
8
9

CSS和HTML结合使用


<span style="color: red;">内联样式span>


<b>内部样式b>



<h1>外联样式h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

选择器

id选择器

<head>
    <style>
        #b1{
            color: red;
        }
        #b2{
            color: pink;
        }
    style>
head>

<body>
    <b id="b1">id选择器 一次只能选择一个标签进行控制b>
    <b id="b2">标签的id值是唯一的 不能有重复的b>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class选择器

<head>
    <style>
        .c{
            color: plum;
        }
    style>
head>

<body>
    <i class="c">类选择器i>
    <i class="c">可以选择多个标签i>
    <h1 class="c">层叠:多个样式 作用到一个标签 可以叠加生效h1>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

标签选择器

<head>
    <style>
        span{
            color: blue;
        }
    style>
head>

<body>
    <span>标签名选择器span>
    <span>通过标签名来修改属性span>
body>
1
2
3
4
5
6
7
8
9
10
11
12

包含选择器

<head>
    <style>
        div div b{
            color:red;
        }
        #b1 div b{
            font-size: 25px;
        }
    style>
head>

<body>
    <div id="b1">
        <div>
            <b>包含选择器b>
        div>
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

通配符选择器

<head>
    <style>
        /* 全局通配 */
        *{
            color: aqua;
        }
        /* 局部通配 */
        #d *{
            font-size: 30px;
        }
    style>
head>

<body>
    <b>通配符选择器b>
    <div id="d">
        <b>aaab>
        <b>aaab>
        <b>aaab>
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

伪类选择器

<head>
    <style>
        /* 
        伪类选择器
        选择a标签的四种状态
        链接状态 link
        鼠标悬浮状态 hover
        鼠标按下状态 active
        链接访问过后状态 visited
        */
        a:link {
            color: yellowgreen;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: blue;
        }
        a:visited {
            color: pink;
        }
    style>
head>

<body>
    <a href="#">跳转a>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

选择器优先级

<head>
    <style>
        #idh{
            color: pink;
        }
        .classh{
            color: yellowgreen;
        }
        h1{
            color: blue !important;
        }
    style>
head>

<body>
    <h1 id="idh" class="classh" style="color: red;">
        !important>内联样式>id选择器>类选择器>标签名选择器
        优先级相等的选择器:
        类选择器=属性选择器=伪类选择器
        标签选择器=伪元素选择器
    h1>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

子选择器

<head>
    <style>
        #wai{
            width: 500px;
            height: 500px;
            background-color: yellowgreen;
        }
        /* 子选择器 > */
        #wai>div{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        /* 鼠标悬浮外层，控制内层 */
        #wai:hover>div{
            background-color: red;
        }
    style>
head>

<body>
    <div id="wai">
        <div>div>
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

相邻选择器

<head>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /* 相邻选择器 */
        #d1+div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* 相邻所有选择器 */
        #d1~div{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    style>
head>

<body>
    <div id="d1">div>
    <div>div>
    <div>div>
    <div>div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

属性选择器

<head>
    <style>
        /* 属性选择器 */
        h1[align]{
            background-color: pink;
        }
        h1[align="center"]{
            font-size: 50px;
        }
    style>
head>

<body>
    <h1 align="left">AAAh1>
    <h1 align="center">BBBh1>
    <h1 align="right">CCCh1>
    <h1>DDDh1>
body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其他伪类选择器

<head>
    <meta charset="utf-8">
    <title>title>
    <style>
        /* 修改第一个字属性 */
        #p1::first-letter{
            font-size: 30px;
            color: red;
        }
        /* 修改第一行属性 */
        #p2::first-line{
            background-color: green;
        }
    style>
head>

<body>
    <p id="p1">aaaaabbbbbcccccdddddeeeeep>
    <p id="p2">aaaaabbbbbcccccdddddeeeeep>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

相关阅读:
Java基础——标识符及命名规范
第 112 场 LeetCode 双周赛题解
C语言 | Leetcode C语言题解之第125题验证回文串
程序员打怪升级六件事
LabVIEW调试技巧
Foxit PDF
vue课后习题及答案
Redis--线程模型详解
深度学习系列2——Pytorch 图像分类(AlexNet)
从源码角度看Flink从上游获取数据、处理数据并发往下游算子的过程关键StreamInputProcessor

原文地址：https://blog.csdn.net/m0_51318597/article/details/126020884