1、CSS概述
1、问题
1、控制页面中所有的 文本 颜色为 红色
2、控制页面中所有 div 的文本颜色为 蓝色
3、将所有 div 的颜色变为 黄色
HTML元素的不足:
1、要完成相同的效果,使用的是不同的属性
<body text="red"></body>
<font color="blue"></font>
2、没有提升 html属性的 可重用性和可维护性
可重用性:重复的操作,不用重复的写
可以通过css解决以上两个问题
2、什么是CSS
CSS(Cascading Style Sheets),层叠样式表,级联样式表,简称:样式表。专门用于定义页面元素的样式的。
以统一的方式定义页面元素的样式
CSS实现了内容与表现相分离
提升了代码的可重用性 和 可维护性+
3、CSS 与 HTML之间的关系
HTML:专门用于构建网页结构
CSS:专门构建HTML网页的样式
HTML属性效果 与 CSS样式效果相冲突的话,优先使用CSS定义页面元素的效果
2、CSS语法
1、使用CSS样式表
1、内联方式(注:也没有提升 属性的 可重用性和可维护性,但是采用的是CSS的方式)
又称为:行内样式
将样式定义在某个html元素中
语法:
<ANY style="样式声明(若干条);样式声明;"></ANY>
样式声明:
由 属性名称 和 属性值 来组成,属性名称和属性值之间用":"来关联
ex:
属性名称 属性值
color:定义他所在的行的颜色属性; red,blue,yellow
background-color:(背景颜色) 合法颜色值即可...(同上)
font-size 以px,pt为单位的数值
控制以下 文本颜色为 红色,背景颜色为 黄色 文字大小为24px
<p>静夜思</p>
2、内部样式表
将样式定义在网页的一块独立位置处
在<head></head>中增加一对 <style></style>元素,在<style>元素中 定义元素的样式,具体语法如下:
ex:
<head>
<title></title>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
<head>
样式规则,由两部分组成
1、选择器
选择(规范)页面中哪些元素能够使用声明好的样式
比如:元素选择器,由元素名称来充当选择器,控制某标记对应所有页面元素的样式
2、若干样式声明
样式规则 语法结构:
选择器{
样式声明1;
样式声明2;
...
样式声明n;
}
ex:
p{
color:red;
background-color:yellow;
font-size:24px;
}
3、外部样式表(样式规则同内部样式语法规则一样)
将样式定义在外部的"样式表文件(*.css)"中
1、创建 .css文件,编写样式规则
2、在要使用 样式表的 html文件中进行引入
<head>
<link rel="stylesheet" href="样式表文件 url">
</head>
2、CSS样式表特征
1、继承性
大部分样式属性是可以被继承
2、层叠性
可以为一个元素定义多个样式规则
如果属性不冲突时,多个样式规则可以层叠为一个(即都可以应用到当前元素上)
3、优先级
在层叠性基础上,如果 样式定义 冲突的话,那就会按照不同使用方式的优先级,来选择性应用样式
低:浏览器默认设置
中:外部样式表 和 内部样式表
就近原则
(后定义优先 即 谁后定义谁优先)
高:内联方式
(在非作弊的情况下,内联方式级别最高)
4、!important 规则(即上面所说的“作弊方式”,不建议在页面中使用的过多)
显示调整样式属性的优先级
语法:
属性名:值 !important;、
谨慎使用
3、选择器(重点)
1、作用
选择(规范)页面中哪些元素能够使用声明好的样式为了匹配页面的元素
2、详解
1、通用选择器
作用:匹配页面中所有的元素
语法:*{}
缺点:效率较低,尽可能少用,可以通过 使用body 的继承性 来替代 *
2、元素选择器
作用:匹配某一标记所对应的页面中所有的元素
语法:元素/标签{}
ex:
div{/*匹配页面中所有div*/}
span{/*匹配页面中所有span*/}
li{/*匹配页面中所有li*/}
3、类选择器
作用:事先定义好样式,可以任由元素通过class属性进行引用
语法:
定义:.类名{}
引用:<ANY class="类名"></ANY>
多类选择器的引用方式:
让一个元素引用多个类选择器,中间用 空格 隔开即可
分类选择器的声明方式:
将元素选择器和类选择器结合到一起进行声明,实现对某种元素中的不同样式细分控制
ex:想要控制 class为important的div元素,
文字大小为 48px
语法:元素选择器.类选择器{}
4、id选择器(专属定制)
作用:匹配 指定id值的元素的 样式
ex:
<div id="nav"></div>
语法:#ID值{}
【2、3、4统称为基础选择器】
5、群组选择器
群组选择器的声明以一个“,”隔开的选择器列表
语法:
选择器1,选择器2,...{}
ex:
#title,p.redColor,.important,span{
color:red;
}
6、后代选择器
后代:
多于 一级 层级关系的元素,只能叫后代
只具备 一级 层级关系的元素 也可以叫后代
语法:
选择器1 选择器2{}
语义:匹配 在选择器1 中的 所有后代元素选择器2
ex:
#content span()
7、子代选择器
子代:
只具备 一级 层级关系的元素 称之为子代
语法:
选择器1>选择器2{}
语义:匹配 在选择器1 中的 子级元素 选择器2
8、伪类选择器
伪类:专门匹配元素不同状态的选择器
分类:
1、链接伪类
2、动态伪类
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
语法:
以“:”作为开始的选择器
1、链接伪类
1、:link
适用于未被访问的超链接
2、:visited
适用于访问过的超链接
2、动态伪类
1、:hover
适用于鼠标悬停在html元素时
2、:active
使用于html元素被激活时
3、:focus
适用于html元素获取焦点时
选择器优先级
选择器类型 权值
元素选择器 0,0,0,1
类选择器 0,0,1,0
伪类选择器 0,0,1,0
ID选择器 0,1,0,0
内联样式 1,0,0,0
(思考:当使用元素选择器时,就可以实现大部分功能了,为何还要使用其他选择器?
答:
元素选择器用于同名元素的批量引用;
类选择器可以用于某个元素进行样式灵活选用;即某个单独的元素是引用;
多类选择器是某个元素引用多个样式;
分类选择器;将元素选择器和类选择器结合起来,针对于某种元素不同样式的细分详细控制)
3、尺寸与边框
1、css单位
1、尺寸单位
1、px:像素
2、pt:磅(1pt=1/72 in)
3、in:英寸,1 in=2.54 cm
4、% :百分比,占据 当前元素 或 父元素对属性的 占比
5、em:倍数,多数用于 文字大小的描述(响应式布局时用)
6、mm:毫米
7、cm:厘米
注意:css中尺寸单位是不能省略的。
2、颜色单位(取值)
1、rgb(r,g,b)
(r:red,范围0-255)
(g:green,范围0-255)
(b:blue,范围0-255)
ex:
background-color:rgb(0,0,0);黑色
background-color:rgb(255,0,0);红色
background-color:rgb(255,255,255)白色
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha:透明度0~1之间的数字
0:完全透明
1:完全不透明
0.5:半透明
4、#rrggbb
通过6位16进制数字表示一个颜色
每位数字范围:0-9 A-F
#00ff00:绿色
#ff0000:红色
#1a2b3c:?
5、#rgb
#rrggbb 每两位数字相同时,可以使用#rgb简化
#00ff00 -> #0f0
#aabbcc -> #abc
#accdda -> x
6、颜色的英文表示
red,green,blur,.orange,pink
2、尺寸属性
1、作用
用于设置元素的宽度和高度
单位一般为 px 或 %(父元素对应属性的占比)
2、语法
1、宽度
width
min-width:最小宽度
max-width: 最大宽度
2、高度
height
min-height:最小高度
max-height:最大高度
注意:
页面中所有元素的高度,在不指定的情况全部自适应(以内容为主)。
页面中所有块级元素的宽度,默认占据父元素的100%
页面中
3、页面中允许修改 尺寸 属性的元素
1、所有块级元素都允许修改
2、大部分的行内块元素
所有的表单元素都是行内块元素
除radio、checkbox之外,其他元素允许修改尺寸
3、本事html元素就具备width 和 height的
img,table 可以修改尺寸
4、行内元素(除具备width和height之外)是不能修改尺寸
span,a,b,i,s,b ... 不能修改尺寸
4、溢出
1、什么是溢出
使用尺寸属性限制元素大小时,如果内容所需要的空间大于元素本身空间,则会导致内容溢出
2、溢出处理属性
属性:overflow
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
取值:
1、visible
默认值,溢出可见
2、hidden
隐藏
3、scroll
滚动,让元素出现滚动条,溢出时,滚动条可用
4、auto
自动,溢出时显示滚动条并可用,非溢出时,不显示滚动条
3、边框属性
1、边框
1、简写方式
border:width style color;
作用:设置元素上下左右四个边框的宽度,样式以及颜色
width:边框的宽度(尺寸)
style:边框的样式
取值:
1、solid:直线
2、dotted:虚线(点状)
3、dashed:虚线(线状)
color:边框的颜色,可以取值为 transparent(透明)
ex:
div{
border:1px solid red;
}
2、单边定义
border-方向:width style color;
方向可以被以下关键字所取代
top:上
right:右
bottom:下
left:左
ex:
border-bottom:2px dashed #00ff00;
3、单属性定义
border-属性:值;
属性可以被以下关键字取代
width:宽度
style:样式
color:颜色
ex:
border-width:5px;
border-style:solid;
border-color:#f00f00;
4、单边单属性定义
border-方向-属性:值;
方向:top/right/bottom/left
属性:width/style/color
ex:
border-top-color:yellow;
1、问题
1、控制页面中所有的 文本 颜色为 红色
2、控制页面中所有 div 的文本颜色为 蓝色
3、将所有 div 的颜色变为 黄色
HTML元素的不足:
1、要完成相同的效果,使用的是不同的属性
<body text="red"></body>
<font color="blue"></font>
2、没有提升 html属性的 可重用性和可维护性
可重用性:重复的操作,不用重复的写
可以通过css解决以上两个问题
2、什么是CSS
CSS(Cascading Style Sheets),层叠样式表,级联样式表,简称:样式表。专门用于定义页面元素的样式的。
以统一的方式定义页面元素的样式
CSS实现了内容与表现相分离
提升了代码的可重用性 和 可维护性+
3、CSS 与 HTML之间的关系
HTML:专门用于构建网页结构
CSS:专门构建HTML网页的样式
HTML属性效果 与 CSS样式效果相冲突的话,优先使用CSS定义页面元素的效果
2、CSS语法
1、使用CSS样式表
1、内联方式(注:也没有提升 属性的 可重用性和可维护性,但是采用的是CSS的方式)
又称为:行内样式
将样式定义在某个html元素中
语法:
<ANY style="样式声明(若干条);样式声明;"></ANY>
样式声明:
由 属性名称 和 属性值 来组成,属性名称和属性值之间用":"来关联
ex:
属性名称 属性值
color:定义他所在的行的颜色属性; red,blue,yellow
background-color:(背景颜色) 合法颜色值即可...(同上)
font-size 以px,pt为单位的数值
控制以下 文本颜色为 红色,背景颜色为 黄色 文字大小为24px
<p>静夜思</p>
2、内部样式表
将样式定义在网页的一块独立位置处
在<head></head>中增加一对 <style></style>元素,在<style>元素中 定义元素的样式,具体语法如下:
ex:
<head>
<title></title>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
<head>
样式规则,由两部分组成
1、选择器
选择(规范)页面中哪些元素能够使用声明好的样式
比如:元素选择器,由元素名称来充当选择器,控制某标记对应所有页面元素的样式
2、若干样式声明
样式规则 语法结构:
选择器{
样式声明1;
样式声明2;
...
样式声明n;
}
ex:
p{
color:red;
background-color:yellow;
font-size:24px;
}
3、外部样式表(样式规则同内部样式语法规则一样)
将样式定义在外部的"样式表文件(*.css)"中
1、创建 .css文件,编写样式规则
2、在要使用 样式表的 html文件中进行引入
<head>
<link rel="stylesheet" href="样式表文件 url">
</head>
2、CSS样式表特征
1、继承性
大部分样式属性是可以被继承
2、层叠性
可以为一个元素定义多个样式规则
如果属性不冲突时,多个样式规则可以层叠为一个(即都可以应用到当前元素上)
3、优先级
在层叠性基础上,如果 样式定义 冲突的话,那就会按照不同使用方式的优先级,来选择性应用样式
低:浏览器默认设置
中:外部样式表 和 内部样式表
就近原则
(后定义优先 即 谁后定义谁优先)
高:内联方式
(在非作弊的情况下,内联方式级别最高)
4、!important 规则(即上面所说的“作弊方式”,不建议在页面中使用的过多)
显示调整样式属性的优先级
语法:
属性名:值 !important;、
谨慎使用
3、选择器(重点)
1、作用
选择(规范)页面中哪些元素能够使用声明好的样式为了匹配页面的元素
2、详解
1、通用选择器
作用:匹配页面中所有的元素
语法:*{}
缺点:效率较低,尽可能少用,可以通过 使用body 的继承性 来替代 *
2、元素选择器
作用:匹配某一标记所对应的页面中所有的元素
语法:元素/标签{}
ex:
div{/*匹配页面中所有div*/}
span{/*匹配页面中所有span*/}
li{/*匹配页面中所有li*/}
3、类选择器
作用:事先定义好样式,可以任由元素通过class属性进行引用
语法:
定义:.类名{}
引用:<ANY class="类名"></ANY>
多类选择器的引用方式:
让一个元素引用多个类选择器,中间用 空格 隔开即可
分类选择器的声明方式:
将元素选择器和类选择器结合到一起进行声明,实现对某种元素中的不同样式细分控制
ex:想要控制 class为important的div元素,
文字大小为 48px
语法:元素选择器.类选择器{}
4、id选择器(专属定制)
作用:匹配 指定id值的元素的 样式
ex:
<div id="nav"></div>
语法:#ID值{}
【2、3、4统称为基础选择器】
5、群组选择器
群组选择器的声明以一个“,”隔开的选择器列表
语法:
选择器1,选择器2,...{}
ex:
#title,p.redColor,.important,span{
color:red;
}
6、后代选择器
后代:
多于 一级 层级关系的元素,只能叫后代
只具备 一级 层级关系的元素 也可以叫后代
语法:
选择器1 选择器2{}
语义:匹配 在选择器1 中的 所有后代元素选择器2
ex:
#content span()
7、子代选择器
子代:
只具备 一级 层级关系的元素 称之为子代
语法:
选择器1>选择器2{}
语义:匹配 在选择器1 中的 子级元素 选择器2
8、伪类选择器
伪类:专门匹配元素不同状态的选择器
分类:
1、链接伪类
2、动态伪类
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
语法:
以“:”作为开始的选择器
1、链接伪类
1、:link
适用于未被访问的超链接
2、:visited
适用于访问过的超链接
2、动态伪类
1、:hover
适用于鼠标悬停在html元素时
2、:active
使用于html元素被激活时
3、:focus
适用于html元素获取焦点时
选择器优先级
选择器类型 权值
元素选择器 0,0,0,1
类选择器 0,0,1,0
伪类选择器 0,0,1,0
ID选择器 0,1,0,0
内联样式 1,0,0,0
(思考:当使用元素选择器时,就可以实现大部分功能了,为何还要使用其他选择器?
答:
元素选择器用于同名元素的批量引用;
类选择器可以用于某个元素进行样式灵活选用;即某个单独的元素是引用;
多类选择器是某个元素引用多个样式;
分类选择器;将元素选择器和类选择器结合起来,针对于某种元素不同样式的细分详细控制)
3、尺寸与边框
1、css单位
1、尺寸单位
1、px:像素
2、pt:磅(1pt=1/72 in)
3、in:英寸,1 in=2.54 cm
4、% :百分比,占据 当前元素 或 父元素对属性的 占比
5、em:倍数,多数用于 文字大小的描述(响应式布局时用)
6、mm:毫米
7、cm:厘米
注意:css中尺寸单位是不能省略的。
2、颜色单位(取值)
1、rgb(r,g,b)
(r:red,范围0-255)
(g:green,范围0-255)
(b:blue,范围0-255)
ex:
background-color:rgb(0,0,0);黑色
background-color:rgb(255,0,0);红色
background-color:rgb(255,255,255)白色
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha:透明度0~1之间的数字
0:完全透明
1:完全不透明
0.5:半透明
4、#rrggbb
通过6位16进制数字表示一个颜色
每位数字范围:0-9 A-F
#00ff00:绿色
#ff0000:红色
#1a2b3c:?
5、#rgb
#rrggbb 每两位数字相同时,可以使用#rgb简化
#00ff00 -> #0f0
#aabbcc -> #abc
#accdda -> x
6、颜色的英文表示
red,green,blur,.orange,pink
2、尺寸属性
1、作用
用于设置元素的宽度和高度
单位一般为 px 或 %(父元素对应属性的占比)
2、语法
1、宽度
width
min-width:最小宽度
max-width: 最大宽度
2、高度
height
min-height:最小高度
max-height:最大高度
注意:
页面中所有元素的高度,在不指定的情况全部自适应(以内容为主)。
页面中所有块级元素的宽度,默认占据父元素的100%
页面中
3、页面中允许修改 尺寸 属性的元素
1、所有块级元素都允许修改
2、大部分的行内块元素
所有的表单元素都是行内块元素
除radio、checkbox之外,其他元素允许修改尺寸
3、本事html元素就具备width 和 height的
img,table 可以修改尺寸
4、行内元素(除具备width和height之外)是不能修改尺寸
span,a,b,i,s,b ... 不能修改尺寸
4、溢出
1、什么是溢出
使用尺寸属性限制元素大小时,如果内容所需要的空间大于元素本身空间,则会导致内容溢出
2、溢出处理属性
属性:overflow
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
取值:
1、visible
默认值,溢出可见
2、hidden
隐藏
3、scroll
滚动,让元素出现滚动条,溢出时,滚动条可用
4、auto
自动,溢出时显示滚动条并可用,非溢出时,不显示滚动条
3、边框属性
1、边框
1、简写方式
border:width style color;
作用:设置元素上下左右四个边框的宽度,样式以及颜色
width:边框的宽度(尺寸)
style:边框的样式
取值:
1、solid:直线
2、dotted:虚线(点状)
3、dashed:虚线(线状)
color:边框的颜色,可以取值为 transparent(透明)
ex:
div{
border:1px solid red;
}
2、单边定义
border-方向:width style color;
方向可以被以下关键字所取代
top:上
right:右
bottom:下
left:左
ex:
border-bottom:2px dashed #00ff00;
3、单属性定义
border-属性:值;
属性可以被以下关键字取代
width:宽度
style:样式
color:颜色
ex:
border-width:5px;
border-style:solid;
border-color:#f00f00;
4、单边单属性定义
border-方向-属性:值;
方向:top/right/bottom/left
属性:width/style/color
ex:
border-top-color:yellow;
border-right-style:dotted;