【JavaWeb】前端开发三剑客之CSS(上)

✨哈喽，进来的小伙伴们，你们好耶！✨

🛰️🛰️系列专栏:【JavaWeb】

✈️✈️本篇内容:CSS从零开始学习！

🚀🚀代码托管平台github：JavaWeb代码存放仓库！

⛵⛵作者简介：一名双非本科大三在读的科班Java编程小白，道阻且长，星夜启程！

 接着上篇，我们已经对HTML有了初步的了解并且学习了基本的用法，那么今天这篇博客我们即将学习的是前端开发另一门语言CSS。

目录

什么是CSS？

认识CSS语法：

 CSS引入方式：

1、内部样式表

 2、内联样式

3、外部样式

敲黑板：

选择器：

一、基础选择器

1、标签选择器：

2、类选择器

3、id选择器

 4、通配符选择器

二、复合选择器

1、后代选择器

2、子选择器

3、并集选择器

在线文档：w3school官网

---

什么是CSS？

CSS被叫做：层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制 , 实现美化页面的效果 . 能够做到页面的样式和结构分离，即HTML可以看做是人的骨骼，CSS可以看做是人的皮肤。

认识CSS语法：

CSS语法由：选择器 + { 一条 /N 条声明 } 选择器决定针对谁修改； 声明决定修改的内容； 声明的属性是键值对 . 使用 ; 区分键值对 , 使用 : 区分键和值 。 看代码：

     
hello CSS

解释：这里的p就是选择器，此处就表示选择页面中的所有p标签；{}里面表示的就是键值对结构，表示CSS中的各种属性；键值对之间使用 "；"来分割，键和值之间使用 : 来分割。/* */是CSS中的注释。

运行结果：

 CSS引入方式：

1、内部样式表

通过style标签来写CSS，虽然不太常见，但是对于一般的CSS代码来说，这样写没啥毛病。

 2、内联样式

通过HTML标签中的style属性，来应用。

    
Hello CSS

运行结果：

 这种写法属于一种比较特殊的写法，通常呢会搭配JS来使用，只适合于样式特别简单的情况，因为对于一些复杂的案例，这样写的话显得代码非常乱。同时这种写法只针对当前元素生效。

3、外部样式

这种样式是实际开发中最常使用的，就是把CSS文件单独提取出来，放到一个.css文件中；然后在通过HTML中的代码，通过link标签，来引入该css文件。

test.css文件

p {color: blue;
 }

 .html文件(注意这行代码通常放在head标签中)

 
hello css
 

运行结果：

敲黑板：

注意html和css都是不区分大小写的，习惯上在写代码的时候，统一使用小写。

选择器：

选择器的功能就是选中页面的元素，可以一次选择一个，也可以一次选中一批。

一、基础选择器

1、标签选择器：

写的选择器p就是一个html的标签名。

2、类选择器

这个就非常牛了，通过这个选择器，可以任意的选择想要的元素，那么有人就会问了，那有这一种选择器就可以了呀！为什么还需要其他的选择器呢？

理论上是这样，但是为了使代码更简单，还是引入了很多各种其他的选择器。这就像我们的电脑有CPU同时还有GPU。

使用方法：

首先，我们需要在css代码中创建一个类名，在对应的html元素中，通过class属性来引用这个类名。那么具有这个类名的元素就都会应用上相关的属性。

比如我们想让HTML中的元素都是绿色的！

HTML代码：

 
 
 
 
hello 类名
hello java
 
  

注意代码中的 .类名 { } 这个.后面的就是类名；使用class属性来引入类名。

运行结果：

3、id选择器

即给被选中的元素设置个id属性；id属性前面使用#来表示；id在一个页面里面不能重复。

    
这不是id属性
这是id属性

运行结果：

 4、通配符选择器

使用 * 的定义 , 选取所有的标签。 代码：

    
这是1
这是2
这是3

即页面的所有内容都会被改成红色， 不需要被页面结构调用。 运行结果：

 这个选择器的最大作用就是在进行前端开发的时候，要求咋们的页面不要依赖浏览器的默认样式。

二、复合选择器

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，那么今天就到这里，我们下期再见！！