Internet Technologies 简明教程

CSS

Introduction

CSS 是 Cascading Style Sheets. 的缩写。它有助于将 HTML 元素的表现形式定义为单独的文件，称作具有 .css 扩展名的 CSS 文件。

CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML elements as a separate file known as CSS file having .css extension.

CSS 通过在一个位置进行更改来帮助更改任何 HTML 元素的格式。所做的所有更改将自动反映到该元素所出现的网站的所有网页中。

CSS helps to change formatting of any HTML element by just making changes at one place. All changes made would be reflected automatically to all of the web pages of the website in which that element appeared.

CSS Rules

CSS 规则是我们为了创建样式表而必须创建的样式。这些规则定义关联 HTML 元素的外观。CSS 语法的通用形式如下：

CSS Rules are the styles that we have to create in order to create style sheets. These rules define appearance of associated HTML element. The general form of CSS syntax is as follows:

Selector {property: value;}

Key Points

Selector is HTML element to which CSS rule is applied.
Property specifies the attribute that you want to change corresponding to the selector.
Property can take specified value.
Property and Value are separated by a colon (:).
Each declaration is separated by semi colon (;).

以下是一些 CSS 规则的示例：

Following are examples of CSS rules:

P { color : red;}

h1 (color : green; font-style : italic }

body { color : cyan; font-family : Arial; font- style : 16pt}

Embedding CSS into HTML

以下是向 HTML 文档添加 CSS 的四种方法。

Following are the four methods to add CSS to HTML documents.

Inline Style Sheets

Inline Style Sheets 随 HTML 元素一起包含，即它们与该元素并列放置。若要添加内联 CSS，我们必须声明样式属性，该属性可以包含任何 CSS 属性。

Inline Style Sheets are included with HTML element i.e. they are placed inline with the element. To add inline CSS, we have to declare style attribute which can contain any CSS property.

Syntax:

<Tagname STYLE = “ Declaration1 ; Declaration2 “>  …. </Tagname>

让我们考虑使用内联样式表的以下示例：

Let’s consider the following example using Inline Style Sheets:

<p style="color: blue; text-align: left; font-size: 15pt">
Inline Style Sheets are included with HTML element i.e. they are placed inline with the element.
To add inline CSS, we have to declare style attribute which can contain any CSS property.
</p>

Output −

Embedded Style Sheets

Embedded Style Sheets 用于对特定元素的所有出现应用相同的样式。这些在 <head> 元素中使用 <style> 元素定义。

Embedded Style Sheets are used to apply same appearance to all occurrence of a specific element. These are defined in <head> element by using the <style> element.

Syntax

<head> <title> …. </title>
   <style type =”text/css”>
      …….CSS Rules/Styles….
   </style>
</head>

让我们考虑使用嵌入式样式表的以下示例：

Let’s consider the following example using Embedded Style Sheets:

<style type="text/css">
   p {color:green; text-align: left; font-size: 10pt}
   h1 { color: red; font-weight: bold}
</style>

External Style Sheets

External Style Sheets 是包含 CSS 规则的单独的 .css 文件。这些文件可以使用带有 rel 属性的 <link> 标签链接到任何 HTML 文档。

External Style Sheets are the separate .css files that contain the CSS rules. These files can be linked to any HTML documents using <link> tag with rel attribute.

Syntax:

<head> <link rel= “stylesheet”  type=”text/css” href= “url of css file”>
</head>

为了创建外部 css 并将其链接到 HTML 文档，请遵循以下步骤：

In order to create external css and link it to HTML document, follow the following steps:

First of all create a CSS file and define all CSS rules for several HTML elements. Let’s name this file as external.css.

p{
   Color: orange;     text-align:  left;        font-size: 10pt;
}
h1{
   Color: orange;      font-weight: bold;
}

Now create HTML document and name it as externaldemo.html.

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <link rel="stylesheet"  type="text/css" href="external.css">
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>

Imported Style Sheets

Imported Style Sheets 允许我们从其他样式表导入样式规则。要导入 CSS 规则，我们必须在样式表中的所有规则之前使用 @import。

Imported Style Sheets allow us to import style rules from other style sheets. To import CSS rules we have to use @import before all the rules in a style sheet.

Syntax:

<head><title> Title Information </title>
   <style type=”text/css”>
      @import URL (cssfilepath)
      … CSS rules…
   </style>
</head>

让我们考虑使用内联样式表的以下示例：

Let’s consider the following example using Inline Style Sheets:

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <style>
         @import url(external.css);
      </style>
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>