css3常用方法以及css3选择器
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
- border-radius
- box-shadow
- border-image
属性 | 描述 | CSS |
border-image | 设置所有 border-image-* 属性的简写属性。 | 3 |
border-radius | 设置所有四个 border-*-radius 属性的简写属性。 | 3 |
box-shadow | 向方框添加一个或多个阴影。 | 3 |
- background-size
- background-origin
属性 | 描述 | CSS |
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
- text-shadow
- word-wrap
属性 | 描述 | CSS |
hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
text-outline | 规定文本的轮廓。 | 3 |
text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
text-shadow | 向文本添加阴影。 | 3 |
text-wrap | 规定文本的换行规则。 | 3 |
word-break | 规定非中日韩文本的换行规则。 | 3 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
描述符 | 值 | 描述 |
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
ormal italic oblique |
可选。定义字体的样式。默认是 "normal"。 |
font-weight |
normal bold 100 200 300 400 500 600 700 800 900 |
可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
- translate()
- rotate()
- scale()
- skew()
- matrix()
属性 | 描述 | CSS |
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
函数 | 描述 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
- rotateX()
- rotateY()
属性 | 描述 | CSS |
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
perspective | 规定 3D 元素的透视效果。 | 3 |
perspective-origin | 规定 3D 元素的底部位置。 | 3 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
函数 | 描述 |
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
属性 | 描述 | CSS |
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
- 规定动画的名称
- 规定动画的时长
- column-count
- column-gap
- column-rule
属性 | 描述 | CSS |
column-count | 规定元素应该被分隔的列数。 | 3 |
column-fill | 规定如何填充列。 | 3 |
column-gap | 规定列之间的间隔。 | 3 |
column-rule | 设置所有 column-rule-* 属性的简写属性。 | 3 |
column-rule-color | 规定列之间规则的颜色。 | 3 |
column-rule-style | 规定列之间规则的样式。 | 3 |
column-rule-width | 规定列之间规则的宽度。 | 3 |
column-span | 规定元素应该横跨的列数。 | 3 |
column-width | 规定列的宽度。 | 3 |
columns | 规定设置 column-width 和 column-count 的简写属性。 | 3 |
- resize
- box-sizing
- outline-offset
- 轮廓不占用空间
- 轮廓可能是非矩形
属性 | 描述 | CSS |
appearance | 允许您将元素设置为标准用户界面元素的外观 | 3 |
box-sizing | 允许您以确切的方式定义适应某个区域的具体内容。 | 3 |
icon | 为创作者提供使用图标化等价物来设置元素样式的能力。 | 3 |
nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 3 |
nav-index | 设置元素的 tab 键控制次序。 | 3 |
nav-left | 规定在使用 arrow-left 导航键时向何处导航。 | 3 |
nav-right | 规定在使用 arrow-right 导航键时向何处导航。 | 3 |
nav-up | 规定在使用 arrow-up 导航键时向何处导航。 | 3 |
outline-offset | 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 | 3 |
resize | 规定是否可由用户对元素的尺寸进行调整。 | 3 |
选择器 | 例子 | 例子描述 | CSS |
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 <p> 元素。 | 1 |
element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
:link | a:link | 选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active | a:active | 选择活动链接。 | 1 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
:before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
:disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
转载于:https://www.cnblogs.com/lihaolh/p/6773172.html
css3常用方法以及css3选择器相关推荐
- 【前端】【html5/css3】前端学习之路(二)(CSS3新选择器/CSS3盒模型/CSS3过渡效果)
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
- CSS3新增特性:选择器、盒子模型、其他属性
目录 1. CSS3现状 2. 新增选择器 2.1 属性选择 2.2 结构伪类选择 2.3 伪元素选择器(重点) 2.3.1使用场景 3. 盒子模型 4. css3的其他特性 4.1 css3滤镜fi ...
- CSS3新特性——新增选择器,2D/3D转换,动画
CSS3新特性--新增选择器,2D/3D转换,动画 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
- html5新增的伪类选择器有,CSS3新增了哪些选择器?(属性、结构伪类、伪元素选择器)...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
- html伪类选择器怎么使用,CSS3 :default伪类选择器使用简介
一.CSS3 :default伪类选择器简介 CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素. 举个例子,一个下拉框,可能有多个选项,我们默认会让某个 处于 sel ...
- CSS3新特性(属性选择器 、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀)
这里写目录标题 一.CSS3 属性选择器 二.CSS3 结构伪类选择器 三. CSS3 伪元素选择器 四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
- css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
- 【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现 一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
- html渐变色CSS3 渐变,如何实现css3渐变色,css3渐变色怎么写
原标题:如何实现css3渐变色,css3渐变色怎么写 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS ...
最新文章
- pandas.series的数据定位为什么用两个左中括号[[
- Oculus除创始人之外的第一位员工离职
- 近邻取样插值和其速度优化
- 2.5 学习词嵌入-深度学习第五课《序列模型》-Stanford吴恩达教授
- 运行android模拟器,emulator: ERROR: x86 emulation currently requires hardware acceleration!
- 前OnePlus视觉设计师蔡孝永:视觉设计师都在想些什么?
- 在 Android 应用程序中使用 Internet 数据
- google drive的压缩包直接解压到google drive
- CVPR 2020丨微软亚洲研究院精选论文一览
- Mybatis解析mapper
- python100例详解-几个小例子给你讲解Python中类的描述符
- C++ #include iostream #include iostream.h #include string.h区别及作用
- java对象复制_Java对象的深层复制与浅层复制
- jQuery ajax 文件上传携带附加参数
- MFC入门到精通1-创建项目
- vue优化技巧之Object.freeze()
- python md5解密方法与技巧_python ---- 爬取 md5解密结果 的小脚本
- 多目标、多阶段、多层次的强化学习合作方法
- 上海职业学校计算机证书查询,证书查询
- 使用OpenCV合成训练图片,同时生成labelme兼容格式的标注文件
热门文章
- linux定时任务crond
- 使用phpmaill发送邮件的例子
- C# 计算时间差 用timespan函数
- 2月国内操作系统市场份额:Windows XP持续下降
- 实用 —— PowerCLI (一)
- Hibernate随机获取指定范围内的指定条目的记录
- 词语搜索算法思想 - 第五步 结构实现
- 如何提高网站收录及排名的方法
- 2007注册会计师考试
- 编写python程序、计算账户余额_小明有20w存款存在余额宝中,按余额宝年收益为3.35%计算,用Python编写程序计算,多少年后小明的存款达到30w?...