1. 内联样式
内联样式是指将样式规则直接写在HTML元素的style属性中的样式。通过内联样式,可以为单个HTML元素指定特定的样式,而不影响其他元素。内联样式的优先级最高。
内联样式的语法如下:
<element style="property:value;">
其中,element为HTML元素,property为CSS属性,value为该属性的值。
内联样式的一个例子:
<p style="color:red;">这是一个红色的段落</p>
2. 内部样式表
内部样式表是指将样式规则直接写在HTML文件的<style>标签中,放在<head>标签内部。通过内部样式表,可以为整个HTML文件的多个元素指定相同的样式。
内部样式表的语法如下:
<style>
selector {
property: value;
}
</style>
其中,selector为选择器,property为CSS属性,value为该属性的值。
内部样式表的一个例子:
<style>
p {
color: blue;
}
</style>
3. 外部样式表
外部样式表是指将样式规则写在一个独立的CSS文件中,并通过<link>标签来引入HTML文件中。通过外部样式表,可以为多个HTML文件共享相同的样式。
外部样式表的语法如下:
<link rel="stylesheet" type="text/css" href="style.css">
其中,rel="stylesheet"表示该链接指向一个样式表,type="text/css"表示样式表的类型为CSS,href="style.css"表示样式表的路径。
外部样式表的一个例子:
<link rel="stylesheet" type="text/css" href="style.css">
4. 继承样式
继承样式是指某个HTML元素应用了样式规则,那么它的子元素也会继承这个样式。通过继承样式,可以使HTML文档的结构层次更加清晰。
继承样式的一个例子:
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: blue;
}
上面的例子中,body元素应用了font-family样式,那么页面中的所有子元素都会继承这个样式。而h1元素应用了color样式,只有h1元素及其子元素会应用这个样式。
总结:
在CSS中,样式可以分为内联样式、内部样式表、外部样式表和继承样式四类。内联样式是将样式直接写在HTML元素的style属性中,内部样式表是通过<style>标签写在HTML文件中,外部样式表是以独立的CSS文件形式存在并通过<link>标签引入,继承样式是子元素继承父元素的样式。根据实际需要选择不同的样式类型来实现不同的样式效果。