HTML標簽_增加css樣式

本文轉載自查看原文 2018-04-25 21:11 1449 前端

 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html的標簽和css樣式 html5標簽css3的常用樣式關於html5中progress標簽的CSS樣式總結 js 匹配 img標簽增加 style樣式正確分析結構使用正確的HTML標簽。CSS樣式寫一起。 HTML CSS清除默認樣式去掉標簽中所有的css樣式 CSS消除button標簽的默認樣式前端基礎之CSS標簽樣式 a標簽的css樣式四個狀態的設計