首页教程软件教程正文

HTML使用CSS样式

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 983 浏览 2553 个字

摘要 :

文章目录应用CSS的三种方式内联CSS：内部CSS：外部CSS：常用的CSS属性：假设我们已经使用简单的HTML代码创建了我们的网页，而我们希望能够以正确的格式和视觉……

文
章
目
录

应用CSS的三种方式

内联CSS：
内部CSS：
外部CSS：

常用的CSS属性：

假设我们已经使用简单的HTML代码创建了我们的网页，而我们希望能够以正确的格式和视觉吸引力呈现我们的页面。为了实现这一点，我们可以使用CSS（层叠样式表）属性来为我们的网页设置样式。

CSS用于为由HTML元素组成的网页应用样式。它描述了网页的外观。
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元素中的style属性定义CSS属性。
内部或嵌入式CSS：在HTML文档的<head>部分中使用<style>标签定义CSS。
外部CSS：在单独的.css文件中定义所有CSS属性，然后使用HTML文件中的<link>标签在<head>部分包含该文件。

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

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

外部CSS：

外部CSS包含一个独立的CSS文件，该文件仅包含使用类名、id名称、标签名称等的样式代码。我们可以通过在HTML文件中使用<link>标签将此CSS文件应用于任何HTML文件。

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

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

首先，创建HTML文件
创建一个CSS文件并使用.css扩展名保存它（此文件仅包含样式代码）
在HTML文档的<head>部分使用<link>标签将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一样。

常用的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;	Font-size 为特定元素定义字体大小。
text-align	text-align: left;	用于将文本对齐到指定位置。