第四篇 CSS

在标签上设置style属性：

background-color：#2459a2；

height：48px；

。。。

编写CSS样式：

如何注释：/* 或 */

一. 在标签的属性中编写

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8       <div style="background-color: aqua;height:48px;">12fhjkhjjk44</div>
 9       <div style="background-color: red;height:48px">ff1537ff</div>
10       <div style="background-color: pink;height: 48px">fhajhjak</div>
11 </body>
12 </html>

二. 写在head里面，style标签中写样式

1. id选择区

#i1{

background-color: #2459a2;

height: 48px;

}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color: aqua;height:48px;
 9         }
10         #i2{
11             background-color: aqua;height:48px;
12         }
13     </style>
14 </head>
15 <body>
16       <div id="i1">12fhjkhjjk44</div>
17       <div id="i2">ff1537ff</div>
18       <div style="background-color: pink;height: 48px">fhajhjak</div>
19 </body>
20 </html>

2. class选择器 

.名称{

...

}

<标签 class=‘名称’>    </标签>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color: aqua;height:48px;
 9         }
10         #i2{
11             background-color: aqua;height:48px;
12         }
13         .c1{
14             background-color: aqua;height:48px;
15         }
16     </style>
17 </head>
18 <body>
19       <div class="c1">12fhjkhjjk44</div>
20       <span class="c1">ff1537ff</span>
21       <div class="c1">fhajhjak</div>
22 </body>
23 </html>

3. 标签选择器

 在head标签内的style标签中div{

......

}

所以div设置上此样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .c1{
 9             background-color: aqua;height:48px;
10         }
11         div{
12             background-color: red;color:black
13         }
14     </style>
15 </head>
16 <body>
17       <div>12fhjkhjjk44</div>
18       <span class="c1">ff1537ff</span>
19       <div>fhajhjak</div>
20 </body>
21 </html>

 4. 层级选择器

.c1 .c2 div{

               ......

 }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .c1{
 9             background-color: aqua;height:48px;
10         }
11         span div{
12             background-color: red;color:black
13         }
14     </style>
15 </head>
16 <body>
17       <div>12fhjkhjjk44</div>
18       <span class="c1">ff1537ff
19             <div>shjhjhjjhk</div>
20       </span>
21       <div>fhajhjak</div>
22 </body>
23 </html>

 5. 组合选择器（逗号）

6. 属性选择器

对选择到的标签再通过属性再进行一次筛选

.c1 [n='alex'] { width:100px; height: 200px;}

 

PS: 

 优先级，标签上style优先，编写顺序，就近原则

css样式也可以写在单独文件中

三 注释

/*     */

posted @ 2019-01-26 11:44  四叶草134  阅读(245)  评论(0)  编辑  收藏  举报