带你了解CSS上篇

ゝ一世哀愁。 2024-05-06 21:22 71阅读 0赞

![previewfile\_1940263158][previewfile_1940263158]

## **CSS 是什么** ##

CSS：层叠样式表 (Cascading Style Sheets).  
CSS 能够对网页中元素位置的排版进行像素级精确控制， 实现美化页面的效果， 并能够做到页面的样式和结 构分离，它类似于 “东方四大邪术” 之化妆术。  
html 决定页面结构，css控制页面的展示效果。

## **CSS 的基本语法规范** ##

选择器 + \{一条/N条声明\}

*  **选择器**决定针**对谁修改** (找谁)
 *  **声明**决定**修改什么** (干什么)
 *  **声明的属性**是**键值对**。使用 `;` 区分键值对，使用 `.` 区分键和值.

**示例代码：**  
![image-20240220160333243][]

**运行效果：**

![image-20240220160814205][]

> **注:** CSS 要写到 style 标签中，而style 标签可以放到页面任意位置，不过一般放到 head 标签内。  
> CSS 使用 /\* \*/ 作为注释(快捷键： ctrl + / )。

## **CSS 的引入方式** ##

### **1.内部样式表** ###

通过style标签嵌套，将CSS嵌套到html页面中，比如上面的代码就是这种方式。

**优点：** 这样做能够让样式和页面结构分离  
**缺点：** 分离的还不够彻底，尤其是 css 内容多的时候

### **2.行内样式表** ###

通过 style 属性, 来指定某个标签的样式，不过这种写法只适合于写简单样式，只针对某个标签生效。  
  
**缺点：** 不能写太复杂的样式。  
  
这种写法优先级较高, 即行内样式表优先级比内部样式表优先级高，会覆盖其他的样式。

**示例代码:**  
![image-20240220171058631][]

**运行结果：**

![image-20240220171004990][]

### **3.外部样式** ###

外部样式引入是实际开发中最常用的方式。  
  
**步骤:** 1. 创建一个 css 文件； 2. 使用 link 标签引入 css。  
**优点:** 样式和结构彻底分离了。  
**缺点:** 受到浏览器缓存影响， 修改之后不一定立刻生效。

**示例代码：**  
css代码  
![image-20240220173919556][]

html代码  
![image-20240220173642319][]

**运行效果：**  
![image-20240220174011707][]

## **选择器** ##

### **选择器的功能** ###

选中页面中指定的标签元素。  
要先选中元素，才能设置元素的属性，就好比策略类指挥游戏，比如海岛奇兵这类的, 需要先选中单位, 再指挥该单位行动。

### **CSS 选择器的种类** ###

注：以下介绍的选择器只是CSS2标准下的常用选择器。  
[详细介绍CSS 选择器种类的网站链接: https://www.w3school.com.cn/cssref/css\_selectors.asp][CSS _ https_www.w3school.com.cn_cssref_css_selectors.asp]

1.  基础选择器: 单个选择器构成的
    
     *  标签选择器
     *  类选择器
     *  id 选择器
     *  通配符选择器
2.  复合选择器: 把多种基础选择器综合运用起来.
    
     *  后代选择器
     *  子选择器
     *  并集选择器
     *  伪类选择器

[previewfile_1940263158]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/64a211bae4e14620847b4824c095d75e.jpeg
[image-20240220160333243]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ee179a6fb9fe4c8dbc56fcb15c9d8a16.png
[image-20240220160814205]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d3c3648ea3644ec1bad564bb033b113c.png
[image-20240220171058631]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e37b723c85154b909e7356569879acbb.png
[image-20240220171004990]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3ce847abfc2f445382347eaf1e82987e.png
[image-20240220173919556]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/b94b8e2cc10f46dfa7bb7f4f4575fe7f.png
[image-20240220173642319]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/b7ea903528f14b458d27f94b9200aebd.png
[image-20240220174011707]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/16f5ca6012714ac28e84970b0d1529cd.png
[CSS _ https_www.w3school.com.cn_cssref_css_selectors.asp]: https://www.w3school.com.cn/cssref/css_selectors.asp