在HTML中引用CSS的方法是通过<link>
标签将CSS文件链接到HTML文件中,以下是一个简单的示例:
1、创建一个名为styles.css
的CSS文件,并在其中编写样式规则。
body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
2、在HTML文件中使用<link>
标签引用styles.css
文件,将以下代码添加到HTML文件的<head>
部分:
<link rel="stylesheet" href="styles.css">
这将告诉浏览器在加载HTML文件时,也加载并应用styles.css
文件中的样式。
3、在HTML文件中添加一些元素,以显示CSS样式的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个使用CSS样式的简单示例。</p> </body> </html>
现在,当您打开HTML文件时,浏览器将加载并应用styles.css
文件中的样式,使页面具有不同的外观。