HTML Styles - CSS

HTML Styles - CSS （HTML样式- CSS）

CSS is used to style HTML. It determines how the HTML elements appear on the screen, paper, or in other media. （CSS用于设置HTML样式。它决定了HTML元素在屏幕、纸张或其他媒体上的显示方式。）

CSS saves a lot of work. It can control the layout of several pages all at once. （CSS节省了大量工作。它可以同时控制多个页面的布局。）

You can add CSS to HTML elements in 3 ways:

  • Inline, where the style attribute is used in HTML elements. （-内联，其中style属性用于HTML元素。）

  • Internal, where the <style> element is used in the <head> section.

  • External, where an external CSS file is used. （-外部，使用外部CSS文件。）

Let’s look through each way. （让我们仔细看看每一种方式。）

Inline CSS

Inline CSS （内嵌 CSS）

An inline CSS applies a particular style to a single HTML element. Here the style attribute of an HTML element is used. （内联CSS将特定样式应用于单个HTML元素。此处使用HTML元素的style属性。）

In the example below the text color of the <p> element is red:

Example of the inline CSS: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h1>Usage of the inline CSS</h1>
   <p style="color:red;">The paragraph is red.</p>
 </body>
</html>

Internal CSS

Internal CSS （内部CSS）

An internal CSS specifies a style for a single HTML page. It is defined in the <head> element of an HTML page, inside of a <style> tag:

Example of the internal CSS: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     body {
       background-color: yellow;
     }
     h1 {
       font-size: 30px;
     }
     p {
       font-size: 18px;
     }
   </style>
 </head>
 <body>
   <h1>Lorem Ipsum</h1>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

External CSS

External CSS （外部CSS）

An external style sheet specifies the style for multiple HTML pages. It can change the look of the whole website by changing just one file. （外部样式表指定多个HTML页面的样式。只需更改一个文件，即可更改整个网站的外观。）

For using an external style sheet, you should add a link to it inside of the （要使用外部样式表，您应该在）

Example of the external CSS sheet: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <h1>Lorem Ipsum</h1>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

The file can’t contain any HTML code and must be saved with a .css extension. （文件不能包含任何HTML代码，必须使用.css扩展名保存。）

CSS Fonts

CSS Fonts （CSS字体）

The CSS color property describes the color of the text content. （CSS颜色属性描述文本内容的颜色。）

The CSS font-family property defines the font of the text content. （CSS font-family属性定义文本内容的字体。）

The CSS font-size property defines the text size. （CSS font-size属性定义文本大小。）

Example of the CSS fonts: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     h1 {
       color: #008000;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       font-size: 200%;
     }
     p {
       color: #666666;
       font-family: 'New Roman', serif;
       font-size: 150%;
     }
   </style>
 </head>
 <body>
   <h1>Lorem Ipsum</h1>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

CSS Border

CSS Border （CSS边框）

The CSS border property sets values to all four sides of an element. （CSS边框属性将值设置为元素的所有四个边。）

Example of the CSS border property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       border: 2px dotted red;
     }
   </style>
 </head>
 <body>
   <h1>Heading</h1>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

CSS Padding

CSS Padding （CSS内边距）

The CSS padding property specifies padding (space) between the text and the border. （CSS padding属性指定文本和边框之间的填充（空格）。）

Example of the CSS padding property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       border: 2px dashed #008022;
       padding: 50px;
     }
   </style>
 </head>
 <body>
   <h1>Heading</h1>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

CSS Margin

CSS Margin （CSS外边距）

The CSS margin property creates space around the element. （CSS margin属性在元素周围创建空间。）

Example of the CSS margin property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       border: 2px dashed #090fce;
       margin: 50px;
     }
   </style>
 </head>
 <body>
   <h1>Heading</h1>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

The id Attribute

The id Attribute （ID属性）

The id attribute specifies a specific style for one element. （Id属性指定一个元素的特定样式。）

Example of the id attribute: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     #large-text {
       border: 8px groove powderblue;
       font-size: 24px;
       padding: 20px;
     }
   </style>
 </head>
 <body>
   <h1>Heading</h1>
   <p id="large-text">
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

The Class Attribute:

The Class Attribute:

The class attribute is used to specify a style for special kinds of elements. （Class属性用于为特殊类型的元素指定样式。）

Example of the class attribute: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .text {
       border: 8px inset powderblue;
       font-size: 20px;
       padding: 10px;
     }
   </style>
 </head>
 <body>
   <h1>Heading</h1>
   <p class="text">
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <p class="text">
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>
← HTML Scripts
HTML File Paths →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部