--------
|CSS2属性|
--------
一 文本
1 水平对齐方式
text-align:left/right/center
也可以让img、input等有水平方向的对齐方式
2 垂直对齐方式
vertical-align:top(居顶部)/bottom(居底部)/middle(居中)
多用于table
3 设置行高
line-height:50px/10%;
如果让文本垂直居中与容器,将line-height的值设置跟容器的高度一样。只适用于单行文本
4 首行缩进
text-indent:50px;
5 内容自动换行(css3)
word-break:break-all;---允许在单词内部进行换行
word-break:keep-all;只在空格处或连字符(-)处换行
6 词间距
word-spacing:10px;单词与单词之间的间隙为10px,只要有空格出现就认为是一个词的开始
7 字间距
letter-spacing:5px;设置字(字符)之间的间隙5px
8 设置字体颜色
color:颜色;
9 设置大小字母的转换
text-transform:none/capitalize/uppercase/lowercase;
capitalize:将每个单词的第一个字母大写
uppercase:将单词所有的字母都转换成大写
lowercase:将单词所有的字母都转换成小写
10 文本修饰
text-decoration:none/underline/line-through/overline;
none:不添加或者去掉文本修饰
underline:添加下划线
line-through:添加删除线
overline:添加上划线
如果要去掉a标签默认的下划线,设置text-decoration:none;
二 字体的属性
1 设置字体大小
font-size:50px;
2 字体风格
font-style:italic(斜体)
3 字体加粗
font-weight:bold;
4 设置字体类型
font-family:"黑体"
5 设置小型的大写字母
font-variant:small-caps;
三 边框属性(border)
border-5px;设置边框的粗细
border-color:red;设置边框的颜色
border-style:solid(实线)/dotted(点状线)/dashed(块状线);设置边框样式
缩写:
border: 粗细 样式 颜色;
如果给某一边加边框:top right bottom left
border-top-5px;
border-top-color:red;
border-top-style:solid;
缩写:
border-top: 粗细 样式 颜色;
四 容器宽高属性(width/height)
300px/20%;
height:300px/20%;
-----补充----
常见的块级元素:div ul li ol dt dd hn p table form...
块级元素的特点:可以自动换行、可以直接设置宽高
常见的行内(内联)元素:span a b i s u select option...
内联元素的特点:对宽高没有直接作用、不会自动换行
常见的空元素:link meta br hr input img...
空元素的特点:没有内容 在开始标签中闭合,input、img、hr等可以直接设置宽高
max-500px/50%;设置容器的最大宽度
min-500px/50%;设置容器的最小宽度
max-height:100px/10%;设置容器的最大高度
min-height:100px/10%;设置容器的最小高度
五 显示(display)
display:none/block/inline/inline-block/line-table/table
none:设置元素隐藏
block:以块级元素显示,设置行内元素以块级元素显示
inline:以行内元素显示,设置块级元素以行内元素显示
inline-block:行内元素的宽高都起作用,但是不会换行显示
table:以表格的方式来显示
inline-table:将行内元素作为表格的方式来显示,而且不会换行---多用于表格(table)同行显示
六 CSS的注释
/* 注释内容 */
七 背景(background)
background-color:颜色;设置容器的背景色
background-image:url("相对路径");设置容器的背景图
background-repeat:repeat/no-repeat/repeat-x/repeat-y;设置背景以那冲方式重复显示
repeat:重复显示,默认值
no-repeat:不重复显示
repeat-x:横向重复显示
repeat-y:纵向重复显示
background-position:水平方向的值 垂直方向的值;如果只写一个方向,另外一个方向默认为center
水平方向的值:left right center 50px 10%
垂直方向的值:top bottom center 50px 10%
默认的为background-position: left top;起始位置为容器的左上角。
background-attachment:设置图片是否随着滚动条滚动,一般都用于body
scroll:滚动
fixed:固定
默认为scroll
缩写:
background: color url("") repeat attachment postion;
--------|CSS2属性| --------一 文本1 水平对齐方式text-align:left/right/center也可以让img、input等有水平方向的对齐方式
2 垂直对齐方式vertical-align:top(居顶部)/bottom(居底部)/middle(居中)多用于table
3 设置行高line-height:50px/10%;如果让文本垂直居中与容器,将line-height的值设置跟容器的高度一样。只适用于单行文本
4 首行缩进text-indent:50px;
5 内容自动换行(css3)word-break:break-all;---允许在单词内部进行换行word-break:keep-all;只在空格处或连字符(-)处换行
6 词间距word-spacing:10px;单词与单词之间的间隙为10px,只要有空格出现就认为是一个词的开始
7 字间距letter-spacing:5px;设置字(字符)之间的间隙5px
8 设置字体颜色color:颜色;
9 设置大小字母的转换text-transform:none/capitalize/uppercase/lowercase;capitalize:将每个单词的第一个字母大写uppercase:将单词所有的字母都转换成大写lowercase:将单词所有的字母都转换成小写
10 文本修饰text-decoration:none/underline/line-through/overline;none:不添加或者去掉文本修饰underline:添加下划线line-through:添加删除线overline:添加上划线
如果要去掉a标签默认的下划线,设置text-decoration:none;
二 字体的属性1 设置字体大小font-size:50px;
2 字体风格font-style:italic(斜体)
3 字体加粗font-weight:bold;
4 设置字体类型font-family:"黑体"
5 设置小型的大写字母font-variant:small-caps;
三 边框属性(border)border-5px;设置边框的粗细border-color:red;设置边框的颜色border-style:solid(实线)/dotted(点状线)/dashed(块状线);设置边框样式
缩写:border: 粗细 样式 颜色;
如果给某一边加边框:top right bottom leftborder-top-5px;border-top-color:red;border-top-style:solid;缩写:border-top: 粗细 样式 颜色;
四 容器宽高属性(width/height)300px/20%;height:300px/20%;
-----补充----常见的块级元素:div ul li ol dt dd hn p table form...块级元素的特点:可以自动换行、可以直接设置宽高
常见的行内(内联)元素:span a b i s u select option...内联元素的特点:对宽高没有直接作用、不会自动换行
常见的空元素:link meta br hr input img...空元素的特点:没有内容 在开始标签中闭合,input、img、hr等可以直接设置宽高