HTML引入CSS样式的三种方式

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>HTML中引入CSS样式的三种方式</title>
 6         
 7         <style type="text/css">
 8             /*
 9             这是CSS的注释
10             */
11            /*
12            id选择器，#+id
13            */
14            #usernameErrorMsg{
15                color: red;
16                font-size: 12px;
17            }
18            /*标签选择器*/
19            div{
20                background-color: black;
21                border: 1px solid red;
22                width: 100px;
23                height: 100px;
24            }
25            /*
26            类选择器
27            .类名{}
28            */
29            .myclass{
30                border: 1px solid red;
31                width: 100px;
32                height: 30px;
33            }   
34             
35         </style>
36         /*第三种方式 引入css文件*/
37         <link rel="stylesheet" type="text/css" href="1.css" />
38     </head>
39     <body>
40         <!--
41         第一种方式
42         width 宽
43         height 高
44         background-color背景色
45         display none隐藏，block标识显示
46         -->
47         <div id="101" style="width: 300px; height: 300px; background-color: aquamarine;display: block;border-color: crimson;border-width: 1px;border-style: dashed;"></div>
48         <br><br>
49         
50         <div id="101" style="width: 300px; height: 300px; background-color: aquamarine;display: block;border: red 2px dashed;"></div>
51         <!--
52         设置样式字体大小12px，颜色为红色
53         第二种方式 在header中统一设置
54         -->
55         <span id="usernameErrorMsg">对不起，用户名不能为空</span>
56         <div>123</div>
57         <div>234</div>
58         <div></div>
59         
60         <!--类选择器-->
61         <input type="text" class="myclass"/>
62         <br><br><br>
63         <select class="myclass">
64             <option value="zk">专科</option>
65             <option value ="bk">本科</option>
66         </select> <br>
67         <!--
68         第三种方式，引入外部独立的css文件
69         要求把百度下划线去掉
70         -->
71         <a href="http://www.baidu.com">百度</a>
72         <span id="baiduspan">点击我连接到百度</span>
73         
74     </body>
75 </html>

 

 1 a {
 2     text-decoration: none;
 3 }
 4 /*
 5 cursor鼠标样式，pointer是小手，hand有浏览器兼容问题，建议使用pointer
 6 */
 7 #baiduspan{
 8     text-decoration: underline;
 9     cursor: pointer;
10     
11 }

 

posted @ 2021-01-26 01:20  渐行、渐远  阅读(594)  评论(0)    收藏  举报