CSS
层叠样式表
Casecading Style Sheet
作用
:
用于美化页面
如何使用
?
三种引入方式
内联样式
:
在标签的
style
属性中添加样式代码
,
弊端:
不能复用
内部样式
:
在
head
标签里面添加
style
标签
,
通过选择器选择到元素添加样式,
好处
:
可以当前页面复用弊端:
只能当前页面复用
外部样式
:
在单独的
css
样式文件中写样式代码
,
在
html
页面中通过
link
标签引入
,
可以多页面复用
而
且可以将
html
代码和
css
代码分离
三种引入方式的优先级
:
内联优先级最高
,
内部和外部优先级一样
,
后执行覆盖先执行的
CSS
选择器
1.
标签名选择器
格式
:
标签名
{
样式代码
}
选取页面中所有同名标签
2. id
选择器
格式
: #id{
样式代码
}
选取页面中某一个元素时使用
,
需要给元素添加
id 属性
3.
类选择器
格式
: .class{
样式代码
}
当需要选择多个不相关的元素时可以给元素添加相同的class
属性
然后通过类选择器选择.
4.
分组选择器
格式
: div,#abc,.xyz{
样式代码
}
可以将多个选择器合并成一个选择器
5.
任意元素选择器
格式
: *{
样式代码
}
选择器续
1.
子孙后代选择器
格式
: div div span{
样式代码
}
匹配
div
里面的
div
里面的所有
span(
包括后代
span)
2.
子元素选择器
格式
: div>div>span{
样式代码
}
匹配
div
里面的
div
里面的子元素
span
3.
属性选择器
格式
:
标签名
[
属性名
='
值
']{
样式代码
}
匹配指定属性名和值的元素
4.
伪类选择器
选择的是元素的状态
元素有哪些状态
:
未访问状态
link
访问过状态
visited
悬停状态
hover
点击状态
active
选择器回顾
1.
标签名
div{}
2. id
选择器
#id{}
3.
类选择器
.class{}
4.
分组选择器
div,#id,.class{}
5.
任意元素选择器
*{}
6.
属性选择器
标签名
[
属性名
='
值
']{}
7.
子孙后代选择器
div span{}
8.
子元素选择器
div>span{}
9.
伪类选择器
a:link/visited/hover/active
颜色赋值的几种方式
三原色
红绿蓝
RGB Red Green Blue
每个颜色取值范围0-255
颜色单词赋值
red/green/blue/yellow......
6
位
16
进制赋值
# ffff 00 00
3
位
16
进制赋值
#f00
3
位
10
进制赋值
rgb(255,0,0)
4
位
10
进制赋值
rgba(255,0,0,0-1) a=alpha
透明度值越小越透明
背景图片
background-image:url("
路径
")
设置背景图片
background-size:200px 400px
设置背景图片宽高
background-repeat:no-repeat
禁止重复
background-position:
横向百分比 纵向百分比
;
设置背景图片位置
字体相关样式
文本修饰
text-decoration:
overline
上划线
underline
下划线
line-through
删除线
none
去掉下划线
水平对齐方式
text-align:left/right/center
字体颜色
color:red;
行高
line-height:20px;
多行文本控制间距
单行文本可以实现垂直居中
阴影
text-shadow:
颜色
x
偏移值
y
偏移值 浓度
(
值越大越模糊)
字体大小
font-size:20px
默认
16
加粗
font-weight:bold
加粗
/normal
去掉加粗
斜体
font-style: italic;
字体设置
font-family: xxx,xxx,xxx; font:20px
xxx,xxx,xxxx;
元素的显示方式
display
display:block;
块级元素
:
独占一行 可以修改元素宽高,
包括
:div,h1-h6,p
display:inline;
行内元素
:
共占一行 不可以修改宽高
, 包括:span,b,i,small,
超链接
a
display:inline-block;
行内块元素
:
共占一行
,
可以修改宽高,
包括
: img,input
等
盒子模型
盒子模型
=
宽高
+
外边距
+
边框
+
内边距
作用
:
用来控制元素的显示效果
宽高
:
控制元素的显示尺寸
外边距
:
控制元素的显示位置
边框
:
控制边框效果
内边距
:
控制元素边缘距内容的距离
盒子模型之宽高
通过
width/height
控制元素的宽高
,
赋值方式
:
1.
像素
2.
上级元素的百分比行内元素不能修改宽高
盒子模型之外边距
什么是外边距
:
元素距上级元素或相邻兄弟元素的距
离称为外边距
赋值方式
:
margin-left/right/top/bottom:10px;
单独某一个 方向赋值
margin:10px;
四个方向赋值
margin:10px 20px;
上下
10px
左右
20px
maring: 0 auto;
居中
margin: 10px 20px 30px 40px;
上右下左顺时针
元素上下相邻时
,
彼此添加外边距取最大值
元素左右相邻时
,
彼此添加外边距 两个元素的外边距 相加
盒子模型之外边距
什么是外边距
:
元素距上级元素或相邻兄弟元素的距
离称为外边距
赋值方式
:
margin-left/right/top/bottom:10px;
单独某一个方向赋值
margin:10px;
四个方向赋值
margin:10px 20px;
上下
10px
左右
20px
maring: 0 auto;
居中
margin: 10px 20px 30px 40px;
上右下左顺时针
元素上下相邻时
,
彼此添加外边距取最大值
元素左右相邻时
,
彼此添加外边距 两个元素的外边距 相加.
粘连问题
:
当元素的上边缘和上级元素的上边缘重叠
时
,
给元素添加上外边距会出现粘连问题
,
给上级元素
添加
overflflow:hidden
解决
行内元素上下外边距无效
盒子模型之边框
赋值方式
:
四个方向赋值
:
border:
粗细
样式
颜色
单独给某一个方向添加边框
:
border-left/right/top/bottom:
粗细
样式
颜色
圆角
:
border-radius:10px;
值越大越圆
,
超过宽高一半时为圆形
盒子模型之内边距
什么是内边距
?
元素边缘距内容的距离为内边距
作用
:
用于控制元素内容的位置
赋值方式
:
和外边距类似
padding-left/right/top/bottom:10px;
单独某一个方向赋值
padding:10px;
四个方向赋值
padding:10px 20px;
上下
10
左右
20
padding:10px 20px 30px 40px;
上右下左顺时针
给元素添加内边距会影响元素所占宽高
CSS
的三大特性
1.
继承性
:
元素可以继承上级元素文本和字体相关的样
式
,
部分标签自带效果不受继承影响
,
比如
:
超链接字体
颜色
,h1-h6
字体大小等
2.
层叠性
:
多个选择器有可能选择到同一个元素
,
作用的
样式不同的话 全部层叠有效
,
如果作用的样式相同 则
由优先级决定哪个生效
3.
优先级
:
作用范围越小 优先级越高
id>class>
标签名>继承
元素的定位方式
包括
:
静态定位
,
相对定位
,
绝对定位
,
固定定位
,
浮动定位
定位方式之静态定位
静态定位又称为文档流定位
,
是元素默认的定位方式
格式
: position:static;
特点
:
元素以左上为基准
,
块级元素从上往下排列
,
行
内元素从左向右排列
如何控制元素的显示位置
?
通过外边距控制位置
定位方式之相对定位
格式
: position:relative;
特点
:
元素不脱离文档流
(
不管元素显示到什么位置
,
原来的位置会一直占着)
如何控制元素的位置
?
通过
left/right/top/bottom
相对于元素初始位置做偏移
定位方式之绝对定位
格式
: position:absolute;
特点
:
元素脱离文档流
(
不占原来的位置
)
如何控制元素位置
?
通过
left/right/top/bottom
相对于窗口或某一个上级
元素做位置偏移
,
如果想相对于某个上级元素需要在上级元素中添加相对定位
定位方式之固定定位
格式
: position:fifixed
特点
:
元素脱离文档流
如何移动元素
通过
left/right/top/bottom
相对于窗口 做位置偏移
定位方式之浮动定位
格式
: float:left/right;
特点
:
元素脱离文档流
,
从当前所在行 向左或向右浮
动
,
当撞到上级元素边缘或其它浮动元素时停止
.
一行装不下会自动换行
,
换行时有可能被卡主
当元素的所有子元素全部浮动时
,
此时自动识别的高度为0,
通过给元素添加
overflflow:hidden
解决
应用场景
:
当需要将纵向排列的元素改成横向排列时使用
溢出设置
overflflow
visible
超出部分显示
(
默认
)
hidden
超出部分不显示
scroll
超出部分滚动显示
行内元素的对齐方式
vertical-align
top:
上对齐
bottom:
下对齐
middle:
中间对齐
baseline:
基线对齐
(
默认
)
显示层级
z-index:1;
默认值为
0,
值越大 显示越靠前