CSS介绍

  1. CSS: 层叠样式表 (Cascading style sheets)
  2. CSS作用:给页面中的HTML标签设置样式
  3. CSS写在style标签中,style标签一般写在head标签里面,title标签下面
  4. 写法:选择器{css属性(属性名:属性值;)}
    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
    <!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>
            /* css注释 */
            /* 这里写的都是css */
            /* 选择器{css属性}} */
            /* 选择器:查找标签 */
            p {
                /*文字颜色变红色 */
                color:red;
                /* 字变大 px:像素 */
                font-size: 30px;
                /* 背景颜色 */
                background-color:green;
                /* width height; */
                width: 400px;
                height: 400px;
                
            } 
        </style>
    </head>
    <body>
        <p>这是一个p标签</p>
    </body>
    </html>

CSS引入方式

  • 内嵌式: CSS写在style标签中,提示:style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中(小案例)
  • 外联式: CSS写在一个单独的.css文件中,提示:需要通过link标签在网页中引入(项目中)
  • 行内式: CSS写在标签的style属性中,提示:学基础不推荐使用，之后会配合js使用(配合js使用)
    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
    <!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>
            /* css注释 */
            /* 这里写的都是css */
            /* 选择器{css属性}} */
            /* 选择器:查找标签 */
            p {
                /*文字颜色变红色 */
                color:red;
                /* 字变大 px:像素 */
                font-size: 30px;
                /* 背景颜色 */
                background-color:green;
                /* width height; */
                width: 400px;
                height: 400px;
                
            } 
        </style>
    </head>
    <body>
        <p>这是一个p标签</p>
    </body>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <title>Document</title>
        <!-- 关系:样式表 -->
        <link rel="stylesheet" href="F:\Code\demo.css">
</head>

<body>
    <!-- css到底能写在哪里 -->
    <p>这是p标签</p>
    <div style="color: green; font-size: 30px;">这是div标签</div>
    <div>这个div是什么颜色</div>
</body>

选择器-标签/类

  • 结构: 标签名 {css属性名:属性值;}

  • 作用: 通过标签名，找到页面中所有这类标签，设置样式

  • 结构: .类名 {css属性名: 属性值;}

  • 作用: 通过类名，找到页面中所有带有这个类名的标签，设置样式

    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
        <style>
        /* 标签选择器注意点
        1.标签选择器选择的是一类标签，而不是单独某一个
        2.标签选择器无论嵌套关系有多深，都能找到对应的标签
        3.标签选择器 选中所有的这个标签都生效css */

        /* 类注意点:
        1.所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
        2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
        3.一个标签可以同时有多个类名，类名之间以空格隔开
        4.类名可以重复，一个类选择器可以同时选中多个标签 */
            p{
                color: rgb(30, 75, 75);
            } 
            .red{
                color: red;
            }
            .size{
                font-size: 66px;
            }
        </style>
    <body>
        <p>这是一个p标签</p>
        <!-- 类: 定义 和 使用才能生效 -->
        <p>111</p>
        <p class="red size">222</p>
        <div class="red">这个标签文字也要变红</div>
    </body>

选择器-id/通配符

  • 结构: #id属性值{css属性名: 属性值;}

  • 作用: 通过id属性值，找到页面中带有这个id属性值的标签，设置样式

  • 结构: *{css属性名:属性值;}

  • 作用: 找到页面中所有的标签，设置样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
        <style>
        /* id选择器注意点:
        1.所有标签上都有id属性
        2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
        3.一个标签上只能有一个id属性值
        4.一个id选择器只能选中一个标签 */
        /* 注意点:
        1.开发中使用极少，只会在极特殊情况下才会用到
        2.在基础班小页面中可能会用于去除标签默认的margin和padding(内外边距) */
        #blue{
            color: blue;
        }
        * {
            color: brown;
        }
        </style>
    <body>
        <div id="blue">这个div文字是蓝色的</div>
        <div>div</div>
        <p>pppp</p>
        <h1>h1</h1>
        <span>span</span>
    </body>

文字基本样式

  • 字体大小
    属性名: font-size 取值:数字 + px

