首页 CSS

# CSS 语法规则

# 基础介绍

写在哪里 :

  • CSS 写在 style 标签中，style 标签一般写在 head 标签里面，title 标签下面

CSS 注释 :

1
/*这是注释的内容*/

基础体验

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01体验CSS</title>
    <style>
        h1 {
            color: red;
            background-color: green;
            font-size: 98px;
        }

        p {
            color: blue;
            background-color: yellow;
            width: 400px;
            height: 303px;
        }
    </style>
</head>
<body>
  <h1>我是大标题</h1>
    <p>我是段落&nbsp;段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我</p>
</body>
</html>

# CSS 引入方式

  • 内嵌式 : CSS 写在 style 标签中

    提示 : style 标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

  • 外联式 : CSS 写在一个单独的 CSS 文件中

    提示：需要通过 link 标签在网页中引入

  • 行内式 : CSS 写在标签的 style 属性中

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
<!--内嵌式写法-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01体验CSS</title>
    <style>
        h1 {
            color: red;
            background-color: green;
            font-size: 98px;
        }

        p {
            color: blue;
            background-color: yellow;
            width: 400px;
            height: 303px;
        }
    </style>
</head>
<body>
  <h1>我是大标题</h1>
    <p>我是段落&nbsp;段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我我是段落 段落是我</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
<!--外联式写法-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02外联式写法</title>
    <link rel="stylesheet" href="./02外联式.css">
</head>
<body>
    <p>这是p标签</p>
</body>
</html>
1
2
3
4
5
/*css外联式写法*/
p {
    background-color: red;
    color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
<!--行内式写法-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内式写法</title>
</head>
<body>
    <div style="font-size: 90px">我是div标签</div>
</body>
</html>

# 三种 CSS 引入方式特点与区别

引入方式书写位置作用范围使用场景
内嵌式CSS 写在 style 标签中当前页面小案例
外联式CSS 写在单独的 CSS 文件中，通过 link 标签引入多个页面项目中
行内式CSS 写在标签的 style 属性中当前标签配合 js 使用