✨哈喽，进来的小伙伴们，你们好耶！✨
🛰️🛰️系列专栏:【JavaWeb】
✈️✈️本篇内容:CSS从零开始学习！
🚀🚀代码托管平台github：JavaWeb代码存放仓库！
⛵⛵作者简介：一名双非本科大三在读的科班Java编程小白，道阻且长，星夜启程！
** 接着上篇，我们已经对HTML有了初步的了解并且学习了基本的用法，那么今天这篇博客我们即将学习的是前端开发另一门语言CSS。**
什么是CSS？
CSS被叫做：层叠样式表 (Cascading Style Sheets).
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离，即HTML可以看做是人的骨骼，CSS可以看做是人的皮肤。
认识CSS语法：
CSS语法由：选择器 + {一条/N条声明}
选择器决定针对谁修改；
声明决定修改的内容；
声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值。
看代码：
<style>
p{
/*设置字体颜色*/
color: red;
/*设置字体大小*/
font-size: 20px;
}
</style>
<p>
hello CSS
</p>
解释：这里的p就是选择器，此处就表示选择页面中的所有p标签；{}里面表示的就是键值对结构，表示CSS中的各种属性；键值对之间使用 "；"来分割，键和值之间使用 : 来分割。/* */是CSS中的注释。
运行结果：
CSS引入方式：
1、内部样式表
通过style标签来写CSS，虽然不太常见，但是对于一般的CSS代码来说，这样写没啥毛病。
2、内联样式
通过HTML标签中的style属性，来应用。
<p style="color: green;">Hello CSS</p>
运行结果：
这种写法属于一种比较特殊的写法，通常呢会搭配JS来使用，只适合于样式特别简单的情况，因为对于一些复杂的案例，这样写的话显得代码非常乱。同时这种写法只针对当前元素生效。
3、外部样式
这种样式是实际开发中最常使用的，就是把CSS文件单独提取出来，放到一个.css文件中；然后在通过HTML中的代码，通过link标签，来引入该css文件。
test.css文件
p {
color: blue;
}
.html文件(注意这行代码通常放在head标签中)
<link rel="stylesheet" href="test.css">
<body>
<p>
hello css
</p>
</body>
运行结果：
敲黑板：
注意html和css都是不区分大小写的，习惯上在写代码的时候，统一使用小写。
选择器：
选择器的功能就是选中页面的元素，可以一次选择一个，也可以一次选中一批。
一、基础选择器
1、标签选择器：
写的选择器p就是一个html的标签名。
2、类选择器
这个就非常牛了，通过这个选择器，可以任意的选择想要的元素，那么有人就会问了，那有这一种选择器就可以了呀！为什么还需要其他的选择器呢？
理论上是这样，但是为了使代码更简单，还是引入了很多各种其他的选择器。这就像我们的电脑有CPU同时还有GPU。
使用方法：
首先，我们需要在css代码中创建一个类名，在对应的html元素中，通过class属性来引用这个类名。那么具有这个类名的元素就都会应用上相关的属性。
比如我们想让HTML中的元素都是绿色的！
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是CSS的代码</title>
<!--外部样式-->
<link rel="stylesheet" href="test.css">
</head>
<body>
<style>
.green {
color: green;
}
</style>
<p class="green">
hello 类名
</p>
<p class="green">
hello java
</p>
</body>
</html>
注意代码中的 .类名 { } 这个.后面的就是类名；使用class属性来引入类名。
运行结果：
3、id选择器
即给被选中的元素设置个id属性；id属性前面使用#来表示；id在一个页面里面不能重复。
<style>
#isid{
color: blue;
}
</style>
<p>
这不是id属性
</p>
<p id="isid">
这是id属性
</p>
运行结果：
4、通配符选择器
使用 * 的定义, 选取所有的标签。
代码：
<style>
* {
color: red;
}
</style>
<p>
这是1
</p>
<p>
这是2
</p>
<p>
这是3
</p>
即页面的所有内容都会被改成红色，
不需要被页面结构调用。
运行结果：
这个选择器的最大作用就是在进行前端开发的时候，要求咋们的页面不要依赖浏览器的默认样式。
二、复合选择器
1、后代选择器
即通过多个选择器的组合，能够选中某个元素里面的子孙/后代。
样式：选择器1 选择器2{ }
注意：中间必须有空格；选择器1和2都可以是标签选择器/类选择器/id选择器
正确代码演示:
ul .houdai{
color: red;
}
找ul标签里面看是否有class为houdai的元素。
错误代码演示：
ul.houdai{
color: red;
}
这个代码ul和.houdai之间就没有空格，意思就是找ul同时class为houdai的元素。
2、子选择器
通过多个选择器的组合，能够选中某个元素里面的子元素。
样式：选择器1>选择器2
ul>houdai{
color:green;
}
3、并集选择器
并列的写多个选择器，中间用逗号来分割；这里的并集选择器，里面可以写简单的选择器也可以写复杂的选择器。
ul>li,ol>li{
color: blue;
}
关于CSS的后序学习，可以关注一个网站W3school，这上面基本涵盖了所有的CSS知识。方便大家的后序学习！
在线文档：w3school官网
那么关于CSS的选择器是十分庞大的，有好几十种，那么博主也就是简单介绍一些常用的，毕竟博主是个搞后端的！哈哈！关于CSS的选择器我们就先介绍到这里，下期博主会继续更新CSS的下半部分内容，包括元素属性，文本属性，背景属性，盒模型，弹性布局等等，学会了这些基本CSS语法，完全可以大致能看懂前端部分CSS的代码。OK，那么今天就到这里，我们下期再见！！
版权归原作者 IT辰柒_Java 所有， 如有侵权，请联系我们删除。