CSS----学习2

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:添加上划线

11 如果要去掉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-width:5px;设置边框的粗细
border-color:red;设置边框的颜色
border-style:solid(实线)/dotted(点状线)/dashed(块状线);设置边框样式

  缩写：

border: 粗细 样式 颜色;
如果给某一边加边框：top right bottom left
border-top-width:5px;
border-top-color:red;
border-top-style:solid;
缩写：
border-top: 粗细 样式 颜色;

容器宽高属性(width/height)

width: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-width:500px/50%;设置容器的最大宽度
min-width: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;