HTML样式通常通过CSS（层叠样式表）来定义和应用，虽然HTML元素本身也有一些内置的样式属性，但使用CSS是更现代且推荐的做法。下面是一些使用CSS来设置HTML元素样式的实例。
1. 内联样式（Inline Styles）
内联样式直接将样式应用于单个HTML元素。这通过在元素的style属性中编写CSS来实现。
html复制代码
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>内联样式示例</title> |
|
</head> |
|
<body> |
|
<h1 style="color:blue; font-size:24px;">这是一个带有内联样式的标题</h1> |
|
<p style="color:red; font-family:'Arial', sans-serif;">这是一个带有内联样式的段落。</p> |
|
</body> |
|
</html> |
2. 内部样式表（Internal Stylesheet）
内部样式表将CSS代码放在HTML文档的<head>部分的<style>标签内。
html复制代码
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>内部样式表示例</title> |
|
<style> |
|
h1 { |
|
color: green; |
|
text-align: center; |
|
} |
|
p { |
|
font-size: 16px; |
|
line-height: 1.5; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>这是一个带有内部样式表的标题</h1> |
|
<p>这是一个带有内部样式表的段落。</p> |
|
</body> |
|
</html> |
3. 外部样式表（External Stylesheet）
外部样式表是将CSS代码写入单独的文件（通常以.css为扩展名），然后在HTML文档中使用<link>标签引入。
styles.css（外部样式表文件）
css复制代码
|
h1 { |
|
color: purple; |
|
text-decoration: underline; |
|
} |
|
|
|
p { |
|
font-weight: bold; |
|
text-transform: uppercase; |
|
} |
index.html（HTML文档）
html复制代码
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>外部样式表示例</title> |
|
<link rel="stylesheet" type="text/css" href="styles.css"> |
|
</head> |
|
<body> |
|
<h1>这是一个带有外部样式表的标题</h1> |
|
<p>这是一个带有外部样式表的段落。</p> |
|
</body> |
|
</html> |
4. CSS选择器
CSS选择器用于选择你想要样式化的HTML元素。上述示例中使用了元素选择器（如h1和p），但还有更多类型的选择器，如类选择器（.classname）、ID选择器（#idname）和属性选择器等。
使用类选择器
styles.css
css复制代码
|
.highlight { |
|
background-color: yellow; |
|
padding: 10px; |
|
} |
index.html
html复制代码
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>类选择器示例</title> |
|
<link rel="stylesheet" type="text/css" href="styles.css"> |
|
</head> |
|
<body> |
|
<p class="highlight">这个段落有黄色的背景和高亮样式。</p> |
|
</body> |
|
</html> |
注意事项
· 内联样式优先级最高，但通常不推荐使用，因为它们增加了HTML代码的复杂性，并且不利于样式的复用和维护。
· 内部样式表和外部样式表相比，外部样式表更有利于样式的复用和缓存，推荐在大型项目中使用。
· 在使用外部样式表时，确保CSS文件的路径正确，并且文件服务器配置允许访问CSS文件。
· 使用CSS选择器时，要注意选择器的特异性（specificity）和样式规则的优先级，以确保样式能够正确应用。
