📌  相关文章
📜  CSS

📅  最后修改于: 2020-12-14 06:15:54             🧑  作者: Mango

介绍

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

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

  1. 内联样式表

  2. 嵌入式样式表

  3. 外部样式表

  4. 导入的样式表

内联样式表

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

句法：

  ….

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


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.

输出-

内联样式表

嵌入式样式表

嵌入式样式表用于为所有出现的特定元素应用相同的外观。这些通过使用

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

嵌入式样式表

外部样式表

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

句法：

为了创建外部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。

 External Style Sheets Demo 
      
   
   
      
 External Style Sheets

      
External Style Sheets are the separate .css files that contain the CSS rules.

外部样式表

导入的样式表

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

句法：

 Title Information

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

 External Style Sheets Demo 
      
   
   
      
 External Style Sheets

      
External Style Sheets are the separate .css files that contain the CSS rules.

导入样式表