006 引入樣式

時間 2019-12-07

標籤引入樣式简体版

原文原文鏈接

　　開始css的複習。css

一：引入css樣式表html

1.分類spa

　　內部樣式表code

　　行內式（內聯樣式）htm

　　外聯樣式（外聯式）blog

2.內聯樣式ci

　　style=「」input

3.案例it

　　本身查找書寫位置。io

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <table width="400" border="0" align="center" cellspacing="0" cellpadding="0">
 9         <caption><h1 style="color: red;font-size: 35px">青春不常在</h1></caption>
10         <!--調整高度-->
11         <tr height="30">
12             <td>所在地區</td>
13             <td><input type="text" name="area" value="beijing" style="color: gray;"></td>
14         </tr>
15         <tr height="30">
16             <td>用戶名</td>
17             <td><input type="user" name="area" value="tom" style="color: gray;"></td>
18         </tr>
19         <tr height="30">
20             <td>密碼</td>
21             <td><input type="password" name="password" maxlength="6"></td>
22         </tr>
23         <tr height="30">
24             <td>年齡</td>
25             <td><select name="age" id="">
26                 <option value="">選擇年份</option>
27                 <option value="1990" selected="selected">1990</option>
28                 <option value="1991">1991</option>
29                 <option value="1992">1992</option>
30             </select></td>
31         </tr>
32         <tr height="30">
33             <td>性別</td>
34             <td style="color: blue;">
35                 <!--必須是相同的name-->
36                 male：<input type="radio" name="sex" value="male" checked="checked">
37                 female：<input type="radio" name="sex" value="female">
38             </td>
39         </tr>
40         <tr height="30">
41             <td>喜歡的類型</td>
42             <td>
43                 蘋果：<input type="checkbox" name="like" value="pinguo">
44                 香蕉：<input type="checkbox" name="like" value="xiangjiao">
45                 橘子：<input type="checkbox" name="like" value="juzi">
46             </td>
47         </tr>
48         <tr height="30">
49             <td>上傳頭像</td>
50             <td>
51                 <input type="file">
52             </td>
53         </tr>
54         <tr height="30">
55             <td></td>
56             <td>
57                 <input type="button" value="註冊">
58                 <input type="submit" value="提交">
59                 <input type="reset" value="重置">
60                 <!--圖像形式的提交-->
61                 <input type="image" src="00_1.png" width="45" align="center">
62             </td>
63         </tr>
64     </table>
65 </body>
66 </html>

4.效果

5.內部樣式表

　　使用方式：選擇器 {屬性：屬性值；}

6.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         th {
 8             color: blue;
 9         }
10         td {
11             font-size: 14px;
12         }
13         tr {
14             height: 30px;
15         }
16     </style>
17 </head>
18 <body>
19     <table width="500" border="1" align="center" cellspacing="0" cellpadding="10">
20         <caption>員工信息表格</caption>
21         <tr>
22             <th>姓名</th>
23             <th>性別</th>
24             <th>電話</th>
25         </tr>
26         <tr>
27             <td>tom</td>
28             <td>male</td>
29             <td>111111111111</td>
30         </tr>
31         <tr>
32             <td>tom</td>
33             <td>male</td>
34             <td>111111111111</td>
35         </tr>
36         <tr>
37             <td>tom</td>
38             <td>male</td>
39             <td>111111111111</td>
40         </tr>
41     </table>
42 </body>
43 </html>

二：外聯式

1.out.css

1 div {
2     color: red;
3 }

2.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="out.css">
 7 </head>
 8 <body>
 9     <div>111</div>
10     <div>222</div>
11     <div>333</div>
12     <div>444</div>
13 </body>
14 </html>

3.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。