【Java Web】CSS

news2024/12/24 20:58:25

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>