如何创建 CSS样式表

贡献者: ydmyvubm

CSS样式表是一个非常有用的工具,我们可以通过各种不同形式的样式表对于网页进行一个更好的设置,从而让网页变得更加的生动与形象。

1外部样式表。我们可以单独做一个样式文件,所有的网页从这个样式表引入,这样能够节约大量的代码空间,大大提升网页打开的速度,优化网页使用体验。<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

2外部样式表的三个要素。对于外部样式表来说,它要一个链接地址,它有一个type定义,它有一个样式表的名称。它的标志就是.css 的文件名。<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

3样式表可以在文本文档进行任意的编辑,从而让样式表可以具备极强的可变性。一个样式表例子。我们在这个例子中定义了颜色、边距、背景图像等等。hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/0.gif");}

4内部样式表。有些样式仅仅在一个网页当中发生作用,我们在这个时候就要对于这个样式表进行一个单独的定义,这就是内部样式表。它的一个标志就是style语句。<head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/0.gif");}</style></head>

5内联样式。这是一种特殊的样式表方式,通过这样的一个语句可以让样式表与内容结合在一起,它的缺点就是样式表的一次使用机会。<p style="color: sienna; margin-left: 20px"> This is a h </p>

6多重样式。有的时候,有多个样式会作用在同一个元素上面,那么这个元素会遵循先内后外的优先级。如果内外样式表的定义没有冲突,元素会集成所有的样式定义。

1 2 3 4 5