【Java Web】速通CSS

news2025/6/2 22:27:49

参考笔记：JavaWeb 速通CSS_java css-CSDN博客

一、CSS入门

1. 基本介绍

2. 作用

二、CSS的3种引入方式

1. 行内式

1.1 示例代码

1.2 存在问题

2. 写在head标签的style子标签中

2.1 示例代码

2.2 存在问题

3.以外部文件的形式引入（开发中推荐使用）⭐⭐⭐

3.1 说明

3.2 示例代码

3.3 优势

三、CSS选择器

3.1 元素选择器

3.1.1 语法

3.1.2 说明

3.1.3 案例

3.2 id选择器

3.2.1 语法

3.2.2 说明

3.2.3 案例

3.3 class选择器

3.3.1 语法

3.3.2 说明

3.3.3 案例

3.4 组合选择器

3.4.1 语法

3.4.2 案例

3.5 选择器优先级

四、CSS常用样式介绍

1. 字体颜色 color

2. 边框 border

3. 背景颜色 background-color

4. 字体样式

5. div居中

6. 超链接去掉下划线

7. 表格细线

8. 无序列表去样式

一、CSS入门

1. 基本介绍

CSS：全称 Cascading Style Sheets，指层叠样式表

2. 作用

        ① CSS 主要用于页面元素美化，如下：

        ② 在没有 CSS 之前，修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，非常不方便，所以 CSS 应运而生

        ③ 使用 CSS 可以将 HTML 页面的内容与样式分离。HTML 中内容与样式原本杂糅在一块儿，若使用 CSS 来控制样式，就可以做到样式的统一管理，从而更好的控制页面，提高了 Web 前端开发的工作效率

二、CSS的3种引入方式

1. 行内式

行内式：通过元素开始标签的 style 属性引入样式

1.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入方式1: 行内式</title>
</head>
<body>
    <input 
        type="button" 
        value="按钮"
        style="
            display: block;/*格式 --> 样式名：样式值*/
            width: 60px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;"
    /> 
</body>
</html>

运行效果：

1.2 存在问题

① HTML 代码和 CSS 样式代码交织在一起，增加阅读难度和维护成本

② CSS 样式代码仅对当前元素有效，代码重复量高，复用度低

2. 写在head标签的style子标签中

CSS 的第 2 种引入方式：在 Head 标签的 style 子标签中引入 CSS 样式

2.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 通过选择器确定样式的作用范围(选择器是什么意思后面会讲) */
        input {/*作用到input标签上*/
            display: block;
            width: 80px;
            height: 40px;
            background-color: rgb(140, 235, 100);
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
    <input type="button" value="按钮4" />
</body>

</html>

运行效果：

2.2 存在问题

① 此种方式虽然对 CSS 样式代码做了抽取,但是 CSS 代码仍然在 html 文件中

② 只能作用于当前的 html 文件，代码复用度还是不够，不利于网站风格统一

3.以外部文件的形式引入（开发中推荐使用）⭐⭐⭐

3.1 说明

        ① 在项目单独创建 css 样式文件，专门用于存放 css 样式代码。然后以链接的形式将外部的 .css 文件引入到 html 页面中

        ② 需要用到 <link/> 单标签。<link/> 单标签中有两个重要的属性：

                href：.css 文件的路径；相对路径和绝对路径均可

                rel：表示关联，必须有该属性，且值为 rel = "stylesheet"，表示关联了样式表，即 css 文件