一、常见的CSS属性

属性	示例	描述
color	color: red	设置元素内容的颜色
text-align	text-align: center	设置元素内容的对齐方式
font-size	font-size: 28px	设置元素内容的文字大小
font-weight	font-weight: bold	设置元素内容的文字粗细
background-color	background-color: red	设置元素的背景颜色

圆角：border-radius: 20%;

圆半径为100px

.circle{width: 100px;height: 100px;background-color: #c51e1e;border-radius: 100%;
}

文本相关属性

斜体：font-size: italic；

文字间隔：letter-spacing: 20px;

单词间距：word-spacing: 20px;

首行缩进：text-indent: 20px;

文本样式：text-decoration: none; 取消样式

text-decoration: overline; 上划线

text-decoration: underline; 下划线

text-decoration: line-through; 中划线

字体：font-family: "宋体","微软雅黑"; 设置多个属性值，直到识别到已安装的字体，若未识别到，则显示非衬线字体

非衬线字体（sans-serif）：文字边缘未经过修饰，在电子设备上视觉效果良好 eg：幼圆

衬线字体（serif）：文字边缘经过修饰，在纸张上视觉效果好 eg：宋体

二、颜色单位

CSS 中所有的颜色都是用RGB色域定义的，
表示RGB的方式：
- 关键字：red
- HEX16进制表示法：#后跟3位数或6位数数字
  
  数字用0-9以及大小写a~f字符组成，这些值映射到红绿蓝色彩通道
- RGB值：由 rgb ()函数声明，共三个值，每个值范围在0-255，0为纯黑，255为纯白
- HSL值：由 hsl ()函数声明，色度Hue值为0-360无单位数字；饱和度 Saturation 、亮度 lightness 值从0-100%表示。

    /* 关键字 */color: blueviolet;/* 16进制 */color: #555;/* rgb函数，rgba：a代表饱和度，a的值在0-1*/color: rgb(255,57,157);color: rgba(255,57,157,0.6);

三、长度单位

一个尺寸是由长度+单位组成的

绝对长度：

px 一个像素的具体带下会根据设备的分辨率有所不同
计算机屏幕是由很多小点组成的，每一个点就是一个像素
其他尺寸单位，在经过浏览器计算后，都会变为px

相对长度：

%在不同的 CSS 属性中有不同的含义
em 相对于当前元素的字体大小（px）
rem 相对于根元素的大小

四、CSS 选择器

通配符 * 匹配页面上所有的元素

/* 通配符 */

*{ padding: 0;margin: 0;
}

后代：书写格式：祖先元素后代元素{声明块}

/* 后代 */
section a{color: black;text-decoration: none;background-color: cornflowerblue;
}

并集：同时选择多个选择器的内容，选择器之间用英文逗号 ,

/* 并集 */
a,p,h2{color: gold;font: xx-large;background-color: indigo;
}

伪类选择器

/* 第一个子元素 */
section>p:first-child{color: rgb(25, 241, 72);background-color: cornflowerblue;
}
/* 最后一个子元素 */
section>p:last-child{font-size: 150px;
}

a标签配套的伪类选择器

：link 访问前

/* 访问前 */
a:link{color: mediumspringgreen;
}

：visited 访问后

/* 访问后 */
a:visited{color: rgb(153, 24, 228);
}

：hover 鼠标移入

/* 鼠标移入 */
a:hover{color: yellow;
}

：active 访问时，点击

/* 点击 */
a:active{color: royalblue;
}

:nth-child() 匹配父元素的第N个子元素

括号里直接写数字

/* 括号里的数字为几，就表示为第几个子元素 */
p:nth-child(3){color: chartreuse;
}

括号里写odd或even

/* odd为奇数，even为偶数 */
p:nth-child(even){color: rgb(19, 226, 191);
}

括号里写公式an+b

/* an+b （n从0开始，a、b为整数） */
p:nth-child(2n+1){color: rgb(255, 0, 0);
}

:nth-of-type() 匹配父元素中指定类型元素的第N个子元素

