首页 > 代码库 > CSS 之 浅入浅出

CSS 之 浅入浅出

2024-07-26 04:38:06   218人阅读

一.概念

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

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

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

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

二.作用：

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

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

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

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

包含样式的信息。

三.CSS的用法

        1.加上<span>选择器

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

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

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

        以类选择器为例


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

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

        以后改颜色直接改样式文件即可。成百上千个网页对对应一个样式文件的话，改起来就容易多了。
        
<link href=http://www.mamicode.com/"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文件只负责要显示的文字。具体的显示成什么样去封装

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

编程的思想。

CSS 之 浅入浅出


联系
我们