CSS 之 浅入浅出_html/css_WEB-ITnose

一.概念

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

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

文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层

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

        将网页的内容和样式进行分离（解耦合）
        举例：以前给文字加颜色的做法
 

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

        从上例子中可以看出出现了大量的重复，内容和颜色融合到一起了，如果我们需要换颜色的话还得改代码。当代

码多的话，替换就麻烦大了。而且容易出错。于是有人提出，HTML文件中只包含结构和内容的信息，CSS文件中只

包含样式的信息。

        1.加上选择器

        其中即可以放代码，也可以放文字。并做好标记，可以在样式文件中通过标记文件进行修改。
    

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

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

        以类选择器为例

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

        3.将网页和样式表对应即可

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

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

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

        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选择器

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

<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的核心就是将网页的内容和样式解耦合，html文件只负责要显示的文字。具体的显示成什么样去封装

到样式文件去做。这样修改前台显示样式的时候直接通过修改样式文件即可，修改方便且不容易出错。符合面向对象

编程的思想。