CSS常用属性及CSS3新属性(关键词)速查表CSS初学者必备

CSS常用关键词速查表(CSS3新属性部分…)

opacity:0.6filter:opacity(50%)
不透明度
border-radius:4pxborder-radius:50%
设置圆角
box-sizing:border-box
盒尺寸含边框
outline-offset:15px
轮廓线偏移
box-shadow:5px 5px 5px #ccc
块阴影
text-shadow:1px 1px 1px #999
文字阴影
@keyframes name {x% { …… } x% { …… }}
定义动画
animation:name 3s ease-in infinite
绑定动画常用
animation-direction:alternate
动画反向循环
animation-fill-mode:forwards
动画末帧定格
columns:200px 3
多列分布常用
column-rule:3px dotted #333
多列分布样式
transition:all 0.8s linear
过渡简写常用
linearease-inease-outease-in-out
时间曲线常用
background-size:40% 100%
背景填充尺寸
background-origin:content-box
背景定位区域
transform:translate(50px,100px)
水平垂直移动
transform:rotate(60deg)
指定角度旋转
transform:scale(0.8,2)
设置尺寸缩放
transform:skew(60deg,20deg)
指定角度翻转
transform:rotateX(40deg)
围绕X轴旋转
transform:rotateY(20deg)
围绕Y轴旋转
transform-origin:20px 30px 15px
设置变换原点
backface-visibility:hidden
旋转背面隐藏
@font-face { …… }
自定义字体
unicode-range:U+201c
指定字符字体
@media screen and(max-width:768px) { …… }
媒体查询(<)
@media screen and(min-width:320px) { …… }
媒体查询(>)
linear-gradient(to right,red 30%,blue 60%)
线性渐变常用
radial-gradient(100px,red 30%,blue 40%)
径向渐变常用

CSS常用关键词速查表(CSS1-CSS2部分…)

width:300pxwidth:100%
宽度
height:300pxheight:100%
高度
max-width:300pxmin-width:200px
最大最小宽度
max-height:300pxmin-height:200px
最大最小高度
background:#fff url(img.png) repeat 0 5px
背景简写常用
background-color:rgba(212,0,20,0.5)
背景透明常用
background-attachment:fixed
设置背景固定
color:redcolor:#f8f8f8
文字颜色
margin:6pxmargin:3px 4px 5px 6px
外边距
padding:6pxpadding:3px 4px 5px 6px
内部填充距离
font-family:"Microsoft YaHei",Arial
字体定义
font-size: 16pxfont-size:1.5rem
字号大小
font-weight:normalfont-weight:bold
设置字体加粗
font-style:italicnormal
设置字体倾斜
font:italic bold 16px/24px arial,verdana
字体简写常用
line-height:150%line-height:1.825px
文本行间距
overflow:hidden
设置溢出隐藏
overflow-x:scrolloverflow-y:scroll
出现滚动条
text-indent:2emtext-indent:15px
文字缩进
text-overflow:ellipsis
文本溢出裁剪
color:inheritpadding:inherit
设置属性继承
text-align:centertext-align:right
文本水平对齐
text-decoration:none
去掉下划线
text-decoration:underline
添加下划线
word-break:break-all
单词内换行
white-space:nowrap
强制不换行
list-style-position:inside
列表标记位置
list-style-type:none
清除列表符号
border:1px dashed #ccc
虚线边框
border:3px solid #666
实线边框
vertical-align:middlevertical-align:top
设置垂直对齐
border-collapse:collapse
折叠表格边框
display:none
完全隐藏元素
visibility:hidden
隐藏保留空间
display:inline
定义行内元素
display:block
定义为块元素
display:inline-block
定义为行内块
display:tabledisplay:table-cell
定义为表格
position:relative
设置相对定位
position:absolute
设置绝对定位
z-index:2z-index:-1
设置层叠顺序
top:0bottom:0left:0right:5px
上下左右偏移
float:leftfloat:right
向左向右浮动
clear:bothoverflow:hidden
消除浮动影响
cursor:pointercursor:default
改变鼠标图案
letter-spacing:1pxword-spacing:2px
字 / 词间距
counter-reset:section
创建计数器
counter-increment:section
计数器增量

