HTML CSS
HTML CSS样式
让我们假设我们使用简单的HTML代码创建了我们的网页，并且我们希望能够以正确的格式展示我们的网页并吸引人的东西。因此，我们可以使用CSS（级联样式表）属性来设置网页样式。
CSS用于在由HTML元素组成的网页中应用样式，它描述了网页的外观。
CSS提供了各种样式属性，例如背景色，填充，边距，边框颜色等，以为网页设置样式。
每个CSS中的属性有一个名称/值对，每个属性都用分号（;）分隔。
注意:在本章中，我们对CSS进行了概述。您将在我们的CSS教程中深入了解CSS的所有内容。
示例:
<body style="text-align: center;">
<h2 style="color: red;">欢迎使用lidihuo</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">这是一个很好的网站，可以非常简单地学习技术。</p>
</body>
在上面的示例中，我们使用样式属性为代码提供了一些样式格式。
输出:
欢迎使用lidihuo
这是一个很好的网站，可以非常简单地学习技术。
三种应用CSS的方法
要将CSS与HTML文档一起使用，有以下三种方法:
内联CSS：使用HTML元素中的style属性定义CSS属性。
内部或嵌入式CSS：使用<head>部分中的<style>标记定义CSS。
外部CSS：在单独的.css文件中定义所有CSS属性，然后使用 <link>标签。
内联CSS:
内联CSS用于将CSS应用于单个元素。它可以在每个元素中唯一地应用样式。
要应用内联CSS，您需要在HTML元素中使用style属性。我们可以根据需要使用任意多个属性，但是每个属性都应使用分号（;）分隔。
示例:
<h3 style="color: red;
font-style: italic;
text-align: center;
font-size: 50px;
padding-top: 25px;
">使用内联CSS学习HTML</h3>
输出:
使用内联CSS学习HTML
内部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>学习html中的css样式</h2>
<p class="blue">这是一段蓝色文字</p>
<p class="red">这是一段红色文字</p>
<p class="green">这是一段绿色文字</p>
</body>
</html>
输出:
学习html中的css样式
这是一段蓝色文字
这是一段红色文字
这是一段绿色文字
注意:在上面的示例中，我们使用了class属性，您将在下一章中学习它。
外部CSS:
外部CSS包含一个单独的CSS文件，该文件仅包含使用类名，ID名称，标记名等的样式代码。我们可以使用通过使用<link>标记将该CSS文件包含在HTML文件中，可以将该CSS文件包含在任何HTML文件中。
如果一个应用程序有多个HTML页面，并且使用相似的CSS，则可以使用外部CSS。
需要创建两个文件才能应用外部CSS
首先，创建HTML文件
创建一个CSS文件并使用.css扩展名保存（此文件仅包含样式代码。）
使用以下方法在HTML文件中链接CSS文件 HTML文档标题部分中的<link>标记。
示例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"type="text/css"href="style.css">
</head>
<body>
<h2>学习html中的css样式</h2>
<p class="blue">这是一段蓝色文字</p>
<p class="red">这是一段红色文字</p>
<p class="green">这是一段绿色文字</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; }
输出:
学习html中的css样式
这是一段蓝色文字
这是一段红色文字
这是一段绿色文字
常用的CSS属性:
| 属性名称 |
语法 |
说明 |
| background-color |
background-color:red; |
它定义了该元素的背景色。 |
| color |
color:lightgreen; |
它定义元素文本的颜色 |
| padding |
padding: 20px; |
它定义了内容和边框之间的空间。 |
| margin |
margin: 30px; margin-left: |
它在元素周围创建空间。 |
| font-family |
font-family:cursive; |
字体家族为特定元素定义字体。 |
| Font-size |
font-size:50px;
|
字体大小定义特定元素的字体大小。 |
| text-align |
text-align:left;
|
它用于在选定位置对齐文本。 |
