CSS入门二、美化页面元素

已于 2023-04-21 16:38:34 修改
阅读量1.9k 收藏 9
点赞数 1
分类专栏： 大前端 文章标签： css javascript 前端
于 2023-01-11 15:17:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyou123456789/article/details/128645340
版权

零、文章目录

CSS入门二、美化页面元素

1、字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

image-20230110140232344

（1）字体系列font-family

  • font-family 属性定义文本的字体系列。

  • 各种字体之间必须使用英文逗号隔开，如果有空格隔开的多个单词组成的字体加引号。

  • 常见取值：

    • 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
    • 字体系列：sans-serif、serif、monospace等……

  • 渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会显示系统默认自带字体。

  • 兼容性：尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体系列</title>
    <style>
     h2 {
         font-family: '微软雅黑';
     }
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;
     }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

image-20221218102316065

（2）字体大小font-size
  • font-size 属性定义字体大小。
  • px（像素）大小是我们网页的最常用的单位。
  • 谷歌浏览器默认的文字大小为16px。不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
  • 可以给 body 指定整个页面文字的大小，标题标签需要单独指定大小才会生效。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

image-20221218102459428

（3）字体粗细font-weight
  • font-weight 属性设置文本字体的粗细。
  • 实际开发时，我们更喜欢用数字表示粗细。
  • 要让加粗标签（比如 h 和 strong 等) 不加粗，设置font-weight：400就可以。

