css基础使用

一、CSS介绍

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化

二、CSS使用方式

1. 行内样式/内联样式

　　借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">

 　　CSS样式声明 : 由CSS属性和值组成

示例：style="属性:值;属性:值;"

　　常用CSS属性 : - 设置文本颜色 color:red; - 设置背景颜色 background-color:green; - 设置字体大小 font-size:32px;

2. 内嵌样式

　　借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式

示例：
    <style> 
        选择器{ 
            属性:值; 
            属性:值; 
        } 
    </style>

　　选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式

/*标签选择器 : 根据标签名匹配所有的该元素*/  
p{
    color:red;
  }

3. 外链样式表

　　创建外部样式表文件 后缀使用.css

　　在HTML文件中使用标签引入外部样式表　　<link rel="stylesheet" href="URL" type="text/css">

　　样式表文件中借助选择器匹配元素应用样式

三、样式表特征

1. 层叠性

　　多组CSS样式共同作用于一个元素

2. 继承性

　　后代元素可以继承祖先元素中的某些样式 例 : 大部分的文本属性都可以被继承

3. 样式表的优先级

　　优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。

- 行内样式的优先级最高

- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上

- 浏览器默认样式和继承样式优先级较低

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-        scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <!--引入外部样式表-->
 9     <link rel="stylesheet" href="index.css">
10     <style>
11         /*内嵌样式,借助style标签书写样式声明,
12         实现样式与结构的分离*/
13         /*使用选择器匹配文档元素,为其应用样式*/
14         /*标签选择器:根据标签名匹配元素应用样式*/
15         h1{
16             background:green;
17         }
18         span{
19             color:orange;
20         }
21         span{
22             color:pink;
23         }
24     </style>
25 </head>
26 <body>
27     <!--行内样式,借助style标签属性设置样式规则-->
28     <!--CSS样式声明 属性名:属性值;-->
29     <h1 style="font-size:16px;color:red;">人生苦短</h1>
30     <h1 style="font-size:16px;color:red;">我学python</h1>
31     <h2>
32         测试<span>python</span>
33     </h2>
34     <span>python</span>
35     <div style="color:green;">
36         <p style="color:blue;">
37             <span style="color:gray;">子元素可以继承父元素或祖先元素的文本样式</span>
38         </p>
39     </div>
40 </body>
示例

四、CSS 选择器

1. 作用：匹配文档中的某些元素为其应用样式

2. 分类 :

　　(1) 标签选择器：根据标签名匹配文档中所有该元素

　　　　语法 :标签名{
  　　　　　　　　属性:值;
　　　　　　  }

 1 /*根据标签名匹配所有相应元素应用样式*/
 2 <style>
 3     h1{
 4         color:green;
 5     }
 6 </style>
 7 --------------------------------
 8 <body>
 9     <h1>人生苦短，我学python</h1>
10 </body>
标签选择器演示

　　(2)id选择器：根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用

　　　　语法 :#id属性值{
  
 　　　　　　 }

　　　　注意 : id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头; 尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

 1 /*根据元素的id属性值匹配(id选择器)*/
 2 <style>
 3     #d1{
 4         /*匹配id为"d1"的元素*/
 5         font-size:40px;
 6     }
 7     #d2{
 8         font-size:52px;
 9     }
10 </style>
11 ---------------------------------
12 <body>
13     <h1 id="d1">人生苦短</h1>
14     <h1 id="d2">我学python</h1>
15 </body>
id选择器演示

　　(3)class选择器/类选择器：根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用

　　　　语法 :.class属性值 {
     
　　　　　　    }

　　　　 特殊用法 : 1. 类选择器与其他选择器结合使用 注意标签与类选择器结合时,标签在前,类选择器在后　　例 : a.c1{ }

