CSS选择器
CSS3选择器规范地址: https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3选择最新选择器规范: https://www.w3.org/TR/selectors
!---问题---!
1.css的全称是什么?
2.样式表的组成
3.浏览器读取编译css的顺序?
1.基本选择器
/*通配符选择器*/ * { margin: 0; padding: 0; border: none; }
/*元素选择器*/ body { background: #eee; }
/*类选择器*/ .list { list-style: square; }
/*ID选择器*/ #list { width: 500px; margin: 0 auto; }
/*后代选择器*/ .list li { margin-top: 10px; background: #abcdef; }
2.基本选择器扩展
/*子元素选择器*/ #wrap > .inner {color: pink;}
也可称为直接后代选择器,此类选择器只能匹配到直接后代,不能匹配到深层次的后代元素
/*相邻兄弟选择器*/ #wrap #first + .inner {color: #f00;}
它只会匹配紧跟着的兄弟元素
/*通用兄弟选择器*/ #wrap #first ~ div { border: 1px solid;}
它会匹配所有的兄弟元素(不需要紧跟)
/*选择器分组*/ h1,h2,h3{color: pink;}
此处的逗号我们称之为结合符
3.属性选择器
/*存在和值属性选择器*/
[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]:表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为val。
/*子串值属性选择器*/
[attr|=val] : 选择attr属性的值是val(包括val)或以val-开头的元素。
[attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
[attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
4.伪类与伪元素选择器
/*链接伪类*/ 注意:link,:visited,:target是作用于链接元素的!
:link 表示作为超链接,并指向一个未访问的地址的所有锚
:visited 表示作为超链接,并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素,它的id是URI的片段标识符
/*动态伪类*/ 注意:hover,:active基本可以作用于所有的元素!
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素(点击按住时)
由于a标签的:link和:visited可以覆盖了所有a标签的状态,所以当:link,:visited,:hover,:active同时出现在a标签
身上时 :link和:visited不能放在最后!!!
隐私与:visited选择器
只有下列的属性才能被应用到已访问链接:
color
background-color
border-color
/*表单相关伪类*/
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
/*结构性伪类*/
index的值从1开始计数!!!!
index可以为变量n(只能是n)
index可以为even odd
#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele
#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别!!
nth-of-type以元素为中心!!!
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not
:empty(内容必须是空的,有空格都不行,有attr没关系)
/*伪元素*/
::after
::before
::firstLetter
::firstLine
::selection
5.css声明的优先级
选择器的特殊性
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如 0,0,0,0
一个选择器的具体特殊性如下确定:
1.对于选择器中给定的ID属性值,加 0,1,0,0
2.对于选择器中给定的各个类属性,属性选择,或伪类,加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素,加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势
注意:id选择器和属性选择器
div[id="test"](0,0,1,1) 和 #test(0,1,0,0)
重要声明
有时某个声明比较重要,超过了所有其他声明,css2.1就称之为重要声明
并允许在这些声明的结束分号之前插入 !important 来标志
必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后,即分号的前面
标志为 !important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组,重要声明的冲突会在其内部解决
非重要声明也会被分为一组,非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突,胜出的总是重要声明
继承
继承没有特殊性,甚至连0特殊性都没有
0特殊性要比无特殊性来的强
来源
css样式的来源大致有三种
创作人员
读者
用户代理
权重:
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明
层叠
1.找出所有相关的规则,这些规则都包含一个选择器
2.计算声明的优先级
先按来源排序
在按选择器的特殊性排序
最终按顺序
css3媒体查询
css3媒体查询是响应式方案核心
媒体类型
all 所有媒体(默认值)
screen 彩色屏幕
print 打印预览
projection 手持设备
tv 电视
braille 盲文触觉设备
embossed 盲文打印机
speech “听觉”类似的媒体设备
tty 不适用像素的设备
媒体属性
width (可加max min前缀)
height (可加max min前缀)
device-width (可加max min前缀)
device-pixel-ratio(可加max min前缀,需要加webkit前缀)
orientation portrait竖屏
landscape横屏
操作符,关键字 (only,and,(,or),not)
only:
防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式.
@media only screen and (min-width:800px ){
规则;
规则
}
@media screen and (min-width:800px ){
规则;
规则
}
在老款的浏览器下
@media only ---> 因为没有only这种设备 规则被忽略
@media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询
建议在每次抒写media query的时候带上only
and:
连接媒体属性 、连接媒体类型
对于所有的连接选项都要匹配成功才能应用规则
or(,) : 和and相似
对于所有的连接选项只要匹配成功一个就能应用规则
not:取反
less
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
less的中文官网:http://lesscss.cn/
bootstrap中less教程:http://www.bootcss.com/p/lesscss/
Less编译工具
koala 官网:www.koala-app.com
less中的注释
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
less中的变量
使用@来申明一个变量:@pink:pink;
1.作为普通属性值只来使用:直接使用@pink
2.作为选择器和属性名:#@{selector的值}的形式
3.作为URL:@{url}
4.变量的延迟加载
less中的嵌套规则
1.基本嵌套规则
2.&的使用
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.带多个参数的混合
6.命名参数
7.匹配模式
8.arguments变量
less运算
在less中可以进行加减乘除的运算
less避免编译
less继承
性能比混合高
灵活度比混合低
bootstrap
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单
中文网 : http://www.bootcss.com/
英文网 : http://getbootstrap.com/
容器
流体布局容器
容器的width为auto,只是两边加了15px的padding。
固定布局
容器的width会随设备分辨率的不同而生产变化
分辨率阈值
w >=1200 容器的width为1170 左右padding为15 (注意是borderBox)
1200>w >=992 容器的width为970 左右padding为15 (注意是borderBox)
992 > w >=768 容器的width为750 左右padding为15 (注意是borderBox)
768 > w >=992 容器的width为auto 左右padding为15 (注意是borderBox)
栅格系统
col-lg-x
col-md-x
col-sm-x
col-xs-x
x默认拥有12个等级
列偏移
调整的是margin-left,分13个等级(0到12)
0时为0%
列排序
push的时候调整的是left,分13个等级(0到12)
0时为auto
pull的时候调整的是right,分13个等级(0到12)
0时为auto
响应式工具
容器与栅格盒模型设计的精妙之处
container 提供了一个15px的padding
row 是 column 直接存在的容器,row 默认最多可有12个 column,
同时作为都是左浮动的 column 的 wrapper,自带 clearfix 的性质。
同时 row 还有一个很特殊的地方,就是左右各有 -15px 的 margin,
为了抵消 container 中15px的 padding
每个column 也会有15px的水平方向的 padding,colunmn 只能在 row 中生存,
由于 row 的 margin 为-15px,那么位于两边的 column 就碰到了 container 的边界。
但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container,
同时 不同column的内容之间就有了30px的槽
目的是为了确保列与列之间有30px的槽,列与容器之间有15px的槽
自定义字体
@font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,可以消除对用户电脑字体的依赖
font-family
所指定的字体名字将会被用于font或font-family属性
src
字体资源
注意:
不能在一个 CSS 选择器中定义 @font-face
自定义图标
1.Adobe illustrator
AI是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的矢量图形处理工具。
该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等,
也可以为线稿提供较高的精度和控制,适合生产任何小型设计到大型的复杂项目
2.FontLab
FontLab是一个专业级的字体编辑软件,广泛应用于字体 设计人员和排版印刷业等专业场合。
它能够对已有的字体进行修改,也可以完全按照要求 重新设计需要的字体。
字体兼容处理网站
https://www.fontsquirrel.com/tools/webfont-generator
icomoon字体图标
https://icomoon.io/#home
3.字体图标基本思路
--设计一套矢量图
--将不同的矢量图绑定到不同的字符上生成自定义字体
---一般通过工具或者站点来处理
--在页面中运用
新的UI方案
文本新增样式
opacity:
opacity属性指定了一个元素的透明度
默认值:1.0 不可继承
文字阴影:(浮雕文字、文字模糊)
text-shadow用来为文字添加阴影,而且可以添加多层,阴影值之间用逗号隔开。(多个阴影时,第一个阴影在最上边)
默认值:none 不可继承
值
<color>
可选。可以在偏移量之前或之后指定。如果没有指定颜色,则使用UA(用户代理)选择的颜色。
<offset-x> <offset-y>
必选。这些长度值指定阴影相对文字的偏移量。
<offset-x> 指定水平偏移量,若是负值则阴影位于文字左边。
<offset-y> 指定垂直偏移量,若是负值则阴影位于文字上面。
如果两者均为0,则阴影位于文字正后方(如果设置了<blur- radius> 则会产生模糊效果)。
<blur-radius>
可选。这是 <length> 值。如果没有指定,则默认为0。
值越大,模糊半径越大,阴影也就越大越淡
文字描边:
只有webkit内核才支持:-webkit-text-stroke(准确的来说不能算是css3的东西,但需要大家知道)
文字排版:
direction:控制文字的方向
一定要配合unicode-bidi:bidi-override;来使用
text-overflow :确定如何向用户发出未显示的溢出内容信号。
它可以被剪切,
显示一个省略号('...')
盒模型新增样式
盒模型阴影:
box-shadow
以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 如果元素同时设置了 border-radius ,阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。
默认值: none 不可继承
值:
inset
默认阴影在边框外。
使用inset后,阴影在边框内。
<offset-x> <offset-y>
这是头两个 <length> 值,用来设置阴影偏移量。
<offset-x> 设置水平偏移量,如果是负值则阴影位于元素左边。
<offset-y> 设置垂直偏移量,如果是负值则阴影位于元素上面。
如果两者都是0,那么阴影位于元素后面。
这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
<blur-radius>
这是第三个 <length> 值。值越大,模糊面积越大,阴影就越大越淡。
不能为负值。默认为0,此时阴影边缘锐利。
<spread-radius>
这是第四个 <length> 值。取正值时,阴影扩大;取负值时,阴影.收缩。默认为0,此时阴影与元素同样大。
<color>
阴影颜色,如果没有指定,则由浏览器决定
倒影:
-webkit-box-reflect 设置元素的倒影(准确的来说不能算是css3的东西,但需要大家知道)
默认值:none 不可继承
值:(必须是123的顺序)
倒影的方向
第一个值,above, below, right, left
倒影的距离
第二个值,长度单位
渐变
第三个值
resize:
resize CSS 属性允许你控制一个元素的可调整大小性。
(一定要配合overflow:auto使用)
默认值:none 不可继承
值:
none
元素不能被用户缩放。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。
box-sizing:
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。
默认值:content-box 不可继承
值
content-box
默认值,标准盒子模型。 width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式:
width = 内容的宽度,
height = 内容的高度。
宽度和高度都不包含内容的边框(border)和内边距(padding)。
border-box
width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
这里的维度计算为:
width = border + padding + 内容的 width,
height = border + padding + 内容的 height。
新增UI样式
圆角
传统的圆角生成方案,必须使用多张图片作为背景图案
CSS3圆角的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:
* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。
* 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。
* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况
border-radius
用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两个半径时确定一个椭圆,这个(椭)圆与边框的交集形成圆角效果。

默认值 : 0 不可继承
值:
固定的px值定义圆形半径或椭圆的半长轴,半短轴。不能用负值
使用百分数定义圆形半径或椭圆的半长轴,半短轴。水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度。不能用负值
这是一个简写属性,用来设置
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius ,
border-bottom-left-radius
半径的第一个语法取值可取1~4个值:
border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left
半径的第二个语法取值也可取1~4个值
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left
注意
百分比值
在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
在 11.50 版本以前的 Opera 中实现有问题。
Gecko 2.0 (Firefox 4) 版本前实现不标准:水平半轴和垂直半轴都相对于盒子模型的宽度。
在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。
边框图片
border-image CSS属性允许在元素的边框上绘制图像。。这使得绘制复杂的外观组件更加简单,使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式
默认值: 不可继承
border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: none
border-image-repeat: stretch
border-image-source
定义使用一张图片来代替边框样式;如果只为none,则仍然使用border-style 定义的样式。
默认值:none 不可继承
border-image-slice
会通过规范将 border-image-source 的图片明确的分割为9个区域:四个角,四边以及中心区域。
并可指定偏移量
默认值:100% 不可继承
值的百分比参照于image本身!!
border-image-repeat
定义图片如何填充边框。或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。
默认值:stretch 不可继承
值:
stretch (拉伸)
repeat,round(平铺)
border-image-width
定义图像边框宽度。
默认值:1 不可继承
border-image-outset
属性定义边框图像可超出边框盒的大小
默认值:0 不可继承
正值: 可超出边框盒的大小
背景:
background-color
会设置元素的背景色
默认值: transparent 不可继承
background-image
属性用于为一个元素设置一个或多个背景图像,图像在绘制时,以z轴方向堆叠的方式进行。先指定的图像会在之后指定的图像上面进行绘制。
注意:background-color会在image之下进行绘制,边框和内容会在image之上进行绘制
默认值:none 不可继承
background-repeat
CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
默认值:repeat 不可继承
值:
repeat-x = repeat no-repeat
repeat-y = no-repeat repeat
repeat = repeat repeat
no-repeat = no-repeat no-repeat
第一个值代表水平方向。
第二个值代表垂直方向。
background-position
指定背景位置的初始位置
默认值:0% 0% 不可继承
值:
百分比:参照尺寸为背景图片定位区域的大小减去背景图片的大小
第一个值:元素在水平方向的位移
第二个值:元素在垂直方向的位移
关键字:
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.
如果只有一个值被指定,则这个值就会默认设置背景图片位置中的水平方向,与此同时垂直方向的默认值被设置成50%。
background-attachment
决定背景是在视口中固定的还是随包含它的区块滚动的。
默认值:scroll 不可继承
值:
fixed
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动 。
scroll
此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动
background-origin
设置背景的渲染的起始位置
border-box
padding-box
content-box
background-clip
设置背景裁剪位置
background-size
设置背景图片大小
默认值:auto auto 不可继承
值:
百分比: 指定背景图片相对背景区(background positioning area)的百分比。背景区由background-origin设置,默认为盒模型的内容区与内边距
auto: 以背景图片的比例缩放背景图片。
注意:
单值时,这个值指定图片的宽度,图片的高度隐式的为auto
两个值: 第一个值指定图片的宽度,第二个值指定图片的高度
background
是CSS简写属性,用来集中设置各种背景属性。background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size, background-attachment。
默认值: 不可继承
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent
顺序无关
渐变
CSS 渐变 是在 CSS3 Image Module 中新增加的图片类型;使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片,可以加快页面的载入时间、减小带宽占用。同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活、便捷的调整页面布局。
浏览器支持两种类型的渐变:线性渐变 (linear),通过 linear-gradient 函数定义,以及 径向渐变 (radial),通过 radial-gradient 函数定义.
线性渐变
为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。
-默认从上到下发生渐变
linear-gradient(red,blue);
-改变渐变方向:(top bottom left right)
linear-gradient(to 结束的方向,red,blue);
-使用角度
linear-gradient(角度,red,blue);

-颜色节点的分布(第一个不写为0%,最后一个不写为100%)
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
-重复渐变
repeating-linear-gradient(60deg,red 0,blue 30%);
径向渐变
radial-gradient() 函数创建一个<image>,用来展示由原点(渐变中心)辐射开的颜色渐变

-默认均匀分布
radial-gradient(red,blue);
-不均匀分布
radial-gradient(red 50%,blue 70%);
-改变渐变的形状
radial-gradient(circle ,red,blue)
circle
ellipse(默认为椭圆)
-渐变形状的大小
radial-gradient(closest-corner circle ,red,blue)
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角 (默认值)
-改变圆心
radial-gradient(closest-corner circle at 10px 10px,red,blue);