颜色赋值
-
三原色: RGB Red Green Blue 红绿蓝 , 每个颜色的取值范围0-255
-
颜色赋值方式:
- 颜色单词赋值: red/yellow/pink…
- 6位16进制赋值: #ff0000
- 3位16进制赋值: #f00
- 3位10进制赋值: rgb(255,0,0)
- 4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度
背景图片
-
background-image:url(“路径”); 设置背景图片
-
background-size:100px 200px; 设置背景图片尺寸
-
background-repeat:no-repeat; 设置禁止重复
-
background-position: 横向 纵向; 设置背景图片位置
文本和字体相关的样式
-
text-align: left/right/center; 水平对其方式
-
text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰; 文本修饰
-
line-height:20px; 设置行高, 单行可以实现垂直居中, 多行控制行间距
-
text-shadow: 颜色 x偏移值 y偏移值 浓度; 设置阴影
-
font-weight: bold加粗/normal去掉加粗
-
font-size:20px; 设置字体大小
-
font-style:italic; 设置斜体
-
font-family:xxx,xxx,xxx; 设置字体
-
font:20px xxx,xxx,xxx; 设置字体大小+字体
-
block: 块级元素的默认值, 特点: 独占一行 可以修改元素宽高. 包括: h1-h6, p,div
-
inline: 行内元素的默认值,特点: 共占一行 不能修改元素宽高, 包括:span,b,i,s,u,a
-
inline-block: 行内块元素的默认值,特点:共占一行,可以修改元素宽高, 包括:input,img
-
行内元素如果需要修改宽高,可以将显示方式改成块级或行内块
盒子模型
-
盒子模型由四部分样式组成, 包括: content内容,margin外边距,border边框,padding内边距
-
通过盒子模型相关样式控制元素的显示效果
-
content内容:控制元素的显示尺寸
-
margin外边距:控制元素的显示位置
-
border边框: 控制元素的边框效果
-
padding内边距: 控制元素内容的位置
-
盒子模型之content(内容)
控制元素的显示尺寸
相关样式: width和height
- 赋值方式:
- 像素
- 上级元素的百分比
行内元素不能修改元素的宽高,如果有需求必须改,则需要先把显示方式改成块级或行内块元素
盒子模型之margin(外边距)
作用:控制元素的显示位置
-
赋值方式:
- margin-left/right/top/bottom:10px; 给某个方向添加外边距
- margin:10px; 四个方向添加10
- margin:10px 20px; 上下10 左右20
- margin:10px 20px 30px 40px; 上右下左顺时针赋值
-
行内元素上下外边距无效
上下相邻彼此添加外边距取最大值, 左右相邻两者相加
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决
盒子模型之border(边框)
- 赋值方式:
- border:粗细 样式 颜色;
- border-left/right/top/bottom:粗细 样式 颜色;
- border-radius:10px; 设置圆角 值越大越圆
盒子模型之padding(内边距)
作用: 控制元素内容的位置
- 赋值方式: 类似外边距
- padding-left/right/top/bottom:10px;
- padding:10px;
- padding:10px 20px;
- padding:10px 20px 30px 40px;
给元素添加内边距会影响元素的宽高
CSS的三大特性
-
继承性:指元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响, 比如超链接字体颜色
-
层叠性: 多个选择器可以选择到同一个元素, 给元素添加不同的样式则样式全部层叠生效,添加相同的样式时由优先级决定哪个生效
-
优先级: 指选择器的优先级, 作用范围越小优先级越高,
!important> id>class>标签名>继承