Python第三阶段学习 day02

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. 样式表的优先级

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

• 行内样式的优先级最高
• 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
• 浏览器默认样式和继承样式优先级较低

四、CSS 选择器

1. 作用

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

2. 分类 :

1. 标签选择器

根据标签名匹配文档中所有该元素
语法 :

标签名{
   
   
  属性:值;
}

2. id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用
语法 :

  #id属性值{
   
   
  
  }

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

3. class选择器/类选择器

根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :

.class属性值 {
   
   
 	
}

特殊用法 :

1. 类选择器与其他选择器结合使用
   注意标签与类选择器结合时,标签在前,类选择器在后
   例 : a.c1{ }
2. class属性值可以写多个,共同应用类选择器的样式
   例 :
   .c1{ }
   .c2{ }

4. 群组选择器

为一组元素统一设置样式
语法 :

selector1,selector2,selector3{
   
   	         
}

5. 后代选择器

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

selector1 selector2{
   
   
}

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

6. 子代选择器

匹配满足选择器的所有直接子元素
语法 :

selector1>selector2{
   
   
}

7. 伪类选择器

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

:link 	 超链接访问前的状态
:visited 超链接访问后的状态
:hover	 鼠标滑过时的状态
:active  鼠标点按不抬起时的状态(激活)
:focus	 焦点状态(文本框被编辑时就称为获取焦点)

使用 :

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

注意 :

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

:link
:visited
:hover
:active

2. 超链接常用设置 :