CSS 之 光进入光

一个.概念

css，层叠样式表（英语：Cascading Style Sheets。简写CSS）。又称串样式列表、层次结构式样式表文件，一

种用来为结构化文档（如HTML文档或XML应用）加入样式（字体、间距和颜色等）的计算机语言。“层叠”是指一个

文件的样式能够从其它的样式表中继承下来。

读者在有些地方能够使用他自己更喜欢的样式，在其它地方则继承或“层

叠”作者的样式。这样的层叠的方式使作者和读者都能够灵活地增加自己的设计，混合各人的爱好。

二.作用：

将网页的内容和样式进行分离（解耦合）

        举例：曾经给文字加颜色的做法

 <font color="0000ff ">阿猫</font>
 <font color="0000ff ">阿狗</font>
 <font color="0000ff ">阿兔</font>

从上样例中能够看出出现了大量的反复。内容和颜色融合到一起了，假设我们须要换颜色的话还得改代码。

当代

码多的话。替换就麻烦大了。并且easy出错。

于是有人提出，HTML文件里仅仅包括结构和内容的信息，CSS文件里仅仅

包括样式的信息。

三.CSS的使用方法

1.加上<span>选择器

当中即能够放代码，也能够放文字。并做好标记。能够在样式文件里通过标记文件进行改动。

    <span class="menu">阿猫</span>
    <span class ="menu">阿狗</span>
    <span class="menu">阿兔</span>

2.在样式表中写好相应的标记的样式

以类选择器为例

.menu{
    color:#00f;                     /*在这里Ctrl+J会自己主动列出代码的样式*/
}

3.将网页和样式表相应就可以

以后改颜色直接改样式文件就可以。成百上千个网页对相应一个样式文件的话，改起来就easy多了。

        

<link href="StyleSheet1.css" rel="stylesheet" />

注意：当选择器之间有共同的属性时能够用并列选择器。各个选择器之间用逗号隔开就可以

.menu,.title{
    background-color:#ffd800;
}

四.CSS中选择器的类型：

1.类选择器,上边的样例为类选择器

2.ID选择器

<span id="special" class="menu">阿猫</span>
#special{
    font-weight:bold;          /*粗体*/
}

注意：若ID选择器和类选择器设置了同一个属性的不同的值，以ID选择器为准

3.HTML标签选择器（针对的是body标签中的内容）

body {
    color :#ffd800;
}

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">       </span>

标签选择器的优先级：HTML选择器<类选择器 <ID选择器

此外还有万用选择器，属性选择器和伪选择器，有兴趣的能够自己查一下。

四.选择器的继承关系

假设选择器中还有选择器，那么后面的选择器继承前面的选择器，比如：

<span class="title">阿猫是<span>一</span>一仅仅猫</span>

中间“一”的样式改动的使用方法：

.title span{
    font-style:initial;
    font-size :larger ;
    font-weight :bold;
}       

注意：this 和span之间必须有空格。可是空格个数不限

五.在同一个类选择器内命名不同的选择器类名

<span class="title title2">阿猫是一仅仅猫</span>

注意：多个选择器一起写的仅仅限于类选择器当两个选择器表示同一个属性的不同值时以后在CSS中的先后顺序为

准，排在前面的会覆盖后面的。

点睛：CSS的核心就是将网页的内容和样式解耦合。html文件仅仅负责要显示的文字。

详细的显示成什么样去封装

到样式文件去做。这样改动前台显示样式的时候直接通过改动样式文件就可以。改动方便且不easy出错。

符合面向对象

编程思想。

版权声明：本文博客原创文章。博客，未经同意，不得转载。