Java 后端学习笔记

提示

本文主要讲解 CSS 的基本知识，包括 CSS 的引入方式和不同的选择器。@ermo

# CSS 基础

CSS 是层叠样式表（Cascading style sheets），主要作用就是用来美化网页外观。

# 引入方式

在 html 文件中有三种方式引入 CSS 样式表：

  • 外部样式表
  • 内部样式表
  • 外部样式表

样式的优先级由高到低为：外部样式表、内部样式表、外部样式表。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 内部样式表 -->
    <style type="text/css">
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        Some text
    </div>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <!-- 行内样式表 -->
    <div style="color:red;">
        Some text
    </div>
    
</body>
</html>

# CSS 选择器

选择器可以理解为网页找元素的方式，找到作用元素后，然后修改指定元素的样式。

# 标签选择器

标签选择器选择的是一类标签，不能对单个标签生效。

标签选择器语法很简单，直接使用标签名然后加大括号即可，括号里面的内容为属性名和属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        Some text
    </div>
    
</body>
</html>

# id 选择器

id 选择器只能作用于一个标签，被作用的标签必须有唯一的 id。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        #id_demo {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="id_demo">
        Some text
    </div>
    
</body>
</html>

# class 选择器

class 选择器也称为类选择器，可以作用于相同或者不同的元素上。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .class_demo {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="class_demo">
        Some text
    </div>
    <p class="class_demo">一段简单的文字</p>
    
</body>
</html>

# 通配符选择器

* 代表通配符选择器，作用于整个 body 网页，开发过程中一般用于清除浏览器默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>
        Some text
    </div>
    <p>一段简单的文字</p>
    
</body>
</html>

# 后代选择器

后代选择器适用于多个嵌套标签。

语法为：

<style>
    selector1 selector2 { class }
</style>

<!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>Document</title>
    <style>
        div h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <h1>后代选择器</h1>
    </div>
</body>
</html>

# 子代选择器

子代选择器只能作用到父元素的下一级标签，后代选择器可以作用到下 n 级标签。

语法为：

<style>
    selector1>selector2 { class }
</style>

<!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>Document</title>
    <style>
        div>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">子代选择器</a>
        <p>
            <a href="#">子代选择器</a>
        </p>
    </div>
</body>
</html>

# 并集选择器

多个不同的标签元素使用同一组样式应该使用并集选择器。

语法为：

<style>
    selector1, selector2, selector3 { class }
</style>

<!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>Document</title>
    <style>
        div, p, h1 {
            color: pink;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h1>h1</h1>
</body>
</html>

# 交集选择器

多个标签已经使用了同一个样式，需要对其中个别的元素添加其他样式，应该是用交集选择器。

语法为：

<style>
    selector1selector2selector3 { class }
</style>

<!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>Document</title>
    <style>
        div.desc{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="desc">Some text</div>
    <h1>Some title</h1>
    <p class="desc">Some text</p>
</body>
</html>

# 伪类选择器

鼠标悬停到某个标签的状态称为伪类选择器。

语法

<style>
    selector:hover {css}
</style>

<!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>Document</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">点击</a>
    </div>
</body>
</html>

CSS 字体样式 →