CSS3新增属性大全!
1 CSS3 基本语法
1.1 CSS3 浏览器私有前缀
Chorme: -webkit-
Safari: -webkit-
IE; -ms-
Firefox: -moz-
Opera: -o-
1.2 CSS3 新增长度单位
rem: 根元素字体大小的倍数。注意与 em 的区别。
vw: 把视口宽度分为100份,指定占其中的多少份。注意与百分比的区别。
vh: 把视口高度分为100份,指定占其中的多少份。
vmax: 把视口宽和高中大等分为100份,指定占其中多少份。
vmin: 把视口宽和高中小等分为100份,指定占其中多少份。
1.3 CSS3 新增颜色设置方式
rgba(): 在rgb的基础上多了不透明度(opacity),取值范围 0 ~ 1 之间的小数(0:完全透明,1:完全不透明)。
hsl(): h:色相(0360);s:饱和度(0%100%);l:亮度(0%~100%)。
hsla() :在 hsl 的基础上多了不透明度。
2 CSS3 选择器
2.1 基本选择器(6个)
标签名选择器:
标签名 {}
类名选择器:
.类名 {}
ID选择器:
#ID名 {}
全局选择器:
* {}
并集选择器(多选择器)
选择器1,选择器2,选择器3 {}
交集选择器:
p.item {}
.item.current {}
2.2 层级选择器(4个)
后代元素选择器:
选择器1 选择器2 {}
子元素选择器:
选择器1>选择器2 {}
选择器1 > 选择器2 {}
选择后面相邻的一个兄弟元素:
选择器1+选择器2 {}
选择后面所有的兄弟元素:
选择器1~选择器2 {}
/* .nav 下除了第一 a,其他都被选择到了 */
.nav a+a {border-left: 1px solid #ccc;
}
2.3 属性选择器(5个)
[attrName]
选择拥有attrName 属性的元素。
[attrName="value"]
选择 attrName 属性的值是 value 的元素。
[attrName^="value"]
选择 attrName 属性的值以 value 开头的元素。
[attrName$="value"]
选择 attrName 属性的值以 value 结尾的元素。
[attrName*="value"]
选择 attrName 属性的值中包含 value 的元素。
2.4 伪类选择器
① 动态伪类选择器(5个)
:link 选择地址没有被访问过的超链接元素
:visited 选择地址被访问过的超链接元素
:hover 选择鼠标悬停在上面的元素。
:active 选择鼠标在上面并且按键按下不松手的元素
:focus 选择获取焦点的元素。
② 目标伪类选择器(1个)
:target 选择当前锚点指向的元素。
③ 语言伪类选择器 (1个,了解)
lang() 根据语言选择元素(lang 属性的值)
④ UI元素伪类选择器(3个)
:enabled 选择可以使用的表单控件(没有设置disabled 属性)
:disabled 选择不可以使用的表单控件(设置了disabled属性)
:checked 选择到被选中的单选按钮、复选框、下拉选项(option)
⑤ 结构伪类选择器(12个)
:root 选择到根元素
:empty 选择到既不能有文本内容也没有后代元素的元素:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第n个,n是个数字
:nth-last-child(n) 所有兄弟元素中的倒数第n个,n是个数字
:only-child 没有兄弟元素的元素:first-of-type 所有兄弟元素中同类型的第一个
:last-of-type 所有兄弟元素中同类型的最后一个
:nth-of-type(n) 所有兄弟元素中同类型的第n个,n是个数字
:nth-last-of-type(n) 所有兄弟元素中同类型的倒数第n个,n是数字
:only-of-type 没有同类型兄弟元素
⑥ 否定伪类选择器(1个)
:not(选择器) 排除满足小括号中选择器的元素
2.5 伪元素选择器(6个)
::first-letter 选择元素中第一字母
::first-line 选择元素中第一行
::after 给元素动态创建最后一个子元素
::before 给元素动态创建第一个子元素
::placeholder 用于设置输入框或文本域中placeholder属性设置的文字的样式
::selection 用于设置被鼠标选中的文字的样式
2.6 选择器的优先级(权重)
ID选择器 > 类名选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
3 CSS3 新增盒子模型相关样式
① box-sizing 属性
通过设置该属性,决定 width 和 height 设置的是内容的大小还是盒子的总大小。
值:
content-box,默认值,width 和 height 设置的是内容的大小。
border-box, width 和 height 设置的是盒子的总大小。
② 盒子阴影 box-shadow
box-shadow: 3px 2px; /*设置阴影的偏移位置, 颜色默认黑色*/
box-shaodw: 3px 3px 5px; /*设置阴影的偏移位置和模糊值*/
box-shaodw: 3px 3px 5px #f90; /*设置阴影的偏移位置和模糊值以及颜色*/
box-shadow: 3px 3px 10px 2px #f90; /*2px表示外延*/
box-shadow: 3px 3px 10px inset; /* inset 表示设置内阴影*/
box-shadow: 3px 3px 10px 2px #f90 inset;
/*给元素同时设置 多个阴影*/
box-shadow: 3px 0 2px cyan, 0 5px 2px pink,-5px 0 2px green,0 -5px 2px purple;
③ 不透明度 opacity
设置元素整体的不透名度,取值范围是 0 ~ 1 之间的小数,数值越大越不透明,0表示完全透明,1表示完全不透明。
4 CSS3 新增背景属性
4.1 新增属性
background-origin 设置背景图调整位置所在坐标系的原点
值: padding-box : 默认值,背景图位置原点在padding区域 content-box : 背景图位置原点在内容区域。 border-box : 背景图位置原点在边框上。
background-clip 裁剪背景图,设置什么范围内的背景图可见
值: border-box : 默认值,边框以及边框以内背景图可见。 padding-box : 内边距以及内边距以内背景图可见。 content-box : 仅内容区域上的背景图可见。 text : 只有文字上的背景图可见。需要设置私有前缀。
-webkit-background-clip: text;
background-size 调整背景图图片的大小
值: 第一种方式: 指定两个长度,第一个是背景图宽度,第二个背景图高度;如果写了一个长度,被当做宽度,背景图高度根据比例自动算。 第二种方式: 使用关键字:contain 优先保证背景图全部显示在元素上,可能会造成元素有空白cover 优先保证元素上都会显示背景图,可能会有小部分背景图不可见。推荐使用
4.2 background 复合属性
background: url(../images/bg05.jpg) no-repeat center/300px 300px;
复合属性的相关规则:
- background-size 复合到 background 中,需要写在 background-position 值的后面,用
/
隔开。- background-origin 和 background-clip 值是一样的关键字,设置一个被当做background-origin,设置两个(前面是origin,后面是clip)
4.3 多背景图
CSS3允许一个元素设置多个背景图片。
background: url(../images/bg03.jpg) no-repeat, url(../images/bg04.jpg) no-repeat right top/200px 200px,url(../images/bg05.jpg) no-repeat left center/300px 200px;
5 CSS3 新增边框属性
5.1 边框圆角
CSS 属性名 | 含义 | 值 |
---|---|---|
border-top-left-radius | 设置左上角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-top-right-radius | 设置右上角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-bottom-left-radius | 设置左下角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-bottom-right-radius | 设置右下角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-radius | 复合属性 | 长度,同时设置多个角 |
border-radius 属性值的设置规则:
设置正圆圆角:
1 个值: 表示 4 个角的半径。
2 个值: 第一个值表示左上和右下的半径,第二个值表示右上和左下的半径。
3 个值: 第一个值表示左上角的半径,第二个值表示右上和左下的半径,第三个值表示右下的半径。
4 个值: 分别表示 左上、右上、右下、左下 的半径。
设置椭圆圆角(x半径与y半径不一致)
使用
/
分别设置 x 半径和y半径,每一组都可以写 1 ~ 4 个值border-radius:20px / 40px; border-radius:20px 40px 50px 60px / 40px 30px 20px 10px; border-radius:100px / 40px 30px 20px 10px;
5.2 外轮廓
CSS 属性名 | 含义 | 值 |
---|---|---|
outline-width | 设置外轮廓宽度 | 长度 |
outline-color | 设置外轮廓颜色 | 颜色 |
outline-style | 设置外轮廓风格 | none、solid、dashed、double、dotted 等 |
outline | 复合属性 | 三个子属性的值 |
outline-offset | 设置外轮廓与边框的距离,默认是 0 | 长度 |
注意: outline-offset 不是 outline 的子属性!
6 CSS3 新增文本属性
CSS 属性名 | 含义 | 值 |
---|---|---|
text-decoration-line | 设置哪一种修饰线 |
none: 默认值,无修饰线 underline: 下划线 overline: 上划线 line-through:删除线 |
text-decoraiton-color | 设置修饰线颜色 | 颜色 |
text-decoration-style | 设置修饰线风格 |
solid:默认,实线 dashed:虚线 dotted:点线 double:双实线 wavy:波浪线 |
text-decoration | 复合属性 | 三个子属性的值 |
text-align-last | 设置最后一行文本的水平对齐方式 |
start:默认值,开始方向对齐 end:结束方向对齐 left:左对齐 right:右对齐 center:中间对齐 justify:两端对齐 |
white-space | 设置文本的换行方式 |
normal:默认值,默认的样式 pre:原格式显示 pre-wrap: 在pre的基础上增加了自动换行 pre-line: 在pre的基础上增加了自动换行但是会忽略多个空格。 nowrap:强制文本在一行显示 |
text-overflow | 设置文本的溢出方式 |
clip:默认,溢出的文本裁掉 ellipsis:文字过多,后面显示省略号。 |
text-shadow | 设置文本阴影 | 设置 2 ~ 4 个值,包括颜色、偏移位置、模糊值 |
注意:
- CSS3之后, text-align 属性的默认值不是 left 了,而是 start 。
- text-overflow 属性生效的前提是: ① 设置
overflow:hidden
② 需要设置white-space: nowrap
。
CSS3新增属性大全!相关推荐
- CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角.盒阴影.字阴影 人生没有白走的路,每一步都算数. 一.圆角 border-radius:; 取值px % border-radius: 50%; 画一个圆 二.盒阴影 box- ...
- HTML5新增标签及CSS3新增属性
一.h5新增标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
- css3新增属性有哪些?css3中常用的新增属性
** 一.css3新增边框属性 ** 1.css3新增属性之border-color:为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0 ...
- 不是css3新增的技术,css3新增属性有哪些?css3中常用的新增属性总结,分享
来提问这个问题的人都应该知道css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 % 这里说一下题外话,需要注意:"bor ...
- H5新增标签、CSS3新增属性总结
一.H5新增标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
- 【CSS3】CSS3背景相关属性大全
基本背景属性の使用 <!DOCTYPE html> <html><head><meta http-equiv="content-type" ...
- CSS3新增-属性(长度颜色背景)选择器-盒子模型
属性(长度颜色背景)选择器-盒子模型 1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: ...
- css3新增属性sticky
css3新增粘性定位属性sticky position属性中最有意思的就是sticky了,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top.left ...
最新文章
- python函数使用易错点_大部分人都会忽略的Python易错点总结
- educoder python入门之基础语法答案-Educoder Python入门之经典函数实例
- html如何将标题置顶,.Html 头部,标题
- mysql怎么查找列命令_MySQL查询命令-DQL
- Java StringBuffer相关解惑
- leetcode 罗马数字转整数
- JavaScript 循环
- 用TF实现线性回归模型。
- java分布式架构的发展
- 02-NLP-04基于统计的翻译系统-03-短语翻译表构造——短语抽取
- 食物链(扩展域并查集)
- c/c++入门教程 - 2.5 文件操作、fstream(write写文件、read读文件、ios::binary二进制文件读写)
- 基于MATLAB的机器人学、机器视觉与控制
- Linux Kernel Patched
- 申论公文题-宣传类-1
- 群晖NAS跨存储空间移动共享文件夹(NAS新增磁盘)
- Java构造方法以及构造方法的重载
- 五使用计算机上数学课英文,数学课用英语怎么说
- 海边的卡夫卡之 - kafka的基本概念以及Api使用
- 全面剖析ESP32创建Wi-Fi热点的过程
热门文章
- 高效利器!站群文章采集器让你轻松搞定内容收集
- 计算机图形学中向量点乘和叉乘的用途_向量的点乘和叉乘(转)
- 中文命名实体识别(tensorflow,BiLSTM+CRF)
- 企划学院游学活动“留余”在康百万庄园成功举行!
- vscode 安装koroFileHeader遇见的坑
- Apache2.4 + PHP8的安装(windows)【测试有效】【指路合集】
- 手机怎么拍照翻译?来试试这几款软件吧
- 学系统集成项目管理工程师(中项)系列28_后记
- 201226元件_看电阻数值
- OV2640灰度处理和软件二值化