CSS是为了实现样式，实际上ＨＴＭＬ也能实现样式，但是实际开发中为了使开发逻辑更加清楚，我们用ＨＴＭＬ写网页格式，用插入ＣＳＳ的方式插入样式，我将用两篇文章的篇幅去记录学习的过程。

插入ＣＳＳ三种方式

＃１．内联式

内联式就是在ＨＴＭＬ标签里面用ｓｔｙｌｅ关键字插入，一般开发不使用

<p style="color:red">这里文字是红色。</p>

＃２．嵌入式

嵌入式是在ｈｅａｄ标签内部，用ｓｔｙｌｅ标签定义样式，就像下面，一般开发不使用

<!DOCTYPE html>
<html lang="en">
<head >
   <!-- <link rel="stylesheet" href="../CSS/main.css" type="text/css/">-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>这是一个ｄｉｖ标签</div>
</body>
</html>

＃３．外部式

为了让业务逻辑更加清晰，我们常常使用外部式，就是在ｈｔｍｌ文件的ｈｅａｄ标签内部用ｌｉｎｋ标签指明外部的ｃｓｓ文件。

<!DOCTYPE html>
<html lang="en">
<head >
    <link rel="stylesheet" href="../CSS/main.css" type="text/css/">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>这是一个ｄｉｖ标签</div>
</body>
</html>

常用文本样式

font-size:设置字体大小，一个字的大小是２０ｐｘ
ｃｏｌｏｒ：设置颜色
ｌｉｎｅ－ｈｅｉｇｈｔ：设置行高
ｔｅｘｔ－ｉｎｄｅｎｔ：设置首行缩进
ｆｏｎｔ－ｗｅｉｇｈｔ：设置字体加粗
ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ加下划线，ｎｏｎｅ去掉下划线
ｔｅｘｔ－ａｌｉｇｎ：设置居中

＃ｃｓｓ文件

div{
    font-size: 20px;

    /*文本字体*/
    font-family: "Helvetica Neue", sans-serif;

    /*颜色*/
    color: red;

    /*设置文字倾斜*/
    /*font-style: italic;*/

    /*设置行高*/
    line-height: 40px;

    /*首行缩进,一个字是20px,这样就不用给&nbsp了*/
    text-indent: 40px;
}
em{
    font-style: italic;
    color: gold;
    font-weight: bolder;
}
h1{
    /*把h1设置成不加粗*/
    font-weight: normal;
}
span{
    line-height: 40px;/*设置行高，行高在文字的上下都有，相当于是一个格子*/
    color: gold;
    text-decoration: underline;/*加下划线*/
}
a{
    text-decoration: none;/*去掉链接的下划线*/
    /*a标签不能设置居中，p标签可以设置居中*/
}
p{
    text-align: center;/*设置居中*/
}

＃ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../CSS/文本样式.css">
    <meta charset="UTF-8">
    <title>常用文本样式</title>
</head>
<body>
    <h1>样式演示</h1>
    <div>
        <em>div1</em>是
    </div>
    <div>
        <span>CSS 为了将网页的内容和样式分开</span>，ＣＳＳ的思想诞生
        从此之后ＨＴＭＬ中的样式标签就废弃不用了
        <p>ＨＴＭＬ只负责文</p>档的结构，表现样式完全交给ＣＳＳ
        ＨＴＭＬ文档变得更加简洁
    </div>
    <a href="http://www.baidu.com">baidu </a>
</body>
</html>

＃结果
在这里插入图片描述但是到这里出现一个问题就是，如果是使用外部式，在ｈｔｍｌ文件中如果有三个ｄｉｖ，在ｃｓｓ文件中我们怎样设置才能使三个ｄｉｖ有不同的样式呢？这就引出了ｃｓｓ样式选择器

样式选择器

使用外部式，在ｃｓｓ文件里面这样定义：

div{
    /*能影响到所有的div*/
    font-family: "Droid Serif", "DejaVu Serif", "STIX", serif;
}

则这个样式能影响到所有的ｄｉｖ标签
如果想不同的ｄｉｖ样式不一样，就需要ｉｄ选择器

#div1{
    color: red;
}
#div2{
    color: aqua;
}

<div id="div1" class="green">这是第一个div</div><!--id用来匹配id选择器-->
    <!--用id选择器设置blue，用类选择器设置green，因为id的权重高于类选择器，所以还是blue-->
    <div id="div2">这是第二个div</div>

在ｈｔｍｌ文件中不同的ｄｉｖ设置不同的ｉｄ，ｃｓｓ文件中用ｉｄ选择器就能匹配上。
但是在实际开发中起名字很头疼，所以我们常用类选择器实现复用

/*类选择器，是实际开发中常用的 选择器*/
.green{
    color: green;
}
.big{
    font-size: 40px;
}

html文件中用ｃｌａｓｓ匹配

<div class="big" >这是第三个div</div>
    <!--用class来匹配类选择器，实际开发中常用这个，比如淘宝的前段代码-->
    <span class="green big">这是一个span</span>

在开发中我们常有这样需求：把一个ｄｉｖ中所有的ｓｐａｎ颜色设置成绿色，这个时候就需要层级选择器

.box{
    font-size: 20px;
    line-height: 30px;
    color: red;
    text-indent: 40px;
}
.box span{/*层级选择器，box下面的span都是这个样式*/
    color: green;
}
.box em{
    color: black;
    font-style: normal;
}
.box .span02{
    color: black;
}

