1 <! DOCTYPE html > 2 < html lang ="en" > 3 < head > 4 < meta charset ="UTF-8" > 5 < title > Title </ title > 6 </ head > 7 < body > 8 < !-- The first way to increase the css style, add the style attribute to the tag --> 9 < div style = "background-color: blue; width: 100px; height: 100px" >I am the first block </ 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 <!-- The second way to increase the css style, increase the class attribute --> 16 < div class = "c1" > I am red </ 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 <!-- The third add css style method, using css file --> 7 < link rel = "stylesheet" href = "c1.css" > 8 </ head > 9 < body > 10 <div class="c1">我是粉色</div><br> 11 </body> 12 </html>
The c1.css file is
1 .c1{ 2 background-color: pink; 3 width: 100px; 4 height:100px; 5 }