前端CSS基础

CSS基础

一、css 的定义

CSS：（cascading style sheets）（层叠样式表）定义网页的样式——页面表现的基础、控制布局、控制元素的渲染。

二、HTML如何引入css样式表

1.外部样式表（方便重复使用和维护）
css代码是独立的一个文件，通过link引用

2.内部样式表（不方便后期维护）

里面加

3.行内样式表
直接在某个标签的起始标签里面用style属性写css代码

三、CSS术语

1、CSS规则
CSS代码由多个规则组成 ，每个规则指定了对哪些元素用什么样式
书写格式：选择器{声明块} 声明块=声明+声明（多个声明构成）
比如：

定义h1的样式：字体16像素，颜色红色。

2、常见的CSS选择器
选择器——决定了样式规则适用于哪些元素。
（1）元素选择器 标签名{声明块} p{color: red;}
（2）类选择器 .类名{声明块} .hh{color: blue;}
（3）id选择器 #id值{声明块} #bb{color: yellow;}
在同一个HTML文档中，元素的id属性值是唯一的
（4）子级选择器 父元素>子元素 div>p{color: red;}
（5）后代选择器 父元素 子元素（中间是一个空格）div p{color: red;}

3、常见CSS属性
color 颜色
text-align 元素内容对齐方式
font-size 字体大小
font-weight 文字粗细
background-color 背景颜色
background-img 背景图片

4、声明冲突
多个选择器，选中同一个标签，属性名相同，但是属性值不同，就会发生声明冲突。（发生声明冲突，浏览器自动触发层叠机制）

5、层叠机制
层叠过程：
（1）比较优先级：优先级低的淘汰，高的胜出。
优先级与来源和重要性有关

（2）比较特殊性：特殊性低的淘汰，高的胜出。
声明的特殊性取决于规则适用范围的大小，范围大，特殊性小，反之越大。

行内选择器>id选择器>类选择器>元素选择器>通配符选择器
伪内选择器>类选择器 伪元素选择器>元素选择器

具体规则：
在比较特殊性时，每次冲突会产生4个数字（A B C D），以比较特殊性。
A越大，特殊性越高，若A相等，比较B，B越大，特殊性越高，以此类推

A：声明是行内选择器，则为1，否则为0.
B：id选择器的个数
C：类选择器、伪类选择器、属性选择器的个数
D：元素选择器、伪元素选择器个数

组合选择器要分开计算。

（3）比较源次序：源次序靠前的淘汰，靠后的胜出。
谁后写，谁胜出

6、继承（inherit）
子元素自动拥有父级的某些（大部分文本类样式）css属性
background-color不继承
继承有传递性
适用场景：
（1）该属性可以继承 （2）该属性没有被声明（定义）

强制继承：
也叫作显式继承，是指将css属性值设置为inherit（background-color：inherit）
（为了继承不可以继承的属性、为了继承被声明过的属性）

END今天的分享就到这里，谢谢大家