CSS

1.CSS的定义及作用

CSS：层叠样式表语言。

作用：设置HTML页面中的某些元素的样式，让HTML页面更好看。HTML是主体，CSS依赖HTML。

2.在HTML页面中嵌套使用CSS的三种方式

（1）内联定义方式

　　在标签内部使用style属性来设置元素的CSS样式。

　　语法格式：

　　<标签 style="样式名：样式值；样式名：样式值；样式名：样式值；......."></标签>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>CSS:内联定义方式</title>
 6     </head>
 7     <body>
 8         <div style="width: 300px;height: 300px;background-color: #ccffff;"></div>
 9     </body>
10 </html>

（2）定义内部样式块对象方式

　　在head标签中使用style块

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>CSS:样式块方式</title>
 6         <style type="text/css">
 7             /*
 8              * id选择器
 9              * 语法格式：
10              *   #id{
11              *         样式名：样式值;
12              *         样式名：样式值;
13              *         ......
14              *     }
15              */
16             #usernameErrorMsg{
17                 color:red;
18                 font-size: 60px;
19             }
20                 
21                 
22             /*
23              * 标签选择器
24              * 语法格式：
25              * 标签名{
26              *             样式名：样式值;
27              *         样式名：样式值;
28              *         ......
29              * }
30              * 注：标签选择器的作用范围比id选择器的范围广,因为id是唯一的.
31              */        
32              div{
33                  background-color:black ;
34                  border:1px solid red;
35                  width: 100px;
36                  height:100px;
37              }
38              
39              
40              
41              /*
42               * 类选择器
43               * 语法格式：
44               * .类名{
45               *      样式名：样式值;
46              *         样式名：样式值;
47              *         ......
48               * }
49               */
50              
51              .myclass{
52                  border:1px solid blue;
53                  width: 600px;
54              }
55             
56         </style>
57     </head>
58     <body>
59         <span id="usernameErrorMsg">用户名不能为空！</span>
60         
61         <div></div>
62         <div></div>
63         <div></div><br />
64         
65         <input type="text" class="myclass"/><br />
66         <select class="myclass">
67             <option>学士</option>
68             <option>硕士</option>
69             <option>博士</option>
70         </select>
71     </body>
72 </html>

（3）链入外部样式表文件方式

　　将样式写到一个独立的xxx.CSS文件当中，在需要的网页上直接引入CSS文件即可。（最常用的方式,易维护而且成本低）

　　语法格式：

　　<link type="text/css" rel="stylesheet" href="css文件的路径" />

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>CSS:引入外部独立的css文件</title>
 6         <link rel="stylesheet" type="text/css" href="1.css"/>
 7     </head>
 8     <body>
 9         <a href="http://www.baidu.com">百度</a><br />
10         <span id="baiduSpan">点击链接到百度</span>
11     </body>
12 </html>
1 a{
2     text-decoration: none;
3 }
4 
5 #baiduSpan{
6     text-decoration: underline;
7     cursor: pointer;
8     color: red;
9 }

3.css样式的绝对定位

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>CSS样式的绝对定位</title>
 6         <style type="text/css">
 7             #div1{
 8                 background-color: red;
 9                 border:10px black solid;
10                 width: 300px;
11                 height:300px;
12                 position: absolute;  /* 绝对定位    */
13                 left:100px;
14                 top:100px;
15             }
16         </style>
17     </head>
18     <body>
19         <div id="div1"></div>
20     </body>
21 </html>

posted @ 2021-01-06 13:31  L1998  阅读(96)  评论(0)    收藏  举报