20分钟CSS快速入门教程
2022-12-01 19:36:00

0x01 CSS 语法 (结构、类型)

CSS 结构

  • 选择器 (Selector) 是用于选择 html 元素的, 选择器有很多种
  • 由一个开始大括号 (Open Curly Brace) { 开始
  • 使用 属性:属性值 (Property:Value) 来声明 (Declaration) 属性的属性值
    • 声明可以有多个声明, 多个声明使用分号 ; 分隔
  • 最后使用结束大括号 } 来结束 css 的定义
  • 由选择器、开始大括号、声明内容、结束大括号构成了 css 规则
1
2
3
4
5
h1{
	width: 600px;
	height: 1200px;
	margin: auto;
}

CSS 样式类型

  • 内敛样式 (Inline Style)
    • 直接在 HTML 元素的内部定义 style 属性, 直接使用 style=属性:属性值 来定义, 此时没有选择器, 内联样式仅对当前 HTML 元素生效
  • 样式 (Internal Style)
    • 在 HTML 文件内使用 <style></style> 标签来定义样式, 内部可以有一个或多个规则, 内部样式仅对当前 HTML 文件生效
  • 外部样式 (External Style)
    • 通过把 <link> 标签放在 <head></head> 标签内, 通过指定 <link> 标签的 href 属性, 并指定 rel 属性为 stylesheet 来指定外部 css 文件路径, 从而引入外部样式表, 引入的样式也仅对当前 HTML 生效, 外部样式表是我们使用最多, 可以被其他 HTML 文件引入
1
2
3
4
# style.css
h3{
color: blue
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <style>
            h2{
                color: green
            }
        </style>
    </head>
    <body>
        <h1 style="color:red">h1 标签</h1>
        <h2>h2 标签</h2>
        <h3>h3 标签</h3>
    </body>
</html>

0x02 选择器 (Selector)

常见基础选择器

  • 类型选择器、类选择器、id 选择器和属性选择器都用于选择 HTML 元素
  • 类型选择器
    • 用于选择页面上所有该类型的的元素, 直接选择 HTML 元素
  • 类选择器
    • 使用 .类名 来定义, 在 HTML 元素内指定 class=类名 就可以应用类选择器
  • id 选择器
    • 使用 #id名称 来定义 id 选择器, 在 HTML 元素内指定 id=id名称 就可以应用 id 选择器
  • 属性选择器
    • 使用 HTML标签[属性名] 来定义属性选择器, 在标签内包含指定属性名称的元素, 都会应用属性选择器
    • 也可以使用 HTML标签[属性名="属性内容"] 来定义属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    h1{
        color: red
    }
    .green_class{
        color: green
    }
    #orange_id{
        color: orange
    }
    p[color_blue]{
        color: blue
    }
    p[color="gray"]{
        color: gray
    }
</style>

<h1>h1 标签</h1>
<p class="green_class">指定了 class="green_class"</p>
<p id="orange_id">指定了 id="orange_id"</p>
<p color="gray">p 标签内指定了 color="gray"</p>

组合使用选择器

  • 通用选择器
    • 使用 * 定义通用选择器, 会指定页面内所有 HTML 元素
  • 组合选择器
    • 选择器可以组合使用, 同时满足所有条件时, 选择器将会作用于对应的元素
  • 选择器也可以使用逗号 , 分隔, 同时指定指定多个选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
	*{
		font-size: 16px
	}
	h1.blue{
		color: blue
	}
    h1#green{
        color: green
    }
    #id.cls{
        color:brown;
    }
    h2, h3{
        font-size: 18px
    }
</style>

<h1 class="blue">指定了 class="blue" 的 h1 标签</h1>
<h1 id="green">指定了 id="green" 的 h1 标签</h1>
<p id="id" class="cls">指定了id="id" class="cls" 的 p 标签</p>
<h2>指定多个选择器的 h2 标签</h2>
<h3>指定多个选择器的 h3 标签</h3>

父级子级选择器

  • 使用 父级元素 子级元素{} 定义父级子级选择器, 只有在父级元素下的子级元素受样式表的影响
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    h1 a{
        color:red
    }
    h2 a{
        color: green
    }
    h3 a{
        color: blue
    }
</style>

<h1><a>一级标题下的 a 标签</a></h1>
<h2><a>二级标题下的 a 标签</a></h2>
<h3><a>三级标题下的 a 标签</a></h3>

0x03 选择器优先级 (Priority)

  • 相同的规则按照加载顺序, 写在代码后面的优先级更高
  • 继承下来的样式优先级永远低于直接指定的样式
  • 内联样式优先级最高, !important 是个意外
  • ID 选择器 (ID Selector) > 类选择器 (Class Selector) > 类型选择器 (Type Selector)
    • 内部样式和外部样式的优先级没有区别, 主要在于在代码中的位置
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
33
34
35
36
37
38
39
<style>
    a{
        color: blue
    }
    a{
        color: orange
    }
    div{
        color: green
    }
    p.cls{
        color: red
    }
    .imp{
        color: green!important;
    }
    h5{
        color: red
    }
    .cls{
        color: green
    }
    #id{
        color: blue
    }
</style>

<a>相同的规则按照加载顺序, 写在代码后面的优先级更高, 所以我是橙色而不是蓝色的</a>

<div>
    <p>我继承了 div 标签的样式, 我是绿色的</p>
    <p class="cls">我继承了 div 标签的样式, 也同时被选择器指定了样式, 我是红色的</p>
</div>

<p style="color: blue">内联样式优先级最高, !important 是个意外</p>
<p style="color: blue" class="imp">.imp 指定了 !important 所以我绿了</p>

<h5 class="cls" id="id">ID 选择器 (ID Selector) > 类选择器 (Class Selector)</h5>
<h5 class="cls">类选择器 (Class Selector) > 类型选择器 (Type Selector)</h5>

0x04 盒子模型 (Box Model)

  • 盒子模型 (Box Model) 由四部分组成, CSS 中一切皆为盒子
    • 在外部的叫外边距 (margin)
    • 向内一层的叫填充 (padding)
    • 分开外边距和填充的叫做边框 (Border)
    • 最中间包裹的是内容 (Content)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: orange;
        border: 3px solid green;
        /* padding: 30px;
        padding-top: 30px;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        margin: 30px;
        margin-top: 30px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 10px; */
        padding: 10px 9px 8px 7px;
        margin: 7px 8px 9px 10px;
    }
</style>

<div class="box">
    内从 (Content)
</div>

Reference:

上一页
2022-12-01 19:36:00
下一页