了解了html5中html部分的提升，接下来，看一下CSS3吧！
CSS3的现状
-
浏览器支持程度差，需要添加私有前缀
- 通过caniuse可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*box变成半径为50px的圆*/ .box{ width: 100px; height: 100px; /*加上私有前缀*/ border-radius: 50px; /*-webkit- 谷歌*/ -webkit-border-radius: 50px; /*-moz- 火狐*/ -moz-border-radius: 50px; /*-o- 欧鹏*/ -o-border-radius:50px; /*-ms- IE*/ -ms-border-radius:50px; /*在学习开发当中不需要考虑兼容性,如果是开发的pc端页面最好是加上私有前缀*/ /*如果在移动端开发,只需要考虑兼容webkit浏览器,主流浏览器内容都是webkit*/ } </style> </head> <body> <div class="box"></div> </body> </html> -
移动端支持优于PC端
-
不断改进中
-
应用相对广泛
手册
- [] 表示全部可选项
- || 表示或者
- | 表示多选一
- ？ 表示0个或者1个
-
-
表示0个或者多个
-
- {} 表示范围
选择器
CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性选择器
通过属性来选择元素，具体有以下5种形式：
- E[attr] 表示存在attr属性即可;
- E[attr=val] 表示属性值完全等于val;
- E[attr*=val] 表示的属性值里包含val字符并且在"任意"位置;
- E[attr^=val] 表示的属性值里包含val字符并且在"开始"位置;
- E[attr$=val] 表示的属性值里包含val字符并且在"结束"位置;
- 也要考虑到权重的问题。
/*[attribute] 只要标签里面有这个属性就能选中 $('[class]')*/
[class]{
color: red;
}
/*[attribute=value] 有这个属性并且它的值完全等于value $('[class=value]')*/
[class='abc']{
color: green;
}
/*[attribute!=value] 有这个属性并且值不等于value $('[class!="abc"]') */
/*在css当中属性选择器是没有非*/
/* [class!='abc']{
color:blue;
}*/
/*[attribute^=value] 有这个属性并且属性值以value开头 $('[class^="abc"]')*/
[class^='abc']{
color: yellow;
}
/*[attribute$=value] 有这个属性并且这个属性的值要以value结尾 $('[class$="abc"]')*/
[class$='abc']{
color: pink;
}
/*[attribute*=value] 有这个选择器并且这个值包含value $('[class*="abcd"]')*/
[class*='abcd']{
color: black;
}
复制一下试试看吧！
伪类选择器
除了:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。
-
以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
-
先通过li来确定父元素，去找这个父元素的当中的子元素，再找到第几个子元素，判断是不是这个类型，如果不是则选择器没用，如果是则可以设置样式。
- E:first-child第一个子元素
- E:last-child最后一个子元素
- E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
- E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算
- E:empty 选中没有任何子节点的E元素（使用不是非常广泛）
- E:nth-child(even){};偶数行设置样式。
- E:nth-child(odd){}:奇数行设置样式。
/*empty本身就是空的意思 span:empty这是一个span标签并内容为空 则会被选中 */ span:empty { display: none; }- 注意：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效;n可以是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等; n一定要放在表达式的前面。
-
目标伪类
- E:target 结合锚点进行使用，处于当前锚点的元素会被选中;
/*目标伪类选择器，它选中的当前锚点*/ h2:target { color: green; }- E:not 排除 包含某个条件 选择器
伪元素选择器
- E::first-letter文本的第一个字母或字（如中文、日文、韩文等）;
/*注意要设置首字母首字必须是块级元素*/
span{
display: block;
}
span::first-letter{
color: red;
font-size: 50px;
}
li::first-letter{
color: red;
}
- E::first-line 文本第一行;
p::first-line{
color: green;
}
- E::before、E::after是一个行内元素，需要转换成块元素
- E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
- E::selection 可改变选中文本的样式;
p::selection{
background: pink;
color: blue;
/*不能设置字体大小*/
font-size: 40px;
}
- 注意：":" 与 "::" 区别在于区分伪类和伪元素。伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到。
颜色
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
- Red、Green、Blue、Alpha即RGBA
- Hue、Saturation、Lightness、Alpha即HSLA
- R、G、B 取值范围0~255
- H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
- S 饱和度 取值范围0%~100%
- L 亮度 取值范围0%~100%
- A 透明度 取值范围0~1
- 透明度比较补充：
- opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度;
- transparent 不可调节透明度，始终完全透明;
- RGBA、HSLA可应用于所有使用颜色的地方。
文本
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
- 水平偏移量,正值向右,负值向左,单位px;
- 垂直偏移量,正值向下,负值向上,单位px;
- 模糊度是不能为负值。
/*第二个li的文字有阴影 往左和上偏移 颜色是红*/
li:nth-child(2){
text-shadow: -3px -3px 5px red;
}
/*最后一个li设置 两个阴影*/
/*以英文逗号分隔*/
li:last-child{
text-shadow: 6px 6px 5px #000,-3px -3px 5px red,-9px -9px 5px green;
}
边框
- 百分比宽度的时候怎么防止溢出？box-sizing: border-box;
边框圆角(border-radius)
可分别设置长、短半径，以"/"进行分隔，遵循"1，2，3，4"规则，"/"前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),"/"后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4位置)。
//正圆形
border-radius: 50%;
border-radius: 100px;
border-radius: 100px 100px;
border-radius: 100px 100px 100px 100px;
border-radius: 100px 100px 100px 100px / 100px 100px 100px 100px;
边框阴影(box-shadow)
- 水平偏移量,正值向右,负值向左;
- 垂直偏移量,正值向下,负值向上;
- 模糊度是不能为负值;
- inset可以设置内阴影;
/*
1.x轴偏移
2.y轴偏移
3.阴影的模糊度
4.阴影的延伸(可选)
5.阴影的颜色
*/
box-shadow: 3px 3px 5px 10px #ccc;
边框图片(border-image)
- round和repeat之间的区别
- round 会自动调整尺寸，完整显示边框图片。
- repeat 单纯平铺多余部分，会被"裁切"而不能完整显示。
- 更改裁切尺寸:border-image-slice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3边框</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
ul {
width: 960px;
margin: 40px auto;
list-style: none;
background-color: #FFF;
}
li {
padding: 15px;
}
li:nth-child(2) {
width: 300px;
height: 150px;
/*
1.边框图片资源的路径
2.切割的尺寸
3.边框的宽度
4.边的平铺方式
*/
/*1.边框图片资源的路径*/
border-image-source: url("./images/border.png");
/*2.切割的尺寸*/
/* 切了4刀 上 右 下 左 单位是px但是默认都是不带参数*/
/**/
border-image-slice:38 38 27 27;
/*3.边框的宽度*/
border-image-width: 20px;
/*4.边的平铺方式*/
/* stretch 拉伸 把切割的九宫格当中的边对应的图标拉伸 */
/* round 环绕 会按照整数的图标来排列 不会损坏图标*/
/* repeat 平铺 从边的中线开始平铺 不会保证图标的完整性*/
border-image-repeat: round;
}
</style>
</head>
<body>
<ul>
<li>
<div class="border-image">
<img src="./images/border.png" alt="">
</div>
</li>
<li>
<div class="border-image"></div>
</li>
<li>
<div class="border-image"></div>
</li>
</ul>
</body>
</html>
注意点
- 默认字体大小是16px，间隙就是3px(文字的基线和图片的底线对齐)
- 去除图片间隙的方法：
- font-size:0px;
- img{display:block;};
- img{vertical-align:top};值可以是top,middle,bottom都可以（middle值表示居中对齐）
- 设置position:fixed后，元素的基准是以浏览器窗口为基准的。不设置的话是以body为基准的，body的宽高是由内容撑开的。
这次只介绍了CSS3的一部分内容，下节继续哈。如果本文有什么错误，欢迎留言指正，谢谢！如果您觉得还不错，记得收藏下,谢谢,多谢大家支持!
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