　　　　　　　　　2. class属性值可以写多个,共同应用类选择器的样式　　　　例 : .c1{ } .

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　c2{ }

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <p class="c1 c2"></p>

 1 <style>
 2 /*类选择器:根据元素的class属性值匹配到相应元素*/
 3     .c1{
 4         background: orange;
 5     }
 6     .c2{
 7         width:200px;
 8     }
 9     /*组合选择器*/
10     h2.c1{
11         /*匹配类名为c1的h2元素*/
12         height:200px;
13     }
14 </style>
15 ----------------------------
16 <body>
17     <h1 class="c1 c2">人生苦短</h1>
18     <h2 class="c1">我学python</h2>
19 </body>
class选择器/类选择器演示

　　(4)群组选择器：为一组元素统一设置样式

　　　　语法 : selector1,selector2,selector3{    
　　　　　　　

　　　　　　　}

 1 <style>
 2     /*群组选择器:将选择器组合起来,统一为元素设置样式*/
 3     h2,h3,h4{
 4         font-size:20px;
 5     }
 6 </style>
 7 ----------------------
 8 <body>
 9     <h2>python</h2>
10     <h3>python</h3>
11     <h4>python</h4>
12 </body>
群组选择器演示

　　(5)后代选择器：匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)

　　　　语法 :selector1 selector2{


　　　　　　  }

　　　　 匹配selector1中所有满足selector2的后代元素

 1 /*后代选择器:匹配所有满足选择器的后代元素*/
 2 div span{
 3     color:red;
 4 }
 5 -----------------
 6 <body>
 7     <div>
 8         <span>div->span</span>
 9             <p>
10                 <span>div->p->span</span>
11             </p>
12     </div>
13 </body>
14 ===========================
15 div->span
16 div->p->span 
17 div里面只要出现span,都算后代元素
后代选择器演示

　　(6)子代选择器：匹配满足选择器的所有直接子元素

　　　　语法 :selector1>selector2{

　　　　　　}

 1 /*子代选择器:匹配所有满足选择器的直接后代*/
 2 div>span{
 3     background:red;
 4 }
 5 ---------------------------
 6 <body>
 7     <div>
 8         <span>div->span</span>
 9             <p>
10                 <span>div->p->span</span>
11                     </p>
12     </div>
13 </body>
14 ===============================
15 div->span
子代选择器演示

　　(7) 伪类选择器：为元素的不同状态分别设置样式,必须与基础选择器结合使用

　　分类 :

　　:link 超链接访问前的状态

　　:visited 超链接访问后的状态

　　:hover 鼠标滑过时的状态

　　:active 鼠标点按不抬起时的状态(激活)

　　:focus 焦点状态(文本框被编辑时就称为获取焦点)

使用 :
a:link{
}
a:visited{
}
.c1:hover{
}

　　注意 :

　　　　1.超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写

:link
:visited
:hover
:active

　　　　2.超链接常用设置 :

a{
    /*统一设置超链接默认样式(不分状态)*/
}
a:hover{
    /*鼠标滑过时改样式*/
}

3. 选择器的优先级

　　使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器 权重
标签选择器 1
(伪)类选择器 10
id选择器 100
行内样式 1000

 

 

 

 

 

 

　　