括号里直接写数字
```
p:nth-of-type(2){color: coral;
}
```
括号里写odd或even
```
p:nth-of-type(odd){color: coral;
}
```
括号里写公式an+b
```
p:nth-of-type(2n){color: coral;
}
```

伪元素选择器

/* 伪元素选择器
元素名::after{content:"在之前";}*/

/*::before 在之前添加内容*/
p::before{content: "在之前";color: #488214;
}

/*::after 在之后添加*/
p::after{content: "在之后";color: #488214;
}

/*::first-letter 设置首字母的样式*/
p::first-letter{color: #488214;
}

/*::first-line 设置第一行的样式*/
p::first-line{color: #488214;
}

/*::selection 设置用户选中的内容的样式*/
h2::selection{background-color: blueviolet;color: chartreuse;
}

属性选择器

/* [target="_self"]{声明块} */

声明冲突：一个人元素的外观可能来自于多个规则的影响，这些规则共同作用于这个元素

这些规则的属性相同，值不同，就是声明冲突

div+p

层叠：

1、什么是层叠：

层叠是一种机制，用来解决CSS声明冲突、

2、层叠的过程：

比较优先级：优先级高的保留，反之淘汰
```
/* 重要声明 ！important */
margin: 0px !important;
```
优先级从低到高：浏览器默认样式表中的声明；

用户样式表中的普通声明；

作者样式表中的普通声明；

作者样式表中的重要声明；

用户样式表中的重要声明；

比较特殊性：比较特殊性时，每一个冲突声明会生成4个数字分组（a,b,c,d）

规则适用范围越大，特殊性越低，适用范围越小，特殊性越高

特殊性从高到低：!important>行内>ID>类>元素>通配符

	嵌入 id class 元素
	a b c d
style	1 0 0 0
id	0 1 0 0
class、属性、伪类	0 0 1 0
元素、伪类	0 0 0 1
通配符	0
！important	最高

比较源次序

继承

什么是继承：是指子元素会自动拥有父元素的某些CSS 属性

可继承的属性：color; font-size; font-weight; text-align

不可被继承的属性：background-color

继承具有传递性

强制继承：也叫显示继承，将CSS属性值设置为 inherit

原因：1.为了继承某些不可被继承的属性 2.为了继承已被声明的属性

属性值计算过程：

无属性值→确定声明值 →层叠冲突 →使用继承 →使用默认值→每个属性都有值

1. 确定声明值：

2. 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS值

3. 使用继承：对仍然没有值的属性，若可以继承，继承父元素的属性

4. 使用默认值：对仍然没有值的属性，使用默认值。

2021-08-20 叮~CSS 属性层叠继承相关推荐

[前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
html5后代选择符,css选择符有哪些？哪些属性可以继承？
属性的名字是一个合法的标识符,它们是CSS语法中的关键字.一种属性规定了格式修饰的一个方面.CSS选择器用于选择你想要的元素的样式的模式. css选择符有哪些?哪些属性可以继承?下面我们来看一下css ...
CSS 中哪些属性可以继承？
每个CSS属性定义的概述都指出了这个属性是默认继承的,还是默认不继承的.这决定了当你没有为元素的属性指定值时该如何计算值. 当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值.只有文档根元 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？
CSS选择器有哪些? 选择符类型例子例子描述通用选择器 * 类别选择器(.class) .intro 选择class="intro"的所有元素 ID选择器(#id) #fir ...
DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
（转）CSS样式表继承详解
什么是css 继承? 要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在 ...

2021-08-20 叮~CSS 属性层叠继承

一、常见的CSS属性

二、颜色单位

三、长度单位

层叠：

继承

2021-08-20 叮~CSS 属性层叠继承相关推荐

最新文章

热门文章

2021-08-20 叮~CSS 属性 层叠 继承

一、常见的CSS属性

二、颜色单位

三、长度单位

层叠：

继承

2021-08-20 叮~CSS 属性 层叠 继承相关推荐

最新文章

热门文章

2021-08-20 叮~CSS 属性层叠继承

2021-08-20 叮~CSS 属性层叠继承相关推荐