CSS基础学习

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　一．样式表基础

　　1．样式表中每一个条目由选择符（selector）和对应的规则组成，选择符通常是HTML元素名称，也可以是类（class）、标识符（id）、伪类（pseudo class，它们标示了超链接的不同状态）等。

　　2．将样式表（规则）添加到HTML文档中有3种方式：

　　① 外部样式表。

　　② 应用于整个文档的样式，位于<head>区，包括嵌入样式表和输入样式表。

　　③ 行内样式，通过绝大多数元素的style属性实现。

3．样式表内的注释用/* …*/。通过将样式规则包围在HTML注释之间可以让那些不支持样式表技术的老浏览器也能正常工作而不是直接把样式规则显示在屏幕上。一般而言，浏览器会忽略不认识的元素和属性，但包围在元素之间的内容会显示出来。

　　4．每一条规则必须以分号；结束。

　　5．如果多个元素共享相同的样式规则，可以使用逗号将它们分组定义。这里分组的概念与分类（class）或标识符（id）的概念不同，前者设置的规则对整个文档中所有的该元素都起作用，而后者只对该元素的一个子集（class或id相同的）起作用。当成组规则和其他规则都涉及到同一个元素时，它们将被组合起来，以生成某个元素的完整的样式。

　　举例：成组规则的应用。

h1,h2,h3 {background : yellow; color : black;}

h1 {font-size : 200%;}

h2 {font-size : 150%;}

h3 {font-size : 125%;}

　　二．外部样式表

　　外部样式表通过在<head>区内使用<link>元素来引用，<link>元素有三大属性：

　　① rel：指明了链接关系，这里是stylesheet。

　　② href：指明了外部样式表的URL。

　　③ type：指明了样式表的类型，这里是text/css。（其他还有jss）

　　举例：外部样式表的引用方式。

<head>

<title>Style Sheet Linking Example</title>

</head>

　　三．应用于整个文档的样式表

　　3．1 嵌入样式表

嵌入样式表的使用方式是直接写在head区的style元素内，从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。

　　举例：嵌入样式表的使用。

<head>

<!--

body {

font: 10pt;

font-family: Serif;

color: black;

background-color: white;

}

-->

</style>

</head>

　　3．2 输入样式表

　　输入样式表也是引用一个外部样式表，但不是通过link元素而是在style区内通过@import语法来引用：@import url（css的url地址）；可以在<style>元素内引用一些输入样式表，同时又指定一些只应用于本文档的样式。但是（Netscape）浏览器对输入样式表的支持还不普遍，所以建议使用<link>来引用外部样式表。

　　举例：输入样式表和嵌入样式表的联合使用。

<head>

<!--

@import url(corerules.css);

@import url(linkrules.css);

/* a rule specific to this document */

h1{

font : 24pt;

font-family : Sans-Serif;

color : black;

text-align : center;

}

-->

</style>

</head>

　　四．行内样式

　　绝大多数元素都有style属性。行内样式信息并不需要从不支持样式表的浏览器中隐藏，因为浏览器会忽略它们不理解的任何属性。

　　举例：行内样式的使用。

<h1 style = “font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1>

　　五．样式规则的辖域

　　以上讨论了样式表的存放位置，现在讨论样式表的作用范围，两者既有联系又有区别：行内样式规则自然决定了它的影响范围是当前元素，而其他样式规则可以灵活地设置规则的作用范围。

　　5．1 简单规则

　　最简单的规则不妨称它们为文档规则和行内规则。前者可以应用到整个文档中出现的所有的某元素（如所有的<p>元素），后者只应用到当前元素。

　　5．2 id规则

　　使用id属性的元素除了可以作为超链接的目标外（类似name属性，在载入页面时将显示定位在页面的指定位置），还可以用它来和样式表中的某个样式规则绑定（比name属性强的地方）。无论是作为超链接的href还是样式规则的选择符，引用id的格式为：＃id值。在一个HTML文档中，id属性值必须全局唯一。

　　举例：id属性与超链接或样式表的结合使用。

如有<p id = “SecondParagraph”>…</p>，则可以如下引用：

<a href = “# SecondParagraph”>Go to SecondParagraph</a> 或者

<head>

<!--

＃SecondParagraph {background-color : green;}

-->

</style>

</head>

　　5．3 class规则

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

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

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

　　举例：class规则的使用。

<!--

.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不能设置有无下划线（总是有的）。

　　举例：伪类的常见状态值

<!--

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。

<!--

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>元素最终将以红色、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（小型大写字母）。

3．2 text属性
文本修饰、文本缩进、单词间距、字母间距、行间距、文本的水平对齐和垂直对齐以及空白大小的控制。常用属性有：

① text-transform：单词大小写，none、capitalize、uppercase、lowercase。

② text-decoration：特殊效果，none、line-through、overline、underline。

③ word-spacing：单词间距，normal、英寸（in）、厘米（cm）、point（pt）、pica（pc）、em（em）、像素（px）。

④ letter-spacing：字母间距。

⑤ vertical-align：文本或图像的垂直定位，baseline（默认）、sub、super、top、text-top、middle、bottom、text-bottom。

⑥ text-align：文本水平对齐方式，left、right、center、justify。

⑦ text-indent：为段落元素第一行产生缩进。

⑧ line-height：当前行的高度，这样设置的行上下会空出相同的距离。

⑨ white-space：控制元素内空格的处理方式，normal（默认）、pre（不压缩空格）、nowrap（即使文本行超出了元素内容的宽度也不会换行）

3．3 color属性和background属性

① color：文字颜色

