Web前端CSS3基础

CSS介绍

CSS: 层叠样式表 (Cascading style sheets)
CSS作用:给页面中的HTML标签设置样式
CSS写在style标签中,style标签一般写在head标签里面,title标签下面
写法:选择器{css属性(属性名:属性值;)}

<!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使用)

<!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>

<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属性名: 属性值;}
作用: 通过类名，找到页面中所有带有这个类名的标签，设置样式

    <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属性名:属性值;}
作用: 找到页面中所有的标签，设置样式

    <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 注意点:

谷歌浏览器默认文字大小是16px
单位需要设置，否则无效

字体粗细属性名: font-weight 关键字: 正常normal,加粗bold 纯数字: 100~900的整百数:正常400,加粗700 注意点:

不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以:正常、加粗两种取值使用最多

字体样式(是否倾斜) 属性名font-style 正常(默认值):normal/倾斜: italic

    <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默认微软雅黑)

注意点:

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

    <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;

省略要求:只能省略前两个，如果省略了相当于设置了默认值注意点:如果需要同时设置单独和连写形式，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

    <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属性给文本所在标签(文本的父元素)设置

    <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标签默认的下划线

    <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的倍数)

应用:

让单行文本垂直居中可以设置line-height:文字父元素高度
网页精准布局时，会设置line-height:1 可以取消上下间距

行高与font连写的注意点:

如果同时设置了行高和font连写，注意覆盖问题
font:style weight size/line-height family；

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

谷歌调试工具

拓展

颜色常见取值属性名:如:文字颜色: color，如:背景颜色: background-color 关键词，预定义的颜色名 rgb表示法，红绿蓝三原色。每项取值范围: 0~255 rgba表示法，红绿蓝三原色+a表示透明度取值范围是0-1 十六进制表示法，#开头，将数字转换成十六进制表示
标签水平居中方法总结 margin : 0 auto 如果需要让div、p、h(大盒子)水平居中，可以通过margin : 0 auto;实现注意点:

如果需要让 div、p、h (大盒子) 水平居中，直接给当前元素本身设置即可
margin: 0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

综合案例-新闻

<!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>

综合案例-图片

<!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>

选择器-后代:空格

作用:根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法:选择器1 选择器2 {css}

    <style>
        /*找到div的儿子p设置文字颜色是红色*/
        div p {
            color: red;
        }
    </style>
<body>
    <!-- 后代:儿子，孙子，重孙子..... -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>

选择器-子代：>

作用:根据 HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法: 选择器1 > 选择器2 {css}

    <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 {css]
结果: 找到选择器1和选择器2 选中的标签，设置样式

    <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 {css}
结果:(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

    <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伪类

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法:选择器:hover {css}
注意点:1.伪类选择器选中的元素的某种状态

    <style>
        /*悬停的时候文字颜色是红色 */
        a:hover {
        color:red;
        background-color:green;
        }
        /*用户鼠标悬停到div的时候，文字是绿色 */
        div:hover {
            color:green;
        }
    </style>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
    <div>div</div>
</body>

Emmet语法

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

背景-背景色

属性名：background-color (bgc)
属性值: 颜色取值:关键字、rgb表示法、rgba表示法、十六进制...
背景颜色默认值是透明 rgba(0,0,0,0) 、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

    <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>

背景-背景图/平铺

属性名: background-image (bgi)
属性值:background-image: url('图片的路径');
注意点:背景图片中url中可以省略引号背景图片默认是在水平和垂直方向平铺的背景,图片仅仅是指给盒子起到装饰效果，类似于背景颜色

背景平铺-属性名:background-repeat(bgr)

    <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>

背景-背景位置

属性名：background-position(bgp)
属性值：background-position: 水平方向位置垂直方向位置;

    <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

背景相关属性的连写形式

    <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

显示模式-块

显示特点:独占一行(一行只能显示一个)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
代表标签:div、p、h系列、ul、li、 dl、 dt、 dd、 form、header、 nav、 footer......

    <style>
        /*块: 独占一行;宽度默认是父级100%; 添加宽度都生效 */
        div {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    </style>
<body>
    <div>11111</div>
    <div>2222222</div>
</body>

显示模式-行内

显示特点:一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
代表标签:a、span 、b、u、i、s、strong、ins、em、del......

    <style>
        /*行内:不换行;设置宽高不生效;尺寸和内容的大小相同*/
        span {
            width: 300px;
            height: 300px;
            background-color:pink;
        }
    </style>
<body>
    <span>span</span>
    <span>span</span>
</body>

显示模式-行内块

显示特点:一行可以显示多个
可以设置宽高
代表标签:input、textarea、button、select......
特殊情况:img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

    <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>

显示模式-转换

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

拓展-标签嵌套

HTML嵌套规范注意点：

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

CSS特性-继承性

特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
......

注意点:可以通过调试工具判断样式是否可以继承

    <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特性-层叠性

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

综合案例

<!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>

Web前端CSS3基础

CSS介绍

CSS引入方式

选择器-标签/类

选择器-id/通配符

文字基本样式

文字-字体/层叠性

font复合属性

文本缩进/水平对齐方式

文本修饰线

行高

谷歌调试工具

拓展

综合案例-新闻

综合案例-图片

选择器-后代:空格

选择器-子代：>

选择器-并集

选择器-交集

选择器-hover伪类

Emmet语法

背景-背景色

背景-背景图/平铺

背景-背景位置

背景-background

显示模式-块

显示模式-行内

显示模式-行内块

显示模式-转换

拓展-标签嵌套

CSS特性-继承性

CSS特性-层叠性

综合案例

继续阅读