一、CSS
(一)、什么是 CSS
CSS 指 层叠 样式 表 (Cascading Style Sheets)
WEB标准中的表现标准语言
简单说就是如何修饰网页信息的显示样式
目前推荐遵循的是W3C发布的CSS3.0
1998年5月21日由w3C正式推出的css2.1
(二)、CSS 特性
1、层叠性 --- 长江后浪推前浪,前浪死在沙滩上
多种CSS样式的叠加,是浏览器处理冲突的一个能力,
如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准
1.样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式
2.样式不冲突,不会层叠
2、继承性 --- 龙生龙,凤生凤,老鼠生的孩子会打洞
指书写CSS样式表时,子标签会继承父标签的某些样式
想要设置一个可继承的属性,只需将它应用于父元素即可
可继承的属性有:
字体系列属性:font、font-family、font-weight、font-size、font-style
文本系列属性:color、text-align、line-height、text-decoration、
text-indent......
列表系列属性: list-style
光标系列属性:cursor
元素可见属性:visibility
3、优先级 --- 胜者为王,败者为寇
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题
1.继承样式的权重为0
即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式
2.行内样式优先
应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级
3.权重相同时,CSS遵循就近原则
也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大
4.CSS定义了一个!important命令,该命令被赋予最大的优先级
也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级
(三)、CSS 权重
优先级规则:
规则1:最近的祖先样式比其他祖先样式优先级高
规则2:"直接样式"比"祖先样式"优先级高
规则3: 优先级关系:内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器
规则4:权重原则 (内联) 1000、
(id) 0100、
(类,伪类,属性) 010、
(元素,伪元素) 0001、
其他 0000、继承属性没有权重
规则5:属性后插有 !important 的属性拥有最高优先级,若同时存在,则再利用规则 3、4 判断优先级
(四)、CSS 权重CSS 设置样式
1、CSS基础选择器(设置样式的元素)
基本选择器
1、通配符选择器
* {
}
* 选择的是当前页面中所有的元素
2、元素选择器 ======= 权重为1
元素名称 {
}
选择的是 当前页面中的 某一类元素
3、id 选择器 ======= 权重为100
# id {
}
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
id 是独一无二的
4、class 选择器 ======= 权重为10
.class {
}
class 选择器用于描述一组元素的样式,
class 选择器有别于id选择器,class可以在多个元素中使用
一个元素可以设置多个类名
5、群组选择器
使用逗号(,)表示
把多个选择器写在一起,方便样式的组织管理,组内的选择器是任意类型的
6、伪类选择器======= 权重为10
伪类,用于向某些选择器添加特殊的效果。
用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上
设置 a标签 的四种状态
:link访问前的状态
:visited访问后的状态
:hover鼠标移入效果
:active激活状态(按下未松开)
l-v-h-a : love-hate按照顺序书写
需要注意的是:除了超链接的4种伪类选择器之外,其他伪类和伪对象选择器不被 IE6 及其以下版本浏览器支持
7、后代选择器
使用空格( )表示
前面的一个选择器表示包含框对象的选择器,而后面的选择器表示被包含的选择器
8、伪元素选择器 ======= 权重为1
伪元素,是html中不存在的元素,仅在css中用来渲染的,伪元素创建了一个虚拟容器,
这个容器不包含任何DOM元素,但是可以包含内容
::after 在选择器后增加内容
::before 在选择器前增加内容
::placeholder 设置input元素的placeholder内容的样式
::first-letter 选择器的首字母
::first-line 选择器的首行
::selection 改变被用户选取的部分文字的样式
二、CSS3 新增
(一)、什么是 CSS3
CSS3是CSS(层叠样式表)技术的升级版本,
于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块
浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,
CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性
但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂
(二)、渐进增强和优雅降级(面试题)
渐进增强(Progressive Enhancement):
一开始就针对低版本浏览器进行构建页面,完成基本的功能,
然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
渐进增强相当于向上兼容
优雅降级(Graceful Degradation):
一开始就构建站点的完整功能,然后针对浏览器测试和修复
比如一开始使用 CSS3 的特性构建了一个应用
然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
优雅降级相当于向下兼容
区别
优雅降级是从复杂的现状开始,并试图减少用户体验的供给
而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
降级(功能衰减)意味着往回看
而渐进增强则意味着朝前看,同时保证其根基处于安全地带
(三)、CSS3 新增选择器
1、层级选择器
使用大于号(>)表示 E > F
子选择器 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素
使用波浪线(+)表示 E + F
相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面
使用波浪线(~)表示 E ~ F
相邻选择器类似,选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
2、属性选择器 ======= 权重为10
E[attr]:只使用属性名,但没有确定任何属性值
E[attr="value"]:指定属性名和属性值(值完整)
E[attr~="value"]:指定属性名,并且具有属性值,
此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
E[attr^="value"]:属性值是以value开头的(一部分也可以)
E[attr$="value"]:属性值是以value结束的(一部分也可以)
E[attr*="value"]:属性值中包含了value(一部分也可以)
E[attr|="value"]:属性值是value或者以“value-”开头的值
3、结构伪类选择器 ======= 权重为10
(el):first-child 匹配属于任意元素的第一个子元素的 el 元素
(el):first-of-type 选择父元素中的第一个 el 元素
(el):last-child 选择所有 el 元素的最后一个子元素
(el):last-of-type 选择父元素中最后一个 el 元素
(el):empty 匹配没有子元素(包括文本节点)的 el 元素
(el):nth-child(n) 选择所有 el 元素的父元素的第 n 个子元素
(el):nth-of-type(n) 选择所有p元素第 n 个为 el 的子元素
(el):nth-last-child(n) 选择所有 el 元素倒数的第 n 个子元素
(el):nth-last-of-type(n) 选择所有p元素倒数的第 n 个为 el 的子元素
odd even numN
(el):only-child 选择所有仅有一个子元素,并且子元素是 el 元素
(el):only-of-type 选择所有仅有一个子元素中为 el 的元素
4、否定伪类选择器 ======= 权重为10
:not(el) 选择所有 el 以外的元素
5、状态(表单元素)伪类选择器 ======= 权重为10
:focus 选择元素输入后具有焦点
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的 元素
:required 选择有"required"属性指定的元素属性
:optional 选择没有"required"的元素属性
:read-only 选择只读属性的元素属性
:read-write 选择没有只读属性的元素属性
:valid 选择所有有效值的属性
:invalid 在表单元素中的值是非法时设置指定样式
:in-range 用于标签的值在指定区间值时显示的样式
:out-of-range 选择指定范围以外的值的元素属性
6、目标伪类选择器 ======= 权重为10
E:target
用来匹配文档中url中某个标志符的目标元素
url中的标志通常会包含一个#,后面带有一个标志符名称
target的大白话总结:
●指定选择器:#brand:target 对应的 a标签一点击,则会触发此样式!
●自动匹配全部选择器:target 只要对应的a标签点击,则匹配的选择器就自 动触发样式!
target 实现 tab 切换的案例