② background-color：背景色

③ background-image：背景图像，背景色显示在背景图像的下面，以提供不透明的背景，比④ background-repeat：决定当背景图像比元素的画布空间小时该如何排列。

repeat：默认，在水平和垂直两个方向上平铺；

repeat-x：仅在水平方向平铺；

repeat-y：仅在垂直方向平铺；

no-repeat：不平铺。

⑤ background-attachment：

scroll：默认，图像和文本一起滚动；

fixed：图像不动，水印效果。

⑥ background-position：背景图像在元素画布空间中的定位方式，指定了图像左上角相对于画布的水平间距和垂直间距。可以用绝对距离（像素）、百分比或特殊关键字。

水平方向关键字：left、center、right

垂直方向关键字：top、center、bottom

举例：background-image属性使用。

b{background-image：url(donut-tile.gif);background-color：white;}

p{background-image：url(picture.gif);background-position：20% 40%;}

body{background-image：url(picture.gif);background-position：center center;}

3．4 box属性

像<p>元素这样的块级元素可以作为屏幕上的一个矩形容器来考虑。可以通过样式属性来控制这些容器的三个方面。可以控制的box属性如下：

① margin属性：决定元素的box的边和相邻元素的边的距离。

② border属性：决定包围元素的边的边框的视觉特性。

③ padding属性：决定元素内它的边和它的实际内容间的距离。

④ height，width和positioning属性：决定由元素产生的box的大小和位置。

3．4．1 margin属性

单边距的设置规则：

① margin-top：上边距

② margin-right：右边距

③ margin-bottom：下边距

④ margin-left：左边距

举例：单边距的设置。

body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;}

p {margin-bottom:20mm;}

div.fun {margin-left:1.5cm; margin-right: 1.5cm;}

也可以用margin属性来一次性为四条边设置边距。

举例：通过margin属性设置边距的规则。

① 如果仅指定了单个值，则该值被应用到4个“空白”。

如：p{margin:1.5cm;}

② 如果四个值都指定了，则它们按照顺时针方向应用到各个空白（上、右、下、左的顺序），

最后一个距离后加分号，之间用空格相隔。

如：p{margin:10px 5px 15px 5px;}

③ 如果在规则中仅指定了两个或三个值，缺少一边的取值将由它的对边决定。

如：p{margin:10px 5px ;}

将设置上边、下边的空白为10像素，右边、左边的空白为5像素。

3．4．2 border属性

border位于空白（margin）和间隙（padding）之间。

（一）border-style属性

① none：无边框

② dotted：点边框

③ dashed：虚线边框

④ solid：实线边框

⑤ double：双边框

⑥ groove：蚀刻边框

⑦ ridge：突出边框

⑧ inset：凹进边框

⑨ outset：凸起边框

也可以通过border-top-style，border-right-style，border-bottom-style，border-left-style来单独设置各边的边框类型。当使用border-style来设置四边时，规则同margin类似。

（二）border-width属性

border-width、border-top-width、border-right-width、border-bottom-width、border-left-width可以分别设置边框的粗细。典型取值有：thin、medium、thick，当然也可取其他长度值。

（三）border-color属性

border-color、border-top-color、border-right-color、border-bottom-color、border-left-color可以分别设置边框的颜色。

可以将border-style、border-width、border-color一起应用到border、border-top、border-right、border-bottom、border-left上来实现对相关border属性的快速设置。当三个属性在放在一起设置时，最好按照border-style、border-width、border-color的顺序来给出值。

举例：border组合属性的设置。

#RainbowBox

{

background-color:yellow;

border-top:solid 20px red;

border-right:double 10px blue;

border-bottom:solid 20px green;

border-left:dashed 10px orange;

}

3．4．3 padding属性

在元素的边框和它的实际内容之间的空白可以通过padding属性来控制。元素的4个间隙（padding）可以通过padding-top、padding-right、padding-bottom、padding-left来设置。与空白（margin）和边框（border）一样，你可以使用速记符形式的padding属性来一次性地对四边的间隙进行设置。

举例：一个涉及margin、border、padding的综合应用。

<!--

#one

{

background:yellow;

border-style:double;

border-width:medium;

padding-left:1cm;

padding-right:0.5cm;

}

#two

{

background:yellow;

border-style:double;

border-width:medium;

padding-top:1cm;

padding-bottom:1cm;

}

#three

{

background:yellow;

border-style:double;

border-width:medium;

padding:1cm 1cm;

margin:0.5cm 4cm;

}

-->

3．4．4 width、height属性

举例：综合。

{

width:300px;

height:400px;

padding:10px;

border:solid 5px;

background-color:yellow;

color:black;

}

3．4．5 float、clear属性

float属性影响元素在水平方向上的对齐方式，类似与多数html元素的align属性。它使得它所包含的元素“流”向左边或右边，这时我们称这个元素为“流动”元素。 clear属性对“流动”元素进行垂直定位，决定是否继续或清除当前的流动方式，类似于html元素br的clear属性，取值有left、right、both、none（默认）。

3．4．6 display属性

CSS模型定义了三种类型的显示元素：块级元素、行内元素和列表。display属性允许一个元素的显示类型成为下面四个值中的一个：block，inline，list-item和none。

① none：元素将不会显示出来，并且也不会占据画布空间，这点和设置visibility属性不同。

② block：块级元素。

③ inline：行内元素。

④ list-item：列表元素

举例：display属性使用。

① “关闭”一个段落，使其不显示出来：

p.remove{display:none;}

② 将一个块级元素（比如段落）转变成行内元素，这样就可以不换行显示！