CSS总结

一 、CSS的基本概念

       CSS是一种样式控制语言，全称Cascading Style Sheet，意思是层叠样式表或级联样式表，其基本思想是为结构文档中的各个标记定义相对应的一组显示样式。它不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对网页中的个元素进行格式化。CSS最初是为了弥补HTML的不足而出现的，后来运用到XML上，将两者结合有以下优点：1.实现数据与显示方式相分离，发挥XML优势；2.将显示样式统一于CSS中，便于对显示样式i进行统一管理；3.CSS结构简单，兼容性强，适用平台广泛。

二、CSS基本语法

       CSS规定集由选择器和声明块组成。选择器用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成，其后的是用花括号括起来的属性名与相应的属性值，每条声明都包含一个属性名和相应的属性值，以冒号相隔，用来对选择符所指定的元素设置具体的显示样式。因此，如何定义选择符和CSS支持哪些样式属性，每个样式属性支持哪些值就很关键了。

       对XML有效的选择符有很多，常用的有以下几类。

1.类型选择符：直接以元素、对象的名称作为选择符，这是最常见的选择符。

2.类选择符：选择所有class属性值等于className的元素，如：.className{property: value;}

3.ID选择符：与类选择符的区别是将.改为#，如：#className{property：value;} 

4.其他选择方式：如果想将一组属性用于多个元素，可以用逗号将选择符中的所有元素分隔开，如teacher和student这两个元素都要设定为10像素的页边距。如下：

      teacher，student{

                    display：block；

                    margin：10px；

} 

三、XML与CSS结合方式

1.调用外部样式表文件：指XML本身不含有样式信息，而是通过引用外部CSS文件来定义XML的表现形式。

2.在XML文档内部定义CSS样式：指将CSS样式直接嵌入XML文档内部，一般是不建议使用的，因为这种方式需要在不同的XML文档中重复定义样式，而且需要大量CSS样式嵌套在XML中，导致XML文档过大，如需修改就会非常麻烦不利于软件工程化管理。但是若想让某些CSS样式仅对某个页面有效而不影响整个站点就应当选择这种方式。

3.使用混合方法指定样式：综合应用内部CSS和外部CSS样式，如果发生冲突，则用内部CSS样式为准。

4.使用多个样式表文件：一个样式表文件可以被多个XML文件调用，同样的，一个XML文件也可以同时调用多个样式表文件。

四、CSS属性

一、字体属性：是最常用的CSS属性，其选择会对用户体验产生巨大影响。通过设置字体属性的值可以改变字体的显示方式，包括字体类型、风格、大小、拉伸等。

1.font-family属性：指定字体类型，默认值为浏览器确定的字体，如果名称中有空格，属性值双引号括起来，如：font-family：Arial；  font-family：“Time New Roman”；

2.font-style属性：指定斜体文本，属性值可以为normal正常显示，italic斜体显示或oblique倾斜显示，如font-style：italic；

3.font-style:normal;font-variant属性：设置英文字体打印时的大小写状态，默认值为normal，还有一个取值为small-caps大写代替小写，如font-variant：small-caps；

4.font-weight属性：设置字体的粗细程度，常见的有blod加粗和normal默认值，也可以用来表示字体的粗细程度。如font-weight：blod； font=weight：600；

5.font-size属性：设置字体大小，如：font-size：12pt；

二、文本属性：

1.text-align属性：设置文本对齐方式，left左对齐，right右对齐，center居中，justify两端对齐。

2.text-indent属性：设置首行缩进，单位像素px或磅pt

3.text-transform属性：指定是否将字母全部大写uppercase，全小写lowercase或首字母大写capitalize。

4.text-decoration属性：设置是否给文本添加装饰，不添加none，加下划线underline，加上划线overline，加删除线line-through或使文字闪烁blink

5.vertical-align实现：设置文本的垂直对齐方式

6.line-height属性：设置行间距，如line-height：1.5；

三、颜色和背景属性

1.名称表示法：直接用颜色的英文名表示，如：color：red；  background-color：blue；

2.“#RGB”表示法R、G、B分别表示红绿蓝三原色，每种颜色的取值用两位十六进制表示，00-FF，共256种，数值越高颜色越浅。

（1）background-image属性：用于定义背景图像，默认取值none，如：background-image：URL（“animal.jpg”;）

（2）background-repeat属性： 用于指定背景图像是否通过重复出现来平铺背景，背景完全填充repeat-x，水平方向上填充repeat-y，不平铺no-repeat

（3）background-position属性：指定背景图像位置，取值可以是百分比，top，center等

四、设置文本的显示方式

1.block：块显示方式

2.line：行显示方式

3.list-item：列表显示方式

4.none：不显示元素内容

五、CSS的显示规则

       用浏览器打开XML文件时，浏览器将按照元素在XML文件中出现的顺序，并用该元素在CSS中对应样式规则显示该元素包含的内容。如果元素在CSS中没有对应的样式规则，浏览器将使用默认规则显示内容。