html入门教程(初学者) -HTML样式 - 书目录

html入门教程(初学者) -HTML样式

HTML样式

<!DOCTYPE html>

<html>

<head>

	<title>Nature</title>

	<link rel="stylesheet" href="html-styles.css">

	<style type="text/css">

	h1 { color:limegreen; }

	.big { font-size:200%; }

	</style>

</head>

<body>

	<h1>Mountains</h1>

	<p>I like mountains. Especially <span class="big">big</span> ones and <span class="sweet">orange</span> ones.</p>

</body>

</html>
以上是使用CSS为网页添加样式的一个小例子。我们改变一些颜色并增加字体大小。

在这个例子中,我们使用所有三种向HTML文档添加样式的方法。更多关于这一点。

首先,让我们确保我们了解CSS是什么以及为什么需要它(如果我们希望我们的网页看起来不错)。

关于CSS

CSS(层叠样式表)用于将样式应用于HTML文档。这是因为HTML不打算提供样式。HTML旨在提供HTML文档的结构,并且每个HTML元素都具有预定义的含义。CSS用于演示。

CSS允许您执行诸如更改颜色,字体,大小,添加边框,背景图像,位置元素,添加边距,添加阴影,创建动画等等。

但同样重要的是,它还允许您指定应该如何在不同类型的媒体上呈现内容。例如,您可以为屏幕创建一个样式表,另一个用于音频设备,另一个用于打印页面。这使您可以精确控制每个HTML元素在不同媒体上的呈现方式。

CSS还允许您为不同大小的屏幕创建不同的样式。因此,您可以为大屏幕(如台式机/笔记本电脑)创建一个样式表,为媒体(例如,用于平板电脑)创建一个样式表,另一个用于小型(智能手机)。

无需为每种屏幕尺寸,设备或媒体类型重写您的HTML文档。您只需编写一次HTML页面,然后根据需要创建样式表。

CSS如何工作

一个CSS样式表由一系列语句组成。有两种语句:规则集和规则。

甲规则集(也称为规则)由一个选择器,随后一个声明块的。

喜欢这个:

selector {declaration block}

因此,在下面的代码示例中,<h1>元素是选择器,其余部分是声明块。

h1 { color: limegreen }

声明块以左大括号({)开始,以右大括号()结束}。它包含由分号()分隔的零个或多个声明;。它也可以包含空格,因此,上面的语句也可以这样写:

h1 {
	color: limegreen
	}

这可以使你的样式表更具可读性,特别是如果你有很多的声明:

h1 {
	color: limegreen;
	font-family: 'Open Sans';
	font-size: 2em;
	margin: 5px;
	... etc
	}

您还可以包含多个选择器。如果你这样做,你必须用逗号分隔它们:

h1, h2, h3, h4, h5, h6 {
	color: limegreen
	}

上面的声明块一次设置所有6个标题的颜色。这与做到这一点的效果相同:

h1 { color: limegreen }
h2 { color: limegreen }
h3 { color: limegreen }
h4 { color: limegreen }
h5 { color: limegreen }
h6 { color: limegreen }

不同的是,第一个使用较少的代码,因此,降低了文件大小,并使您的网站更快。因此,尽可能地组合选择器是一个好主意。很显然,只有当样式对每个元素完全相同时才能做到这一点。

不过,你也可以这样做:

h1, h2, h3, h4, h5, h6 {
	font-family: 'Museo Slab';
	color: limegreen;
	}
h1 {
	color: orange;
	}

上述样式表将导致所有六个标题大小被设置为柠檬绿和称为“Museo Slab”的字体。但是,第二个声明块将覆盖标题级别1的颜色为橙色。

所以,最终的结果是:所有标题都以“Museo Slab”字体呈现,<h1>元素为橙色,其他所有标题均为柠檬绿。

课程和ID

CSS还允许您根据元素的类或ID应用样式。您可以创建自己的类和ID,因此这提供了巨大的灵活性。您创建的每个班级或ID都可以有自己的样式。

类允许您根据逻辑功能(或其他目的)对事物进行分组。