　　复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和，群组选择器权重以每个选择器单独的权重为准，不进行相加计算

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
    color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
     color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
    color:blue;
}
  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         /*1.根据标签名匹配所有相应元素应用样式*/
 11         h1{
 12             color:green;
 13         }
 14         /*2.根据元素的id属性值匹配(id选择器)*/
 15         #d1{
 16             /*匹配id为"d1"的元素*/
 17             font-size:40px;
 18         }
 19         #d2{
 20             font-size:42px;
 21         }
 22         /*3.类选择器:根据元素的class属性值匹配到相应元素*/
 23         .c1{
 24            background: orange;
 25         }
 26         .c2{
 27             width:200px;
 28         }
 29         /*组合选择器*/
 30         h2.c1{
 31             /*匹配类名为c1的h2元素*/
 32             height:200px;
 33         }
 34         /*4.群组选择器:将选择器组合起来,统一为元素设置样式*/
 35         h2,h3,h4{
 36             font-size:20px;
 37         }
 38         #d1,.c1{}
 39         /*5.后代选择器:匹配所有满足选择器的后代元素*/
 40         div span{
 41             color:red;
 42         }
 43         /*6.子代选择器:匹配所有满足选择器的直接后代*/
 44         div>span{
 45             background:cyan;
 46         }
 47         /*7.伪类选择器:为元素的不同状态分别设置样式,
 48         需要和基础选择器结合使用*/
 49         /*
 50         超链接伪类:
 51             :link(超链接访问前的状态)
 52             :visited(超链接访问后的状态)
 53         动态伪类:
 54             :hover(鼠标悬停时的状态)
 55             :active(激活状态,鼠标点按时的状态)
 56             :focus(表单控件的焦点状态,输入框的编辑状态)
 57         */
 58         /*
 59         a:link{
 60             color:black;
 61         }
 62         a:visited{
 63             color:gray;
 64         }
 65         a:hover{
 66             font-size:28px;
 67         }
 68         a:active{
 69             background:orange;
 70         }
 71         */
 72         /*
 73             1.统一设置超链接四种状态下的样式
 74             2.单独设置鼠标悬停时的样式
 75         */
 76         a{
 77             color:black;
 78             /*取消超链接默认下划线*/
 79             text-decoration:none;
 80         }
 81         a:hover{
 82             color:orange;
 83         }
 84         /*创建h5标签,设置初始尺寸和背景颜色;
 85         鼠标悬停时修改背景颜色*/
 86         h5{
 87             width:200px;
 88             height:200px;
 89             background:pink;
 90         }
 91         h5:hover{
 92             background:green;
 93         }
 94         /*取消表单控件在焦点状态下的轮廓线*/
 95         input:focus{
 96             outline:none;
 97         }
 98 
 99     </style>
100 </head>
101 <body>
102     <input type="text">
103     <h5></h5>
104     <a href="01_form.html">表单应用</a>
105     <div>
106         <span>div->span</span>
107         <p>
108             <span>div->p->span</span>
109         </p>
110     </div>
111 
112     <!--基础选择器:标签,id,类-->
113     <!--class属性可以取多个值,使用空格隔开-->
114     <h1 id="d2" class="c1 c2">老王</h1>
115     <h1 id="d3" class="c1">老张</h1>
116     <h1 id="d1">老李</h1>
117     <h2 class="c1 c2">老赵</h2>
118     <h2>python1</h2>
119     <h3>python2</h3>
120     <h4>python3</h4>
121 
122 </body>
123 </html>
练习

五、标签分类及嵌套

1. 块元素

　　独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致 例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

2. 行内元素

　　可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定 例 : span label b strong i s u sub sup a

3. 行内块元素

　　可以与其他元素共行显示,又能手动调整宽高 例 : img input button (表单控件)

4. 嵌套原则

　　块元素中可以嵌套任意类型的元素 p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素

　　行内元素中最好只嵌套行内或行内块元素

 

转换元素的类型 display取值：block(块元素)　　inline(行内元素)　　inline-block(行内块元素)　　none(隐藏)

​六、尺寸与颜色单位​ ​ ​​ ​

1. 尺寸单位

　　px 像素单位

　　% 百分比，参照父元素对应属性的值进行计算

　　em 字体尺寸单位，参照父元素的字体大小计算，1em=16px

　　rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px

2. 颜色单位

　　英文单词：red，green，blue

　　rgb(r,g,b) 使用三原色表示，每种颜色取值0~255

　　rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）

　　十六进制表示：以#为前缀，分为长十六进制和短十六进制。

　　　　长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~9，a~f

　　　　　　例：red rgb(255,0,0) #ff0000

　　　　短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十

　　　　六进制解析

　　　　　　例：#000 #fff #f00

 

 

posted @ 2019-07-10 23:56  maplethefox  阅读(273)  评论(0)  编辑  收藏  举报