【CSS】CSS语言的使用方式和详细说明___完整教程（总结）

（一）CSS概述：

1、CSS名词解释：

CSS：Cascading Style Sheets 中文意思：层叠样式表。

2、CSS定义：

它是用来定义网页的显示效果。

3、CSS作用：

（1）可以解决html代码对样式定义的重复，

（2）提高了后期样式代码的可维护性，

（3）并增强了网页的显示效果功能。

4、CSS简述：

CSS将网页内容和显示样式进行分离，提高了显示功能。

（二）CSS和HTML在网页中的结合方式：

（1）style属性

（2）style标签

（3）导入

（4）链接

例如：

☆ 1、style属性方式

<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>

☆ 2、style标签方式

<style type=”text/css”>
p { color:#FF0000;}
</style>

☆ 3、导入方式

<style type="text/css">
@import url(myDiv.css)
</style>

☆ 4、链接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />

注意，这几种方式平常使用的很普遍，每一中方式都有自己的特点。

（三）CSS语法：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; … declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

（四）选择器：

选择器分类：

（1）html标签名选择器

（2）class类选择器

（3）id选择器

【注意】：

每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。

在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

选择器的优先级：

标签名选择器 < class选择器 < id选择器 < style属性选择器

（五）扩展选择器：

☆关联选择器 ：

标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。例如：

p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>湖南城市学院</b>段落样式</p>
<p>P标签段落</p>

☆组合选择器 ：

对多个选择器进行相同样式的定义。例如，我们想对“div中的

<b>

标签”和“类名为cc”的区域设置相同的样式，

则可以定义如下的组合选择器：

.cc, div b{/*不同选择器之间用逗号分开*/

background-color:#0000ff;

color:#fff;

}

☆伪元素选择器：

其实就在html中预先定义好的一些选择器，称为伪元素。

格式：标签名:伪元素。类名 标签名。类名:伪元素。

例如：

超链接a标签中的伪元素：

a:link 超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态（未点击）。

a:active 点击超链接时的状态。

段落p标签中的伪元素：

p:first-line 段落的第一行文本。

p:first-letter 段落中的第一个字母。

自定义伪元素：

:focus 具有焦点的元素