注意点:

  1. 谷歌浏览器默认文字大小是16px
  2. 单位需要设置，否则无效
  • 字体粗细
    属性名: font-weight
    关键字: 正常normal,加粗bold
    纯数字: 100~900的整百数:正常400,加粗700

注意点:

  1. 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
  2. 实际开发中以:正常、加粗两种取值使用最多
  • 字体样式(是否倾斜)
    属性名font-style 正常(默认值):normal/倾斜: italic
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
    <style>
        p{
            font-size: 30px;
        }
        /*加粗/倾斜italic*/
        div{
            font-weight: 700;
            font-style: italic;
        }
        /*变细*/
        h1{
            font-weight: 400;
        }
        /*正常的，不倾斜的normal*/
        em{
            font-style: normal;
        }
    </style>
<body>
    <!-- 默认字号是16 -->
    <p>段落文字</p>
    <div>这是div</div>
    <h1>这是一级标题</h1>
    <em>em</em>
</body>

文字-字体/层叠性

属性名: font-family(Windows默认微软雅黑)

注意点:

  1. 如果字体名称中存在多个单词，推荐使用引号包裹
  2. 最后一项字体系列不需要引号包裹
  3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <style>
        div{
            /* font-family: 宋体; */
            /*如果用户电脑没有安装微软雅黑，就按黑体显示文字*/
            /*如果电脑没有安装黑体，就按任意一种非衬线字体系列显示*/
            font-family: 微软雅黑,黑体,sans-serif;
        }
        p{
            /*层叠性：后面的覆盖前面的属性*/
            color: rgb(184, 77, 77);
            color: blue;
        }

    </style>
<body>
    <div>这是一个div标签</div>
    <p>ppppp</p>
</body>

font复合属性

属性名: font (复合属性) 取值:font : style weight size family;

  • 省略要求:只能省略前两个，如果省略了相当于设置了默认值
    注意点:如果需要同时设置单独和连写形式，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
        <style>
            p{
                /*使用font属性写font : style weight size 字体;*/
                font: italic 700 66px 宋体;
                /*一个属性冒号后面书写多个值的写法(空格隔开)--复合属性*/
                font-style: normal;/*单独设置放后面覆盖*/
            }
        </style>
    <body>
        <p>这是p标签</p>
    </body>

文本缩进/水平对齐方式

属性名：text-indent

  • 数字+px
  • 数字+em(推荐:1em =当前标签的font-size的大小)

属性名：text-align

  • left左对齐
  • center居中对齐
  • right右对齐

元素：文本，span标签，a标签，input标签，img标签

  • 注意点:如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置
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>
        p {
            /* 文本缩进text-indent: Sepx; */
            /*首行缩进2个字的大小 */
            /* 默认字号: 16px ;32为两个字符 */
            /* text-indent: 40px;
            font-size: 20px; */

            /*em: 一个字的大小 */
            text-indent: 2em;
            font-size: 20px;
        }
        h1 {
                /*text-align: left;*/
                /* text-align: right; */
                text-align: center;
        }
        body {
            text-align: right;
        }
    </style>
<body>
    <p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
    <h1>新闻标题</h1>

    <img src="https://alandodo-1315761622.cos.ap-beijing.myqcloud.com/img/a19.jpg" alt="" width="1000">
</body>

文本修饰线

属性名: text-decoration

  • underline下划线(常用)

  • line-through删除线(不常用)

  • overline(几乎不用)

  • none无装饰线(常用)

  • 注意点:开发中会使用 text-decoration :none;清除a标签默认的下划线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <style>
        div {
            text-decoration: underline;
        }
        p {
            text-decoration: line-through;
        }
        h2 {
            text-decoration: overline;
        }
        a {
            text-decoration: none;
        }
        </style>
<body>
    <div>div</div>
    <p>ppp</p>
    <h2>h2</h2>
    <a href="#">我是超链接，点呀</a>
</body>

行高

  • 作用:控制一行的上下行间距,属性名：line-height
  • 数字+px
  • 倍数(当前标签font-size的倍数)

