CSS的样式有哪几种？

css 样式代码插入的形式来看基本可以分为以下三种：内联式、嵌入式和外部式三种。

且优先级为：内联式>嵌入式>外部式。

注意：

嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右侧代码，<link herf="styless1"...>代码在<style type="text/css">...</style>代码的前面。

总的来说，就是————就近原则（离被设置元素越近优先级别越高）。但需要注意上面所总结的优先级都有一个前提：内联式、嵌入式、外部式样式是在相同权值的情况下。

1、css 内联样式表

css样式表就是吧css的代码直接写在现有的HTML中，如下面代码：

<p style="color:red">这是红色的字。</P>

并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<html>
<head>
  <title>认识html标签</title>
<style type="text/css">
span{
  color:red;
  }
  </styele>
</head>
<body>
</body>
</html>

2、css嵌入样式表

嵌入式css样式，就是可以把css样式代码写在标签之间。并且一般情况下嵌入式css样式写在之间。如右边代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
 </html>

3、css外部样式表

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

注意

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、标签位置一般写在标签之内。

index.html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>嵌入式css样式</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

style.css

span{
   color:red;
   font-size:20px;
}

4、CSS样式的基本选择器。

CSS四种基本选择器：

1、标签选择器（元素选择器）

标签选择器可以把某一类标签全部选择出来。标签选择器最大的优点是能够快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

标签名 {属性：属性值}

2、id选择器

它可以为标有特定的id的HTML元素指定特定的样式。 id选择器以"#"来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {coloc:red} #green {color:green} 下面HTML代码中，id属性为red的p元素显示为红色,而id属性为green的p元素显示为绿色。

<p id="red">这个段落是红色。

<p id="green">这个段落是绿色。

注意：id属性只能在每个HTML文档中出现一次。这是它和类选择的区别。它可以同时存在。

3、类别选择器

类选择器根据类名来选择，前面以“.”来标志。

示例：

.demoDiv{
color:#FF0000;
}

4、通用选择器

通用选择器用*来表示。例如：

*{
font-size: 12px;
}

表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。

CSS几种扩展选择器：

1、后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。

<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">黑色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>

2、伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
input:focus{
background:# E0F1F5;
}

3、群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：

p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}

4、伪元素选择器

所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器。