HTML教程-使用 CSS 的 HTML 样式

使用 CSS 的 HTML 样式

假设我们已经使用简单的 HTML 代码创建了我们的网页，并且我们想要一些能够以正确的格式呈现我们的页面并且具有明显吸引力的东西。为此，我们可以使用 CSS（层叠样式表）属性来设计我们的网页。

CSS 用于在由 HTML 元素组成的网页中应用样式。它描述了网页的外观。

CSS 提供各种样式属性，例如背景颜色、填充、边距、边框颜色等等，以设置网页样式。

CSS 中的每个属性都有一个名称-值对，每个属性之间用分号 (;) 分隔。

注意：在本章中，我们对 CSS 进行了简要概述。您将在我们的 CSS 教程中深入了解 CSS 的一切。

例子：

<body style="text-align: center;">  
      <h2 style="color: red;">Welcome to javaTpoint</h2>  
      <p style="color: blue; font-size: 25px; font-style: italic ;">This is a great website to learn technologies in very simple way. </p>  
</body>

在上面的例子中，我们使用了一个样式属性来为我们的代码提供一些样式格式。

输出：

应用 CSS 的三种方式

要在 HTML 文档中使用 CSS，有以下三种方法：

内联 CSS：使用 HTML 元素中的样式属性定义 CSS 属性。
内部或嵌入式 CSS：使用 <head> 部分中的 <style> 标签定义 CSS。
外部 CSS：在单独的 .css 文件中定义所有 CSS 属性，然后在部分中使用标记将文件包含在 HTML 文件中。

内联 CSS：

内联 CSS 用于在单个元素中应用 CSS。它可以在每个元素中应用唯一的样式。

要应用内联 CSS，您需要在 HTML 元素中使用 style 属性。我们可以使用任意多的属性，但是每个属性应该用分号 (;) 分隔。

例子：

<h3 style="color: red;  
            font-style: italic;  
            text-align: center;  
            font-size: 50px;  
            padding-top: 25px;">Learning HTML using Inline CSS</h3>

输出：

内部 CSS：

内部样式表包含 HTML 文档的 <head> 部分中网页的 CSS 属性。要使用内部 CSS，我们可以使用 class 和 id 属性。

我们可以使用内部 CSS 为单个 HTML 页面应用样式。

例子：

<!DOCTYPE html>  
<html>  
<head>  
                  <style>  
      /*Internal CSS using element name*/  
            body{background-color:lavender;  
             text-align: center;}  
             h2{font-style: italic;  
              font-size: 30px;  
              color: #f08080;}  
            p{font-size: 20px;}  
        /*Internal CSS using class name*/  
            .blue{color: blue;}  
            .red{color: red;}  
            .green{color: green;}  
      </style>  
    </head>  
  <body>  
   <h2>Learning HTML with internal CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>

注意：在上面的示例中，我们使用了一个类属性，您将在下一章中学习。

外部 CSS：

外部 CSS 包含一个单独的 CSS 文件，它只包含使用类名、id 名、标签名等的样式代码。我们可以在任何 HTML 文件中使用这个 CSS 文件，方法是使用 <link> 标签将它包含在 HTML 文件中。

如果我们有一个应用程序的多个 HTML 页面并且使用相似的 CSS，那么我们可以使用外部 CSS。

应用外部 CSS 需要创建两个文件

首先，创建 HTML 文件
创建一个 CSS 文件并使用 .css 扩展名保存它（此文件仅包含样式代码。）
使用 HTML 文档标头部分中的标记将 CSS 文件链接到 HTML 文件中。

例子：

<!DOCTYPE html>  
<html>  
<head>  
    <link rel="stylesheet" type="text/css" href="style.css">  
    </head>  
  <body>  
   <h2>Learning HTML with External CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>

CSS 文件：

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

常用的 CSS 属性：

属性名称	句法	描述
background-color	background-color:red;	它定义该元素的背景颜色。
color	color: lightgreen;	它定义元素文本的颜色
padding	padding: 20px;	它定义了内容和边框之间的空间。
margin	margin: 30px; margin-left:	它在元素周围创建空间。
font-family	font-family: cursive;	Font-family 定义特定元素的字体。
Font-size	font-size: 50px;	字体大小定义特定元素的字体大小。
text-align	text-align: left;	它用于在选定位置对齐文本。