Internet Technologies 简明教程

CSS

Introduction

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

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

CSS Rules

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

Selector {property: value;}

Key Points

  1. 选择器是应用 CSS 规则的 HTML 元素。

  2. 属性指定您想要更改的、对应选择器的属性。

  3. 属性可以获取指定的值。

  4. 属性和值用冒号 (:) 分隔。

  5. 每个声明用分号 (;) 分隔。

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

P { color : red;}

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

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

Embedding CSS into HTML

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

Inline Style Sheets

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

Syntax:

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

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

<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 −

inline style sheet

Embedded Style Sheets

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

Syntax

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

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

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

External Style Sheets

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

Syntax:

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

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

  1. 首先创建一个 CSS 文件并定义几个 HTML 元素的所有 CSS 规则。让我们将此文件命名为 external.css。

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

  1. 现在创建一个 HTML 文档并将其命名为 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>
external style sheet

Imported Style Sheets

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

Syntax:

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

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

<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>
imported style sheet