CSS基础学习(2)

  和id属性一样,class属性也是HTML核心属性之一,多数元素都有该属性。class属性定义了一个元素所属类的名称。class取值不要求唯一,同一类元素的多个实例、多个不同类的元素都可能属于同一个类。使用类可以显著地减少文档中必需的样式规则的数量。样式规则中有两种引用class的格式:

  ① 为所有该类的元素设置样式:.类名{样式规则;}

  ② 为属于该类的所有X元素设置样式:X.类名{样式规则;}

  举例:class规则的使用。

<style type = “text/css”>

<!--

.main-item {font-size:150%;}

h1.veryimportant {background-color:orange;}

-->

</style>

  5.4 伪类(pseudo-classes)和伪元素(pseudo-elements)

  5.4.1 伪类

  一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括:

  ① a:link:未访问链接

  ② a:visited:已访问链接

  ③ a:active:激活时(链接获得焦点时)链接的颜色

  ④ a:hover:鼠标移到链接上时

  一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。

  举例:伪类的常见状态值

<style type = “text/css”>

<!--

a:link {color: blue; text-decoration:none;}     //未访问:蓝色、无下划线

a:active:{color: red; }     //激活:红色

a:visited {color:purple;text-decoration:none;}       //已访问:purple、无下划线

a:hover {color: red; text-decoration:underline;}    //鼠标移近:红色、下划线

-->

</style>

  5.4.2 伪元素

  两个伪元素::first-letter和:first-letter。它们常常和像<p>这样的元素引导的一段文字一起使用,用来影响其中首字母或者首行的显示,如p:first-letter和p:first-line。

<style type = “text/css”>

<!--

p:first-line {background-color:yellow;}

p:first-letter{color:red;font-size:150%;}

-->

</style>

  5.5 情景选择(contextual selection)

  情景选择允许对位于某嵌套层次内的某元素进行样式控制,该规则通过按照嵌套的顺序列出元素的名称,然后给出样式规则来创建。

  举例:使所有出现在<p>元素内的<strong>元素都有黄色的背景颜色。

p strong {background-color : yellow;}

  六.样式规则的继承与嵌套

  该性质允许对元素的多种规则进行组合,既可以从父元素那里继承一些属性,也可以重写某些属性。层叠(CSS中的C)的一般思想有效地创建了一个系统以确定在有多个样式表的文档中哪些规则将被应用。例如,使用id属性为一个特定的<p>元素指定规则,这相对于通过class规则指定的规则具有优先权,而class规则相对于为<p>元素自身指定的规则有优先权。相对于应用于整个文档的样式或链接进来的外部样式,通过一个style属性指定的行内样式是更重要的。考虑究竟哪一个规则将最终生效的简单方法是:越专门的规则优先级越高,和标记位置越近的规则优先级越高。

如果需要一个特定的规则永远不被后面的另一条规则重写,可以用!important声明。对希望绝不被忽略的规则,可以在这个规则的分号之前插入声明!important,它一定要放在规则的最后,分号之前的位置,否则将被忽略。另外,许多老版本的浏览器并不支持该声明。

  举例:使用!important声明不被重写的规则。

P {color:red !important;font-size:12pt;}

<p style=“color:green;font-size:24pt;”}...</p>

<p>元素最终将以红色、24点大小显示。

七.CSS1属性

3.1  font属性

字模、字体样式、字体大小、字体效果等。常用属性有:

① font-family:字模,Cursive、Fantasy、Comic Sans MS等。

② font-size:字体物理大小或相对大小,物理大小包括:xx-small、x-small、small、medium、large、x-large、xx-large分别对应1~7号字体。

③ font-style:是否斜体, normal、italic、oblique(=italic)。

④ font-weight:文字粗细,normal、bold、bolder、lighter。

⑤ font-variant:小型大写字母,normal、small-caps(小型大写字母)。

<!--[if !supportEmptyParas]--> <!--[endif]-->

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdfgz.html