HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

CSS

简介

CSS是层叠样式表的缩写。 它有助于将 HTML 元素的表示定义为一个单独的文件，称为 CSS 文件，扩展名为 .css。

CSS 只需在一处进行更改即可帮助更改任何 HTML 元素的格式。 所做的所有更改都会自动反映到出现该元素的网站的所有网页。

CSS 规则

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

Selector {property: value;}

要点

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

  • 属性指定您要更改的与选择器相对应的属性。

  • 属性可以采用指定值。

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

  • 每个声明都用分号 (;) 分隔。

以下是 CSS 规则的示例:

P { color : red;}

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

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

将 CSS 嵌入 HTML

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

  1. 内联样式表

  2. 嵌入样式表

  3. 外部样式表

  4. 引入样式表

内联样式表

内联样式表包含在 HTML 元素中，即它们与元素内联放置。 要添加内联 CSS，我们必须声明可以包含任何 CSS 属性的 style 属性。

语法:

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

输出 −

内联样式表

嵌入样式表

嵌入样式表用于将相同的外观应用于特定元素的所有出现。 这些是通过使用 <style> 元素在 <head> 元素中定义的。

<style> 元素必须包含 type 属性。 type 属性的值指定浏览器呈现时包含的语法类型。

语法

<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>
嵌入样式表

外部样式表

外部样式表是包含CSS规则的单独的.css文件。 这些文件可以使用 链接到任何 HTML 文档。 带有 rel 属性的标签。

语法:

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

为了创建外部 CSS 并将其链接到 HTML 文档，请按照以下步骤操作:

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

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

  • 现在创建 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>
外部样式表

导入的样式表

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

语法:

<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>
导入的样式表
❮ 上一节 下一节 ❯