CSS学习笔记02

CSS笔记02

美化网页元素

为什么要美化网页

目的：
- 有效的传递页面信息
- 美化网页、页面漂亮、才能吸引用户
- 突显页面的主题
- 提高用户的体验

span标签

span标签是短语内容的通用行内容器，它本身并没有任何特殊语义。
通常我们使用span标签来把我们想要重点要突出的行内内容套起来，再通过使用类或者Id等选择器给其添加我们想要实现的某些样式。
span标签与div标签很相似，但 div是一个块元素，而span 则是一个行内元素。
示例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<style>
    /* id选择器 */
    #test {
        font-size: 50px;
    }
style>

<body>


欢迎学习<span id="test">Javaspan>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

查看网页效果：

在这里插入图片描述

字体样式

常用的修饰字体样式的 CSS 属性：
- 字体：font-family
- 字体大小：font-size
- 字体粗细：font-weight
下面我们通过写代码的方式来学习如何美化字体样式：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>


<style>
    body {
        font-family: "Arial Black", "楷体", serif;
        color: chocolate;
    }
    h1 {
        font-size: 50px;
    }
    .p1 {
        font-weight: bold;
    }
style>

<body>

<h1>作品简介：h1>

<p class="p1">
    《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说，也是其代表作。收录于小说合集《四季奇谭》中，副标题为“春天的希望”。
p>

<p>
    该作讲述银行家安迪，被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙，将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后，终于在一个雷电交加的夜晚，越狱而出，重获自由。当翌日典狱长打开安迪的牢门时，发现他已不翼而飞，预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前，畏罪自杀。
p>

<p>
    监狱作为故事背景带有寓意性，以安迪、典狱长、狱警和囚犯们所构成的这个世界，本身就是错谬、混乱的。安迪是一个无罪的好人，却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的，但他们却在那里颐指气使，教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界，现代派作家笔下的人物通常会自甘堕落或精神崩溃，而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰，健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
p>

<h1>英文诗歌：h1>

<p>
    I offer you lean streets, desperate sunsets, the moon of the jagged suburbs.
p>

<p>
    I offer you the bitterness of a man who has looked long and long at the lonely moon.
p>

<p>
    I offer you my ancestors, my dead men, the ghosts that living men have honoured in marble: my father's father killed in the frontier of Buenos Aires, two bullets through his lungs, bearded and dead, wrapped by his soldiers in the hide of a cow;
p>

<p>
    my mother's grandfather -just twenty four- heading a charge of three hundred men in Perú, now ghosts on vanished horses. I offer you whatever insight my books may hold. whatever manliness or humour my life.
p>

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

查看网页效果：

在这里插入图片描述

补充：
- font - 可以用来作为以上 CSS 属性的简写
在实际的网页设计开发中，我们通常不会像上面的代码中那样将字体样式写得那么分散，我们通常直接使用font一次定义多个字体样式的属性，如下面代码所示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

  <style>
      p {
          font: oblique bold 20px "楷体"; /* 风格 粗细 大小 字体 */
      }
  style>

head>
<body>

<p>
  《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说，也是其代表作。收录于小说合集《四季奇谭》中，副标题为“春天的希望”。
p>

<p>
  该作讲述银行家安迪，被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙，将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后，终于在一个雷电交加的夜晚，越狱而出，重获自由。当翌日典狱长打开安迪的牢门时，发现他已不翼而飞，预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前，畏罪自杀。
p>

<p>
  监狱作为故事背景带有寓意性，以安迪、典狱长、狱警和囚犯们所构成的这个世界，本身就是错谬、混乱的。安迪是一个无罪的好人，却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的，但他们却在那里颐指气使，教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界，现代派作家笔下的人物通常会自甘堕落或精神崩溃，而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰，健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
p>

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

查看网页效果：

在这里插入图片描述

文本样式

常用的修饰文本样式的 CSS 属性：
- 文本颜色：color
- 文本对齐方式：text-align
- 段落首行缩进：text-indent
- 文本装饰性线条：text-decoration
下面我们通过写代码的方式来学习如何美化文本样式：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    
    <style>
        h1 {
            color: rgba(0,0,255,50%);
            text-align: center;
        }
        .p1 {
            text-indent: 2em;
        }
        .p3 {
            background: skyblue;
            height: 150px;
            line-height: 150px;
        }
        .li1 {
            text-decoration: underline;
        }
        .li2 {
            text-decoration: line-through;
        }
        .li3 {
            text-decoration: overline;
        }
        a {
            text-decoration: none;
        }
    style>

head>
<body>


<a href="">abc123456a>

<p class="li1">abc123456p>
<p class="li2">abc123456p>
<p class="li3">abc123456p>

<h1>作品简介：h1>

<p class="p1">
    《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说，也是其代表作。收录于小说合集《四季奇谭》中，副标题为“春天的希望”。
p>

