前端基础学习——你必须掌握的CSS的知识

素颜马尾好姑娘i 2023-09-28 13:38 2阅读 0赞

**目录**

一. CSS简介

1.1.CSS简述

1.2.为什么需要CSS样式表

1.3 CSS的特性

二. CSS语法

2.1.CSS基本语法

2.2.CSS选择器

2.2.1.基本选择器

2.2.2.层次选择器

2.2.3.伪类选择器

2.3.CSS引入方式

2.3.1.行内样式

2.3.2.内嵌样式

2.3.3.外部样式

2.4.CSS优先级

2.4.1.基本规则

2.4.2.样式叠加时的优先级

2.5.CSS继承

2.5.1.html 文档树（DOM节点树）

2.5.2.CSS继承

2.6.CSS中的颜色

三. CSS常用样式

1.1.字体样式

1.2.文本样式

1.3.尺寸样式

1.4.列表样式

1.5.背景样式

1.6.鼠标样式

1.7.伪类样式

1.8.透明度样式

四. 前端学习专栏

--------------------

## **一. CSS简介** ##

### 1.1.CSS简述 ###

>  **CSS：层叠样式表(英文全称：Cascading Style Sheets)：**
> 
>  *  是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
>  *  CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

### 1.2.为什么需要CSS样式表 ###

> 是为了实现内容与样式的分离。
> 
>  *  HTML：负责页面的结构和内容，
>  *  CSS：样式表负责页面外观的渲染（相当于华丽的衣服）。

### **1.3 CSS的特性** ###

>  *  内容与表现分离
>  *  网页的表现统一，容易修改
>  *  丰富的样式，使得页面布局更加灵活
>  *  减少网页的代码量，增加网页的浏览速度，节省网络带宽
>  *  运用独立于页面的CSS，有利于网页被搜索引擎收录
>  *  由浏览器解释运行
>  *  不区分大小写

--------------------

## 二. CSS语法 ##

### 2.1.CSS基本语法 ###

> 在页面上使用时，通常在head>部分写入style标签，样式代码放在style标签中。CSS基本语法：

选择器 {
        样式声明;
        样式声明;
        ... ...
    }

> 什么是选择器：选择器就是找到你要渲染的那个HTML标签。

### 2.2.CSS选择器 ###

#### 2.2.1.基本选择器 ####

> 基本选择器有三种：

**1）HTML标签选择器：**直接作用于某个HTML标签

**2）类选择器：**可在页面中被多次使用

**3）ID选择器：**作用于同一ID的某个资源，同一个页面中只能使用一次

#### 2.2.2.层次选择器 ####

**1）后代选择器：** E F 选择所有被E元素包含的F元素

**2）子选择器：** E > F 选择所有作为E元素的子元素F（只选择第一代子元素）

**3）群组选择器：**多个选择器通过逗号连接而成，利用群组选择器同时声明风格相同样式

#### 2.2.3.伪类选择器 ####

**1）:first-of-type：**选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）

**2）:last-of-type：**选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）

**3）:nth-of-type()：**使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

### 2.3.CSS引入方式 ###

> CSS的引入方式共有三种：
> 
>  *  行内样式
>  *  内嵌样式
>  *  外部样式。
> 
> 前面我们使用的CSS引入方式就是内嵌样式。

#### 2.3.1.行内样式 ####

> 写在某个标签中，只对本行有效。（内联样式）

<p style="font-family:华文行楷;color:green;font-size:32px">这是一个行内样式</p>

#### 2.3.2.内嵌样式 ####

> 样式写在某个页面的style标签中，只对本页面有效。前面的例子都是内嵌样式。

#### 2.3.3.外部样式 ####

> 将样式代码写在一个单独的文件中（.CSS文件），使用时要将这个.CSS文件导入使用。

> 注意：href和rel属性是必须的。

### 2.4.CSS优先级 ###

#### 2.4.1.基本规则 ####

> CSS 优先规则：
> 
>  *  从引用方式方面来说：行内样式 > 内嵌样式/外部样式
>  *  从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

#### 2.4.2.样式叠加时的优先级 ####

