CSS3属性
字体属性
font
font:字体风格[字体加粗]<字体大小>[/行高]<字体族科>
font-family 字体族科 宋体|微软雅黑
font-family:"Arial","Helvetica",sans-serif;
font-size 字体大小
font-style 字体风格 normal | italic | oblique (斜体)
font-weight 字体加粗 normal | bold | lighter
font-variant 字体变形 normal | small-caps
文字颜色
color 设置文字颜色
常用color:#两位16进制表示
文本属性
letter-spacing 字母间隔 值为长度,可以是负值
word-spacing 词的间距(通过空格识别)
text-decoration 文字修饰
underline
overline
line-through
none(默认)
text-align 横向排列 left | right | center
vertical-align 垂直对其方式
baseline: 将支持valign特性的对象的内容与基线对齐
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top: 将支持valign特性的对象的内容与对象顶端对齐
text-top: 将支持valign特性的对象的文本与对象顶端对齐
middle: 将支持valign特性的对象的内容与对象中部对齐
bottom: 将支持valign特性的对象的文本与对象底端对齐
text-bottom: 将支持valign特性的对象的文本与对象顶端对齐
<percentage>: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
<length>: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)
text-indent 文本缩进 2em(2个字) 50px
line-height 设置行间距离 不允许使用负值
word-break 规定自动换行的处理方法
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
word-wrap 允许长单词或URL地址换行到下一行
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。
overflow-wrap CSS3中把word-wrap 改名为 overflow-wrap
white-space
normal: 默认处理方式。
pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
nowrap: 强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
css尺寸相关属性
height 高度
min-height 最小高度
max-height 最大高度
width 宽度
min-width 最小宽度
max-width 最大宽度
css内边距
padding 内边距
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
边框
border border-left|border-right|border-top|border-bottom
border: 边框宽度 边框样式 边框颜色
border-style border-top-style | border-right-style | * border-bottom-style | border-left-style
dotted 点线
dashed 虚线
solid 实线
double 双实线
groove 槽状线
ridge 脊线
inset 内嵌效果
outset 外凸效果
border-color 边框颜色 border-left-color | border-right-color | border-top-color | border-bottom-color
border-width 边框宽度 border-left-width | border-right-width | border-top-width | border-bottom-width
背景
background
background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置>
例:background:red url('./123.png') no-repeat 100px 10px;
background-color 设置背景色,或设置为transparent(透明)
background-image 背景图片 url 或者 none
background-repeat 背景重复 repeat | repeat-x | repeat-y | no-repeat
background-attachment 背景附件 scroll | fixed
background-position 背景位置
background-position: 水平方向 垂直方向
background-position:left top;
background-position:100px 100px;
left | center | right (横向)
top | center | bottom (纵向)
或者使用百分比或者数值
鼠标光标设置 (CSS属性)
cursort
text 文字选择器
crosshair 十字架
wait 等待
help 帮助
pointer 小手
CSS列表属性
list-style-type
disc 实心点
circle 圆圈
square 小方框
decimal 数字
lower-roman 小写罗马字
upper-roman 大写罗马字
lower-alpha 小写字母
upper-alpha 大写字母
list-style-position 位置
inside 标示在li里面
outside 标示在li外面
list-style-image 使用图片 url(./123.gif)
list-style 复合属性
list-style: type position imagelist-style: none
CSS列表属性
table-layout 表格布局方式
auto(默认) 布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢
fixed 平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切
border-collapse 表格的行和单元格的边是合并还是独立
separate (默认) 独立
collapse 合并
border-spacing 当表格边框独立时,行和单元格的边框在横向和纵向上的间距
caption-side caption 在table上面还是下面
top
bottom
empty-cells 没有内容的单元格隐藏还是显示
show (默认)
hide
盒子模型相关CSS属性
布局属性
display
| 值 | 描述 |
| ------------ | ---------------------------------------------------- |
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
| inline-block | 行内块元素。(CSS2.1 新增的值) |
float
| 值 | 描述 |
| ------- | ---------------------------------------------------- |
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
clear
| 值 | 描述 |
| ------- | ------------------------------------- |
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
visibility
| 值 | 描述 |
| -------- | ------------------------------------------------------------ |
| visible | 默认值。元素是可见的。 |
| hidden | 元素是不可见的。 |
| collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
overflow
| 值 | 描述 |
| ------- | -------------------------------------------------------- |
| visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
| hidden | 内容会被修剪,并且其余内容是不可见的。 |
| scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow-x
overflow-y
尺寸
width / max-width / min-width
height / max-height / min-height
内补白
padding / padding-left / padding-right / padding-top / padding-bottom
外边距
margin
margin-left
margin-right
margin-top
margin-bottom