CSS Learn

本文是CSS学习笔记。

概述

CSS：Cascading Style Sheet，是层叠样式表语言(不是编程语言,属于样式表语言,没有变量、数据类型、控制语句 .. )。 css其实是专门用来修饰HTML的,让HTML更好看，Css是HTML的化妆品。

CSS是为HTML服务的,所以HTML还是主体,css是依附在HTML上的, 所以进行css的开发,我们还是需要新建html/htm文件。

在HTML中嵌入CSS的三种方式

内联定义；
定义内部样式块对象；
链入外部样式表文件。

优先级：内联 > 内部样式块对象 > 外部样式表文件参考网页：

内联定义

内联定义是在HTML文件中嵌入CSS样式的第一种方法。内联就是在标签中通过style属性指定样式。任何一个html标签都可以设定style属性。

语法格式：<标签名 style="[样式名]:[样式值]; [样式名]:[样式值]; [样式名]:[样式值]">。参考代码001

定义内部样式块对象

在一对head标签中使用style标签，定义样式块对象：

语法：

1
2
3
4
5


[选择器] {
    [样式名]: [样式值]; 
    [样式名]: [样式值]; 
    [样式名]: [样式值]; 
}

CSS中常见的选择器为：id选择器，标签选择器，class选择器。

标签选择器

选择器设为标签名，则body中所有该标签都使用这个选择器引导的CSS样式。例如

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 标签选择器 */   /* 注意注释形式改变 */
<style type="text/css">
    /* 所有div标签都是用这个css */
    div {
        background-color: #cccc22;
        width: 150px; 
        height: 200px;
        border-style: solid; 
        border-color: red;
        border-width: 5px;
    }
</style>

id选择器

语法格式：选择器设为：#[id名]。例如

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<style type="text/css">
    /* id选择器 */
    #input-braket-usrname {
        background-color: #e3ace4;
        width: 100px; 
        height: 20px;
        border-style: solid; 
        border-color: #3ad110;
        border-width: 2px;
    }
</style>

class选择器

语法格式：选择器设为：.[类名]，并且标签要加class属性来表明所属类。例如

1
2
3
4
5
6
7
8
9


<style type="text/css">
    .cls1 {
        font-size: 12px;
        color: green;
    }
</style>
<!-- body -->
<span class="cls1">SPAN区域</span>
<p class="cls1">段落</p>

链入外部样式表文件

编写.css文件，并在html文件头中通过<link rel="stylesheet" type="text/css" href="path/to/your/file.css"/>链接。

三种选择器的优先级

id > class > 标签

隐藏

display: none隐藏内容。参考代码004，通过JavaScript可以改变display属性，从而显示/隐藏列表。

文本装饰

text-decoration: 可选值简述：

“underline”
“overline”
“none”：无格式，可以消除掉超链接的默认下划线

列表

参考代码004

`list-style-type` 属性值	含义
none	去掉有序/无序编号
circle	圈形无序编号
square	方形无序编号

鼠标悬停效果

鼠标悬停效果通过在选择器名后加:hover表示其引导的效果在鼠标放上去时触发。注意：冒号前后不能有空格！ 参考代码006，像这样：

1
2
3
4
5


<style type="text/css">
    .cursoreffect:hover {
        color: red; 
    }
</style>

内边距外边距

可以使用内补丁和外补丁制造div或span之间的相对间隔。参考代码007。

例如，内补丁padding会导致嵌套于其内的子元素距离父元素有补丁间距。外补丁margin会导致某个子元素与父元素在外部有补丁间距。

CSS 盒模型

所有 HTML 元素都可以看成一个矩形盒子，由内到外共 4 层：

Content（内容区）文字、图片等实际内容，width、height 就是控制这个区。

Padding（内边距）内容到边框之间的距离，属于盒子内部，会撑大盒子。

Border（边框）盒子的边框，border-width 也会算进盒子总大小。

Margin（外边距）盒子与其他元素之间的距离，不属于盒子本身，只控制间距。

浮动效果

参考代码008。 float: 设置为：

left：文字包围，图片居左
right：文字包围，图片居右

定位

参考代码009，使用position确定定位法，配合top和left定位距离。

鼠标小手

参考代码009。通过cursor: 设置：

pointer：小手（不要用hand，有兼容问题）
not-allowed：禁止

附录

CSS基础练习题

（一）单选题（10 题）

1–以下关于 CSS 的描述错误的是（）

A. CSS 是层叠样式表，不属于编程语言  
B. CSS 可以独立于 HTML 运行  
C. CSS 能修饰 HTML 元素的样式  
D. CSS 没有变量、控制语句等编程语言特性`

2–下列哪种 CSS 嵌入方式优先级最高（）

A. 外部样式表
B. 内部样式块
C. 内联定义（style 属性）
D. 三者优先级相同`

3–关于选择器优先级，正确的顺序是（）

