JavaWeb前端开发三剑客之CSS(上)
Posted IT辰柒_Java
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb前端开发三剑客之CSS(上)相关的知识，希望对你有一定的参考价值。
✨哈喽，进来的小伙伴们，你们好耶！✨
🛰️🛰️系列专栏:【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，那么今天就到这里，我们下期再见！！
以上是关于JavaWeb前端开发三剑客之CSS(上)的主要内容，如果未能解决你的问题，请参考以下文章