应用:

  1. 让单行文本垂直居中可以设置line-height:文字父元素高度
  2. 网页精准布局时，会设置line-height:1 可以取消上下间距
  • 行高与font连写的注意点:
  1. 如果同时设置了行高和font连写，注意覆盖问题
  2. font:style weight size/line-height family； 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        <style>
            p {
                /* line-height: 5epx; */
                /*自己字号的1.5倍*/
                /* line-height: 1.5; */
                /*66px 宋体 倾斜 加粗 行高是2倍 */
                font: italic 700 66px/2 宋体;
            }
        </style>
    <body>
        <p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析</p>
    </body>

谷歌调试工具

  • F12

拓展

  • 颜色常见取值
    属性名:如:文字颜色: color，如:背景颜色: background-color
    关键词，预定义的颜色名
    rgb表示法，红绿蓝三原色。每项取值范围: 0~255
    rgba表示法，红绿蓝三原色+a表示透明度取值范围是0-1
    十六进制表示法，#开头，将数字转换成十六进制表示
  • 标签水平居中方法总结 margin : 0 auto
    如果需要让div、p、h(大盒子)水平居中，可以通过margin : 0 auto;实现
    注意点:
  1. 如果需要让 div、p、h (大盒子) 水平居中，直接给 当前元素本身 设置即可
  2. margin: 0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

