Html 简明教程
HTML - Style Sheet
CSS 或 Cascading Style Sheets 是一个工具,可以规定网络文档在屏幕上或打印出来时所显示的样子。自 1994 年 W3C 引入该工具以来,一直提倡在网页设计中使用样式表。CSS 使你能够控制内容的表现形式,无论是屏幕上、打印出来还是为了方便阅读,从而使网页设计更加灵活且高效。
CSS or Cascading Style Sheets is a tool that defines how web documents look on screens or in print. Since its introduction in 1994, the W3C has encouraged the use of style sheets for web design. CSS lets you control the presentation of your content, whether it’s on a screen, in print, or for accessibility, making web design more flexible and efficient.
层叠样式表 (CSS) 提供了简单有效的替代方法,可用于为 HTML 标记指定各种属性。利用 CSS,你可以为某一给定的 HTML 元素指定许多样式属性。
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element.
每个属性都有一个名称和一个值,两者使用冒号 (:) 分隔。每个属性声明使用分号 (;) 分隔。
Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).
Example of CSS on HTML Document
首先,让我们来看一个使用 * <font>* 标记和关联属性来规定文本颜色和字体大小的 HTML 文档示例。
First, let’s consider an example of an HTML document that makes use of <font> tag and associated attributes to specify text color and font size.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p>
<font color="green" size="5">Hello, World!</font>
</p>
</body>
</html>
我们可以借助 CSS 按如下方式重新编写上述示例。
We can re-write the above example with the help of CSS as follows.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">
Hello, World!
</p>
</body>
</html>
Types of CSS
CSS 实际上没有类型或种类,有三种方法可以在你的 HTML 文档中加入 CSS。
There is no type or variety in CSS actually there are three ways to include CSS in your HTML document.
-
External CSS: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
-
Internal CSS: Define style sheet rules in the header section of the HTML document using <style> tag.
-
Inline CSS: Define style sheet rules directly along-with the HTML elements using style attribute.
Examples of using Style Sheet
我们借助合适的示例,逐个来看一下这三种方法。
Let’s see all three ways one by one with the help of suitable examples.
External CSS
如果需要在不同页面中使用你的样式表,那么通常建议在一个单独的文件中定义一个公共样式表。层叠样式表文件将拥有 .css 这样的扩展,并使用 <link> 标记包含到 HTML 文件中。
If you need to use your style sheet to various pages, then it’s always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.
考虑我们定义一个样式表文件 style.css ,其中有以下规则。
Consider we define a style sheet file style.css which has following rules.
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
在这里,我们定义了三个 CSS 规则,这些规则将适用于为 HTML 标记定义的不同类。我建议你不要纠结于如何在定义这些规则,因为你在学习 CSS 时将学到如何定义。现在让我们在如下 HTML 文档中使用上述外部 CSS 文件。
Here we defined three CSS rules that will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let’s make use of the above external CSS file in our following HTML document.
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">
This is thick and green
</p>
</body>
</html>
Internal CSS
如果只想要将样式表规则应用到一个文档,那么你可以使用 * <style>* 标记将这些规则包含到 HTML 文档的头文件部分中。在内部样式表中定义的规则将覆盖在外部 CSS 文件中定义的规则。
If you want to apply Style Sheet rules to a single document only, then you can include those rules in the header section of the HTML document using <style> tag. Rules defined in the internal style sheet override the rules defined in an external CSS file.
让我们再次改写上述示例,但这一次,我们将在同一个 HTML 文档中使用 <style> 标记来书写样式表规则。
Let’s re-write the above example once again, but here we will write style sheet rules in the same HTML document using <style> tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red {
color: red;
}
.thick {
font-size: 20px;
}
.green {
color: green;
}
</style>
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">
This is thick and green
</p>
</body>
</html>
Inline CSS
你可以使用相关标记的样式属性,将样式表规则直接应用到任何 HTML 元素。这仅应在你想要对任何 HTML 元素进行特定更改时执行。与元素内联定义的规则将覆盖在外部 CSS 文件中定义的规则,以及在 <style> 元素中定义的规则。
You can apply style sheet rules directly to any HTML element using the style attribute of the relevant tag. This should be done only when you are interested in making a particular change in any HTML element. Rules defined inline with the element override the rules defined in an external CSS file as well as the rules defined in <style> element.
让我们再次改写上述示例,但这一次,我们将使用这些元素的 style 属性,将样式表规则与 HTML 元素一起书写。
Let’s re-write the above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">
This is thick and green
</p>
</body>
</html>