ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS——样式表

2021-06-07 23:00:40  阅读:115  来源: 互联网

标签:color 标签 样式表 font CSS nbsp


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;
}

标签:color,标签,样式表,font,CSS,nbsp
来源: https://blog.csdn.net/weixin_58811914/article/details/117675539

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有