综合案例-新闻

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
<!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 {
            width: 800px;
            height: 600px;
            /*background-color: pink;*/
            margin: 0 auto;
        }
        
        /*p{
            text-align: center;
        } 后面还有其他的段落，其他段落不居中 */

        /*类选择器设置段落居中 */
        .center {
            text-align: center;
        }

        .color1 {
            color: 口#808080;
        }
        .color2 {
            color: rgb(57, 169, 132);
            font-weight: 700;
        }

        a {
            text-decoration: none;
        }

        /* 段落内容首行缩进 */
        .suojin {
            text-indent: 2em;
        }

    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14:58</span>
            <span class="color2">新浪科技</span>
            <a href="#">收藏本文</a>
        </p>
        <hr>
        <p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的教据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
        <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因"为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013干诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说“问题在于，我们仍然需要思考。</p>
        <p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。，如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近《自然》(Nature) 杂志将日光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
        <p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将中线连接成一排排中路来实现的。后来出现了机%语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多到学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约输·巴克斯及其团队在加州圣何寒的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指今来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
    </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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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>
        body {
        background-color: #f5f5f5;
        }
        .goods {
            width: 234px;
            height: 200px;
            background-color: rgb(255, 252, 252);
            /* 标签div居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }

            img {
                width: 160px;
        }
        /*产品标题*/
        .title {
            font-size: 14px;
            line-height: 25px;
        }

        .info {
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }

        .money {
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <!-- div 用来网页布局，一个页面可能用无数次，原则: 如果使用div ,尽量使用类名控制样式 -->
    <div class="goods">
    <img src="https://alandodo-1315761622.cos.ap-beijing.myqcloud.com/img/a20.jpg" alt="">
    <div class="title">九号平衡车</div>
    <div class="info">成年人的玩具</div>
    <div class="money">1999元</div>
    </div>
</body>
</html>

选择器-后代:空格

  1. 作用:根据HTML标签的嵌套关系，选择父元素 后代中 满足条件的元素
  2. 选择器语法:选择器1 选择器2 {css}
1
2
3
4
5
6
7
8
9
10
11
12
13
    <style>
        /*找到div的儿子p设置文字颜色是红色*/
        div p {
            color: red;
        }
    </style>
<body>
    <!-- 后代:儿子，孙子，重孙子..... -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>

选择器-子代：>

  1. 作用:根据 HTML标签的嵌套关系，选择父元素子代中 满足条件的元素
  2. 选择器语法: 选择器1 > 选择器2 {css}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <style>
        /* 空格隔开的是后代，儿子,孙子,重孙子 */
        /* div a {
            color: red;
        }*/
        /* 只想选中儿子a */
        /* div的儿子a文字颜色是红色 */
        div > a {
            color: red;
        }
    </style>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="">这是div里面的p里面的a</a>
        </p>
    </div>
</body>

选择器-并集

  1. 作用:同时选择多组标签，设置相同的样式
  2. 选择器语法: 选择器1 ， 选择器2 {css]
  3. 结果: 找到 选择器1和选择器2 选中的标签，设置样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <style>
        /* p div span h1 文字颜色是红色*/
        /* 选择器1，选择器2 {} */
        p, div, span, h1 {
            color:red;
        }
    </style>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
    <h2>h2</h2>
</body>

选择器-交集

  1. 作用:选中页面中 同时满足 多个选择器的标签
  2. 选择器语法: 选择器1选择器2 {css}
  3. 结果:(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
        <style>
            /* p{
                color: red;
            } */
       
            /* .box {
                color: red;
            } */
            /*必须是p标签,而且添加了box类 */
            p.box {
                color: red;
            }
        </style>
    <body>
        <!-- 找到第一个p,带box类的，设置文字颜色是红色 -->
        <p class="box">这是p标签:box</p>
        <p>ppppPp</P>
        <div class="box">这是div标签:box</div>
    </body>

选择器-hover伪类

  1. 作用：选中鼠标悬停在元素上的状态，设置样式
  2. 选择器语法:选择器:hover {css}
  3. 注意点:1.伪类选择器选中的元素的某种状态
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
        <style>
            /*悬停的时候文字颜色是红色 */
            a:hover {
            color:red;
            background-color:green;
            }
            /*用户鼠标悬停到div的时候，文字是绿色 */
            div:hover {
                color:green;
            }
        </style>
    <body>
        <a href="#">这是超链接</a>
        <!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
        <div>div</div>
    </body>

Emmet语法

  • 作用:通过简写语法，快速生成代码

背景-背景色

  1. 属性名：background-color (bgc)
  2. 属性值: 颜色取值:关键字、rgb表示法、rgba表示法、十六进制…
  3. 背景颜色默认值是透明 rgba(0,0,0,0) 、transparent
  4. 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
        <style>
            div {
            width: 400px;
            height: 400px;
            /* background-color: pink; */
            /* background-color: #ccc; */
            /* 红绿蓝三原色，a是透明度0-1 */
            /* background-color: rgba(0，0，0，0.5); */
            background-color: rgba(0, 0, 0,0.5);
            /* background-image: url('https://alandodo-1315761622.cos.ap-beijing.myqcloud.com/img/a20.jpg') */
            }
        </style>
    <body>
        <div>div</div>
    </body>

背景-背景图/平铺

  1. 属性名: background-image (bgi)
  2. 属性值:background-image: url(‘图片的路径’);
  3. 注意点:背景图片中url中可以省略引号背景图片默认是在水平和垂直方向平铺的背景,图片仅仅是指给盒子起到装饰效果，类似于背景颜色
  • 背景平铺-属性名:background-repeat(bgr)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
        <style>
            div {
            width: 1024px;
            height: 1024px;
            /* background-color: pink; */
            /* background-color: #ccc; */
            /* 红绿蓝三原色，a是透明度0-1 */
            /* background-color: rgba(0，0，0，0.5); */
            background-color: rgba(155, 71, 71, 0.5);
            background-image: url('https://alandodo-1315761622.cos.ap-beijing.myqcloud.com/img/avatar.png');
            /* background-repeat: repeat; */
            /* background-repeat: no-repeat;*/
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;
            }
            
        </style>
    <body>
        <div>div</div>
    </body>

背景-背景位置

  1. 属性名：background-position(bgp)
  2. 属性值：background-position: 水平方向位置 垂直方向位置;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
        <style>
            div {
            width: 1024px;
            height: 1024px;
            background-color: rgba(217, 95, 215, 0.5);
            background-image: url('https://alandodo-1315761622.cos.ap-beijing.myqcloud.com/img/avatar.png');
            background-repeat: no-repeat;
            /* background-position: 0 0; */
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            /* background-position: center; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -216px -216px;
            
            /* 正数: 向右向下移动， 负数:向左向右移动*/
            /* 注意: 背景色和背景图只显示在盒子里面 */
            }
            
        </style>
    <body>
        <div>div</div>
    </body>

背景-background

  • 背景相关属性的连写形式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
        <style>
            div {
                width: 40px;
                height: 400px;
            /* 不分先后顺序 背景色 背景图 背景图平铺背景图位置 */
            /* background: pink ur1(./images/1.jpg) no-repeat center bottom; */
            /* 背景图位置如果是英文单词可以颠倒顺序 */
            background:pink url(./images/1.jpg) no-repeat bottom center ;
            
            /* 测试背景图位置如果是数值 不要颠倒顺序 */
            /* 水平50px，垂直100px */
            /* background: pink ur1(./images/1.jpg) no-repeat 50px 100px; */
            background:pink ur1(./images/1.jpg) no-repeat 1@epx 50px;
            }
        </style>
    <body>
        <div></div>
    </body>
    重要时img,不太重要background

显示模式-块

  1. 显示特点:独占一行(一行只能显示一个)
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高
  4. 代表标签:div、p、h系列、ul、li、 dl、 dt、 dd、 form、header、 nav、 footer……
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        <style>
            /*块: 独占一行;宽度默认是父级100%; 添加宽度都生效 */
            div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        </style>
    <body>
        <div>11111</div>
        <div>2222222</div>
    </body>

显示模式-行内

  1. 显示特点:一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高
  4. 代表标签:a、span 、b、u、i、s、strong、ins、em、del……
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        <style>
            /*行内:不换行;设置宽高不生效;尺寸和内容的大小相同*/
            span {
                width: 300px;
                height: 300px;
                background-color:pink;
            }
        </style>
    <body>
        <span>span</span>
        <span>span</span>
    </body>

显示模式-行内块

  1. 显示特点:一行可以显示多个
  2. 可以设置宽高
  3. 代表标签:input、textarea、button、select……
  4. 特殊情况:img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
        <style>
            /* 行内块:一行显示多个;加宽高生效 */
            img {
                width: 100px;
                height: 100px;
            }
        </style>
    <body>
        <img src="https://alandodo-1315761622.cos.ap-beijing.myqcloud.com/img/a36.jpg" alt="">
        <img src="https://alandodo-1315761622.cos.ap-beijing.myqcloud.com/img/a36.jpg" alt="">
    </body>

显示模式-转换

  1. 目的:改变元素默认的显示特点，让元素符合布局要求
  2. 语法:(标签 {display：xxx})
    display:block 转换成块级元素
    display:inline-block 转换成行内块元素
    display:inline 转换成行内元素

拓展-标签嵌套

HTML嵌套规范注意点：

  1. 块级元素一般作为大容器，可以嵌套:文本、行内元素、行内块元素等等…
    但是:p标签中不要嵌套div、p、h等块级元素
  2. a标签内部可以嵌套任意元素
    但是: a标签不能嵌套a标签

CSS特性-继承性

  • 特性:子元素有默认继承父元素样式的特点(子承父业)
  • 可以继承的常见属性(文字控制属性都可以继承)
  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height
  5. ……
  • 注意点:可以通过调试工具判断样式是否可以继承
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
        <style>
            /*控制文字的属性都能继承，不是控制文字的都不能继承 */
            div {
            color: red;
            font-size: 30px;
            height: 300px;
            }
        </style>
    <body>
        <div>
            这是div标签里面的文字
            <span>这是div里面的span</span>
        </div>
    </body>
  • 1.a标签(超链接)的color会继承失效
  • 2.h系列标签的font-size(字号)会继承失效

CSS特性-层叠性

  1. 特性:给同一个标签设置不同的样式 –> 此时样式会层叠叠加 –> 会共同作用在标签上
  2. 给同一个标签设置相同的样式 –> 此时样式会层叠覆盖 –> 最终写在最后的样式会生效
  3. 注意点:当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

综合案例

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
<!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 {
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: rgb(31, 185, 196);
            display: inline-block;
            color: white;
            text-align: center;
            line-height: 58px;
        }
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- a*4 -->
    <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->
    <a href="#">五彩导航</a>
    <a href="#">五彩导航</a>
    <a href="#">五彩导航</a>
    <a href="#">五彩导航</a>
</body>
</html>