【Java Web】CSS

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

二.标签

1.注释

2.三种书写样式

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

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

CSS (层叠样式表)是一种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

二.标签

1.注释

/* 注释内容 */

2.三种书写样式

（1）内部样式

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

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


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

例如：


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        p{
            color:red;
        }
    style>
head>
 
<body>
    
    <style>
        p{
            color:red;
        }
    style>
body>
 
html>

（2）内联样式

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


<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的后代即可，包含后代的后代。

（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>

（2）设置字体大小 font-size: 40px; 40px即40像素。

（3）设置字体粗细 font-weight: bolder; 使用单词和数字都可以设置。

（4）设置文字倾斜 font-sytle: italic; 取消文字倾斜 font-style: normal;

2.文本属性

2.1 颜色

RGB

color: rgb(0,0,0); 0-255

或者用十六进制表示

color: #ff0000； ff对应一个十六进制数字 00对应一个 00对应一个。

2.2文本对齐

text-align: center; /* 居中 */

text-align: left; /* 居左 */

text-align: right; /* 居右 */

2.3文本装饰

text-decoration: overline; /* 上划线 */

text-decoration: underline; /* 下划线 */

text-decoration: line-through; /* 删除线 */

特别的：text-decoration: none; /*无任何线*/

这个对于a标签有一个作用：可以删除a标签自带的下划线

2.4文本缩进

text-indent: 2em;

2表示倍数关系向右缩进两个字体位置。也可以为负数，-2则表示向左缩进两个字体位置

2.5行高

line-height: 60px;

行高 = 文字高度 + 行间距

2.6背景颜色

background-color: blue:

2.7背景图片

background-image: url(xxxx.png); //默认平铺

若不想平铺的话再添加 background-repeat: no-repeat;

还有 background-position: center / bottom / left / right; /* 背景图的位置特可以使用坐标位置即像素*/

背景图片居中 background-position: center center;

2.8背景尺寸

background-size: contain; /* 让图片再规定的范围区域内都展示出来 */

background-size: cover; /* 铺满区域不同于上述所说的铺满*/

3.圆角矩阵

border-radius: 20px; /*甚至可以展示成圆形*/

4. 元素的显示模式

display

display: block; 块级元素

display: inline; 行内元素

块级元素和和行内元素的区别

1. 快居元素会独占一行，行内元素不会独占一行。

2. 块级元素高度，宽度，内外边距都可以设置的，行内元素高度，宽度，行高无效，外边距有效，内边距有时候有效，有时候无效。

3.块级元素默认是和父元素一样宽，行内元素默认宽度是和里面的内容一样宽。

一般如果需要的话，都是把行内元素转成块级元素。

5. CSS盒子模型

5.1 边框

border属性，直接设置了四个方向还可以：

border-left

border-right

border-top

border-bottom

设置边框要设置三个方面

1.边框的粗细 10px

2.边框的颜色英文单词或者rgb(0,0,0)

3.边框的风格(实线solid，虚线dashed....) 更多可以去看 mdn文档

例如:

border: 5px black solid; /* 设置边框的粗细，颜色及风格*/

box-sizing: border-box; /* 边框向内伸展 */

5.2内边距

padding 是设置内容和边框之间的距离

padding: 10px; 表示四个方向都是 10px 边距

padding: 10px 20px; 上下边距是 10px ，左右边距是 20px 。

padding: 10px 20px 30px 40px; 上右下左顺序的边距

5.3外边距

margin 设置的是元素和元素之间的距离

margin: 10px; 表示四个方向都是 10px 边距

margin: 10px 20px; 上下边距是 10px ，左右边距是 20px 。

margin: 10px 20px 30px 40px; 上右下左顺序的边距

margin 特殊用法：把 margin-left 和 margin-right 置成 auto (让浏览器自动进行调节) 这样该元素就可以在父元素内部居中放置。

即边框相当于一个房子的墙的厚度，内边距相当于房子内的某一个物体如床与墙的距离，外边距相当于房子与房子之间的距离。