第五篇 CSS入门明白三种嵌套形式，三种常用控制器

CSS入门

css是层叠式样式表

css的作用是什么呢？举个抽象的例子啊，HTML是人，CSS则是衣服...

css给html穿上衣服，有三种形式：

内嵌、内联、外联。

这三种形式，优先级为：内嵌(1)，内联(2)，外联(3)。有同学问，什么意思？外联的优先级最弱对吗，如果我给div穿上黑色的衣服，是用外联的形式穿上的，那么我再用内联的形式给它穿上灰色的衣服，最后在页面上呈现出的结果，则是灰色的衣服，这就是优先级。

有同学又问：代码是从上往下执行的，那内联写在上面，外联写在下面，会不会是黑色的衣服呢？回答是，还是灰色，优先级是会影响的。

这里就介绍一下这三种形式的写法：

内嵌：<div style="color:red;">给我穿上红色衣服</div>在div里写style样式，则直接是内嵌形式，属性值的意思：color颜色，red红色，运行代码，它的字体颜色会变成红色。

内联：在head标签里写style标签：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            color:grey;
        }
    </style>
</head>
<body>
<p>我是灰色衣服</p>
</body>

这就是内嵌形式，在head里写入style标签，然后在里面写出元素的名字，或者id、class，来指定这个元素，用花括号包起来，里面也是键值对。

外联：

使用link标签，写在head标签里面：<link rel="stylesheet" href="mycss.css"/>

它的意思是引用同级目录下的 "mycss.css"文件，注意，css层叠样式表要用css做后缀哦。

那么在外联里面css的写法和内联是一样的，不过不需要 style标签，直接写元素、花括号、键值对即可

写一个：

html里面的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="mycss.css"/>
</head>
<body>
<span>我是外联，给我上黑色衣服</span>
</body>
</html>

css里面的代码：

span{
    color:#000;
}

因为head标签里面使用了 link标签找到了css样式表，所以在里面外面写css代码，就会给html做出表现，换句话说就是给它穿上衣服。

这里再说一下，以上我们使用的是 元素选择器来控制的css样式，那么我们说一下它最基础的三种选择器：

ID选择器，class(类)选择器，元素选择器。

优先级同上，ID最高，它们的写法：

ID选择器：

html:

<div id="div1"></div>

css:

#div1{
    color:lavender;
}

class选择器：

<div class="div1"></div>

css:

.div1{
    color:yellow;
}

元素选择器：

html:

<div></div>

css:

div{
    color:blue;
}

重点注意它们的写法。选择器只能用在外联、内联。内嵌直接style直接上衣服，大家注意，class是可以控制多个元素一起用，而id整个页面只能唯一，否则会报错。

老师的课程比较慢，因为考虑到一部分入门的同学，大家主动点学习。有问题可以评论，在老师理解范围内，都能解决哟

第五篇 CSS入门 明白 三种嵌套形式，三种常用控制器

CSS入门

第五篇 CSS入门明白三种嵌套形式，三种常用控制器