ID允许您将唯一标识附加到没有其他元素可以具有的元素。这不仅在使用CSS时很有用,而且在使用JavaScript和其他脚本语言时也很有用。

#logo { margin: 9px }
.search { width: 100% }

以上样式表设置ID为的元素的边距属性logo。ID选择器以hash(#)后跟ID值开头。

它还设置已分配类的所有元素的宽度属性search。类选择器以句点(.)开头,后跟类的值。

类也可以使用~=符号来引用。因此,以下两个陈述具有相同的效果:

div.search { width: 100% }
div[class~=search] { width: 100% }

那么这些元素如何被分配一个类或ID?

很高兴你问。在HTML文档中,它看起来像这样:

<div id="logo">
	...
</div>

<div class="search">
	...
</div>

在这种情况下,我使用了<div>元素,但是可以将ID和类分配给任何HTML元素。

请注意,ID只能分配给页面上的一个元素。这就是为元素提供独特标识的原因(在使用JavaScript时这可能至关重要)。另一方面,类可以分配到尽可能多的元素,只要你喜欢。

其他选择器

CSS支持许多可能的选择器模式。这使您可以非常细致地选择将样式应用于哪些元素。

考虑下面的例子:

form input { color: green }

上面的代码选择了所有<input>元素的派生<form>元素。

现在让我们稍微修改一下:

form.comments input { color: green }

上面的代码选择<input>了一个<form>元素的派生类的所有元素comments。

让我们再添加一些复杂性:

form.comments input[type="text"] { color: green }

上面的代码选择所有<input>具有type设置为该text值的属性的元素,但仅当该元素是<form>具有类的元素的后代时comments。只有通过该测试的元素才被设为绿色。

正如你所见,你可以得到很具体的。而且我们还没有提到伪类呢!

如果你有兴趣,这里是CSS3中选择器的官方列表。

HTML和CSS如何协同工作 – 向HTML文档添加样式

在HTML中,有三种向网页添加样式的方法。

内联样式表
使用全局style属性在元素级应用样式。这样做只会影响您应用该样式的元素。这是一个例子:

<p style="color:blue;">Content...</p>
嵌入式样式表
使用元素在页面级应用样式(通过将元素放置在元素中)。这允许您将样式应用于该页面上的任何元素。您不需要修改每个元素,因为它正在一次完成,位于页面的顶部。这样做只影响声明样式的页面。<style> <head>例:

<head>
	...
	<style type="text/css">
		h1 { color:limegreen; }
		.big { font-size:200%; }
	</style>
	...
</head>	

请注意,随着HTML规范的最近更改,您还可以通过使用该属性在<head>元素之外(即在该元素之内<body>)使用此scoped标记。这将允许样式从父元素向下应用。

<style type="text/css" scoped>
	h1 { color:limegreen; }
	.big { font-size:200%; }
</style>
外部样式表
使用<link>元素链接到外部样式表(通过将元素放置在<head>元素中)。这使您可以将样式应用于链接到样式表的任何页面上的任何元素。建议在整个网站上设置样式,因为每个页面都可以链接到相同的样式表。如果您需要更新样式,则只需在一个位置执行 – 外部样式表(不在每个页面中)。此方法允许您在整个网站上更新样式而无需打开任何HTML文档。所以这段代码会放在<head>元素中:

<head>
	...		
	<link rel="stylesheet" href="html-styles.css">
	...
</head>	

样式表文件(在这种情况下,我们称之为html-styles.css)如下所示:

.sweet {
color:orange;
font-size:1.5em;
}

正如你所看到的,不是一个HTML标签。纯粹的CSS代码(毕竟它是一个.css文件)。

这实际上是我们在页面顶部的HTML编辑器中链接到的外部样式表。实际上,如果您愿意,您可以为页面上的每个HTML元素添加更多样式样式。

您还可以通过使用元素@import内的规则<style>或从另一个外部样式表内导入外部样式表中的样式。

喜欢这个:

<style type="text/css" scoped>
	@import url('html-styles.css');
</style>

虽然这种方法可能有其位置,但通常不推荐使用这种方法,主要是出于性能原因。通常最好使用该<link>方法。

好的,现在让我们将样式应用于HTML表格。