1.Identifying the Syntax of CSS:
示例：
1 <!doctype html><html> 2 <body> 3 <h1>Welcome to BookYourHotel website.</h1> 4 <h2>This site is very friendly.</h2> 5 <h1>You can book your hotel while sitting at home.</h1> 6 </body> 7 </html>测试结果：
2.Identifying the Type of style Sheet
Inline style
internal style sheet
External style sheet
2.(1)Inline style示例代码：
1 <!doctype html><html> 2 <body> 3 <p style="font-size: 24px;color:red">Hotel booking from the comfort of your room. </p> 4 <p>Compare and book from more than 5000 hotels.</p> 5 </body> 6 </html>测试结果：
（2）internal style sheet 示例代码：示例代码：
1 <!doctype html><html> 2 <head> 3 <style type="text/css"> 4 p{color:red;font-size: 20pt;font-style: italic;}</style> 5 </head> 6 7 <body> 8 <p>Hotel booking from the comfort of your room.</p> 9 <P>Compare and book from mre than 5000 hotels</P> 10 </body> 11 </html>
测试结果：
3.External style sheet
示例代码：
1 <!doctype html><html> 2 <head> 3 <title>An External Style Sheet</title> 4 <link type="text/css" rel="stylesheet" href="externalstyle.css"/> 5 </head> 6 7 <body> 8 9 <h1>Hotel booking from the comfort of your room.</h1> 10 <P>Compare and book from mre than 5000 hotels</P> 11 </body> 12 </html>
测试结果：
3.Applying Multiple Style Sheets:
先建立一个“.css”文件：externalstylesheet.css
1 p{ 2 color:blue; 3 font-size:12pt; 4 font-weight:bold;}
示例代码：
1 <!doctype html><html> 2 <head> 3 <link type="text/css" rel="stylesheet" href="externalstylesheet.css" /> 4 <style> 5 h1{color: red;font-size: 12pt;font-style: italic;} 6 </style> 7 </head> 8 9 <body> 10 <p>Welcome to BookYourHotel website.</p> 11 <h1 style="font-size: 24pt;color: green">Hotel booking from the comfort of your room.</h1> 12 <h1>Compare and book from more than 5000 hotels. </h1> 13 </body> 14 </html>测试结果：
转载于:https://www.cnblogs.com/Catherinezhilin/p/8880037.html