image-20221214152026018

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
       .bold {
           /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们提倡使用数字 表示加粗或者变细 */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold">拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

image-20221218103612787

（4）文字样式font-style
  • font-style 属性设置文本的风格。
  • 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

image-20221214152427282

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之文字样式(风格)</title>
    <style>
      p {
          font-style: italic;
      }
      em {
          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: normal;
      }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

image-20221218123139225

（5）字体复合属性font
  • 字体属性可以把以上文字样式综合来写，这样可以更节约代码。
  • 记忆口诀：font : style weight size family; swsf （稍微舒服）
  • 使用 font 属性时，必须按语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
  • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性。
font: font-style font-weight font-size/line-height font-family;

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

image-20221218152911398

（6）字体属性总结

image-20221214152830951

2、文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

image-20230109151235797

（1）文本颜色color
  • color 属性用于定义文本的颜色，可以指定预定义颜色枚举，十六进制，或者RGB或者RGBA。
  • 开发中最常用的是十六进制，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。
  • RGB可以指定三种颜色的值，或者RGBA，在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1。
color:#A983D8;
color:red;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观属性之颜色</title>
    <style>
       div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>
</head>
<body>
   <div>听说喜欢pink色的男生,都喜欢男人</div>
</body>
</html>

image-20221218154510848

（2）对齐文本text-align
  • text-align 属性用于设置元素内文本内容的水平对齐方式。

image-20221214160548089

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

image-20221218163850577

（3）装饰文本text-decoration
  • text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
  • 重点记住如何添加下划线， 如何删除下划线 ， 其余了解。

image-20221214160808306

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之装饰文本</title>
    <style>
        div {
            /* 下划线 */
            /* text-decoration: underline;   */
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            text-decoration: overline;
        }
        
        a {
            /* 取消a默认的下划线 */
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>
</html>

image-20221218213811967

（4）文本缩进text-indent
  • text-indent 属性用来指定文本的第一行的缩进长度，通常是将段落的首行缩进。甚至该长度可以是负值。
  • em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>
</head>
<body>
       <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

image-20221218214652418

（5）行间距line-height
  • line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

image-20221214161211913

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 26px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
    <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
    <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

image-20221218221153800

（6）文本属性总结

image-20221214161258499

（7）综合案例–天气预报
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报</title>
    <style>
        body {
            font: 16px/28px 'Microsoft YaHei';
        }
        
        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* 让h1里面的文字水平居中对齐 */
            text-align: center;
        }
        
        a {
            text-decoration: none;
        }
        
        .gray {
            color: #888888;
            font-size: 12px;
            text-align: center;
        }
        
        .search {
            color: #666;
            /* #666666     #666
           #ff00ff    #f0f */
            width: 170px;
        }
        
        .btn {
            font-weight: 700;
        }
        
        p {
            /* 首行缩进2个字的距离 */
            text-indent: 2em;
        }
        
        .pic {
            /* 想要图片居中对齐,则是让它的父亲 p标签添加 水平居中的代码 */
            text-align: center;
        }
        
        .footer {
            color: #888888;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
        <input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
    </div>
    <hr>
    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p class="pic">
        <img src="images/pic.jpeg" alt="">
    </p>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>



    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>

    <p> 不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

    <p class="footer"> 本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>

</html>

4、背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

（1）背景颜色background-color
  • background-color 属性定义了元素的背景颜色。
  • 一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。
background-color:颜色值;
background-color:transparent;

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景颜色</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: transparent;   透明的 清澈的  */
            /* background-color: red; */
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20221222072738379

（2）背景图片background-image
  • background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片。
  • 优点：非常便于控制位置. (精灵图也是一种运用场景)。
  • 注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。
  • 页面元素可同时添加背景颜色和背景图片，背景图片会压住背景颜色。
background-image : none | url (url)

image-20221216153748015

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* 不要落下 url()   */
            background-image: url(images/logo.png);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20221222072955721

（3）背景平铺background-repeat
  • background-repeat用来指定背景图像平铺。
  • 默认情况下是平铺的，不需要平铺需要指定no-repeat。
background-repeat: repeat | no-repeat | repeat-x | repeat-y

image-20221216154009710

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4. 沿着Y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20221222073638747

（4）背景图片位置background-position
  • background-position 属性可以改变图片在背景中的位置。
  • 参数代表的意思是：x 坐标和 y 坐标。 可以使用方位名词或者精确单位。
background-position: x y;

image-20221222073851117

  1. 参数是方位名词
  • 如果指定两个方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致。
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
  1. 参数是精确单位
  • 如果指定两个数值，第一个肯定是 x 坐标，第二个一定是 y 坐标
  • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
  1. 参数是混合单位
  • 如果精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标。

方位名词说明如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

方位名词案例1如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置方位名词应用一</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            background-color: pink;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <h3>
        成长守护平台
    </h3>
</body>

</html>

image-20221222075235795

方位名词案例2大图居中如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            /* background-position: center top; */
            background-position: center 40px;
        }
    </style>
</head>

<body>

</body>

</html>

image-20221222075757090

精确单位说明如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-精确单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */
            background-position: 20px;

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

混合单位说明如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-混合单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
            /* background-position: 20px center; */
            /* 水平是居中对齐  垂直是 20 */
            background-position: center 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
（5）背景图像固定background-attachment
  • background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
  • background-attachment默认值是滚动scroll的，要设置固定需要指定fixed。
background-attachment : scroll | fixed

image-20221222080356883

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景固定</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 200px;
        }
    </style>
</head>

<body>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
</body>

</html>

页面滚动背景不动

image-20221222162859120

（6）背景复合写法background
  • 为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。
  • 简写时，没有书写顺序要求，一般约定顺序：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;。
  • 这是实际开发中，我们更提倡的写法。
background: transparent url(image.jpg) repeat-y fixed top ;

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景属性复合写法</title>
    <style>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed;
            background-color: black; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 200px;
        }
    </style>
</head>

<body>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
</body>

</html>
（7）背景总结

image-20221223213330220

（8）综合案例–五彩导航
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-五彩导航</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>

</html>

image-20221223215204885

5、列表样式

  • 通常我们不使用网页默认的列表样式，而是使用设计的图标。

  • list-style-type：列表小圆点的类型。

  • list-style-image：列表图标。

  • list-style-position：列表图标的位置。

  • list-style：列表样式。

