CSS的总结

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

概述

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS的使用方式

行内样式

    
        
    
    
        
大家好
    

行内样式需要写到标签的 style 属性值中。
这种形式多用于测试，可维护性较差

内部样式表

    
        
        
    
    
        
Hello everyone
    

内部样式需要写到 百度

div元素

外观属性

color：文本颜色

属性值为预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值

一般情况下颜色我们喜欢小写字母 比如 #ff0000。

颜色半透明(css3)

语法格式

/* a 是alpha透明的意思,取值范围 0~1之间  */
color: rgba(r,g,b,a)    
color: rgba(0,0,0,0.3)  

line-height：行间距

行高是指文本行基线间的垂直距离:基线与基线之间的距离。

属性值：normal |数字 | 长度值 | 百分比

• normal：默认值，行高由浏览器自动处理。

• 数字：行高 = 数字 * 字体大小

• 长度值：使用长度值设置行高

text-align：水平对齐方式

属性值：left | right | center | justify

• left：内容左对齐

• center：内容居中对齐

• right：内容右对齐

• justify：内容两端对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

text-decoration：文本修饰

属性值：none | underline | overline | line-through

• none：指定文字无装饰

• underline：指定文字的装饰是下划线

• overline：指定文字的装饰是上划线

• line-through：指定文字的装饰是贯穿线

letter-spacing：字符间距

• normal：默认间隔

• 长度值：用长度值指定间隔，可以为负值

word-spacing（单词）

• normal：默认间隔

• length：用长度值指定间隔，可以为负值

文字阴影(CSS3)

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

• h-shadow

• 必需。水平阴影的位置。允许负值。

• v-shadow

• 必需。垂直阴影的位置。允许负值。

• blur

• 可选。模糊的距离。

• color

• 可选。阴影的颜色。

/* 多重阴影 */
text-shadow: -5px 0px cyan, 5px 0px red;