【Java Web】CSS

1.CSS(Cascading Style Sheets) 层叠样式表

2.标签

1.注释

2.三种书写样式

1.内部样式

2.内联样式

3.外部样式

3.CSS选择器

（1）标签选择器

（2）类选择器

（3）ID选择器

复合选择器

（5）后代选择器

（6）子选择器

（7）并集选择器

（8）伪类选择器 (复合选择器的特殊用法)

4.CSS常用属性

1.字体属性

2.文本属性

1.CSS(Cascading Style Sheets) 层叠样式表

2.标签

1.注释

/* 注释内容 */

2.三种书写样式

1.内部样式

使用sytle标签，直接把CSS写到html文件中的

此时的style标签可以放到任何位置，常放到head标签里。需要放在style里

<style>/*write your code*/</style>

例如：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 内联样式 两种都行 通常用这种 --><style>p{color:red;}</style>
</head><body><!-- 内部样式  --><style>p{color:red;}</style>
</body></html>

2.内联样式

使用sytle属性，针对指定的元素设置样式。(此时不需要写选择器，直接写属性键值对)，这个样式只针对当前元素生效，通常放到body标签里。需要放在style里。

<body><p style="color: red; font-size: 40px">这是针对当前p标签里的内容的修饰</p>
</body>

3.外部样式

把CSS代码单独作为一个 .css 文件，再通过 link 属性，让 html 引入该 css 文件。实际开发过程中，以这种为主。

3.CSS选择器

（1）标签选择器

样式:

<p>我是p标签里的内容</p>
<div>我是div标签里的内容</div><style>p {   /* 表示对于所有p标签里的内容生效   也可以是div h1 h2.... */color:red;font-size: 40px;}</style><style>div {color:blue;font-size: 40px;}</style>

（2）类选择器

定义类，需要使用.开头

引用这个类的时候，通过 class 属性 = "类名" 即可，不需要带点。

一个类，可以被一个元素引用，也可以被多个元素引用

一个元素可以引用一个类，也可以引用多个类

样式：

<style>.one {   /* 此处定义了一个CSS类,名字叫做one */color: red;font-size: 40px;}.two {color: aqua;font-size: 40px;}.three {color: blue;font-size: 40px;}</style><div class="one">这是one类的div</div><div class="two">这是two类的div</div><div class="three">这是three类的div</div>

（3）ID选择器

html页面中的每个元素，都是可以设置成一个唯一的ID的，作为元素的身份标识。

当元素有了ID之后，就可以通过ID来选中对应的元素了。

类选择器是可以让多个元素应用到同一个类的。

而ID选择器，则只能针对唯一的元素生效，且一个页面里的，只能有唯一的ID。

定义ID，需要使用#开头

引用这个id的时候，通过 id = "id名" 即可，不需要带#。

<body><style>/* ID 选择器*/#one {color: chartreuse;font-size: 40px;}#two {color: blueviolet;font-size: 40px;}#three {color: darkorange;font-size: 40px;}</style><div id="one">这是id="one"的div标签</div><div id="two">这是id="two"的div标签</div><div id="three">这是id="three"的div标签</div></body>

复合选择器

（5）后代选择器

就是把多个简单的基础选择器组合一下（可以是标签，类，id，选择器的任意组合）

例如，li只要是ul的后代即可，包含后代的后代。

普通标签 类 ID

（6）子选择器

也是把多个简单的基础选择器组合一下（可以是标签，类，id，选择器的任意组合）

与后代选择器不同的是，子选择器只是匹配子元素，而不匹配子元素的子元素。

选择器1>选择器2 { 注意大于号

属性...

}

后代选择器 子选择器

（7）并集选择器

即针对多组选择器使用同样的样式

选择器1，选择器2 {

属性....

}

（8）伪类选择器 (复合选择器的特殊用法)

前面的选择器是选中某个元素。

伪类选择器是选中某个元素的某个特定状态。

如： hover 鼠标悬停时的状态

active 鼠标按下时的状态

录制_2023_09_23_17_39_04_643

4.CSS常用属性

包括大小，位置，颜色，形状，边距，边框，特殊滤镜，过渡效果，动画等等。

1.字体属性

（1）设置字体家族 font-family："微软雅黑"; 当前使用哪种字体来显示如（微软雅黑，宋体，黑体，华文行楷...)

<body><style>.one {font-size: 40px;font-family: "微软雅黑";}.two {font-size: 40px;font-family: "宋体";}.three {font-size: 40px;font-family: "黑体";}.four {font-size: 40px;font-family: "华文行楷";}</style><div class="one">这是一个div标签</div><div class="two">这是一个div标签</div><div class="three">这是一个div标签</div><div class="four">这是一个div标签</div></body>