CSS学习笔记一——基本语法及样式表一、CSS基本介绍二、基本语法三、样式表四、结语

140 阅读 0 评论 93 点赞

我是靠谱客的博主聪明身影，这篇文章主要介绍CSS学习笔记一——基本语法及样式表一、CSS基本介绍二、基本语法三、样式表四、结语，现在分享给大家，希望可以做个参考。

CSS基本语法及样式表

一、CSS基本介绍
二、基本语法
三、样式表
- 1. 内部样式
- 2. 外部样式
- 3. 行内样式
- 4. 样式优先级
四、结语

一、CSS基本介绍

CSS（Cascading Style Sheets）层叠样式表，是 WEB 标准中的表现标准语言，主要用于修饰网页信息的显示样式，目前推荐遵循 W3C 发布的 CSS 3.0，最基本要学会CSS 2.0的写法。

二、基本语法

每个CSS样式由两部分组成，即 选择符和声明，声明又分为属性和属性值；
属性必须放在 花括号 中，属性与属性值用冒号连接；
每条声明用分号结束；
当一个属性有多个属性值的时候，属性值与属性值不分先后顺序用空格隔开；
在书写样式过程中，空格、换行等操作不影响样式操作；

三、样式表

1. 内部样式

通过 style 标签更改样式。
方法：在 html 代码文件的 head 标签下写 style 标签。

代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css内部样式 -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <!-- html对象 -->
    <h1>123</h1>
</body>
</html>

2. 外部样式

通过引入外来的 css 文件改变样式，最常用。
步骤：创建 html 对象 — 创建1个 css 文件 — 利用 link标签¹ （推荐）或 @import² 引入 css 文件

HTML代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css外部样式引入方式1 -->
    <link rel="stylesheet" type="text/css" href="css文件路径">

    <!-- css外部样式引入方式2 -->
     <style>
        @import url(css文件路径);
    </style>
</head>
<body>
    <!-- html对象 -->
    <h1>123</h1>
</body>
</html>

3. 行内样式

行内样式，又叫内联样式、嵌入式样式。使用时直接在开始标签中添加 style 属性，其好处在于可以给单独的一个标签设置样式。

代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- html对象+内联样式 -->
    <h1 style="color: red;">123</h1>
</body>
</html>

4. 样式优先级

样式优先级：行内样式 > 内部样式 > 外部样式

注：（1）优先级只针对同一对象中同一属性之间的比较；
（2）在属性值后添加 !important 时，该样式优先级会变为最高，但 !important 不利于后期维护，尽量不用；

四、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！

link标签
属于链接标签
属性 rel 用于定义关联性，表示要以何种方式对待引入的文件，常用值有 stylesheet（样式表）
属性 type 表示引入的文件类型
属性 href 表示引入的文件所在路径 ↩︎
link 和 import 之间的区别
（1）本质区别：link 属于 XHTML 标签，而 @import 是 CSS 提供的一种方式
（2）加载顺序的差别：当一个页面被加载的时候，即被浏览的时候，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。因此有时浏览 @import 加载 CSS 的页面时开始会没有样式（闪烁形式）且网速慢时尤为明显。
（3）兼容性的差别：@import 是CSS 2.1提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。 ↩︎