A. 标签选择器 > class 选择器 > id 选择器
B. id 选择器 > class 选择器 > 标签选择器
C. class 选择器 > id 选择器 > 标签选择器
D. id 选择器 > 标签选择器 > class 选择器`

4–要清除超链接的默认下划线，应设置的样式是（）

A. text-decoration: underline
B. text-decoration: overline
C. text-decoration: none
D. text-decoration: hidden

5–鼠标悬停伪类的正确写法是（）

A. .box :hover {color: red;}
B. .box:hover { color: red; }
C. .box hover { color: red; }
D. .box->hover { color: red; }

6–要让元素显示为 “小手” 鼠标样式，正确的属性值是（）

A. cursor: hand
B. cursor: pointer
C. cursor: small-hand
D. cursor: finger

7–下列哪个属性用于去掉列表的默认编号（）

A. list-style: none
B. list-style-type: none
C. list-number: hidden
D. list-type: none

8–关于 padding 和 margin，描述正确的是（）

A. padding 是外边距，margin 是内边距
B. padding 会增加元素自身的总尺寸
C. margin 是子元素与父元素内部的间距
D. padding 不影响元素的布局

9–要隐藏一个 HTML 元素且不占用页面空间，应设置（）

A. visibility: hidden
B. display: none
C. opacity: 0
D. hidden: true

10–外部样式表的引入标签正确的是（）

1
2
3
4


A. <link rel="style" type="text/css" href="style.css">
B. <link rel="stylesheet" type="text/css" href="style.css"/>
C. <style src="style.css" type="text/css"></style>
D. <import rel="stylesheet" href="style.css"/>

（二）填空题（10 题）

CSS 的全称是 __________（层叠样式表）。
内联定义 CSS 的方式是给 HTML 标签添加 ____________ 属性。
id 选择器的语法是以 ____________ 开头，class 选择器以 ____________ 开头。
要实现鼠标悬停时文字颜色变红，伪类写法是 ____________（以 .box 为例）。
float: left 的效果是 ____________。
清除列表默认编号的 list-style-type 属性值是 ____________。
内边距对应的 CSS 属性是 ____________，外边距是 ____________。
禁止鼠标样式对应的 cursor 属性值是 ____________。
链接外部样式表的标签中，rel 属性的值必须是 ____________。
隐藏元素且不占空间的样式是 ____________。

（三）编程题（3 题）

题目 1：基础选择器与样式应用

创建 HTML 文件，包含以下元素：
一个 div（id 为 box1），内容为 “ID 选择器测试”；
两个 p 标签（class 为 text-normal），内容分别为 “Class 选择器测试 1”“Class 选择器测试 2”；
一个 h3 标签，内容为 “标签选择器测试”。
用内部样式块实现：
id 选择器：box1 背景色 #f0f8ff，宽度 200px，边框为 2px 实线 #333；
class 选择器：text-normal 字体大小 14px，颜色 #666，行高 1.5；
标签选择器：h3 文字居中，颜色 #e63946，无下划线。

题目 2：交互效果与列表样式

创建 HTML 文件，包含一个无序列表（ul），列表项为 “首页”“课程”“关于我们”；
用 CSS 实现：
去掉列表默认编号，列表项添加 10px 内边距；
鼠标悬停在列表项上时，背景色变为 #457b9d，文字颜色变为白色，鼠标样式为小手；
列表项宽度 100px，边框为 1px 虚线 #ddd；
新增一个超链接（a 标签），清除默认下划线，鼠标悬停时显示下划线。

题目 3：综合布局与显隐控制

创建 HTML 文件，包含：

一个按钮（button），内容为 “显示 / 隐藏盒子”；
一个 div（id 为 target-box），初始隐藏，宽度 300px，高度 150px，背景色 #ffd6a5，外边距 20px，内边距 10px；
用 CSS 设置初始样式，用 JavaScript 实现点击按钮切换 div 的显示 / 隐藏（修改 display 属性）；
给 div 添加浮动（left），确保显示时文字不会环绕（可在 div 后加
清除浮动）。

CSS基础练习题-参考答案

BCBCB BBBBB

Cascading Style Sheet
style
#、.
.box:hover {…}
元素左浮动，文字环绕在右侧
none
padding、margin
not-allowed
stylesheet
display: none

代码一

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器测试</title>
    <style type="text/css">
        /* id选择器 */
        #box1 {
            background-color: #f0f8ff;
            width: 200px;
            border: 2px solid #333;
            padding: 10px;
        }
        /* class选择器 */
        .text-normal {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }
        /* 标签选择器 */
        h3 {
            text-align: center;
            color: #e63946;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="box1">ID选择器测试</div>
    <p class="text-normal">Class选择器测试1</p>
    <p class="text-normal">Class选择器测试2</p>
    <h3>标签选择器测试</h3>
</body>
</html>

代码二

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互与列表样式</title>
    <style type="text/css">
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            width: 100px;
            padding: 10px;
            border: 1px dashed #ddd;
            margin: 5px 0;
            cursor: pointer;
        }
        li:hover {
            background-color: #457b9d;
            color: white;
        }
        a {
            text-decoration: none;
            color: #1d3557;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>课程</li>
        <li>关于我们</li>
    </ul>
    <a href="#">测试链接</a>
</body>
</html>

代码三

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显隐控制与布局</title>
    <style type="text/css">
        #target-box {
            display: none; /* 初始隐藏 */
            width: 300px;
            height: 150px;
            background-color: #ffd6a5;
            margin: 20px;
            padding: 10px;
            float: left; /* 左浮动 */
        }
        button {
            padding: 5px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="toggleBox()">显示/隐藏盒子</button>
    <div id="target-box">这是一个可显隐的浮动盒子</div>
    <div style="clear: both;"></div> <!-- 清除浮动 -->
    <p>测试文字，确保浮动清除后不会环绕盒子</p>

    <script>
        // 切换显隐的函数
        function toggleBox() {
            const box = document.getElementById('target-box');
            if (box.style.display === 'none' || box.style.display === '') {
                box.style.display = 'block';
            } else {
                box.style.display = 'none';
            }
        }
    </script>
</body>
</html>