一般来说层级选择器不超过四层
如果我们定义三个ｄｉｖ，三个ｄｉｖ字体大小，居中都相同，但是颜色不相同，除了重复定义三个类选择器的字体居中颜色外，还能用主选择器的方法，把相同样式放在主选择器里面：

.box1{
    color: red;
}
.box2{
    color: pink;
}
.box3{
    color: black;
}

.box1,.box2,.box3{  /*把相同的样式定义在主选择器*/
    font-size: 50px;
    text-align: center;
}

在一些网站中，我们经常可以看到，一些样式在鼠标悬停在上面是时会发生变化，这是利用伪类实现的.

.link{
    font-size: 30px;
    text-decoration: none;
    color: pink;
}
.link:hover{/*伪类*/
    color: black;
    font-weight: bold; /*鼠标放上去之后会变颜色，字体加粗*/
}
/*表示鼠标放上去时的悬停状态*/

为了解网站的一些ｂｕｇ，常用伪元素来为一块内容前后加上内容

/*伪元素*/
.box01,.box02{
    font-size: 20px;
}
.box01:before{
    content: "伪元素选择器新加的文字";
}
.box02:after{
    content: "伪元素添加到后面的";
    color: black;
}

完整代码

ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../CSS/CSS选择器.css">
    <meta charset="UTF-8">
    <title>标签选择器</title>
</head>
<body>
    <div id="div1" class="green">这是第一个div</div><!--id用来匹配id选择器-->
    <!--用id选择器设置blue，用类选择器设置green，因为id的权重高于类选择器，所以还是blue-->
    <div id="div2">这是第二个div</div>
    <div class="big" >这是第三个div</div>
    <!--用class来匹配类选择器，实际开发中常用这个，比如淘宝的前段代码-->
    <span class="green big">这是一个span</span>
    <p>这是p标签</p>
    <div class="box">
        层级选择器主要应用在<span class="span02">选择父元素</span>下的子元素，或者子元素下面的子元素，
        可与标签元素结合使用，减少命名，同时可以通过层级，防止命名冲突
        层级选择器主要应用在选<em>择父元素</em>下的子元素，或者子元素下面的子元素，
        可与标签元素结合使用，减少命名，同时可以通过层级，防止命名冲突
        <div class="box4">  <!--层级选择器-->
            层级选择器主要应用在<span>选择父元素</span>下的子元素，或者子元素下面的子元素，
            可与标签元素结合使用，减少命名，同时可以通过层级，防止命名冲突
            层级选择器主要应用在选<em>择父元素</em>下的子元素，或者子元素下面的子元素，
            可与标签元素结合使用，减少命名，同时可以通过层级，防止命名冲突
        </div>
    </div>
    <div class="box1">这是第一个ｄｉｖ</div>
    <div class="box2">这是第二个ｄｉｖ</div>
    <div class="box3">这是第三个ｄｉｖ</div><!--三个ｄｉｖ除了颜色不一样意外其他都一样，这样的情况就可以把相同的
                                            抽离出来-->

    <!--伪类及伪元素选择器-->
    <a href="http://www.csdn.net" class="link">csdn</a>
    <div class="box01">div1</div>
    <div class="box02">div2</div>
</body>
</html>

ｃｓｓ文件

div{
    /*能影响到所有的div*/
    font-family: "Droid Serif", "DejaVu Serif", "STIX", serif;
}

*{
    /*能影响到所有标签*/
    color: gold;
}

/*id选择器,用标签的id来匹配，标签的id不能重复,实际开发中不常用*/
#div1{
    color: red;
}
#div2{
    color: aqua;
}
/*类选择器，是实际开发中常用的 选择器*/
.green{
    color: green;
}
.big{
    font-size: 40px;
}

/*层级选择器，csdn源码，配合标签选择器和类选择器一起用*/
.box{
    font-size: 20px;
    line-height: 30px;
    color: red;
    text-indent: 40px;
}
.box span{/*层级选择器，box下面的span都是这个样式*/
    color: green;
}
.box em{
    color: black;
    font-style: normal;
}
.box .span02{
    color: black;
}
.box .box4{
    color: blue;
}
.box1{
    color: red;
}
.box2{
    color: pink;
}
.box3{
    color: black;
}

.box1,.box2,.box3{  /*把相同的样式定义在主选择器*/
    font-size: 50px;
    text-align: center;
}

/*
伪类及伪元素选择器：
    常用的伪类选择器有ｈｏｖｅｒ，表示鼠标悬浮在元素上时的状态，伪元素选择器有ｂｅｂｏｒｅ
    和ａｆｔｅｒ，他们可以通过样式在元素中插入内容
*/
.link{
    font-size: 30px;
    text-decoration: none;
    color: pink;
}
.link:hover{/*伪类*/
    color: black;
    font-weight: bold; /*鼠标放上去之后会变颜色，字体加粗*/
}
/*表示鼠标放上去时的悬停状态*/

/*伪元素*/
.box01,.box02{
    font-size: 20px;
}
.box01:before{
    content: "伪元素选择器新加的文字";
}
.box02:after{
    content: "伪元素添加到后面的";
    color: black;
}

网页样式
在这里插入图片描述
ａｕｔｈｏｒ：ｓｐｅｃｙｕｅ＠ｍａｉｌ．ｕｓｔｃ．ｅｄｕ．ｃｎ
ｇｉｔｈｕｂ：https://github.com/zhangyuespec/CSS

CSS入门１

插入ＣＳＳ三种方式

常用文本样式

样式选择器

完整代码

猜你喜欢