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

2021/6/3 18:27:59

编程Tag： 属性 css html text Font height color 初学 indent

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

一、CSS属性书写格式：

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

(2)内嵌样式：<head>

标签名称{

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

......

}

</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基础属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章