CSS是一种样式表语言,用来控制HTML和XML的外观美化和布局。HTML搭建起了前端的地基,但是没有CSS参与布局仍然是一盘散沙,CSS在页面布局、提升用户体验方面一直发挥着极其重要的作用。
HTML中最重要的无异于是标签,那么CSS核心就是选择器和盒子模型。学习CSS需要记忆大量其中掺杂的属性和属性值,而且容易令人混淆、概念大差不差的知识也有很多。CSS相对于HTML来说内容更多也更抽象一些,学习的时候也是应该多注重实战,多用浏览器辅助工具去学习一下其他网站的布局和页面美化
以下是我的个人笔记作为分享
CSS
定义:层叠样式表,是一种样式表语言,用来描述HTML文档的呈现(美化内容)
书写位置:title标签下方添加style双标签,style标签里面书写CSS代码
<title> </title> <style> /*CSS代码*/ /*选择器{CSS 属性}*/ p{ color:red; /* p是标签名*/ font-size: 30px; } </style>
键值对:属性名和属性值成对出现
引入方式
内部样式表:学习使用
CSS代码写在标签里面
外部样式表:开发使用
CSS代码写在单独的CSS文件中(.css)
在HTML中使用link标签引入
<link rel="stylesheet" href="./my.css">
行内样式:配合JS使用
CSS写在标签的style属性值里
<div style="color:red;font-size:20px;">标签</div>
选择器
作用:查找标签,设置样式
优先级:id>class>通配符
同级别长度下,css代码按照顺序执行,后边的效果会把前面的覆盖
基础选择器
标签选择器
定义:使用标签名作为选择器--->选中同名标签设置相同的形式
<title> </title> <style> p{ color:red; /*应用于所有p标签,无法差异化同名标签的样式*/ font-size: 30px; } </style>
类选择器
作用:查找标签,差异化设置标签的显示效果
步骤:
1、定义类选择器 --> .类名
2、使用类选择器 --> 标签添加class="类名"
.red{ color:red; } .size{ font-size:50px; } <div class="red size">...</div> 多个属性空格隔开
和标签选择器结合使用 div.xx{ color:red; } <div style="color: skyblue;background-color: brown;"class="xx">hello</div> <span style="color: skyblue;background-color: brown;"class="xx">hello</span>
id选择器
作用:查找标签,差异化设置标签的显示效果
一般配合JS使用,很少用来设置CSS样式
步骤:
1、定义id选择器 -->#id名
2、使用id选择器 -->标签添加id="id名"
同一个id选择器在一个页面只能使用一个
div[id]
:有id属性的div元素(class属性仍然使用)
div[id=xx]
:有id属性,且id属性值为xx的div元素
div[id*=xx]
:有id属性,且id属性值包含xx的div元素
div[id^=xx]
:有id属性,且id属性值以xx开头的div元素
div[id$=xx]
:有id属性,且id属性值以xx结尾的div元素
通配符选择器
作用:查找页面所有标签,设置相同样式
*,不需要调用,浏览器会自动查找页面所有标签,设置相同的样式
复合选择器
定义:由两个或多个基础选择器,通过不同的方式组合而成
作用:更准确、更高效的选择目标元素
后代选择器
定义:选中某元素的后代元素
选择器写法:父选择器 子选择器{CSS属性},父子选择器之间用空格分开
子代选择器
选中某元素的子代元素(最近的子级)
选择器写法:父选择器>子选择器{CSS属性},父子选择器之间用>分开
兄弟选择器
选中同级选择器,*选中所有同级
选择器写法:选择器~子选择器{CSS属性},选择器之间用~分开
并集选择器
选中多组标签设置相同的样式
写法:选择器1,选择器2,...{CSS属性}
交集选择器(了解)
选中同时满足多个条件的元素
选择器1选择器2{CSS属性} 选择器之间连写
标签选择器放在最前面
伪类选择器
伪类表示元素状态,选中元素的某个状态设置样式
鼠标悬停状态:选择器:hover{CSS属性}
任何标签都可以设置鼠标悬停状态
伪类-超链接(UI状态伪类选择器)
超链接一共由四个状态
选择器 | 作用 |
---|---|
:link | 访问前 |
:visited | 访问后 |
:hover | 鼠标悬停 |
:active | 点击时激活 |
如果给超链接设置状态,需要按LVHA顺序书写
工作中设置默认样式和悬停状态即可
结构伪类选择器
作用:根据元素的结构关系查找元素
nth-of-type
和 nth-child
同理
选择器 | 说明 |
---|---|
E:first-child | 查找第一个E元素 |
E:last-child | 查找最后一个E元素 |
E:nth-child(N) | 查找第N个E元素 |
li:first-child{ background-color:green /*只有第一个标签生效*/ }
:nth-child(公式)
作用:根据元素的结构关系查找多个元素
功能 | 公式(n从0开始) |
---|---|
偶数标签 | 2n、odd |
奇数标签 | 2n-1,2n+1,even |
5的倍数的标签 | 5n |
找到第五个以后的标签 | n+5 |
找到第五个以前的标签 | -n+5 |
:not()
作用:排除不想选择的元素
优先级
选择器写的越长(越准确),优先级越高
伪元素选择器
作用:创建虚拟元素(伪元素),用来摆放装饰性的内容
选择器 | 说明 |
---|---|
E::before | 在E元素里面最前面添加一个伪元素 |
E:after | 在E元素里面最后面添加一个伪元素 |
E::first-letter | 作用于选择器中第一个字母,只用于块级元素 |
E::first-line | 作用于选择器中第一行,只用于块级元素 |
必须设置content:" "属性,用来设置伪元素的内容,如果没有内容, 引号留空
伪元素默认是行内显示模式
权重和标签选择器相同
文字控制属性
字体大小
属性名:font-size
属性值:最常用单位px(像素)
谷歌浏览器默认16px
字体粗细
属性名:font-weight
属性值:数字
正常:400 加粗:700
关键字 正常:normal 加粗:bold
字体倾斜
属性名:font-style
属性值: 正常:normal 倾斜:italic
行高
作用:设置多行文本的间距
属性名:line-height
属性值
1、数字+px
2、数字(当前标签font-size属性值的倍数)
行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)
垂直居中
技巧:行高属性值等于盒子高度属性值(单行文字垂直居中)
字体族
属性名:font-family
属性值:字体名
font-family:楷体
font符合属性
使用场景:设置网页文字公共样式
font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
注意:字号和字体值必须书写,否则font属性不生效
文本缩进
属性名:text-indent
属性值:
数字+px
数字+em(推荐1em=当前标签的字号大小)
文本对齐
作用:控制内容水平对齐方式
属性名:text-align
属性值:
left(左对齐(默认))
center(居中对齐)
right(右对齐)
居中的是文字内容,不是标签
图片居中
将属性赋给图片的父级标签
文本修饰线
属性名:text-decoration
属性值 | 效果 |
---|---|
none | 无 |
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
文字颜色
属性名:color
属性值
表示方式 | 属性值 | ||
---|---|---|---|
关键字 | 英文单词 | ||
rgb表示法 | rgb(r,g,b) | r,g,b表示红绿蓝三原色,取值0-255 | 了解 |
rgba表示法 | rgba(r,g,b,a) | a表示透明度,取值:0-1 | 实现透明色 |
十六进制表示法 | #RRGGBB | 简写#RGB |
三大特性
化简代码/定位问题,并解决问题
继承性
子级默认继承父级的文字控制属性
<style> <!--在style标签里面将body标签里面的标签作为子类标签书写--> body{ font-size:30px } </style>
如果标签有自己的样式则生效自己的样式,不继承
层叠性
特点:
相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加:不同的CSS属性都生效
优先级
也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则
规则:选择器优先级高的样式生效
公式:通配符选择器<标签选择器<类选择器<id选择器<行内样式<!import
选中标签的范围越大,优先级越低
*{ color:red !important /*提高权限到最高*/ }
叠加计算规则
叠加计算:如果是复合选择器,则需要权重叠加计算
公式:(每一级之间不存在进位)
(行内样式,id选择器个数,类选择器个数,标签选择器个数)
1、从左到右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较
2、!important权重最高
3、继承权重最低
Emmet写法
代码的简写方式(VScode生效)
HTML
说明 | 标签结构 | Emmet |
---|---|---|
类选择器 | <div class="box"></div> | 标签名.类名 |
id选择器 | <div id="box"></div> | 标签名#id名 |
同级标签 | <div></div><p></p> | div+p |
父子级标签 | <div><p></p></div> | div>p |
多个相同标签 | 123 | span*3 |
有内容的标签 | <div>内容</div> | div{内容} |
CSS
CSS首字母
背景属性
背景颜色
background-color
背景图
属性名:background-image
(bgi)
属性值:url(背景图URL)
背景图默认是平铺(复制)效果
div{ width:400px; height:400px; background-image:url() }
背景图平铺方式
属性名:background-repeat
(bgr)
属性值
属性值 | 效果 |
---|---|
no-repeat | 不平铺 |
repeat | 平铺(默认效果) |
repeat-x | 水平方向平铺 |
repeat-y | 垂直方向平铺 |
不平铺:盒子的左上角显示一张背景图
背景图位置
属性名:background-position
(bgp)
属性值:水平、垂直方向位置
关键字
关键字 | 位置 |
---|---|
left | 左 |
right | 右 |
center | 居中 |
top | 顶部 |
bottom | 底部 |
坐标
数字+px,正负都可以(水平:正右负左 垂直:正下负上)
background-position:center bottom background-position:50px -100px background-position:50px center
默认left top
关键字取值方式写法,可以颠倒取值顺序
可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中
背景图缩放
属性名:background-size
)(bgz)
常用属性值:
关键字:
cover
:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白
百分比:根据盒子尺寸计算图片大小
100% 图片的宽度跟盒子宽度一样,图片高度按照图片比例等比缩放
数字+单位(px)
背景图固定
属性名:background-attachment
(bga)
属性值:fixed
背景符合属性
属性名:background
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开,不区分顺序)
显示模式
标签(元素)的显示模式
作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容
块级元素(div)
1、独占一行
2、宽度默认是父级的100%
3、添加宽高属性生效
行内元素(span)
1、一行共存多个
2、尺寸由内容撑开
3、加宽高不生效
行内块标签(img)
1、一行共存多个
2、默认尺寸由内容撑开
3、加宽高生效
转换显示模式
属性名:display
属性值 | 效果 |
---|---|
block | 块级 |
inline-block | 行内块 |
inline | 行内 |
盒子模型
1、块级盒子:display:block
(标签,元素) 特点:独占一行,对宽度高度支持(div ul li h1~h6)
2、内联级盒子:display:inline
特点:不独占一行,对宽度高度不支持(span a)
3、内联块级盒子:display:inline-block
特点:不独占一行,对宽度高度支持(img input)
4、弹性盒子:display:flex
特点:不论父级元素能不能放下子级元素,子元素始终横向布局
作用:布局网页,摆放盒子和内容
组成部分:
1、内容区域:width&height
2、内边距:padding(出现在内容与盒子的边缘之间)
3、边框线:border
4、外边距:margin(出现在盒子外面)
边框线
属性名:border
(bd)
属性值:边框线粗细、线条样式、颜色(三个方面,四个方向)
属性值 | 线条样式 |
---|---|
solid | 实线 |
dashed | 虚线 |
dotted | 点线 |
设置单方向边框线
属性名:border-方位名词
(bd+方位名词首字母)
内边距
属性名:padding/padding-方位名词
多值写法
取值个数 | 实例 | 含义 |
---|---|---|
1 | padding: 10px | |
2 | padding: 10px 80px | 上下、左右 |
3 | padding: 10px 40px 80px | 上、左右、下 |
4 | padding: 10px 20px 40px 80 px | 上右下左(顺时针) |
尺寸计算
默认情况:盒子尺寸=内容尺寸+边框线尺寸+内边距尺寸(+padding border属性盒子变大)
解决
1、手动做减法,减掉border/padding的尺寸
2、内减模式:box-sizing:border
外边距
属性名:margin
外边距不会撑大盒子
版心居中
magin: 0 auto
(水平方向居中)
要求:盒子要有宽度
外边距问题
场景:垂直排列的兄弟元素,上下magin会合并
现象:取两个magin中的较大值生效
塌陷问题
场景:父子级的标签,子级添加上外边距会产生塌陷问题
现象:导致父级一起向下移动
解决:
1、取消子级margin,父级设置padding
2、父级设置overflow:hidden
3、父级设置border-top
行内元素(span)-内外边距问题
场景:行内元素添加margin和padding,无法改变元素垂直问题
解决方法:给行内元素添加line-height可以改变垂直位置
圆角
作用:设置元素的外边框为圆角
属性名:border-radius
(写四个角的值从左上角顺时针赋值,没有取值的角与对角取值相同)
属性值:数字+px/百分比(属性值是圆角半径)
常见应用-正圆形状
给正方形盒子设置圆角属性值为宽高的一半/50%
常见应用-胶囊形状
给长方形盒子设置圆角属性为盒子高度的一半
元素溢出(设置滚动条)
作用:控制溢出元素的内容的显示方式
属性名:overflow
属性值 | 效果 |
---|---|
hidden | 溢出隐藏 |
scroll | 溢出滚动(无论是否溢出,都显示滚动条位置) |
auto | 溢出滚动(溢出才显示滚动条位置) |
阴影
属性名:box-shadow
属性值:x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
xy轴偏移量必须书写
默认是外阴影,内阴影需要添加inset
清除默认样式
*{ margin:0; padding:0; box-sizing:border-box; } /*去掉默认列表的项目符号*/ li{ list-style:none; }
浮动
标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则
作用:让块元素水平排列)(本质作用是实现图文混排效果)
属性名:float
属性值:left
:左对齐
right
:右对齐
特点:1、浮动后的盒子顶对齐
2、浮动后的盒子具备行内块特点
3、浮动后的盒子脱标,不占用标准流的位置
清除浮动
场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)
解决方法:清除浮动(清除浮动带来的影响)
方法一:额外标签法
在父元素内容的最后添加一个块级元素,设置CSS属性 clear:both
(类名习惯用clearfix)
方法二:单伪元素法
.clearfix::after{ content:""; display:block; clear:both; }
方法三:双伪元素法(推荐)
.clearfix::before, .clearfix::after{ content:""; display:table; } .clearfix::after{ clear:both; }
方法四:overflow
父元素添加CSS属性overflow:hidden
Flex布局
Flex布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力
Flex模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活
设置方式:给父元素设置 display:flex
,子元素可以自动挤压或拉伸
组成部分:
弹性容器:沿着主轴方向排列
弹性盒子
主轴:默认在水平方向
侧轴/交叉轴:默认在垂直方向
主轴对齐方式
属性名:justify-content
属性值 | 效果 |
---|---|
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
center | 弹性盒子沿主轴居中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
space-bewteen
视觉效果:弹性盒子之间的间距相等
space-around
视觉效果:弹性盒子之间的间距是两端间距的二倍da
space-evenly
视觉效果:各个间距都相等
侧轴对齐方式
属性名:
align-items
:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
align-self
:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
属性值 | 效果 |
---|---|
stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸) |
center | 弹性盒子沿侧轴居中排列 |
flex-start | 弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
baseline | 首行底部对齐 |
修改主轴方向
属性名:flex-direction
属性值:column
(垂直方向,从上到下)
column-reverse
(垂直方向,从下到上)
row
:横向从左到右排列
row-reverse
:横向从右向左排列
弹性伸缩比
默认情况下,主轴方向尺寸是靠内容撑开的,侧轴默认拉伸
作用:控制弹性盒子的主轴方向的尺寸
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数
flex-grow
:拉伸因子
flex-shrink
:压缩因子
flex-basis
:基准因子
属性值为整数,为拉伸或压缩后占盒子的份数
弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所欲弹性盒子都在一行显示
属性名:flex-wrap
属性值
wrap
:换行
nowrap
:不换行(默认)
行对齐方式
多行元素的分布方式
属性名:align-content
属性值 | 效果 |
---|---|
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
center | 弹性盒子沿主轴居中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
顺序
属性名:order
属性值为一个整数,值越小出现的顺序越靠前