文
章
目
录
章
目
录
假设我们已经使用简单的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; | 用于将文本对齐到指定位置。 |
