Web02-颜色赋值/背景图片/盒子模型/CSS的三大特性

目录

颜色赋值

背景图片

文本和字体相关的样式

盒子模型

盒子模型之content(内容)

盒子模型之margin(外边距)

盒子模型之border(边框)

盒子模型之padding(内边距)

CSS的三大特性

---

颜色赋值

• 三原色: 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>标签名>继承