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中

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

内联样式表
嵌入式样式表
外部样式表
导入样式表

内联样式表

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

语法

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

输出 -

嵌入式样式表

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

<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文件。这些文件可以通过使用带有rel属性的<link>标记链接到任何HTML文档。

语法

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

打印页面