目录

CSS入门教程

CSS介绍

CSS不能单独使用,必须与HTML或XML一起协同工作,为HTML或XML起装饰作用。本文主要介绍用于装饰HTML网页的CSS技术。其中HTML负责确定网页中有哪些内容,CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上,也可以集中化内置于网页、链接式引入网页以及导入式引入网页。[1]

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前,几乎所有的HTML文件内都包含文件显示的信息,比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出,有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来,简化HTML文件,这些信息被放在一个辅助的,用CSS语言写的文件中。HTML文件中只包含结构和内容的信息,CSS文件中只包含样式的信息。

比如HTML中H2标志这一个二级标题,它在级别上比一级标题H1低,比三级标题H3高。这些信息都是结构上的信息。

一般来说级别越高的标题其字体也越大,H1的字体最大,因为一般来说字体越大它表示的内容就越重要,此外一般标题都使用粗体字,来突出它们的重要性。一般来说H2使用粗体字,其字体比H3大,比H1小。这些信息是显示用的信息。

在CSS出现前,假如作者要确定H2标题的颜色、字形、大小或其他显示特征的话,他要使用HTML中的font或其他样式指令,光H2不够,因为H2只是一个结构指令。假如一个标题要用斜体字、红色的字符、白色的底色的话,作者要这样写:

<H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>

这些显示用的指令使得一个HTML变得非常复杂,要维护也比较困难。假如所有的二级标题都要这样来显示的话,所有的二级标题的指令都要这么复杂。此外读者无法改变这些规定,假如一个读者更喜欢蓝色的标题的话,他无法改变标题的颜色,因为文件的作者特别规定了标题的颜色。

使用CSS的话H2指令只规定文章的结构,其显示由样式表来规定,上面的例子可以变成这样:

<H2>使用CSS</H2>

服从的样式表可以规定H2指令使用斜体字,红色字和白色背景:

H2 { color: red; background: white; font-style: italic; }

这样显示与内容就分开了(由于CSS的优点,W3C现在正在考虑将HTML中的许多显示用的指令废弃掉)。HTML只表达文章的结构,CSS表达所有的显示。CSS可以指示颜色、字形、排列、大小以及其他许多非视觉的表达方式,比如将一篇文件的内容读出来。

CSS样式信息可以包含在一个附件中或包含在HTML文件内。读者可以使用多个样式表,在重复的情况下他可以选择其中之一。不同的媒体可以使用不同的样式表。比如一个文件在荧光屏上的显示可以与在打印机中打印出来的显示不同。这样作者可以为不同的媒体设计最佳的显示方式。此外CSS的目标之一是让读者有更大的控制显示的自由。假如一个读者觉得斜体字的标题读起来很困难,他可以使用自己的样式表文件,这个样式表可以“层叠”使用,他可以只改变红色斜体字这个样式而保留所有其他的样式。

包含CSS的XHTML文件示例

 <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body{
        background:#fff;
        color:#777;
    }
    h1{
        font:bold italic sans-serif;
        color:green;
    }
    </style>
    <title>入门小站(rumenz.com)</title>
</head>
<body>
    <h1>这个句子用綠色、粗体和斜体字显示</h1>
    <p>普通字。</p>
    <h1 style="color:red; background:green;">
    这个句子用大的、红色斜体字在绿色背景上显示,通用的h1样式在这里被取代了。
    </h1>
    <h1 style="color: green;"><strong><em>这个句子用綠色、粗体和斜体字显示</em></strong></h1>
</body>
</html>

CSS基本选择器

  • 标签选择器(h1,p等)——elementname
  • 类别选择器(class)——.elementname
  • ID选择器(ID)——#elementname
  • 万用选择器——* ns|* *|*
  • 属性选择器(也翻译为“通配符选择器”)——[attribute]

CSS属性选择器

代码意思
[attribute]元素有attribute的属性。
[attribute="value"]属性attribute里是value
[attribute~="value"]属性attribute里使用空白分开的字符串里其中一个是value
[attribute|="value"]属性attribute里是value或者以value-开头的字符串
[attribute^="value"]属性attribute里最前的是value
[attribute$="value"]属性attribute里最后的是value
[attribute*="value"]属性attribute里有value出现过至少一次

CSS组合选择器

符号标题文字
A > B选择A下一层的元素B
A ~ B选择与A同层的元素B
A + B选择与A相邻的元素B(不能被任何元素相隔)
A B包含选择符

CSS 权重分数比较机制

有时还会遇到选择器优先级无法直接判断,而且规则的来源也相同的情形。如果网页设计者很少使用层次比较复杂的选择器(比如多级的后代选择器),那么必须比较权重的情况一般不会遇到(一般要么是可以直接根据前面的规则判断出优先性结果,或者是起冲突的2条规则的权重完全一样,只能继续去看后一条比较出现次序的机制)。此时,CSS还有一套分数加权(或者说是分数累积)的机制用于解决此类规则冲突。先列出基本的分值:

  • 1个行内样式占1000分
  • 1个id选择器占100分
  • 1个class选择器占10分
  • 1个标签选择器占1分

组合使用多个基本选择器时,不同选择器的得分会累加到一起。最终得分高的选择器,其指定的样式会胜出。

原文链接:https://rumenz.com/css/
↑回到顶部↑
入门小站 @2018