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整个页面只能唯一，否则会报错。

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

转载于:https://www.cnblogs.com/longfeng995/p/7590370.html

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

分布式锁简单入门以及三种实现方式介绍(滴滴)
很多小伙伴在学习Java的时候,总是感觉Java多线程在实际的业务中很少使用,以至于不会花太多的时间去学习,技术债不断累积!等到了一定程度的时候对于与Java多线程相关的东西就很难理解,今天需要探讨的 ...
分布式锁简单入门以及三种实现方式介绍
分布式锁简单入门以及三种实现方式介绍 2018年01月11日 21:16:28 徐刘根阅读数:37912 标签: 分布式分布式锁高并发更多个人分类: 集群分布式版权声明:本文为博主原创文章 ...
html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言比较基础的图标加载:和块元素的背景background ...
css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位绝对定位固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
五、创建Bean的三种方式
五.创建Bean的三种方式转载于:https://www.cnblogs.com/ljiwej/p/7280614.html
CSS基础知识---三种选择器
CSS基础知识---三种选择器选择器标签选择器 id选择器 class选择器全部代码选择器标签选择器 id选择器 class选择器标签选择器选择器优先级:id>class>标 ...
创建CSS样式的三种方式
CSS基础 - 创建CSS样式的三种方式我们使用CSS的时候,常规有三种创建CSS样式的的方式: 内联样式,内部样式表,外部样式表 1.内联样式 (不常用) style在标签中的情况就是内联样式.不 ...
HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...
css样式的三种位置行内内部外部优先级比较
css样式的三种位置行内内部外部优先级比较行内(内联)样式优先级高于内部和外部内部样式就是通过style标签包裹的样式,外部样式,通过link标签导入的样式的优先级相等,后面会覆盖前面的样 ...
JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...

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

CSS入门

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

最新文章

热门文章

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

CSS入门

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

最新文章

热门文章

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

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