css 属性操作（1）

1、CSS text
文本颜色：color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 – 如: ＃FF0000
一个RGB值 – 如: RGB(255,0,0)
颜色的名称 – 如: red

p { color: rebeccapurple; }

水平对齐方式

text-align 属性规定元素中的文本的水平对齐方式。

left 　　把文本排列到左边。默认值：由浏览器决定。
right 　　把文本排列到右边。
center 　　把文本排列到中间。
justify 　　实现两端对齐文本效果。

文本其他属性
font-size: 10px;

line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: ‘Lucida Bright’ 字体

font-weight: lighter/bold/border/　　　字体粗细

font-style: oblique

text-indent: 150px; 首行缩进150px

letter-spacing: 10px; 字母间距

word-spacing: 20px; 单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

2、背景属性

background-color 　　背景颜色
background-image　　 背景图片
background-repeat　　 背景图片填充方式
background-position　　位置

简写 background:#ffffff url(‘1.png’) no-repeat right top;

3、边框属性

border-width
border-style (required)
border-color

边框-单独设置各边
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

4、列表属性

list-style-type 设置列表项标志的类型。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中

ist-style-type属性指定列表项标记的类型：ul { list-style-type: square; }
使用图像来替换列表项的标记：ul { list-style-image: url(”); }

5.display属性
none
block
inline
inline-block
none(隐藏某标签) p{display:none;}

注意与visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

block(内联标签设置为块级标签)

span {display:block;}

注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

inline(块级标签设置为内联标签)

li {display:inline;}
inline-block

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

#outer{
border: 3px dashed;
word-spacing: -5px;
}