常用CSS选择器速查表(简单选择器 属性选择器 结构性伪类选择器

Selector
For example
该选择器示例的含义描述
CSS版本
.class
.main_wrap
选择 class="main_wrap" 的所有元素
CSS1
#id
#sidebar
选择 id="sidebar" 的元素
CSS1
element
div
选择所有div标签的元素
CSS1
element1,element2
.box,span
选择所有 class="box" 的元素和所有 <span> 元素
CSS1
element element
ul li
选择 <ul> 元素内部的所有 <li> 元素
CSS1
element>element
div>strong
选择父元素为 <div> 元素的所有 <strong> 元素
CSS2
element+element
div + p
选择紧接着 <div> 元素之后的所有 <p> 元素
CSS2
[attribute]
[target]
选择带有 target 属性所有元素
CSS2
[attribute=value]
[target=_blank]
选择 target="_blank" 的所有元素
CSS2
[attribute~=value]
[title~=my]
选择 title 属性包含单词 "my" 的所有元素
CSS2
[attribute|=value]
[lang|=en]
选择 lang 属性值以 "en" 开头的所有元素
CSS2
:link
a:link
选择所有未被访问的链接
CSS1
:visited
a:visited
选择所有已被访问的链接
CSS1
:active
a:active
选择活动链接(鼠标点击或右击时)
CSS1
:hover
a:hover
选择鼠标指针指向时的链接
CSS1
:focus
input:focus
选择获得焦点的 input 元素
CSS2
:first-letter
p:first-letter
选择每个 <p> 元素的首字母
CSS1
:first-line
p:first-line
选择每个 <p> 元素的首行
CSS1
:first-child
p:first-child
选择属于父元素的首个子元素的每个 <p> 元素
CSS2
:before
span:before
在每个 <span> 元素的内容之前插入内容
CSS2
:after
span:after
在每个 <span> 元素的内容之后插入内容
CSS2
element1 ~ element2
p ~ ul
选择前面有 <p> 元素的每个 <ul> 元素
CSS3
[attribute^=value]
a[src^="https"]
选择其 src 属性值以 "https" 开头的每个 <a> 元素
CSS3
[attribute$=value]
a[src$=".pdf"]
选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
CSS3
[attribute*=value]
a[src*="abc"]
选择其 src 属性中包含 "abc" 子串的每个 <a> 元素
CSS3
:first-of-type
p:first-of-type
选择属于其父元素的首个 <p> 元素的每个 <p> 元素
CSS3
:last-of-type
p:last-of-type
选择属于其父元素的最后 <p> 元素的每个 <p> 元素
CSS3
:only-of-type
p:only-of-type
选择属于其父元素唯一的 <p> 元素的每个 <p> 元素
CSS3
:only-child
p:only-child
选择属于其父元素的唯一子元素的每个 <p> 元素
CSS3
:nth-child(n)
p:nth-child(3)
选择属于其父元素的第三个子元素的每个 <p> 元素
CSS3
:nth-last-child(n)
p:nth-last-child(3)
选择属于其父元素倒数第三个子元素的每个 <p> 元素
CSS3
:nth-of-type(n)
p:nth-of-type(3)
选择属于其父元素第三个 <p> 元素的每个 <p> 元素
CSS3
:nth-last-of-type(n)
p:nth-last-of-type(3)
选择属于其父元素倒数第三个 <p> 元素的每个 <p> 元素
CSS3
:last-child
p:last-child
选择属于其父元素最后一个子元素每个 <p> 元素
CSS3
:root
:root
选择文档的根元素(在HTML中根元素就是html元素)
CSS3
:empty
div:empty
选择没有子元素的每个 <div> 元素(包括文本节点)
CSS3
:target
#news:target
选择当前活动的 #news 元素
CSS3
:enabled
input:enabled
选择每个启用的 <input> 元素
CSS3
:disabled
input:disabled
选择每个禁用的 <input> 元素
CSS3
:checked
input:checked
选择每个被选中的 <input> 元素
CSS3
:not(selector)
:not(p)
选择非 <p> 元素的每个元素
CSS3
::selection
::selection
选择被用户选取的元素部分
CSS3
DIV+CSS基础 DIV+CSS技巧 CSS3基础 建站经验技巧 实用资源下载