CSS3
2016-10-20 20:29:18 32 举报
AI智能生成
CSS 3
作者其他创作
大纲/内容
基础
作用:定义网页表现
应用
内联
页面嵌入
样式表链接
语法
选择器{
属性:值;
...
}
属性:值;
...
}
选择器
全局选择器 * { ... }
元素类型选择器 tag { ... }
ID 选择器 #id { ... }
类选择器 .class { ... }
层级
后代选择器 祖先元素 后代元素 {}
父子选择器 父元素>子元素 { ... }
分组选择器
选择器1,选择器2,选择器3.... { ... }
基本样式
颜色
取值
十六进制 #FF0000
RGB rgb(255,0,0)
名称 reg
前景色 color
背景
背景色 background-color
背景图 background-image:url(**.jpg)
重复 background-repeat:
repeat-x
repeat-y
no-repeat
位置 background-position
left center right
top center bottom
固定 background-attachment:fixed
简写 background:颜色 图 重复 固定 水平位置 垂直位置;
字体
字体族 font-family
样式 font-style
字号 font-size:16px/1.2em;
粗细 font-weight
bold
300
文本
颜色 color
对齐 text-align
left
enter
right
justify
装饰线 text-decoration
overline
line-throught
underline
转换 text-transform
uppercase
lowercase
capitalize
缩进 text-indent
行间距 line-height
链接
a:link{}
a:visited{}
a:hover{}
a:active{}
列表
样式
list-style-type
list-style-type
none
square
circle
...
位置
list-style-position
list-style-position
图片
list-style-image:url(**.jpg)
list-style-image:url(**.jpg)
表格
边框 border
横线折叠 border-collapse:collapse
布局 table-layout:fixed
隐藏空单元格 empty-cells:hide
CSS盒模型
描述了元素如何可视化地排列在页面上
图 例
外边距 margin
内间距 padding
边框 border
宽度 border-width
样式 border-style
实线 solid
点划线 dotted
虚线 dashed
双线 double
颜色 border-color
进阶
光标指针 cursor
default
point
text
move
...
url(custom.gif),url(custom,cur),default
溢出 overflow
visible
hidden
scroll
auto
维度
宽
width
max-width
min-width
高
height
max-height
min-height
CSS单位
px 像素
em 相对于当前字体比率
in 英寸
cm 厘米
mm 毫米
pt 点(磅) 1in=72pt
pc picas 1picas=12pt
可视格式化
Block 块级元素
p
div
h
inline 行内级别元素
span
strong
em
...
显示 display
block
inline
inline-block
none
可见性 visibility
visible
hidden
collapse
inherit
0 条评论
下一页