初学者指南之详细学习CSS的结构和规则

css|初学

基本语法

规则

选择符

任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,

P { text-indent: 3em }

当中的选择符是P。

类选择符

单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :

code.html { color: #191970 }
code.css  { color: #4b0082 }

以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如,

<P CLASS=warning>每个选择符只允许有一个类。

例如,code.html.proprietary是无效的。</p>

类的声明也可以无须相关的元素:

.note { font-size: small }

在这个例子,名为note的类可以被用于任何元素。

一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

ID 选择符

ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,ID选择符可以指定如下:

#svp94O { text-indent: 3em }

这点可以参考HTML中的ID属性:

<P ID=svp94O>文本缩进3em</P>

关联选择符

关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符

P EM { background: yellow }
是P EM。这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。

声明

属性

一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

声明的值是一个属性接受的指定。例如,属性颜色能接受值red。

组合

为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

继承

实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色值也会应用到段落的文本中。

有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。

注解

样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

/* COMMENTS CANNOT BE NESTED */

伪类和伪元素

伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。

伪类或伪元素规则的形式如

选择符:伪类 { 属性: 值 }

选择符:伪元素 { 属性: 值 }

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

选择符.类: 伪类 { 属性: 值 }

选择符.类: 伪元素 { 属性: 值 }
定位锚伪类

伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。

一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

首行伪元素

通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

首个字母伪元素

首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:

P:first-letter { font-size: 300%; float: left }
会比普通字体加大三倍。

层叠顺序

当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

! important

规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地,当网页制作者和读者都指定了重要规则时,网页制作者的规则会超越读者的。以下是! important 声明的例子:

BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important }
Origin of Rules (Author's vs. Reader's)

正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。

网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则。例如,一个用户由于视觉关系,会要求大字体或指定的颜色,而且这样的用户会有可能声明确定的样式规则为! important,因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则,所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。

选择符规则: 计算特性

基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。

统计选择符中的ID属性个数。

统计选择符中的CLASS属性个数。

统计选择符中的HTML标记名格式。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:

#id1         {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

特性的顺序

为了方便使用,当两个规则具同样权重时,取后面的那个。

时间: 2024-09-20 17:27:47

初学者指南之详细学习CSS的结构和规则的相关文章

详细学习CSS的Margin和Padding属性

css margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. 例子h2: h2 {    font-size: 1.5em;    background-color: #ccc;    margin: 1em;    padding: 3em;} 元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding

详细学习CSS中的网页布局的属性

css|网页 布局(Layout)属性: 在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素.Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3C在CSS提出了类似于Layer标记的功能. position属性: position属性用来决定元素的位置类型,详见属性: 属性名称: 'position'属性值: absolute | relative | static初始值: static适合对象: 所有元素是否继承

简单学习CSS的优势、规则、形式和应用范围

css Cascading Style Sheets(简称CSS),翻译为"层叠样式单"或"级联样式单",又简称"样式表". CSS的引入是用来扩展HTML的,而不是用来替代HTML的.也就是说CSS离不开HTML,它只是一项辅助工具,是对HTML功能的一种补充. CSS的优势 在CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小.颜色等:更加入了重叠文字.区块变化及任意位置放置等多项新属性.通过CSS可以使用更丰富.更灵活的样式,更简

阻碍你学习CSS的因素 思维的转变 HTML结构化

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对应的什么CSS语句.当你解决了第一种问题,知道了如何结构化你的HTML,我

《SQL初学者指南(第2版)》第1章 关系型数据库和SQL

第1章 关系型数据库和SQLSQL初学者指南(第2版)正如前言中所提到的,在与关系型数据库中的数据进行交互的时候,SQL是使用最广泛的软件工具.在这方面,SQL利用了自身的语言和逻辑两方面的要素.作为一种语言,SQL的独特语法用到了很多的英语单词,诸如WHERE.FROM和HAVING.作为一种逻辑表达,它指定了在关系型数据库中检索和修改数据的细节. 考虑到了这两方面因素,我们在本书中介绍SQL的各个方面的时候,尝试强调语言和逻辑这两部分.在所有语言中,无论它们是计算机语言还是口语,我们都需要学

深入学习CSS布局网页的制作

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句. 当你解决了第一种问题,知道了如何结构化你的HTML

《C#初学者指南》一导读

前言 C#初学者指南 欢迎阅读本书. C#(读作"c sharp")是一种易学的.成熟的编程语言.同时,它也是.NET Framework 的一部分..NET Framework是很大的一个技术集合,它包罗万象,以至于初学者往往不知从何入手.如果你也是一名初学者,那么本书非常适合你,因为本书就是专门为.NET初学者所编写的教程. 作为初学者的教程,本书并不会介绍.NET Framework中的每一种技术.相反,本书涵盖C#和.NET Framework 语言中最重要的主题,掌握了这些内

css知多少(2)——学习css的思路

原文:css知多少(2)--学习css的思路 两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式.        记得之前看过一个段子,也可能是一件真事儿,这不重要.大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题"你是谁,你从哪里来,你到哪里

《SQL初学者指南》——1.8 空值

1.8 空值 SQL初学者指南 表中每个单独列的另一个重要属性是,该列是否允许包含空值.空值表示某个特定的数据元素没有数据.按照字面意思解释就是没包含数据.空值不等同于空格或空白.从逻辑上讲,空值和空格要区分对待.在第8章中,我们会详细介绍如何检索包含空值的数据. 许多SQL数据库在显示带有空值的数据时,使用大写的单词NULL来表示.这么做是要让用户能够识别它包含的是一个空值,而不是一个空格.我也会遵循这个惯例,在书中用NULL来强调它表示一个特殊类型的值. 数据库的主键不能包含NULL值.这是