<p>
    该作讲述银行家安迪，被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙，将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后，终于在一个雷电交加的夜晚，越狱而出，重获自由。当翌日典狱长打开安迪的牢门时，发现他已不翼而飞，预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前，畏罪自杀。
p>

<p class="p3">
    监狱作为故事背景带有寓意性，以安迪、典狱长、狱警和囚犯们所构成的这个世界，本身就是错谬、混乱的。安迪是一个无罪的好人，却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的，但他们却在那里颐指气使，教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界，现代派作家笔下的人物通常会自甘堕落或精神崩溃，而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰，健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
p>

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

查看网页效果：

在这里插入图片描述

补充：垂直居中对齐行内元素（文本、图片等）：
首先我们准备一张图片：

cat.jpg

在这里插入图片描述

然后我们让与该图片处在同一行的文字与它垂直居中对齐：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>


<style>
    img,span {
        vertical-align: middle;
    }
style>

<body>

<p>
    <img src="images/cat.png" alt="cat">
    <span>这是一只可爱的小猫span>
p>

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

查看网页效果：

在这里插入图片描述

超链接伪类

下面是一些超链接伪类：
- :hover - 用户将光标（鼠标指针）悬停在元素上时生效【常用】
- :active - 用户使用鼠标按下按键到松开按键之间这段时间内生效【不常用】
- :linK - 元素尚未被用户访问时生效【不常用，不做演示】
- :visited - 在用户访问链接后生效【不常用，不做演示】
下面我们通过写代码的方式来学习如何使用超链接伪类：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

    <style>
        a {
            text-decoration: none;
            color: black; /* a标签中默认的文本颜色为黑色 */
            font-size: 17px; /* a标签中默认的文本大小为17px */
        }
        /* a标签的伪类 */
        /* :hover -- 鼠标悬停在a标签中的文本上时的状态 */
        a:hover {
            color: orange; /* 鼠标悬停在a标签中的文本上时字体变为橘色 */
            font-size: 20px; /* 鼠标悬停在a标签中的文本上时字体放大为20px */
        }
        /* :active -- 鼠标按住a标签中的文本且未释放时的状态 */
        a:active {
            color: red; /* 鼠标按住a标签中的文本且未释放时字体变为红色 */
        }
    style>

<body>

<a href="#">
    <img src="images/book.jpg" alt="book">
a>

<p>
    <a href="#">码出高效：Java开发手册a>
p>

<p>
    <a href="#">作者：杨冠宝 / 高海慧a>
p>

<p>
    ￥99.0
p>

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
41
42
43
44
45

查看默认网页效果：

在这里插入图片描述

鼠标悬停在a标签中的文本上时的网页效果：

在这里插入图片描述

鼠标按住a标签中的文本且未释放时时的网页效果：

在这里插入图片描述

文本的阴影效果【拓展】

为文字添加阴影：text-shadow
下面我们通过写代码的方式来学习如何实现文本的阴影效果：
- 给上一个网页中的文本￥99.0添加一个阴影效果：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

    <style>
        a {
            text-decoration: none;
            color: black;
            font-size: 17px;
        }
        a:hover {
            color: orange;
            font-size: 20px;
        }
        a:active {
            color: red;
        }
        /* 文本的阴影效果 -- text-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色 */
        #price {
            text-shadow: 3px 3px 3px red;
        }
    style>

<body>

<a href="#">
    <img src="images/book.jpg" alt="book">
a>

<p>
    <a href="#">码出高效：Java开发手册a>
p>

<p>
    <a href="#">作者：杨冠宝 / 高海慧a>
p>

<p id="price">
    ￥99.0
p>

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
41
42
43
44
45
46

查看网页效果：

在这里插入图片描述

以上面的网页为例，关于阴影的偏移量和模糊半径的理解可以参照下图：

在这里插入图片描述

列表样式练习

下面是一个购物网站首页侧边的列表部分的 HTML 代码：

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h2 class="title">全部商品分类h2>
<ul>
    <li><a href="#">图书a>  <a href="#">音像a>  <a href="#">数字商品a>li>
    <li><a href="#">家用电器a>  <a href="#">手机a>  <a href="#">数码a>li>
    <li><a href="#">电脑a>  <a href="#">办公a>li>
    <li><a href="#">家居a>  <a href="#">家装a>  <a href="#">厨具a>li>
    <li><a href="#">服饰鞋帽a>  <a href="#">个性化妆a>li>
    <li><a href="#">礼品箱包a>  <a href="#">钟表a>  <a href="#">珠宝a>li>
    <li><a href="#">食品饮料a>  <a href="#">保健食品a>li>
    <li><a href="#">彩票a>  <a href="#">旅行a>  <a href="#">充值a>  <a href="#">票务a>li>
ul>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

查看默认网页效果：

在这里插入图片描述

下面我们运用先前学习的知识来给上面的页面添加一些样式，让他看起来更像一个真正的购物网站首页侧边的列表：

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
head>
<body>



