初学html第三篇章之css基础属性

一、CSS属性书写格式:

(1)行内样式<div style="color:red">XXX</div>

  (2)内嵌样式:<head>

                               <style type="text/css">

                                        标签名称{

                                                 属性名称:属性对应的值;

                                                   ......

                                 }

                           </style>

             </head>

 

二、相关属性介绍

  • font-size属性用于设置字号(字体大小)
  • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小。
  • font-family属性用于设置哪一种字体。
  • 相关具体如下:
  • 初学html第三篇章之css基础属性

   外观相关属性: 

初学html第三篇章之css基础属性

 

 三、 项目展示:

      1、代码撰写:

<!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>家用电器商品分类列表</title>
</head>
<style>
 .a1{
     background-color:#0f7cbf; 
     font-size: 18px;
     width: 250px;
     font-weight: bold;
     text-indent: 10px;
     line-height: 35px;

 }
 .a2{
    background-color:#e4f1fa;
     font-size: 14px;
     width: 250px;
     font-weight: bold;
     text-indent: 20px;
     line-height: 30px;
     color:#0f7cbf;

 }
 .a2:hover{
     text-decoration: underline;
 }
 .a3{
     color: #666;
     line-height: 20px;
     text-indent: 10px;
 }
 .a3:hover{
     text-decoration: underline;
     text-decoration-color: #f60;
 }
    
</style>
<body>
    <div class="a1">家用电器</div>

    <div class="a2">大家电</div>
    <div class="a3"> 平板电视  洗衣机  冰箱  </div>
    <div class="a3">空调  烟机/灶具  热水器</div>
    <div class="a3">冷柜/酒柜  消毒柜  家庭影院</div>

    <div class="a2">生活电器</div>
    <div class="a3">电风扇  净化器  吸尘器  </div>
    <div class="a3"> 净水设备  挂烫机  电话机</div>
    
    <div class="a2">厨房电器</div>
    <div class="a3">榨汁机  电压力锅  电饭煲 </div>
    <div class="a3">豆浆机  微波炉  电磁炉</div>
    
    <div class="a2">五金家装</div>
    <div class="a3">淋浴/水槽  电动工具  手动工具</div>
    <div class="a3">仪器仪表  浴霸/排气  灯具 </div>
    
</body>
</html>

    2、结果展示:

初学html第三篇章之css基础属性

 

总结:对html有了新的认识,并产生了对其研究的兴趣 。在以后的学习过程中再接再厉!!!

 

上一篇:2021-06-03


下一篇:ckeditor富文本解决文段首行缩进问题