CSS入门
在本教程中，我们将学习使用CSS设置网页样式的不同方法。
因此，打开您喜欢的文本编辑器或者IDE并开始编码。
项目文件夹
创建一个项目文件夹并为其命名。
对于本教程，我将在计算机上创建一个项目文件夹，并将其命名为" css-tutorial"。
现在，在项目文件夹中创建一个新文件夹，并将其命名为" css"。
此文件夹将存储样式表。
此时，项目文件夹将如下所示。
index.html页面
CSS用于设置网页样式，因此我们将使用以下index.html页面。
<!DOCTYPE html> <html> <head> <title>Index Page</title> </head> <body> <h1>Introduction</h1> <p>This is a sample paragraph.</p> <p>The second paragraph.</p> <p>Last para.</p> </body> </html>
此时，项目文件夹将如下所示。
设置html页面样式的不同方法
有3种样式的html页面样式。
- 内联样式
- 嵌入式风格
- 外链形式
内联样式
在此方法中，将样式属性应用于HTML元素。
以下是内联样式的示例。
<h1 style="color : red;">Introduction</h1>
在上面的行中，我们使用内联样式将标题h1的颜色设置为红色。
内联样式只会影响应用该样式的元素。
因此，在上面的示例中，仅该标头被染成红色，其他标头将不受影响。
嵌入式风格
在这种方法中，要应用于文档的所有样式都被组合在head标签中。
样式规则将应用于整个HTML页面。
下面是一个示例，其中我们将所有段落元素的字体大小设置为16px。
<style>
p {
font-size : 16px;
}
</style>
上面的样式放在head标记内，并且样式规则应用于页面的所有段落元素。
外链形式
在这种方法中，我们创建一个样式表文件，然后在该文件中编写样式规则。
然后，将样式表包含在我们要设置样式的文件(例如index.html)中。
示例：我们在css文件夹中创建了一个样式表文件default.css。
该文件包含以下规则。
p {
font-size : 16px;
}
此时，项目文件夹将如下所示。
现在，我们在head标签的index.html文件中包含样式表default.css。
<!DOCTYPE html> <html> <head> <title>Index Page</title> <link href="css/default.css" rel="stylesheet"> </head> <body> <h1>Introduction</h1> <p>This is a sample paragraph.</p> <p>The second paragraph.</p> <p>Last para.</p> </body> </html>
要记住的要点
内联样式
优点：易于设置。
缺点：很难维护。
不是最好的选择。
假设您有多个页面，每个页面都有数百个段落。
如果所有这些" p"元素都使用内联样式，那么更改样式属性将非常痛苦，因为您必须转到每个段落元素并更改其内联样式。
嵌入式风格
优点：这比嵌入式样式更好。
如果要一次性设置页面中所有段落的样式属性，则此函数很有用。
缺点：仅适用于创建页面的页面。
如果要为所有页面使用相同的样式规则，则必须在所有页面中定义嵌入样式。
外联样式
优点：一次创建您的逻辑并将其应用于所有页面。
缺点：如果外部样式表无法加载，则的所有页面都将丢失其样式。
