样式规则选择器和样式属性

1、样式规则选择器：

    HTML selector

    CLASS selector

    ID selector

   关联选择器

   组合选择器

   伪元素选择器

  

    Class selector：

   要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。

    <p class="stop">paragraph1</p>

    <p class="worning">paragraph2</p>

    <p class="normal">paragraph3</p>

   在样式表中，可以分别为某个HTML标签的各个类别定义样式规则。

    P.stop{color:red}

    P.stop{color:yellow}

    P.normal{color:green}

   在样式表中，可以为某个类别的所有HTML标签定义样式规则。

    <style>

       .blueone{color:blue}

    </style>

    <h1 class="blueone">蓝色的题目</h1>

    <p class="blueone">蓝色的段落</p>

 

    ID selector：ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一个ID属性值，ID Selector就是为样式规则定义语句选择某一ID属性值的HTML原色。

    <span ID="yellowone">text here</span>

   在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下；

    <style>

    <!--

        #yellowone{color:yellow}

    -->

    </style>

    ID Selector只能为单个HTML标签元素设置样式规则，因此具有一定的局限性，在CSS中应该尽量少用。Javascript和CSS-P可以根据这个ID值来操纵和定位这个特定的HTML标签，所以ID属性在Javascript中会被广泛应用。

如果网页只在某种媒介上输出时，才需要对某个单一元素是进行样式设置的话，应该使用ID selector代替直接设置HTML元素的style属性的内联样式表。

在网页中使用了嵌入和链接样式表后，对某个元素的显示效果需要对样式表中已定义的相关样式重新设定，这就要用到内联样式表来直接设置HTML元素的style属性。

 

关联选择器是指一个用空格隔开的两个或多个单一选择器组成的字符串，例如P EM{background：yellow}。其中的"P EM"就是关联选择器，它表示段落中的强调文本（<em></em>标签对中的内容）的背景为黄色，而其他地方出现的强调文本则不受影响。

关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权要高。即使在

P EM{background：yellow}

的后面部分定义了如下的样式规则：

EM{background：green}

但是，在段落标签(<p>)中定义的强调文本仍用黄色背景。

 

组合选择器：为了减少样式表的重复声明，可以在一条样式规则定义的语句中组合若干个选择器，每个选择器之间用逗号(，)隔开，如，

H1,H2,H3,H4,H5,H6,TD{color：red;}

 

伪元素选择器：指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于超链接标签(<a></a>)的正常状态（没有任何动作前）、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义。

使用伪元素做为选择器的样式规则定义格式：HTML元素：伪元素{属性：值}

常用伪元素：

A:active  选中超链接时的状态

A:hover   光标移到超链接上

A:link    超链接的正常状态（没有任何动作前）

A:visited  访问过的状态

P:first-line 段落中的第一行文本

P:first-letter 段落中的第一个字母

类选择器和伪元素一起使用的格式：HTML元素.类名:伪元素{属性：值}

2、样式属性分类

   字体：

        Font-familly：字体名称

        Font-size：字体大小

        Font-style：字体的样式：斜体等

        text-decoration：文本的显示效果：下划线等

        Font-weight：设置粗体字的大小，以傍为单位

        Font-variant：

        Text-transform：

        Color：Color的三种表示方法：#RRGGBB、rgb(R,G,B)、red

   背景：

       Background-color：

       Background-image：

       Background-repeat：确定背景图像是否平铺以及如何平铺

       Background-attachment:

       Background-position：设置背景图像的水平位置和垂直位置

       Backround：将上面的各个属性组合起来设置

   文本：

       Word-spacing：设置单词之间的间距

       Letter-spacing：设置每个字符之间的间距

       Vertical-align：设置文本的垂直对齐方式

       Text-align：设置文本的水平对齐方式

       Text-indent：设置文本的第一行的缩进值

       White-space：设置文本中空格的处理方式：normal会将所有的空格压缩成一个空格。Pre会按照HTML中的标签<pre>的方式来处理。Nowrap设置只在文本遇到<br>标签时才换行。

       Line-height：设置文本所在行的行高

样式规则的继承

        所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则

样式选择器的优先级

       id选择器>class选择器>html选择器

       内联样式表>嵌入样式表>链接样式表>