前端之CSS 创建css--行内引入、内联样式、外联样式
在CSS中,有三种方式可以将样式添加到HTML元素中:
- 行内引入(Inline Styles):直接在HTML元素的
style
属性中书写CSS代码。 - 内部引入(Internal Styles):在HTML文档的
<head>
部分使用<style>
标签包含CSS代码。 - 外部引入(External Styles):创建一个单独的CSS文件,并通过HTML文档的
<link>
标签引入。
以下是每种方法的示例代码:
- 行内引入:
<p style="color: red;">这是一个红色的段落。</p>
- 内部引入:
<head>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>这是一个蓝色的段落。</p>
</body>
- 外部引入:
<!-- 在<head>部分引入外部CSS文件 -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
styles.css 文件内容:
p {
color: green;
}
HTML文件使用上述<link>
标签引入了一个外部的CSS文件,所有<p>
元素将显示为绿色。
评论已关闭