WEB基础之：CSS

一、CSS概述。

Cascading Style Sheet 层叠样式表

作用是使HTML和显示的样式进行分离。

二、CSS和HTML的四种结合方式。

第一种：使用标签的style属性。在属性中写样式。行内样式。
例：<p style="color:red">一段文字</p>

第二种：使用style标签，在style标签体内写样式。一般在head里面写。
例：<style type="text/css"></style>
type属性：定义style标签体的内容类型。

第三种：使用link标签，导入外部的css文件。
例：<link rel="stylesheet" href="demo.css" type="text/css">
rel：规定当前文档和目标文档之间的关系。
href：css资源的URL。
type：规定目标URL的MIME类型。
MIME：多用途互联网邮件扩展类型。

第四种：使用@import导入外部css（用的很少）。
例：<style type="text/css" @import:url('demo.css'); </style>

三、CSS样式优先级和代码规范。

优先级：
由上而下，由外向内，优先级从低到高。
简单的说：就近原则（谁离标签近，就使用哪个样式）

代码规范：
选择器名称｛
样式的属性:属性的值;
｝
总结：属性和属性之间用 ; 分隔。
属性和值之间用 : 分割。
一个属性有多个值的情况下，值之间用空格分割。

四、三种常用选择器。

第一种：HTML标签选择器。
以HTML的标签名称作为选择器的名称。

例：
div{
样式的属性:属性的值;
}

第二种：ID选择器，用到的是HTML标签的id属性。
以#加上id属性的值作为选择器的名称。
例：
#div1{
样式的属性:属性的值;
}

第三种：类选择器，用到的是HTML标签的class属性。
以.加上class属性的值作为选择器的名称。

例：
.myspan{
样式的属性:属性的值;
}

五、三种扩展选择器。

第一种：关联选择器，是以外标签空格内标签作为选择器的名称。

例：
p d{
样式的属性:属性的值;
}

第二种：组合选择器，用的是标签的名称 , 表标签的名称来定义选择器的名称。

例：
dir,span{
样式的属性:属性的值;
}

第三种：伪元素选择器，定义的是超链接的几种行为。

例：
a:link{
color:red;
}
link：未点击状态。

a:hover{
font-size:25px;
}
hover：鼠标悬停状态。

a:active{
color:blue;
}
active：鼠标点击时状态。

a:visited{
text-decoration:none;
}
visited：鼠标点击后状态。