Catherine_zhilin

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
HTML 5--CSS(1)

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>

测试结果：

 

 

 

 

posted on 2018-04-19 09:31  kkkshiki  阅读(118)  评论(0)    收藏  举报