CSS——样式表

最新推荐文章于 2022-10-18 15:51:02 发布

weixin_58811914

最新推荐文章于 2022-10-18 15:51:02 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/weixin_58811914/article/details/117675539

版权

CSS样式表

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为以下三大类：

内嵌式：又称行内式，在HTML标签上编写样式，如：<p style="color:red">
内部式：包含在HTML的<head></head>标签中，只对当前页面有效，如:<style>...</style>
外部式：链接引入外部样式表文件，如：<link href="style.css" ...>

内嵌式

需要在相关的标签内使用样式（style）属性,style 属性可以包含任何 CSS 属性。

如：

<body>
	<h1 style="color:red;">Hello World！</h1>
	<p style="color:red;font-size:30px">Happy every day!</p>	
</body>

内部式

在style标签中书写CSS代码。style标签写在head标签中。

如：

<head>
<style >
   h1{
         color:red;
     }

   p{
         color:red;font-size: 30px;
    } 
</style>
</head>
<body>
    <h1 >Hello World！</h1>
    <p >Happy every day!</p>
</body>

外部式

在HTML中引入外部 CSS 文件，可通过<link type="text/css" rel="styleSheet" href="CSS文件路径" />来引入CSS文件。如：

家用电器.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>家用电器</title>
    <link rel="stylesheet" type="text/css" href="家用电器.css">
</head>
<body>
    <div class="type">
    <div id="title1">家用电器</div>
         <div class="title2" ><a href="">大家电</a></div>
         <p>
             <a href="">平板电视</a>&nbsp;&nbsp;&nbsp;<a href="">洗衣机</a>&nbsp;&nbsp;&nbsp;<a href="">冰箱</a></br>
             <a href="">空调</a>&nbsp;&nbsp;&nbsp;<a href="">烟机/灶具</a>&nbsp;&nbsp;&nbsp;<a href="">热水器</a></br>
             <a href="">冷柜/酒柜</a>&nbsp;&nbsp;&nbsp;<a href="">消毒柜<a>&nbsp;&nbsp;&nbsp;<a href="">家庭剧院</a></br>
         </p>
         <div class="title2"><a href="">生活电器</a></div>
         <p>
             <a href="">电风扇</a>&nbsp;&nbsp;&nbsp;<a href="">净化器</a>&nbsp;&nbsp;&nbsp;<a href="">吸尘器</a></br>
             <a href="">净水设备</a>&nbsp;&nbsp;&nbsp;<a href="">挂烫机</a>&nbsp;&nbsp;&nbsp;<a href="">电话机</a></br>
         </p>
         <div class="title2"><a href="">厨房电器</a></div>
         <p>
             <a href="">榨汁机</a>&nbsp;&nbsp;&nbsp;<a href="">电压力锅</a>&nbsp;&nbsp;&nbsp;<a href="">电饭煲</a></br>
             <a href="">豆浆机</a>&nbsp;&nbsp;&nbsp;<a href="">微波炉</a>&nbsp;&nbsp;&nbsp;<a href="">电磁炉</a></br>
         </p>
         <div class="title2"><a href="">五金家电</a></div>
         <p>
             <a href="">淋浴/水槽</a>&nbsp;&nbsp;&nbsp;<a href="">电动工具</a>&nbsp;&nbsp;&nbsp;<a href="">手动工具</a></br>
             <a href="">仪器仪表</a>&nbsp;&nbsp;&nbsp;<a href="">浴霸/排气</a>&nbsp;&nbsp;&nbsp;<a href="">灯具</a></br>
         </p>
    </div>
</body>
</html>

家用电器.css文件

@charset "utf-8";

/*总div宽度*/
.type{
    width:240px;
}

#title1{
    font-size:18px;
    font-weight:bolder;
    line-height:36px;
    background-color:rgb(47, 93, 231);
    color:white;
    padding-left:13px;
}

.title2{
    font-size:14px;
    font-weight:bold;
    line-height:34px;
    background-color:rgb(205, 240, 253);
    color:white;
    padding-left:20px;
}

a{
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
    color:rgb(240, 98, 98);
}

p{
    font-size:12px;
    line-height:25px;
    color:rgba(41, 40, 40, 0.4);
    text-align:left;
    padding-left:9px;
}

p a:hover{
    text-decoration:none;
    color:crimson;
}