码迷,mamicode.com
首页 > Web开发 > 详细

HTML标签_增加css样式

时间:2018-04-25 22:08:04      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:back   ack   splay   one   col   方法   lan   lin   sheet   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--第一种增加css样式的方法,在标签中增加style属性-->
 9 <div style="background-color: blue; width: 100px; height: 100px">我是第一块</div><br>
10 <div style="background-color: red; width: 100px; height: 100px">我是第二块</div><br>
11 </body>
12 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             background-color: red;
 9             width: 100px;
10             height:100px;
11         }
12     </style>
13 </head>
14 <body>
15 <!--第二种增加css样式的方法,增加class属性-->
16 <div class="c1">我是红色</div><br>
17 </body>
18 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--第三种增加css样式的方法,使用css文件-->
 7     <link rel="stylesheet" href="c1.css">
 8 </head>
 9 <body>
10 <div class="c1">我是粉色</div><br>
11 </body>
12 </html>

 

c1.css文件为

1 .c1{
2             background-color: pink;
3             width: 100px;
4             height:100px;
5         }

 

HTML标签_增加css样式

标签:back   ack   splay   one   col   方法   lan   lin   sheet   

原文地址:https://www.cnblogs.com/testfan/p/8947255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!