颜色赋值
-
三原色 RGB Red Green Blue , 每个颜色的取值范围0-255
-
五种颜色赋值方式:
-
颜色单词赋值: red/yellow/blue/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("路径") ; 设置背景图片
-
backgournd-size:20px 30px; 设置背景图片的尺寸
-
background-repeat:no-repeat; 设置背景图片禁止重复
-
background-position: 横向偏移值 纵向偏移值; 设置背景图片的位置, 还可以通过百分比控制
文本和字体相关
-
text-align:left/right/center; 设置水平对齐方式
-
line-height:30px; 设置行高, 多行可以设置行间距, 单行可以实现垂直居中
-
text-shadow:颜色 x偏移值 y偏移 浓度; 设置阴影
-
text-decoration: overline上划线/underline下划线/line-through删除线/none去掉线 文本修饰
-
font-size:30px; 设置字体大小
-
font-weight:bold加粗/normal去掉加粗
-
font-style:italic;设置斜体
-
font-family: xxxx,xxxx,xxxx; 设置字体
-
font: 30px xxx,xxx,xxx; 设置字体大小+字体
-
color:red; 设置字体颜色
元素的显示方式display
-
block: 块级元素, 特点: 独占一行,元素可以修改宽高, 包括: h1-h6,p,div
-
inline: 行内元素, 特点: 共占一行,元素不可以修改宽高, 包括: span,b,i,s,u,a
-
inline-block: 行内块元素, 特点:共占一行,元素可以修改宽高, 包括: 图片img,控件input
-
none: 隐藏元素
行内元素宽高是不能修改的, 如果必须修改次元素的宽高, 需要将元素的显示方式改成块级或行内块
盒子模型
-
盒子模型=content内容+margin外边距+padding内边距+border边框
-
通过盒子模型相关的样式控制元素的显示效果
-
content: 控制元素的显示尺寸
-
margin: 控制元素的显示位置
-
border: 控制元素的边框效果
-
padding:控制元素内容的位置
-
盒子模型之content内容
-
作用:控制元素的显示尺寸
-
通过width/height两个样式控制元素的宽高
-
两种赋值方式:
-
像素
-
上级元素的百分比
-
-
行内元素宽高是不能修改的, 如果必须修改次元素的宽高, 需要将元素的显示方式改成块级或行内块
盒子模型之margin外边距
-
作用: 控制元素的显示位置
-
赋值方式:
-
margin-left/right/top/bottom:10px; 单独某一个方向赋值
-
margin:20px; 四个方向赋值
-
margin:20px 40px; 上下20 左右40
-
margin:10px 20px 30px 40px; 上右下左顺时针赋值
-
-
外边距塌陷
-
兄弟元素上下相邻,彼此添加外边距,取最大值
-
父子元素,上边缘重叠时, 父子元素的上外边距 取最大值, 会导致父子元素粘连到一起, 如果需要解决此问题,需要在父元素里面添加overflow:hidden
-
盒子模型之border边框
-
赋值方式:
-
border:粗细 样式 颜色; 四个方向添加边框
-
border-left/right/bottom/top:粗细 样式 颜色; 单独某一个方向添加边框
-
-
设置圆角: border-radius:20px; 值越大越圆 超过宽高一半为正圆
盒子模型之内边距
-
作用: 控制元素内容的位置
-
赋值方式:(和外边距类似
-
padding-left/right/top/bottom:10px; 单独某一个方向赋值
-
padding:10px; 四个方向赋值
-
padding:10px 20px; 上下10 左右20
-
padding:10px 20px 30px 40px; 上右下左顺时针赋值
-
-
默认情况下给元素添加内边距会影响元素的宽高, 给元素添加 box-sizing:border-box; 样式后不再影响
CSS三大特性
-
继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响
-
层叠: 多个选择器可以选择到同一个元素, 添加的样式不同的话则所有样式全部层叠生效, 如果添加的样式相同则由优先级决定
-
优先级(指选择器的优先级): 作用范围越小优先级越高, id>class>标签名> 继承(属于间接选中) , !important关键字可以将样式的优先级提升为最高