> 如果在同一选择器上，外部样式、内嵌样式、行内样式都对某一属性使用了样式，也就是存在样式叠加时，那么要使用以下3个原则来决定到底哪一种样式有效。
> 
>  *  就近原则：距离最近的样式有效。
>  *  顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。
>  *  精细原则：或者叫特殊原则。既选择器的指向越精细越优先。

### 2.5.CSS继承 ###

#### 2.5.1.html 文档树（DOM节点树） ####

> 整个html就是一个树型结构。它的根就是html。

![43c2ed395fbd4565bf584c76a3432d3e.png][]

#### 2.5.2.CSS继承 ####

> CSS继承规则：
> 
>  *  子标签可以继承父标签的样式风格
>  *  子标签的样式不会影响父标签的样式风格
>  *  一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

### 2.6.CSS中的颜色 ###

> 主要有以下两种：
> 
>  *  使用英文单词作为颜色值：如：red、green、blue、black、white、yellow ......
>  *  使用十六进制的颜色值：如：\#000000 \#FFFFFF \#45F87E  
>     （其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。也可以使用简写：\#FF0088 -> \#F08）

--------------------

## **三. CSS常用样式**  ##

### 1.1.字体样式 ###

![7957031d12141bd79993765937db1e62.png][]

> 注意：可以在一个样式中设置所有字体属性：font:italic bold 36px "宋体";

### 1.2.文本样式 ###

![b84631dbbafe3d364fd1a2183eabe802.png][]

> 补充： p\{ text-indent: 2em; \} 设置首行缩进（可以px或em）

### 1.3.尺寸样式 ###

![4a0ddd16932f1d5498a089cdd8ffb2f7.png][]

### 1.4.列表样式 ###

![741a2a3edb801358f0d9fc43ca6bafa2.png][]

### 1.5.背景样式 ###

![3724d6a92ac4031d8113daa5ac41a8aa.png][]

### 1.6.鼠标样式 ###

> 实例：cursor:pointer;

![18a7f1b00f574ca89641a61c2e76e0b2.png][]

### 1.7.伪类样式 ###

![544d64c0937799ceddf939eca11b53db.png][]

### 1.8.透明度样式 ###

> opacity:X X取值为0-1，值越小越透明

--------------------

## **四. 前端学习专栏** ##

[https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482![icon-default.png_t_M5H6][]https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482][https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]

> 后面还有一章，感兴趣的朋友可以去看看：[前端基础学习——CSS样式表制作设计基础][CSS]

[43c2ed395fbd4565bf584c76a3432d3e.png]: https://img-blog.csdnimg.cn/43c2ed395fbd4565bf584c76a3432d3e.png
[7957031d12141bd79993765937db1e62.png]: https://img-blog.csdnimg.cn/img_convert/7957031d12141bd79993765937db1e62.png
[b84631dbbafe3d364fd1a2183eabe802.png]: https://img-blog.csdnimg.cn/img_convert/b84631dbbafe3d364fd1a2183eabe802.png
[4a0ddd16932f1d5498a089cdd8ffb2f7.png]: https://img-blog.csdnimg.cn/img_convert/4a0ddd16932f1d5498a089cdd8ffb2f7.png
[741a2a3edb801358f0d9fc43ca6bafa2.png]: https://img-blog.csdnimg.cn/img_convert/741a2a3edb801358f0d9fc43ca6bafa2.png
[3724d6a92ac4031d8113daa5ac41a8aa.png]: https://img-blog.csdnimg.cn/img_convert/3724d6a92ac4031d8113daa5ac41a8aa.png
[18a7f1b00f574ca89641a61c2e76e0b2.png]: https://img-blog.csdnimg.cn/img_convert/18a7f1b00f574ca89641a61c2e76e0b2.png
[544d64c0937799ceddf939eca11b53db.png]: https://img-blog.csdnimg.cn/img_convert/544d64c0937799ceddf939eca11b53db.png
[icon-default.png_t_M5H6]: https://csdnimg.cn/release/blog_editor_html/release2.1.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M5H6
[https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]: https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482
[CSS]: https://blog.csdn.net/weixin_53919192/article/details/125613395?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125613395%22%2C%22source%22%3A%22weixin_53919192%22%7D&ctrtid=Xl8Qz