首页外联式设置css标签代码演示

外联式设置css标签代码演示

时间: 2024-10-05 13:04:29 浏览: 28

外联式CSS是指将CSS样式表（.css文件）独立于HTML文档，并通过`<link>`标签链接到HTML文件中。这样做的好处是可以维护样式的一致性和复用性。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>外联式CSS演示</title>  <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1 class="title">这是一个标题</h1> <p class="description">这是一段描述文字。</p>  /* styles.css */ .title { color: blue; font-size: 24px; } .description { color: green; font-style: italic; } </body> </html> ``` 在这个例子中，`styles.css`文件定义了`.title`和`.description`选择器对应的样式，而HTML文件只需通过`<link>`标签引入并应用这些样式。当你修改`styles.css`的内容时，所有关联的HTML元素会自动更新其样式。

阅读全文