CSS和层叠

##常见的CSS属性##
color:red  设置元素内容的颜色
<br>text-align:center&nbsp;&nbsp;设置文字的对齐方式(例:centeer&nbsp;居中)
<br>font-size&nbsp;&nbsp;设置文字大小
<br>font-weight:&nbsp;&nbsp;设置文字粗细
<br>background:&nbsp;&nbsp;设置文字背景颜色
##通配选择器##
写法:*{}
<br>通配选择器会选择body中所有内容。
##伪类选择器##
写法:.weilei{}=>.weilei:hover{}
<br>必须两个同时写,一前一后,鼠标放在上面会从第一个慢慢变成第二个。
##伪元素选择器##
写法:.weilei::hover
<br>元素的选择器
##声明##
###作者样式表###
主要推荐,由网页开发者书写的样式表。
###浏览器默认样式###
浏览器的默认样式,若没有强制更改,则会显示为浏览器的默认样式。
###用户样式表###
用户所用的样式表,不需要过多关注。
##层叠过程##
###比较优先级###
每一个声明都有一个优先级,当发生冲突时,优先级高的会保留,优先级低的会被淘汰,一个声明的优先级,与它的来源和重要性有关。
<br>1.浏览器默认样式表中的声明(优先级由高到低)
<br>2.作者样式表中的普通声明
<br>3.作者样式表中的重要声明
###比较特殊性###
每一个声明都有一个特殊性,当发生冲突时,特殊性高的会保留,特殊性低的会被淘汰,一个声明的特殊性,取决于规则适用范围的大小,规则适用范围越大,特殊性越低,适用范围越小,特殊性越高
<br>1.行内样式(特殊性由高到低)
<br>2.ID选择器
<br>3.类选择器
<br>4.元素选择器
<br>5.通配符选择器
<br>在比较特殊性时,每一个冲突的声明,会生成4个数字(a,b,c,d),以比较特殊性,a越大,特殊性越高,若a相同,比较b,b越大,特殊性越高,依次类推...
<br>a: 若声明是行内样式,则为1,否则为0
<br>b: 规则中ID选择器的个数
<br>c: 规则中类选择器、伪类选择器和属性选择器的个数
<br>d: 规则中元素选择器、伪元素选择器的个数
<br>注:如果优先级相同才比较特殊性
###比较源次序###
最后出现的声明胜出,其他的全部淘汰
<br>注:只有在特殊性相同的时候才会比较源次序
<br>注2:该规则的实际应用CSS Reset代码前置
<br>注3:该规则的实际应用a元素的伪类书写顺序
####a元素的伪类书写顺序####
1.:hover:鼠标悬停到元素上的样式,适用于其他元素
<br>2.:link:链接未被访问过的样式
<br>3.:visited:链接已被访问过的样式
<br>4.:active:链接被激活时的样式
<br>注:必须a元素的伪类书写顺序按照此顺序书写
##继承##
###什么是继承###
继承,是指子元素会自动(继承是自动发生的,开发者不需要书写任何额外的代码)拥有父元素的某些CSS属性(并不不是所有CSS属性都可以被子元素继承)。
<br>注:继承须有传递性
<br>注2:有些属性在页面的某个区域中具有通用性
<br>注3:若没有继承,则必须为该区域的每个元素指定样式,导致代码重复臃肿
###继承要求###
一个元素的某个CSS属性,只有满足下面两个条件,才会继承父元素:
<br>1.该属性是可继承的属性
<br>2.该属性在样式表中没有声明
###强制继承###
强制继承,也叫做显式继承,是指将CSS属性值设置为:!inherit
<br>这样做,通常有两个原因:
<br>1.为了继承有些不可继承的属性
<br>2.为了继承已被声明过的属性
##属性值的计算过程###
属性值的计算过程就是由:无属性值通过CSS的属性值计算得出每个属性都有值。
CSS属性值计算过程:
<br>1.确定声明值:参考样式表中没有冲突的声明,作为CSS属性值
<br>2.层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值(通过比较优先级,特殊性和源次序)
<br>3.使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值
<br>4.使用默认值:对仍然没有值的属性,使用默认值
##表格##
写法:< table >表格,< tr >行,< td >列
<br>注:必须行中加列。
<br>< td colspan/rowspan="数字" >表示一个格子占几行/列

posted on 2019-06-04 11:46  蜀风古韵  阅读(135)  评论(0编辑  收藏  举报

导航