image-20230109163447507

案例如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>
    <style>
        #nav {
            width: 300px;
            background: #a0a0a0;
        }
        
        .title {
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
            /*  颜色，图片，图片位置，平铺方式  */
            background: red url("../images/d.gif") 270px 10px no-repeat;
        }
        
        ul li {
            height: 30px;
            list-style: none;
            text-indent: 1em;
            background-image: url("../images/r.gif");
            background-repeat: no-repeat;
            background-position: 236px 2px;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
            color: #000;
        }
        
        a:hover {
            color: orange;
            text-decoration: underline;
        }
    </style>
</head>

<body>

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

</html>

image-20230109163930139

李宥小哥
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css入门入门入门入门
05-23
通过CSS，我们可以控制元素的颜色、字体、布局、动画等各个方面，实现页面的美化和响应式设计。 CSS的选择器是其核心部分，它们帮助我们定位要应用样式的HTML元素。例如，`#id`选择器用于选取具有特定ID的元素，`....
15个必须阅读的CSS入门文章
12-02
本文将根据标题和描述，深入解析15个对于CSS入门至关重要的文章主题，帮助你快速建立起CSS基础。 1. **CSS Reset**：每个浏览器对CSS的默认样式处理不同，CSS Reset的目的是消除这些差异，让你的设计在所有浏览器上...
笔记总结：Web前端——CSS美化界面
lzf240286的博客
08-26 704
CSS样式的总结
CSS 美化网页元素【快速掌握知识点】
久绊A的博客
02-24 1903
CSS 美化网页元素【快速掌握知识点】、为什么使用CSS 、字体样式、文本样式color属性、文本修饰和垂直对齐、文本装饰、垂直对齐方式、文本阴影、超链接伪类、语法、示例、访问时，蓝色；访问后，紫色；、列表样式、网页背景、背景颜色：background-color、背景图像：background-image属性、背景重复方式、渐变
CSS全解析：从基础到实战，掌握每一个知识点
一杯梅子酱的博客
06-27 1033
以上就是CSS的全面解析，从基础属性到实战应用，涵盖了大部分常见的场景。掌握了这些知识，你将能够更加自信地设计和优化网页样式。继续探索CSS的无限可能，让创意成为现实！关注！
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记-03-美化页面元素
weixin_53249168的博客
12-03 115
简单的介绍CSS中与美化网页元素有关的样式
Java从入门到实战-5.2、前端了解：CSS与CSS3美化页面
小王的技术库
10-21 155
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
CSS 入门手册(一)
帅次的博客
02-27 1747
把写好的样式放在同级目录的另一个文件夹里，使用时只需要写一个link标签引入在编辑器里即可，他真正意义上做到了结构与样式完全分离。font-size 属性设置文本的大小，字体大小的值可以是绝对或相对的大小。adding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。元素的默认字体大小的是百分比。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
零基础HTML+CSS到入门
weixin_51356295的博客
07-10 1912
付款方式支付宝微信银行卡
前端入门——css美化页面元素
qq_44213733的博客
09-25 105
CSS入门
qq_47560372的博客
08-03 132
CSS：美化HTML页面，设置网页样式、布局。
100个简单css实例带你入门网页美化
09-04
"100个简单css实例带你入门网页美化"是一个旨在帮助初学者快速掌握CSS基本概念和技巧的教学资源，结合了哔哩哔哩黑马程序员的CSS教程以及30个HTML实例，总计130个实例，为学习者提供了丰富的实践机会。 首先，我们...
css html 新手入门 静态页面布局
07-03
CSS用于美化和布局，例如通过div和span创建布局区域，并用CSS来定义样式。JavaScript则赋予网页动态交互功能，如响应式行为和动画效果。 在编写HTML时，了解基本语法非常重要，如双标记和空标记，以及如何使用属性...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1301
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS学习笔记
ngczx的博客
07-23 671
CSS学习笔记
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 81
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李宥小哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值