CSS 基本概念

1. CSS定义

英文全名：cascading style sheets

web标准中的表现标准语言，简单说就是如何修饰网页信息的显示样式。

目前遵循的是W3C发布的CSS3.0

2. CSS的语法

选择器（选择符）{属性：属性值；属性：属性值；}

选择器：要定义样式的对象声明

3.CSS引入方式

3.1 行内样式

style作为属性值直接写在标签后面

使用场景：几乎不用

3.2 内部样式

style作为标签放到头部标签内，css样式写作style标签里面

使用场景：适合案例或者短小的页面开发

3.3 外部样式表

第一步先创建一个后缀是css的文件，创建完之后直接在.css的文件里书写标签名称{属性：属性值；属性：属性值；......}
用link引用外部的样式

建议写在<head></head>里面

<link href="" rel="stylesheet"/>

link--链接

href--路径

rel--关联

stylesheet--样式表

type="text/css"--可以不写
外部样式表除了用link引入之外可以用@import导入外部样式很少用

<style>@import url(CSS的路径)</style>

3.4 解析规则

同时使用内部、外部、行内元素表修饰同一个标签的时候优先级最高的是行内样式表。
当外部和内部样式表同时使用的时候，解析规则是，就近原则,即哪个css样式距离标签近就最终显示哪个样式。

4. CSS语法注意点

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

5. 选择器

为什么要用选择器？

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器

选择器整体分为五大类

基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器

5.1 基本选择器

5.1.1类型选择器

以文档对象HTML中的标签作为选择符

使用

想改变某个元素的默认样式时或者同意文档某个元素的显示效果时
语法

标签{属性：属性值；}
```
div{
    width:200px;
}
```
注意

标签选择器要注意使用，因为标签选择器改的标签针对的当前文件的所有标签

5.1.2 class（类）选择器

使用

想要区分某个标签的时候，比如两个div
语法

<标签 class=”box“></标签>

.classname{属性：属性值}
```
<div class="box"></div>
<style>
.box{width:200px;}
</style>
```
注意
- class可以给多个属性值，多个属性值之间用空格隔开
- 同一个class可以给多个标签
如：<div class="box a1"></div>

5.1.3 ID选择器

使用

想要区分某个标签的时，比如区分两个系统的标签

语法

<div id="box1"></div>

#ID name{属性:属性值;}

<div id="box1"></div>
<style>
    #box1{
        width:200px
    }
</style>

注意

ID具有唯一性，属性值只能是1个，不可以重复使用

5.1.4 通配符

使用

想要所有标签同时改变样式的时候

语法

*{属性：属性值；}

*{margin:0;padding:0;}

注意

只要写页面就一定要把样式重置

5.1.5 群组选择器

使用

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
语法

选择器1，选择器2，选择器3{属性：属性值；}
```
.box,p,#a2{width：300px；}
```
注意

需要使用相同样式的地方只需要书写一次，可以相对减少代码量，改善CSS代码的结构，提高网页的性能

5.2 层次选择器

5.2.1 后代选择器（包含）

使用

想要改变某个元素下面所有的后代元素的时候使用后代选择器
语法

选择器1 选择器2 选择器3{属性：属性值}
```
div p{width:300px;}
```

5.2.2 子选择器

使用

改变某个元素下面所有的儿子元素的时候使用
语法

选择器1>选择器2>选择器3{属性：属性值;...}
```
ul>li{width:300px;}
.box>p{width:300px}
```

5.2.3 相邻兄弟选择器

使用

改变某个元素后面紧挨着的元素的时候
语法

选择器1+选择器2{属性:属性值;}
```
div+p{
    width:300px;
}
```

5.2.4 通用兄弟选择器

使用

想要改变某个元素后面所有的元素的时候。
语法

选择器1~选择器2{属性:属性值;}
```
div-p{}
```

5.3 动态伪类选择器

5.3.1 使用状态

未访问的链接状态

注：必须给a标签
```
a:link {color: red;} 
```
已访问的链接状态

注：必须给a标签
```
a:visited {color: green;}
```
鼠标滑过链接状态

注：可以给任意一个标签
```
a:hover {color: blue;}
```
鼠标按下去时的状态

注：必须给a标签
```
a:active {color: yellow;}
```

5.3.2 关于说明

当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：

a``a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变化颜色

6. CSS的层叠性

CSS层叠性是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。

解析规则

当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖底权重选择符的样式
相同权重的选择符，样式遵循就近原则：那个选择符最后定义，就采用那个选择符样式

7. 权重

CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0

个数	种类	权重
1	类型(元素)选择器	0001
2	Class选择器（类选择器）	0010
3	id选择器	0100
4	伪类选择符	0010
5	包含选择符	为包含选择符的权重之和
6	属性选择符	0010
7	伪元素选择符	0001
8	内联样式	1000

首发原文链接： blog.csdn.net/qq_54026286…

END

【前端基础】CSS基础概念

CSS 基本概念

1. CSS定义

2. CSS的语法

3.CSS引入方式

3.1 行内样式

3.2 内部样式

3.3 外部样式表

3.4 解析规则

4. CSS语法注意点

5. 选择器

5.1 基本选择器

5.1.1类型选择器

5.1.2 class（类）选择器

5.1.3 ID选择器

5.1.4 通配符

5.1.5 群组选择器

5.2 层次选择器

5.2.1 后代选择器（包含）

5.2.2 子选择器

5.2.3 相邻兄弟选择器

5.2.4 通用兄弟选择器

5.3 动态伪类选择器

5.3.1 使用状态

5.3.2 关于说明

6. CSS的层叠性

7. 权重

首发原文链接： blog.csdn.net/qq_54026286…