css有哪几类样式

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>标签引入,继承样式是子元素继承父元素的样式。根据实际需要选择不同的样式类型来实现不同的样式效果。