HTML5教程

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

本文主要是介绍初学html第三篇章之css基础属性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、CSS属性书写格式：

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

  (2)内嵌样式：<head>

                               <style type="text/css">

                                        标签名称{

                                                 属性名称：属性对应的值；

                                                   ......

                                 }

                           </style>

             </head>

 

二、相关属性介绍

  • font-size属性用于设置字号(字体大小)
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。
  • font-family属性用于设置哪一种字体。
  • 相关具体如下：

   外观相关属性： 

 

 三、 项目展示：

      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有了新的认识，并产生了对其研究的兴趣 。在以后的学习过程中再接再厉！！！

 

这篇关于初学html第三篇章之css基础属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航