HTML标签_增加css样式 

 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样式的方法，可以在head中增加style标签，style中通过选择器定位标签增加css样式-->
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文件 引入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         }

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--样式表的引用关系以标签为起始位置，由下而上的进行显示-->
 7     
 8     <link rel="stylesheet" href="c1.css">
 9     <style>
10     .c1{
11         background-color: red;
12         width: 100px;
13         height: 100px;
14     }
15     </style>
16 </head>
17 <body>
18 
19 <div class="c1" style="background-color: pink; width: 100px; height: 100px"></div>
20 
21 </body>
22 </html>

 

posted on 2018-04-25 21:11  jamieblue  阅读(3077)  评论(0)  编辑  收藏  举报

导航