CSS简介、选择器及常用样式
1.什么是CSS？
CSS是Cascading Style Sheets的简称，中文叫层叠样式表。样式是指HTML元素的布局方式，HTML元素的布局方式非常多，所以样式也有很多，我们把多个样式的集合叫样式表，而且样式之间是可以相互叠加的，所以层叠样式表就是指可以相互叠加的HTML元素的布局方式的集合。CSS的目的是为了让内容和表现分离，实现高效便捷的网络编程。
2. CSS如何引入？
2.1 内嵌引入法
直接在HTML元素标签里引入style=“xx”
<!-- 将该p标签中的文字颜色设定为绿色 -->
<p style="color: green">一起来玩啊，CSS</p>
多个样式可以用== ；分隔开（一般习惯在每个样式后面加；==）
<!-- 将该p标签里的文字颜色设定为绿色，并将其字体大小设定为66px -->
<p style="color: green; font-size=66px">一起来玩啊，CSS</p>
2.2 内部引入法
在HTML的head标签里添加style标签，然后将所需要的样式放在style标签里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS引入方式</title>
<!-- type用于规定样式表的MIME类型（type一般可以不写） -->
<!-- MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型 [详情请查看](https://baike.baidu.com/item/MIME/2900607?fr=aladdin) -->
<style type="text/css">
/* p{}是元素选择器，用来指定color样式的作用对象 */
/* 将html中所有p标签里的文字颜色设定为green */
p{
color: green;
}
</style>
</head>
<body>
<p>一起来玩啊，CSS</p>
</body>
</html>
2.3 外部引入法
这里需要新建一个css文件，然后将这个css文件用link标签引入到HTML中
/* 这是useforp.css文件 */
/* 将html中所有p标签里的文字颜色设定为green */
p{
color: green;
}
<!-- 这是HTML文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS引入方式</title>
<!-- rel规定当前文档与被链接文档之间的关系（stylesheet是指样式表）-->
<!-- href规定被链接文档的位置（CSS/useforp.cc表示在本项目的CSS文件夹的useforp.css文件 -->
<link rel="stylesheet" href="CSS/useforp.css" />
</head>
<body>
<p>一起来玩啊，CSS</p>
</body>
</html>
2.4 三种引入方式的优先级
哪一种方式的代码离该HTML元素近，哪一种方式就优先执行。当然为了高效开发，当然推荐使用第三种（外部引入）。
3. 如何写CSS？
CSS的目标是为了高效布局，所以我们可以把编写CSS的思维框架拆分成两部分：选择器 + 样式。
3.1 选择器
3.1.1 什么是选择器
为了实现布局，第一步咱们肯定要知道布局的对象（元素），即谁需要布局，或者说需要对谁布局。在CSS中对布局对象（元素）的确定需要设定一个过滤器，这个过滤器就是选择器。因为布局的方式及HTML元素的数量非常多，所以CSS中选择器也不少。
3.1.2 选择器的种类
3.1.2.1 基本选择器
3.1.2.1.1 元素选择器
直接用元素（标签类型）来接收样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style type="text/css">
/* 用p这个元素标签来接收样式 */
/* 将html中所有p标签里的文字颜色设定为green */
p{
color: green;
}
</style>
</head>
<body>
<p>一起来玩啊，CSS</p>
<p>我要好好学习，因为我饭卡里还有不少钱呢</p>
</body>
</html>
使用这个选择器会遇到一个困难，那就是，如果我想让第2个段落的文字使用其它颜色，如何解决呢？
3.1.2.1.2 ID选择器
对于上面的问题，可以通过对元素设定ID，让ID接收样式，达到改变的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style type="text/css">
/* 将html中所有p标签里的文字颜色设定为green */
p{
color: green;
}
/* 用#p2来接收样式 */
/* 将html中所有ID为“p2”的标签里的文字颜色设定为red */
/* p2中文字的颜色最后为red，而非green */
#p2{
color:red;
}
</style>
</head>
<body>
<p>一起来玩啊，CSS</p>
<p id="p2">我要好好学习，因为我饭卡里还有不少钱呢</p>
</body>
</html>
当然，不同元素的ID可以一样，但是如果一样，那么后期使用JavaScript通过ID调用元素时可能就非常麻烦了，所以原则上咱们都会让ID唯一。所以我们可以设定不同ID实现相同效果，但这似乎也很麻烦
3.1.2.1.3 类选择器
用法几乎和ID选择器一样不过调用时注意ID用的是#，class用的是.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style type="text/css">
/* 用p这个元素标签来接收样式 */
p{
color: green;
}
/* 用.p2来接收样式 */
/* 将html中所有属性class为“p2”的标签里的文字颜色设定为red */
/* p2中文字的颜色最后为red，而非green */
.p2{
color:red;
}
</style>
</head>
<body>
<p>一起来玩啊，CSS</p>
<p class="p2">我要好好学习，因为我饭卡里还有不少钱呢</p>
</body>
</html>
所以，对比ID选择器和类选择器，当要对不同元素使用相同样式的时候，咱们推荐使用类选择器。
3.1.2.1.4 基本选择器的优先级
ID选择器 > 类选择器 > 元素选择器
3.1.2.2 属性选择器
通过元素的标签引入其属性来接收样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style type="text/css">
/* 用p这个元素标签通过在[]中设定p标签的align属性来接收样式 */
/* 将html中所有使用align属性的p标签里的文字颜色设定为green */
p[align]{
color: green;
}
/* 将html中所有使用class属性的p标签里的文字颜色设定为red */
p[class]{
color: red;
}
/* 将html中所有使用class属性且该属性值为“p3”的p标签里的文字颜色设定为blue */
p[class="p3"]{
color: blue;
}
/* 将html中所有使用align属性且属性值为“center”和所有使用class属性且该属性值为“p4”的p标签里的文字颜色设定为yellow */
p[align="center"][class="p4"]{
color: yellow;
}
/* 最后根据最近原则，第一行文字颜色为green，第二行文字颜色为red，第三行文字颜色为blue, 第四行文字颜色为yellow */
</style>
</head>
<body>
<p align="center">一起来玩啊，CSS</p>
<p class="p2">我要好好学习，因为我饭卡里还有不少钱呢</p>
<p class="p3">玩好才能学好啊，CSS</p>
<p align="center" class="p4">对于我来说，学习就是玩！</p>
</body>
</html>
3.1.2.3 关系选择器
在理解这个选择器之前，需要先理解HTML的两个块元素标签
3.1.2.3.1 div元素和span元素
不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
div{
background-color:red;
}
span{
background-color: green;
}
</style>
</head>
<body>
<div>
<!-- 直接在body中的文字我们称为普通文本，br标签用来换行 -->
一起来玩啊，CSS<br />
我要好好学习，因为我饭卡里还有不少钱呢<br />
玩好才能学好啊，CSS<br />
对于我来说，学习就是玩！<br />
</div>
<span>
一起来玩啊，CSS<br />
我要好好学习，因为我饭卡里还有不少钱呢<br />
玩好才能学好啊，CSS<br />
对于我来说，学习就是玩！<br />
</span>
</body>
</html>
div标签和span标签都将4个普通文本分别包含div“块”和span“块”中（看图理解）
再看看代码实现效果：
块元素就像是一个包，可以把一些元素打包起来作为一个整体，但div元素和span元素“包装”的方式有区别，但只要“包装”起来咱们就可以为所欲为啦?
3.1.2.3.2 包含选择器
听名之意，包含选择器就是直接使用块元素的标签来接收样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
<!-- 直接使用div标签或span标签接收样式 -->
<!-- div元素中的背景颜色为red -->
div{
background-color:red;
}
<!-- span元素中的背景颜色为green -->
span{
background-color: green;
}
</style>
</head>
<body>
<div>
<!-- 直接在body中的文字我们称为普通文本，br标签用来换行 -->
一起来玩啊，CSS<br />
我要好好学习，因为我饭卡里还有不少钱呢<br />
玩好才能学好啊，CSS<br />
对于我来说，学习就是玩！<br />
</div>
<span>
一起来玩啊，CSS<br />
我要好好学习，因为我饭卡里还有不少钱呢<br />
玩好才能学好啊，CSS<br />
对于我来说，学习就是玩！<br />
</span>
</body>
</html>
3.1.2.3.3 层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
/* 直接使用div标签或span标签接收样式 */
/* div元素中的字体颜色为red */
div{
color:red;
}
/* span元素中的字体颜色为green */
span{
color: green;
}
/* 最后显示div中两个p元素的字体为red，span中两个p元素为green */
</style>
</head>
<body>
<div>
<p>一起来玩啊，CSS</p>
<p>我要好好学习，因为我饭卡里还有不少钱呢</p>
<span>
<p>玩好才能学好啊，CSS</p>
<p>对于我来说，学习就是玩！</p>
</span>
</div>
</body>
</html>
我们也可以这样写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
/* 直接使用div标签或span标签接收样式 */
/* 所有p元素的字体颜色为green */
p{
color: green;
}
/* div元素中子p元素（子p元素表示div下第一层的p元素，不包括div下span中的p元素）的字体颜色为red */
div>p{
color:red;
}
/* 根据就近原则，最后同样显示div中两个p元素的字体为red，span中两个p元素为green */
</style>
</head>
<body>
<div>
<p>一起来玩啊，CSS</p>
<p>我要好好学习，因为我饭卡里还有不少钱呢</p>
<span>
<p>玩好才能学好啊，CSS</p>
<p>对于我来说，学习就是玩！</p>
</span>
</div>
</body>
</html>
上面这种选择器（ div>p{} )就是层级选择器啦
3.1.2.3.4 疑惑？
对于一下代码实现的效果我不理解为什么span元素会没有出现背景颜色样式的设定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
div{
background-color:red;
}
span{
background-color:green;
}
</style>
</head>
<body>
<div>
<p>一起来玩啊，CSS</p>
<p>我要好好学习，因为我饭卡里还有不少钱呢</p>
<span>
<p>玩好才能学好啊，CSS</p>
<p>对于我来说，学习就是玩！</p>
</span>
</div>
</body>
</html>
最后的效果是整个背景色都是红色，而没有出现span的绿色背景，但如果把background-color换成color，span的颜色就会出现。现在自己还搞不懂为啥，希望以后会知道，我猜可能是？算了，猜不到?
3.1.2.4 伪类选择器
伪类选择器主要用于超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 伪类选择器 */
/* 静止状态时a元素字体的颜色为red */
a:link{
color: red;
}
/* 悬浮状态时a元素的字体颜色为yellow */
a:hover{
color: yellow;
}
/* 触发状态时a元素的字体颜色为blue */
a:active{
color: blue;
}
/* 访问后状态a元素的字体颜色为green */
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="index.html">这是一个超链接</a>
</body>
</html>
3.2 常用CSS样式
- color：字体颜色
- font-family：字体
- font-size：字体大小
- font-weight：bold 字体加粗
- letter-spacing：文字间距
- text-decoration：underline 文字下划线
- line-height：行高
- width：宽
- height：高
- float：浮动
- border：1px solid red 1px的红色实线边框
- border：1px dashed green 1px的绿色虚线边框
- background：背景颜色
- position：定位
- 设置中心点：transform：translate（-50%，-50%）
- more…
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
