CSS入门一

一、HTML与CSS

LINK标签

可选择样式表

STYLE元素：定义一个样式表常用的方式。<style type="text/css">

@import指示：引导浏览器载入一个外部样式表。

CSS注释：/* ---------- */(同C++一样)

二、选择符与结构

规则结构

选择符{属性：值；}

声明：某个属性后跟一个冒号，然后取其值。

分组

分组选择符

              H2, p{ color:red; }

分组声明

            H1{

                  font:18pt;

                  color:red;

                  background:aqua;

                 }

同时分组

              H1,H2,H3{

                     color:red;

                    background:white;

                }

类(CLASS)选择符：引用元素中类属性的值而产生效果。在引用前面总是一个英文句号（.）,用来标识一个类选择符。

.warning{ font-weight:bold;}

p.warning{font-weight:bold;} 表明：任何类属性的值为warning的段落都采取统一个样式。

ID选择符：类似于类选择符，区别：ID选择符前是#号，而不是句号。

区别：

1、类可以分配给任何数量的元素，ID却只能在某个HTML文档中使用一次。

2、ID对给定元素用何种样式比类具有更高的优先权。

伪类和伪元素

伪类选择符 如：考虑定位锚标记，用来在一个文档和另一个文档间建立连接。

伪类：link：超链接是一个未被访问过的地址。

            visited：指已经访问过的网页的定位锚。

            active：指任何已经处于活动状态的定位锚。

未元素符：与伪类的方式类似，通过对插入到文档中的虚构元素进行触发。

两个伪元素：first-letter和first-line样式分别应用与首字母和首行，而首字符和首行位于像段这样的块级元素中。

伪类和伪元素选择符的限制：只能设置某些元素。

CSS1中，伪类和伪元素不能组合在一个选择符中。

结构

CSS大部分功能都是基于元素的父子关系。HTML文档，实际上大多数结构文档，都是基于元素的层次关系。（父子关系）

上下文选择符

规则：H1 EM {color:gray;}   所有属于H1元素后台的EM元素文档显示为灰色。其他的EM文本都不会有此规则。

在一个上下文选择符里，规则的选择符方式由两个或多个以空格符分隔的选择符组成的。每个空格都可以翻译成：在...中发现的、是...的一部分、它是...的后代。前提是按从后至前的顺序读选择符。（前往后读：任何...包含的...元素）

不限于两个选择符，如：UL OL UL EM { color:red ;}

继承

把文档视为一个棵树，CSS的一个主要特征就是继承，它依赖祖先-后代关系的。继承是一个机制，它允许样式不仅应用与某个特定的元素，而是应用于其后代。

继承的局限性

大多数边框类属性，包括边界、补白、背景和边框，都不能继承。

特殊性：描述不同规则的相对权重。从大到小：内联样式(style) > #id216{ } > p.bright em.dark{ } > p.bright { } > .grape{} > P EM {} > H1 { },越靠前，优先选择。

继承和特殊性

在特殊性的框架下，被继承的值具有的特殊性最低。任何显式声明的规则将会覆盖其特殊性。

重要性

CSS可以将某些规则标记笔其他的更重要———重要规则（在一条规则的分号前插入!important这样一个短语标记一个重要规则）

P.dark { color:#333 !important;}

继承特殊性值最低,即使带有!important的规则继承的值也一样。

层叠

具有两个相同特殊性的规则应用于同一元素————通过规则的继承和特殊性来实现。

层叠规则

1、找出所有包含于给定元素匹配的选择符声明。

2、按应用于给定元素的所有声明的显示权重排序。标记为important的规则具有最高权值。三种起源：制作者、读者和用户代理。

3、按应用与给定元素的所有声明特殊性排序。高特殊性元素比低特殊性元素具有更大的权值。

4、按应用于给定元素的所有声明的出现顺序排序。样式表或温度中越靠后的声明权值越大。

元素分类

块级元素

     如：段落、标题、列表、表格、DIV和BODY等元素都是块级元素。图像和表单输入这样的替换元素，可以看做块级元素，但通常不这样看。

内联元素

     如：A、EM、SPAN元素及大多数的替换元素，如图像和表单输入元素。

列表元素

     在HTML中只包含LI元素。他们类似于书签，用于特殊的表示场合（如圆点、字母或数字）

这几种元素占据了display属性的四个值中的三个。

    display

    允许值         block | inline | list-item | none

    初始值         block

    可否继承     否

    适用于          所有元素

display值由文档类型定义DTD中定义的。