专栏链接 link
下面进行专栏介绍
本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。
开始喽
CSS特性
优简代码/定位问题,并解决问题
继承性
层叠性
优先级
继承性
子级默认继承父级的文字控制属性
注意
标签自己有样式,则生效自己的样式,不继承
层叠性
特点
相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加:不同的CSS属性都生效
优先级
也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
规则
选择器优先级高的样式生效
公式
通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意
选中标签的范围越大,优先级越低
叠加计算
如果是符合选择器,则需要权重叠加计算
公式(每以及之间不存在进位)
行内样式 ,id选择器个数,类选择器个数,标签选择器个数
规则
1、从左到右依次比较个数,同一级个数多的优先级高,如果个数相同,则向 后比较!important权重最高 2、继承权重最低
Emmet写法分析
代码的简写方式,输入缩写 VScode会自动生成对应的代码
HTML
CSS:大多数简写方式为属性单词的首字母
背景图
网页中,使用背景图实现装饰性的图片效果。
属性名
background-image(bgi)
属性值
url(背景图URL)
注意
背景图默认是平铺的效果
背景图平铺方式
属性名
background-repeat(bgr)
属性值
属性 | 含义 |
no-repeat | 不平铺 |
repeat | 平铺(默认) |
repeat-x | 水平方向平铺 |
repeat-y | 垂直方向平铺 |
背景图位置属性
属性名
background-position(bgp)
属性值
水平方向位置 处置方向位置
关键字
关键字 | 含义 |
left | 左侧 |
right | 右侧 |
center | 居中 |
top | 顶部 |
button | 底部 |
坐标(数字+pz,正负都可以)
注意
关键字取值方式写法,可以颠倒顺序
可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方 向为居中
背景图缩放
作用
设置背景图大小
属性名
backgro-size(bgz)
常用属性值
关键字 | 含义 |
cover | 等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见 |
contain | 等比例缩放背景图片以完全装入背景区,可能背景区部分空白 |
百分比 | 根据盒子尺寸计算图片大小 |
数字+单位(px)
背景图固定
作用
背景不会随着元素的内容滚动
属性名
background-attachment(bga)
属性值
fixed
背景复合属性
属性名
background(bg)
属性值
背景色,背景图,背景图平铺方式,背景图位置/背景图缩放,背景图固定
显示模式
标签(元素)的显示方式
作用
布局网页的时候,根据标签的显示模式选择合适的标签摆放内容(空 格隔开,不区分顺序)
块级元素
位置
独占一行
宽度默认是父级的1000%
添加宽高属性生效
行内元素
位置
一行共存多个
尺寸
尺寸由内容撑开
加宽高不生效
行内块元素
位置
一行共存多个
尺寸
设置宽高属性生效
默认尺寸由内容撑开
转换显示模式
属性名
display
关键字 | 含义 |
属性值 | 效果 |
block | 块级 |
inline-block | 行内块 |
inline | 行内 |