Web前端开发学习之CSS(Day03)
CSS 基础使用
一、CSS介绍
CSS全称为层叠样式表 ，与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>
选择器 : 通过标签名或者某些属性值到页面中选取相应的标签，为其应用样式
#借助id选择器
示例：
/*标签选择器 : 根据标签名匹配所有的该标签*/
p{
color:red;
}
3. 外链样式表（项目中使用）
- 创建外部样式表文件 后缀使用.css
- 在HTML文件中使用标签引入外部样式表
<link rel="stylesheet" href="URL" type="text/css">
- 样式表文件中借助选择器匹配标签应用样式
三、 样式表特征
1. 层叠性
多组CSS样式共同作用于一个标签
2. 继承性
后代标签可以继承祖先标签中的某些样式
例 : 大部分的文本属性都可以被继承
3. 样式表的优先级
优先级用来解决样式冲突问题。同一个标签的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
4、!important 规则
显示调整样式属性的优先级
只要 !important 出现，永远都以!important 的为主
语法：
选择器{属性:属性值 !important;}
注意：尽量少用
四、CSS 选择器
1. 作用
匹配文档中的某些标签为其应用样式
2. 分类 :
1. 标签选择器
根据标签名匹配文档中所有该标签
语法 :
标签名{
属性:值;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8lrPk43-1613644771108)(assets\选择器2.png)]
2. id选择器
根据标签的 id 属性值匹配文档中惟一的标签，id具有唯一性，不能重复使用
语法 :
#id属性值{
}
注意 :id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示。
3. class选择器/类选择器
根据标签的class属性值匹配相应的标签,class属性值可以重复使用,实现样式的复用
语法 :
.class属性值 {
}
注意:标签与类选择器结合时,标签在前,类选择器在后 例 : a.c1{ }
4. 群组选择器
为一组标签统一设置样式
语法 :
selector1,selector2,selector3{
}
5. 后代选择器
匹配满足选择器的所有后代标签(包含直接子标签和间接子标签)
语法 :
selector1 selector2{
}
匹配selector1中所有满足selector2的后代标签
6. 子代选择器
匹配满足选择器的所有直接子标签
语法 :
selector1>selector2{
}
7. 伪类选择器
为标签的不同状态分别设置样式,必须与基础选择器结合使用
分类 :
:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态
:active 鼠标点长按不抬起的状态（**）
:focus 焦点状态(文本框被编辑时就称为获取焦点)
使用 :
a:link{
}
a:visited{
}
.c1:hover{
}
注意：
１.超链接如果需要为四种状态分别设置样式，必须按照以下顺序书写
:link
:visited
:hover
:active
2.超链接常用设置
a{
/*统一设置超链接默认样式（不分状态）*/
}
a:hover{
/*鼠标滑过时改样式*/
}
3. 选择器的优先级
选择器为标签设置样式，发生冲突时，主要看选择器的权重，权重越大，优先级越高，也可用 !important 变更。
| 选择器 | 权重 |
|---|---|
| 标签选择器 | 1 |
| (伪)类选择器 | 10 |
| id选择器 | 100 |
| 行内样式 | 1000 |
复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :
/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1 */
color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
color:blue;
}
五、标签的尺寸和颜色
1. 过渡动画
2. 标签的尺寸
- px 像素单位
- 百分比 % 相对父标签
- 相对单位 em 1em=16px 通常用于移动端的页面开发 常用1.5em
- rpx=小程序页面的单位
- 当页面标签的内容大小超出了标签的宽度，可以使用 overflow 属性 来解决超出部分的显示方式，建议使用auto;
3. 颜色
-
标签的字体，背景，边框
-
使用方式 color:red;
-
英文单词
-
rgb:
-
rgb(0~255),rgb(2,3,5)
-
rgba(0~1),rgba(2,3,5,0.5) #透明度
-
-
16进制
-
长的16进制 #ffffff; #000000
-
短的16进制 #fff;#000
-
-
4、尺寸属性
尺寸属性一般用于设置元素的宽度和高度
2、宽度
属性：
width
min-width
max-width
注意：min-width/max-width 与 width 属性相冲突，最终以width属性值为准
3、高度
属性：
height
min-height
max-height
4、注意
1、不是所有的元素都支持修改尺寸
支持修改尺寸属性的元素如下：
1、块级元素
2、非块级元素中，存在width，height属性的html元素
table，img
5、溢出
使用尺寸属性控制元素大小时，如果内容所需的空间大小大于元素本身的空间，会导致内容溢出
处理溢出的属性:
overflow:
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
取值：
1、visibile
默认值，溢出可见
2、hidden
隐藏
3、scroll
让元素显示滚动条，溢出时可用
4、auto
自动，溢出时显示滚动条，并可用
5、边框
1、作用
在元素周围绘制一条线
2、属性
1、简写方式
border:width style color;
width:边框粗细，以px为单位
style:边框样式
solid : 实线
dotted : 虚线
dashed : 虚线
color:边框颜色
合法的颜色值
作用：控制元素的上下左右四个边框的粗细，样式，颜色
2、单边定义
border-方向:width style color;
方向：
top：上
bottom：下
left：左
right：右
3、单属性定义
border-属性:值;
属性：
width : 边框粗细
style : 边框样式
color : 边框颜色
作用：控制四条边的对应属性
4、单方向单属性定义
border-方向-属性:值;
5、注意
1、边框颜色可取值为 transparent，意味透明
2、取消边框显示
border:0;
border:none;
border-方向:0;
border-方向:none;