文章目录
什么是CSS
CSS(层叠样式表)用于设置和布置网页——例如,更改内容的字体、颜色、大小和间距,将其拆分为多个列,或添加动画和其他装饰功能。
CSS的引入方式
各类选择器
标签选择器
<span>我是span</span>
------------------------
span{
font-size: 10px;
}
类选择器
<span class="big">我是spanbig</span>
------------------------
.big{
font-size: 10px;
}
id选择器(同一个id选择器在一个页面只能用一次)
<span id="name">我是span</span>
------------------------
#name{
font-size: 10px;
}
通配符选择器(对页面所有标签设置样式)
<span>我是span</span>
<div>我是div</div>
------------------------
*{
font-size: 10px;
}/*对span和div标签都适用*/
复合选择器
/*后代选择器:选中某元素的后代元素
选择器写法:父选择器 子选择器{CSS属性},父子之间用空格隔开
*/
<style>
div span{
color:red;
}
</style>
<span>标签</span>
<div>
<span>这是div的儿子</span>/*只有这个span变成了红色*/
</div>
/*并集选择器:选中多组标签设置相同的样式
选择器写法:选择器1,选择器2.....{CSS属性},选择器之间用,隔开
*/
<style>
div,
p,
span{
color:red;
}
</style>
<span>标签</span>
<div>div标签</div>
<p>p标签</p>
/*三个标签里的文字都变成红色*/
/*交集选择器:选中同时满足多个条件的元素
写法:选择器1选择器2{CSS属性},选择器之间连写
*/
<div class="box">div标签,使用了类选择器</div>
<p>p标签</p>
<p class="box">p标签,使用了类选择器</p>
/*如果交集选择器中有标签选择器,标签选择器必须写在最前面*/
p.box{
color:red;
}
伪类选择器-超链接
超链接一共有四个状态
选择器 | 作用 |
---|---|
:link | 访问前 |
:visited | 访问后 |
:hover | 鼠标悬停 |
:active | 点击时(激活) |
如果要给超链接设置以上四个状态,需要按LVHA的顺序书写
例:
<a href="#" class="box">我要报名</a>
a:hover{ /*设置悬停时样式*/
color:#608dd9 ;
}
.box:visited{ /*设置访问后样式*/
color:#608dd9 ;
}
文字控制属性
例如font-size:
<span class="big">我是spanbig</span>
<span>我是span</span>
.big{
font-size: 20px;
}
span{
font-size: 10px;
}
CSS特性
继承性
子级默认继承父级的文字控制属性
优先级
<style>
div {
color:red;
}
.box{
color:red;
}
</style>
<div class="box">div标签</div>
/*div内容为红色*/
规则:选择器优先级高的样式生效
公式:通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
背景属性
内容:
描述 | 属性 |
---|---|
背景色 | background-color |
背景图 | background-image |
背景图平铺方式 | background-repeat |
背景图位置 | background-position |
背景图缩放 | background-size |
背景图固定 | background-attachment |
背景复合属性 | background |
具体:
background-repeat
属性值 | 效果 |
---|---|
no-repeat | 不平铺 |
repeat | 平铺(默认效果) |
repeat-x | 水平方向平铺 |
repeat-y | 垂直方向平铺 |
background-position
属性值:水平方向位置 垂直方向位置
1.关键字
关键字 | 位置 |
---|---|
left | 左侧 |
right | 右侧 |
center | 居中 |
top | 顶部 |
bottom | 底部 |
2.坐标(数字+px,正负都可以)
水平:正数向右;负数向左
垂直:正数向下;负数向上
提示:
- 关键字取值方式写法,可以颠倒顺序
- 可以只写一个关键字另一个方向默认居中(水平,垂直)
- 数字只写一个值表示水平方向,垂直方向为居中
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./小米手机1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}
</style>
background-size
- 关键字:
cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白 - 百分比:根据盒子尺寸计算图片大小
- 数字+px(单位)
background-attachment
属性值:fixed
<style>
div{
background-image: url(./小米手机1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
盒子模型
盒子模型重要组成部分:
- 内容区域 - width & height
- 内边距 - padding(出现在内容与盒子边缘之间)
- 边框线 - border
- 外边距 - margin(出现在盒子外面)
边框线
属性值:边框线粗细 线条样式 颜色 (不区分顺序)
常用线条样式
属性值 | 线条样式 |
---|---|
solid | 实线 |
dashied | 虚线 |
dotted | 点线 |
设置单方向边框线
属性名:border-方位名词
<style>
div{
border-top: 1px solid red;
border-right: 3px dashed green;
border-bottom: 2px dotted blue;
border-left: 5px solid orange;
}
</style>
内边距
属性名:padding / padding - 方向名词
<style>
div{
/*四个方向 内边距相同*/
padding:30px;
/*单独设置一个方向内边距*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 30px;
}
</style>
padding 多值写法
取值个数 | 示例 | 含义 |
---|---|---|
一个值 | padding : 10px | 四个方向内边距均为10px |
四个值 | padding :10px 20px 40px 80px | 上:10px;右:20px;下:40px;左:80px |
三个值 | padding:10px 40px 80px | 上:10px;左右:40px;下:80px |
两个值 | padding:10px 80px | 上下:10px;左右:80px |
问题:给盒子加border/padding会撑大盒子
解决:
- 內减模式:box-sizing:border-box
清除默认样式
<style>
div{
*{
margin : 0;
padding : 0;
}
}
</style>
元素溢出(滚动条)
作用:控制溢出元素的内容的显示方式。
属性名:overflow
属性值 | 效果 |
---|---|
hidden | 溢出隐藏 |
scroll | 溢出滚动(无论是否溢出,都显示滚动条位置) |
auto | 溢出滚动(溢出才显示滚动条位置) |
<style>
div{
overflow: hidden;
overflow: scroll;
overflow: auto;
}
</style>
外边距问题 - 塌陷问题
父子级的标签,子级的添加上外边距(margin)会产生塌陷问题 ------ 导致父级一起向下移动
解决办法:
- 取消子级margin,父级设置padding
- 父级设置 overflow:hidden
- 父级设置border-top
行内元素 - 内外边距问题
问题:行内元素(如span标签)添加margin和padding,无法改变元素垂直位置
解决方法:给行内元素添加line-height可以改变垂直位置
<style>
span{
margin:50px;
padding: 20px;
/*行高可以改变垂直位置*/
line-height: 100px;
}
</style>
盒子模型-圆角
- 作用:设置元素的外边框为圆角
- 属性名:border-radius
- 属性值:数字+px / 百分比
提示:属性值是圆角半径
盒子模型-阴影
作用:给元素设置阴影效果
属性名:box-shadow
属性值:x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意
- x轴偏移量 和 y轴偏移量 必须书写
- 默认是外阴影,内阴影需要添加inset
<style>
div{
width: 400px;
height: 400px;
box-shadow: 2px 5px 10px 1px black;/*默认为外阴影*/
box-shadow: 2px 5px 10px 1px black inset;/*内阴影*/
}
</style>
:nth-chilld(公式)(补充)
作用:根据元素的结构关系查找多个元素。
功能 | 公式 |
---|---|
偶数标签 | 2n |
奇数标签 | 2n+1;2n-1 |
找到5的倍数的标签 | 5n |
找到第5个以后的标签 | n+5 |
找到5个以前的标签 | -n+5 |
<style>
/*第4个li和第8个li去掉右侧的margin*/
li:nth-child(4n){
margin-right: 0;
}
</style>
浮动
作用:让块元素水平排列。
属性名:float
属性值
- left:左对齐
- right:右对齐
清除浮动
(父级没有设置高,子级却设置了高)
- 父元素添加CSS属性overflow:hidden
- 在父元素内容最后添加一个块级元素,设置CSS属性clear:both
flex布局
描述 | 属性 |
---|---|
创建flex容器 | display: flex |
主轴对齐方式 | justify-content |
侧轴对齐方式 | align-items |
某个弹性盒子侧轴对齐方式 | align-self |
修改主轴方向 | flex-direction |
弹性伸缩化 | flex |
弹性盒子换行 | flex-wrap |
行对齐方式 | align-content |
具体:
主轴对齐方式
属性名:justify-content
属性值 | 效果 |
---|---|
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
center | 弹性盒子沿主轴居中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
侧轴对齐方式
- align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
- align-self 单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
属性值 | 效果 |
---|---|
stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸默认拉伸) |
center | 弹性盒子沿侧轴居中排列 |
flex-start | 弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有盒子都在一行显示
属性名:flex-wrap
属性值
- wrap:换行
- nowrap:不换行
行对齐方式
属性名:align-content
属性值 | 效果 |
---|---|
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
center | 弹性盒子沿主轴居中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
补充:透明度
属性名:opacity
<style>
.one{
opacity: 0.2;
}
.two{
opacity: 0.5;
}
</style>
<body>
<img class="one" src="./小米手机1.jpg">
<img class="two" src="./小米手机4.jpg">
</body>
line-gradient()
background: linear-gradient(red, yellow, blue);
background: linear-gradient(red 0%, yellow 50%, blue 100%);
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
background: linear-gradient(90deg, red 0%, yellow 50%, blue 100%);
to right
代表渐变偏移角度
red,yellow,blue
代表渐变色
linear-gradient(90deg, red 20%, yellow 50%, blue 100%)
代表从0-20% 都为 red 色
line-gradient
中相邻的两个颜色值代表,从色标A渐变到色标B。- 颜色后紧跟的数值,代表AB两个颜色之间的渐变区间。(差值为渐变区间的长度,若差值为0,则为突变)
- 颜色后的数值为0时,自动取前一位的数值。