前端笔记CSS3
CSS3
浏览器私有前缀
私有前缀 对应浏览器
-webkit- Chrome和Safari
-moz- Firefox
-ms- IE
-o- Opera
CSS3选择器
1.属性选择器
选择器 说明
E[attr^="xxx"] 选择元素E,其中E元素的attr属性是以xxx开头的任何字符
E[attr$="xxx"] 选择元素E,其中E元素的attr属性是以xxx结尾的任何字符
E[attr*="xxx"] 选择元素E,其中E元素的attr属性是包含xxx的任何字符
2.子元素伪类选择器
选择器 说明
E:first-child 选择父类元素下的第一个子元素(该子元素类型为E,以下类同)
E:last-child 选择父元素下的最后一个子元素
E:nth-child(n) 选择父元素下的第n个子元素或奇偶元素,n取值有三种:数字、odd和even,其中n从1开始
E:only-child 选择父类元素下唯一的子元素,该父元素只有一个子元素
3.结构伪类选择器
4.UI伪类选择器(单冒号是伪类,双冒号伪元素)
-
:focus
具有“获取焦点”和“失去焦点”特点的元素只有两种
1)表单元素(按钮、单选框、复选框、文本框、下拉列表)
2)超链接
判断一个元素是否具有焦点很简单,我们打开一个页面后按Tab键,能够被选中的就是带有焦点特性的元素。
input:focus
{
outline:1px solid red;
} -
::selection
可以使用::selection选择器来定义页面中被选中文本的样式
::selection
{
color:white;
} -
:checked(暂时只有Opera浏览器支持:checked,兼容性很差)
我们可以使用:checked选择器来定义单选框或复选框被选中时的样式。
input:checked{
} -
:enabled和:disabled
在CSS3中,我们可以使用:enabled选择器来定义表单元素“可用”时的样式,也可以使用:disabled选择器来定义表单元素“不可用”时的样式。
input:enabled
{
outline:1px solid red;
}
input:disabled
{
} -
:read-write和:read-only
在CSS3中,我们可以使用:read-write选择器来定义表单元素“可读写”时的样式,也可以使用:read-only选择器来定义表单元素“只读”时的样式。
input:read-write
{
outline:1px solid red;
}
input:read-only
{
}
5.其他伪类选择器
-
:root
我们使用:root选择器来定义整个页面的背景色为灰色,然后将body元素的背景色定义为红色。其中,下面两句代码是等价的
:root{}
html{} -
:empty
我们可以使用:empty选择器来选择一个“不包含任何子元素和内容”的元素,也就是选择一个空元素。
td:empty
{
}像HTML5的2048小游戏就可以用到:empty选择器。此外在实际开发中,对于表格中内容为空的单元格,我们往往为其设置不同的颜色,这样也会使得用户体验更好
-
:target
我们可以:target选择器来选取页面中的某一个target元素。所谓的target元素,指的是id被当成页面的锚点链接来使用的元素
:target h3
{
color:red;
}当我们点击锚点链接时,对应的target元素下面的h3字体颜色就会变成红色。在实际开发中,:target选择器一般都是结合锚点链接来使用的,这样可以实现用户体验更好的导航效果。
-
:not()
我们可以使用:not()选择器来选取某一个元素之外的所有元素
ul li:not(.first)
{
color:red;
}
文本样式
属性 说明
text-shadow 文本阴影
text-stroke 文本描边
text-overflow 文本溢出
word-wrap 强制换行
@font-face 嵌入字体
-
text-shadow文本阴影
text-shadow:x-offset y-offset blur color;
凹凸效果
div
{
text-shadow:-1px 0 0 #333,
0 -1px 0 #333,
1px 0 0 #333,
0 1px 0 #333;
}定义多个阴影
我们可以使用text-shadow属性为文本定义多个阴影,并且针对每个阴影使用不同的颜色。当定义多个阴影时,text-shadow属性是一个以英文逗号隔开的值列表
text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px biue;
-
text-stroke文本描边
text-stroke:width color;
-
text-overflow文本溢出
text-overflow:取值;
属性取值:ellipsis文本溢出,显示省略号,并隐藏多余的文字
clip文本溢出时,不显示省略号,而是将溢出的文字裁切掉
实际上,单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果,我们还需要结合white-space和overflow这两个属性来实现,下面是完整的语法:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;overflow:hidden;white-space:nowrap;和text-overflow:ellipsis;这三个是固定搭配的,我们直接搬过去用就可以了
-
强制换行:word-wrap、word-break
word-warp属性有两个取值
word-wrap:取值; //normal 自动换行(默认值) break-word强制换行
word-break属性有三个取值
word-break:取值; //normal 自动换行(默认值) break-all允许在单词内换行 keep-all只能在半角空格或连字符处换行
-
嵌入字体:@font-face
我们可以使用@font-face方法来加载服务器端的字体,从而使得所有用户都能正常显示该字体。
@font-face
{
font-family:字体名称;
src:url(文件路径);
}
颜色样式
-
opacity
opacity:数值;
opacity属性取值是一个数值,取值范围为0.0~1.0。其中0.0表示完全透明,1.0表示完全不透明
-
rgba颜色
语法
rgba(r,g,b,a)
R,指的是红色值(Red);G,指的是绿色值(Green);B,指的是蓝色值(Blue);A,指的是透明度(Alpha)
padding-right: 0.1px;">color:rgba(255,0,0,1.0) //字体
-
CSS3渐变
线性渐变
background:linear-gradient(方向,开始颜色,结束颜色)
线性渐变的“方向”取值有两种:一种是使用角度(单位为deg);另外一种是使用关键字,如下表所示。
属性值 对应角度 说明
to top 0deg 从下到上
to bottom 180deg 从上到下(默认值)
to left 270deg 从右到左
to right 90deg 从左到右
to top left 无 从右下角到左上角(斜对角)
to top right 无 从左下角到右上角(斜对对角) -