<div id="nav">
    <h2 class="title">全部商品分类h2>
    <ul>
        <li><a href="#">图书a>  <a href="#">音像a>  <a href="#">数字商品a>li>
        <li><a href="#">家用电器a>  <a href="#">手机a>  <a href="#">数码a>li>
        <li><a href="#">电脑a>  <a href="#">办公a>li>
        <li><a href="#">家居a>  <a href="#">家装a>  <a href="#">厨具a>li>
        <li><a href="#">服饰鞋帽a>  <a href="#">个性化妆a>li>
        <li><a href="#">礼品箱包a>  <a href="#">钟表a>  <a href="#">珠宝a>li>
        <li><a href="#">食品饮料a>  <a href="#">保健食品a>li>
        <li><a href="#">彩票a>  <a href="#">旅行a>  <a href="#">充值a>  <a href="#">票务a>li>
    ul>
div>

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

style.css

#nav {
    width: 300px;
    background: lightgrey;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: darkorange;
}

/*
list-style:
    none - 去除列表元素的标记(比如圆点、符号、或者自定义计数器样式等)
    disc - 实心圆点(li标签默认)
    circle - 空心圆点
    decimal - 自定义计数器(1.  2.  3.  ...)
    square - 实心正方形
*/
ul li {
    height: 30px;
    list-style: none; /* 去除列表前的实心圆点 */
    text-indent: 1em;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
    color: darkorange;
    text-decoration: underline;
}
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

查看此时的网页效果：

在这里插入图片描述

背景

背景颜色：
- 设置背景颜色：background-color
背景图片：
- 设置背景图片：background-image
- 设置背景图片的重复方式：background-repeat
补充：以上三种设置背景的 CSS 属性都可以直接用background简写
示例：
首先准备一张图片：

dog.jpg

在这里插入图片描述

然后我们编写一个网页，练习如何将上图设置成网页中块元素的背景图片，以及如何设置我们想要的图片重复方式：

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        div {
            width: 1000px;
            height: 700px;
            border: 2px solid red;
            /* 背景图片默认是重复铺满整个div的 - background-repeat: repeat */
            background-image: url("images/dog.jpg");
        }
        .div2 {
            /* 设置背景图片不重复 */
            background-repeat: no-repeat;
        }
        .div3 {
            /* 设置背景图片在水平方向上重复 */
            background-repeat: repeat-x;
        }
        .div4 {
            /* 设置背景图片在垂直方向上重复 */
            background-repeat: repeat-y;
        }
    style>

head>
<body>

<div class="div1">div>
<div class="div2">div>
<div class="div3">div>
<div class="div4">div>

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

查看网页效果：

在这里插入图片描述

列表样式练习【补充】

学习了如何设置背景图片之后，下面我们继续完善我们之前写的列表颜色练习中的页面，给我们的列表上添加箭头图标：
首先准备两张透明背景的箭头的图片：

在这里插入图片描述

然后我们补充之前列表样式练习的 CSS 代码：

style.css

#nav {
    width: 300px;
    background: lightgrey;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* background: 背景颜色  背景图片地址  背景图片位置(x  y)  背景图片重复方式 */
    background: darkorange url("../images/DownArrow.png") 265px 12px no-repeat;
}

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
    /* background-image: 背景图片地址 */
    background-image: url("../images/RightArrow.png");
    /* background-repeat: 背景图片重复方式 */
    background-repeat: no-repeat;
    /* background-position: 背景图片位置(x  y) */
    background-position: 230px 2px;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
    color: darkorange;
    text-decoration: underline;
}
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

查看网页效果：

在这里插入图片描述

渐变【拓展】

渐变效果的实现我们仅作为了解即可，这里推荐一个开源网站：Grabient 。此网站提供了多样且免费的 CSS 渐变效果，我们可以直接复制这个网站上的 CSS 代码到我们自己的网站上以达到我们想要实现的渐变效果：
示例：
在 Grabient 上选择我们想要实现的渐变效果，复制 CSS 代码：

在这里插入图片描述

粘贴到我们自己网页的代码中：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    
    <style>
        body {
            /*background-color: #0093E9;*/
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
        }
    style>

head>
<body>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

查看网页效果：

在这里插入图片描述

相关阅读:
pg_dump备份多张表到不同的sql文件
 SpringBoot项目@Async默认线程池导致OOM问题?
【无标题】
不念过往，不畏将来：2022年6月我辞职了...
卷积神经网络（入门）
[LeetCode]1413. 逐步求和得到正数的最小值
 软件工程毕业设计课题（82）微信小程序毕业设计PHP共享停车位小程序系统设计与实现
 华清远见上海中心22071班--11.19作业
 怎么办理公路路面工程资质，办理公路路面工程资质有什么条件
 数据分析软件Tableau 和 Power BI 怎么选？看这篇文章就够了
原文地址：https://blog.csdn.net/weixin_53983068/article/details/132587209