初识CSS

Mr.ZhaoAbout 5 min

1. CSS简介

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS样式表 或 级联样式表

CSS 也是一种标记语言

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

CSS 让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单

CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式 ( CSS ) 相分离

2. CSS的引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类

1. 行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

语法：

<div style="样式"></div>

style 其实就是标签的属性，在双引号中间，写法要符合 CSS 规范，是 名：值 的形式
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定 CSS，通常也被称为行内式引入

Demo 演示

 <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

2. 内部样式表（嵌入式）

内部样式表（内嵌样式表）是写到 html 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

语法：

<style>
    /*样式*/
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的 <head> 标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

3. 外部样式表（链接式）

实际开发都是外部样式表，适合于样式比较多的情况，核心是: 样式单独写到 .css 文件中，之后把 .css 文件引入到 HTML 页面中使用

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中
在 HTML 页面中，使用 <link> 标签引入这个文件

语法：

<link rel="stylesheet"  href="css文件路径">

注意：

<link> 标签要写在 <head> 标签中
标签属性说明：
1. href ：引入的文档来自于哪里
2. rel ：( relation，关系）说明引入的文档与当前文档之间的关系
外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离
实际开发中，几乎都使用外部样式，这是最推荐的使用方式

4. CSS引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

5. 样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式

内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：“后来者居上”）
同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来者居上”）

3. CSS语法规范

CSS 规则由两个主要的部分构成：

选择器：找到要添加样式的元素
声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为： 属性名: 属性值;

h1{
	color:red;
	font-size:25px;
}
/*h1是选择器*/

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文:分开
多个“键值对”之间用英文;进行区分

例如：所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方

<head>
   <style>
       h4 {
           color: blue;
           font-size: 100px;
       }
   </style>
</head>

注释的写法：

/* 给h1元素添加样式 */
h1{
	/* 设置文字颜色为红色 */
	color: red;
	/* 设置文字大小为40px */
	font-size: 40px;
}

4. CSS代码风格

样式格式书写
- 紧凑格式（项目上线时推荐，可减小文件体积）
```
h3 { color: deeppink; font-size: 20px;}
```
- 展开格式（开发时推荐，便于维护和调试）
```
h3 {
    color: pink;
    font-size: 20px;    
}
```
样式大小写风格
- 小写格式（强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外）
```
h3 {
    color: pink;
}
```
- 大写格式：
```
H3 {
    COLOR: PINK;   
}
```
样式空格风格
属性值前面，冒号后面，保留一个空格，选择器（标签）和大括号中间保留空格
```
h3 {
    color: pink;    
}
```

初识CSS

# 1. CSS简介

# 2. CSS的引入方式

# 1. 行内样式表（行内式）

# 2. 内部样式表（嵌入式）

# 3. 外部样式表（链接式）

# 4. CSS引入方式总结

# 5. 样式表的优先级

# 3. CSS语法规范

# 4. CSS代码风格