css层叠样式表
2019-01-21 16:50:16 54 举报AI智能生成
css 与 css3
作者其他创作
大纲/内容
css层叠样式表
css3边框
border-radius 阴影
h-shadow 必须，水平阴影的位置，允许负值
v-shadow 必选，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选。阴影的颜色
inset 可选，将外部阴影（outset）改为内部阴影
box-shadow 圆角
length 定义圆角形状
% 圆角形状
有固定的高度与宽度，就可以设置50%，就是正圆
border-image
border-image-source 边框的图片路径
border-image-slice 图片边框向内偏移
border-image-width 边框的宽度
border-image-outset 图像区域超出边框的量
border-image-repeat 边框是否平铺(repeated)、铺满(rounded)、拉伸(stretched)
css3 背景
background-size 背景图片的尺寸
px % 只设一个值，第二个值默认auto
cover 背景扩展至足够大，背景完全覆盖背景区域
contain 最大尺寸，宽度与高度完全适应内容区域
background-origin 背景图片的定位区域
padding-box 背景图像相对于内边距框来定位
border-box 图像相对于边框盒来定位
content-box 图像相对于内容框来定位
background-clip
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边框
content-box 背景被裁减到内容框
css文本效果
text-shadow
文本阴影
h-shadow 必需，水平，可负值
v-shadow 必需，垂直，可负值
blur 可，模糊的距离
color 可，阴影的颜色
word-wrap
word-wrap:break-word 允许对长单词进行拆分，并换行到下一行
normal 只在允许的段字点换行
hanging-punctuation
规定标点符是否位于线框之外
punctuation-trim
是否对标点字符进行修剪
text-align-last
设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis
向元素的文本应用重点标记以及重点标记的前景色
text-justify
auto 浏览器决定齐行算法
none 禁用齐行
inter-word 增加、减少担此间的间距
inter-ideograph 用表意文本来排齐内容
inter-cluster 只对不包含内部单词间隔的内容
distribute 类似报纸版面
kashida 通过拉伸字符来排齐内容
text-outline
文本的轮廓
thickness 必需，轮廓的粗细
blur 可，轮廓的模糊半径
color 必需，轮廓的颜色
text-wrap
文本的换行规则
normal 允许的换行点进行换行
none 不换行，元素无法容纳的文本会溢出
unrestricted 在任意两个字符间切换
suppress 压缩元素中的换行
text-overflow
当文本一处包含元素是发生的事情
clip 修剪文本
ellipsis 省略符号来代表被修剪的文本
string 给定的字符串来代表被修剪的文本
word-break
规定非中日韩文本的换行规则
normal 浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连子符出换行
kephenate 在恰当的段子点进行换行
css字体
@font-face
2D转换
transform 属性向元素应用2D或3D转换
none 不进行转换
translate()
元素从其当前位置移动，根基给定的left（x坐标）和top（y坐标）位置参数
font color=\"#c41230\
rotate()
元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转
transform:rotate(30deg) 旋转30度
scale()
元素的尺寸会增加或减少，根据给定的宽度（x轴）和高度（y轴）
skew()
元素翻转给定的角度，根据给的水平线（x轴）和垂直线（y轴）
font color=\"#f15a23\
matrix()
定义2D转换，所有的元素组合在一起，旋转、缩放、移动、倾斜元素
定义3D转换，使用16个值
perspective(n) 为3d转换元素定义透视视图
transform-origin 属性
transform:rotate(45deg); transform-origin:20% 40%;
不同浏览器的兼容前缀
chrome 和 safari -webkit-
ie9 -ms-
opear -o-
firefox -moz-
3D转换
transform:rotateX（120deg); 元素围绕其x轴以给定的度数进行选择
transform-origin 允许你改变被转换元素的位置
transform-style 规定嵌套元素如何在3d空间显示
perspective 规定3d元素的透视效果
perspective-origin 规定3d元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见
css3 过渡
transition:width 2s
如果时长未规定，则不会有过渡效果，因为默认值为0
transition 简写属性，用于在一个属性中设置4个过渡属性
transition-property：width 规定应用过渡的css属性的名称
transition-timing-function:linear 规定过渡效果的时间线。默认是ease
linear 规定以相同的速度开始至结束的过渡效果
ease 慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 以慢速开始的过渡效果
ease-in-out 以慢速开始和结束的过渡效果
transition-delay 规定过渡效果何时开始，默认是0
css3 动画
规定动画的名称
规定动画的时长
@keyframes 规定动画
@keyframes animationname{keyframes-selector{css-style;}}
animation 必须。定义动画名称
keyframes-selector 必须，动画时长的百分比
0-100%
form(与0%相同)
to（与100%相同）
css-style必须，一个或多个合法的css样式属性
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-duration 规定动画完成一个周期花费的秒或者毫秒，默认是0
animation-timing-function 规定动画的速度曲线，默认是ease
animation-delay 规定动画何时开始，默认是0
animation-iteration-count 规定动画被播放的次数，默认为1
animation-direction 规定动画是否在下一周期逆向的播放，默认是normal
animation-play-state 规定动画是否正在运行或暂停，默认是running
animation-fill-mode 规定对象动画时间之外的状态
css3 多列
column-count
-moz-column-count:3; 把一段文本平均分为三列
column-gap
规定列之间的间隔
column-rule
设置列之间的宽度，样式和颜色
column-fill
如何填充列
balance 默认，列进行协调
auto 显示一条（不分列）列长度各有不同
column-rule-color
column-rule-style
column-rule-width
column-span
元素应该横跨的列数
column-width
列的宽度
columns
-width -count 的简写形式
css3 用户界面
resize
是否可由用户对元素的尺寸进行调整
box-sizing
属性允许您以确切的方式定义适应某个区域的具体内容。
outline-offset
属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
appearance
元素设置为标准用户界面元素的外观
icon
作者提供使用图标化等价物来设置元素样式的能力
nav-down
导航键时向何处导航
类型
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
li strong{}
后代选择器
后代选择器可以选择作为某元素后代的元素。
h1 em {color:red;}
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
table.company td > p
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
id选择器
只能在文档中使用一次
不能使用id词列表
id能包含更多含义
区分大小写
类选择器
属性与属性值必须完全匹配
[abc^=\"def\"] 选择abc属性值已“def”开头的所有元素
[abc$=\"def] 选择abc属性值已“def”结尾的所有元素
[abc*=\"abc]选择abc属性值中包含子串“def”的所有元素
属性选择器
对带有指定属性的 HTML 元素设置样式。
[attribute]
用于选取带有指定属性的元素
a[target]{...}
[attribute=value]
指定属性和值得元素
a[target=\"_blank\"]{...}
[attribute~=value]
包含指定词汇的元素
[attribute |= value]
指定值开头的属性值元素，该值必须是个单词
[class |= top]{} <div class=\"top-class\">
[arrribute^=value]
匹配属性值以指定值开头的每个元素
[arrtibute &= value]
匹配属性值以指定值结尾的每个元素
[attribute *= vlaue]
匹配属性值中包含指定值得每个元素
元素选择器
选择器分组
通配符选择器
*{...}
结合元素选择器
p.important{...}
伪类选择器
超链接
a:link
未被访问
a:visited
被访问的连接
a:hove
鼠标悬浮在元素上方时，向元素添加样式
a:active
被激活的元素添加样式
超链接-：focus
拥有键盘输入焦点的元素添加样式
:first-child(首个子对象)
向元素的第一个元素添加样式
:last-child(最后的对象)
:lang(语言)
带有指定lang属性的元素添加样式
:first-line伪元素
用于向文本的首航设置特殊样式
:first-letter
伪元素用于向文本的首字母设置特殊样式
:before
可以再元素的内容前面插入新内容
:after
伪元素可以在元素的内容之后插入内容
:first-of-type
父元素的首个 <p> 元素的每个 <p> 元素
:only-of-type
父元素唯一的 <p> 元素的每个 <p> 元素
:only-child
父元素的唯一子元素的每个 <p> 元素
:nth-child(2)
父元素的第二个子元素的每个 <p> 元素
:root
文档的根元素
:empty
没有子元素的每个 <p> 元素（包括文本节点）
:disabled
每个禁用的
:checked
每个被选中的
:not(selector)
选择非<>元素的
::selection
选择被用户选取的
插入样式表
外部样式表
<link rel=\"stylesheet\" type=\"text/css\" href=\"##\"/>
内部样式表
<style type=\"text/css\">...</style>
内联样式
<p style=\"...\"></p>
多重样式
h3{...}
样式
背景
背景色 background-color:
transparent 透明背景
color_name red
hex_number #ff0000
inherit 从父元素继承背景属性设置
背景图像 background-image:
none 默认值
背景重复 background-repeat
repeat 背景图像将在垂直方向和水平方向重复
repeat-x \t背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
背景定位 background-position
top left
如果仅规定了一个关键词，那么第二个值是center
默认值：0% 0%
x% y%
第一个值是水平位置，第二个值是垂直位置
左上角是0% 0%，右下角100% 100%；
如果仅规定了一个值，另一个值将是50%；
xpos ypos
左上角0 0，单位是像素（0px 0px）或任何其他的css单位
仅规定了一个值，另一个值将是50%
可以混合使用%和position值
关键字
center
center center
top
button
right
left
背景关联
文档比较长，当文档向下滚动时，文档滚动到超过图像的位置时，图像就会消失。
background-attachment 声明图像对于可视区域时固定的fixed
文本
text-indent 第一行都可以缩进一个给定长度，甚至是负值（像素、百分比）
text-align 元素中的文本行互相之间的对齐方式
justify
word-spacing 字间距
默认自 normal 与设置值为0是一样的
正长度值 字间距会增加
负长度值，字间距会拉近
letter-spacing 字母间距
normal 默认
length 定义单词间得固定空间
inherit 继承
letter-transform 字符转换
none 默认无
uppercase 定义仅有大写字母
lowercase 仅有小写字母
capitalize 文本中的每个单词以大写字母开头
inherit 继承
text-decoration 文本装饰
none 默认
underline 文本下的一条线
line-through 定义穿过文本下的一条线
bink 闪烁的文本
white-space 处理空白符
pre 空白会被浏览器保留
nowrap 文本不会换行，文本会在同一行上继续
pre-wrap 保留空白序列，但是正常的进行换行
pre-line 合并空白符序列，但是保留换行符
direction 文本方向
ltr 默认 从左到右
rtl 从右到左
line-height 设置行高
number lenght %
字体
/*font-family: serif;*/ /*类似于宋体*/\t\t\tfont-family: sans-serif; /*类似于微软雅黑 默认字体*/\t\t\t/*font-family: monospace;*/ /*有棱角*/\t\t\t/*font-family: cursive;*/ /*字体圆润*/\t\t\t/*font-family: fantasy;*/ /*圆润 英文粗体*/
字体风格 font-style
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
字体变形 font-variant
small-caps 显示小型大写字母
字体加粗 font-weight
bold 粗体
bolder 更粗
lighter 更细
字体大小 font-size
px %
xx-small x-small small medium large x-large xx-large
smaller 比父元素更小的尺寸
larger 比父元素更大的尺寸
连接
a:link 普通的，未被访问的
a:visited 用户已访问
a:hover 鼠标指针位于连接上方
a:active 连接被惦记的时刻
列表
list-style-type
none 无标记
disc 默认，实心圆
sircle 空心圆
square 实心方块
decimal 标记是数字
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号
georgian 乔治亚编号
cjk-ideographic 简单的表意数字
list-style-image
url 图像路径
none 默认，无图形
list-style-position
inside 列表项目标记放置在文本内，且环绕文本根据标记对齐
outside 默认值，保持标记位于文本的左侧
inherit
表格
文本对齐
text-align: left right center
vertical-align top middle bottom
border-collapse 表格合并为单一的边框
separate 边框会被分开
collapse 合并为单一的边框
border-spacing 分割单元格边框的距离
lenght
caption-side 表格标题的位置
top 默认，标题定位在表格智商
bottom 表格标题定位在表格之下
empty-cells 是否显示表格中的空单元格
hide 不在空单元格周围绘制边框
show 在空单元格周围绘制边框
talbe-layout 显示单元、行和列的算法
automatic 默认，列宽度由单元格内容设定
fixed 列宽由比哦啊个宽度和列宽度设定
轮廓
outline 绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。
outline
outline-color
outline-style
dotted 点状轮廓
dashed 虚线轮廓
solid 实线轮廓
double 双线
groove inset 3D凹槽
ridge outset 3D凸槽
outline-width
thin 细轮廓
medium 默认、规定中等轮廓
thick 粗线轮廓
length 数值
框模型
padding
margin
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
border
定位
position
static 没有定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
display
block 块级元素
inline 默认，内联元素
inline-block 行内块元素
list-item 列表显示
run-in 根据上下文作为块级元素或内联元素
compact
marker
table 块级表格来显示
inline-table 内联表格来显示
table-row-group 一个或多个行的分组来显示 tbody
table-header-group 一个或多个行的分组来显示 thead
table-footer-group 一个或多个行的分组来显示 tfoot
table-row 一个表格行来显示 tr
table-column-group 一个或多个列的分组来显示 colgroup
table-column 一个单元格来显示 col
table-cell 一个单元格来显示 td th
table-caption 表格标题 caption
float
left 左浮动
right 右浮动
none 默认，不浮动
clear 清理浮动
left 清理左浮动
right 清理右浮动
both 左右两侧都不浮动
none 允许浮动
overflow
visible 默认值，不会被修建
hidden 被修剪
scroll 滚动条
auto 自动显示
clip 属性剪裁绝对定位元素
clip=\
vertical-align 垂直对齐方式
baseline 默认，元素放置在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 元素的顶端与父元素字体的顶端对齐
middle 元素放置在父元素的中部
text-bottom 元素的底端与父元素字体的底端对齐
length
%
z-index 堆叠顺序
仅能在定位元素上奏效
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
尺寸
height
元素的高度
line-height
设置行高
max-height
最大高度
max-width
最大宽度
min-height
最小高度
width
宽度
单位
% 百分比
in 英寸
cm 厘米
mm 毫米
em 等于当前的字体尺寸
ex 一个ex是一个字体的x-height.
pt 磅（1pt等于1/72英寸）
pc 12点活字（1pc等于12点）
px 像素
分类属性
clear
清理浮动
cursor
指向某元素之上显示的指针类型
url 自定义光标
default 默认光标（箭头）
auto 默认，浏览器箭头
crosshair 十字线
pointer 手型
move 移动
e-resize 指示光标的边缘可被向右移动
ne-resize ...向上及向右移动
nw-resize ...向上及向左移动
n-resize ...向上移动
se-resize ...向下及向右移动
sw-resize ...向下及向左移动
s-resize ...向下移动
w-resize ...向左移动
text 光标呈现文本形式
wait 程序正忙（沙漏）
help 帮助（问号或气球）
是否及如何显示元素
浮动
visibility
元素是否可见或不可见
visible 默认，元素可见
hidden 不可见
collapse 在表格元素中使用时，此值可删除一行或一列，但是他不会影响表格的布局。
css图像
透明度
opacity:0.4
filter:alpha(opacity=40)
@media
规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同媒介。
all 所有媒体
sural 语言和音频合成器
braille 盲人用点字法触觉回馈设备
embossed 分页的盲人用点字法打印机
handheld 小的手持设备
print 打印机
projection 用于方案展示，幻灯片
screen 电脑显示器
tty 电传打字机和终端
tv 电视设备
0 条评论
回复 删除
下一页
