8.20总结

css常用的核心样式分为4个大类

文字样式,列表样式,边框样式,背景样式

文字样式的常用样式有

调整文字大小:

font-size  属性值为数值+单位 

常用的单位为px  前端的常用单位px像素

还有em 相对于父系来设置的单位,表现为*乘法关系

文本的行高:

line-height:用来调整所选元素在垂直方向上面的关系

line-height的值设定为和父级盒子一样高的时候盒内文字元素会进行垂直居中

当行高大于高度的时候会往下移动

当行高小于高度的时候会往上移动

行高的设置都是针对于当前页面来进行管理的

文本修饰:

添加下划线,上划线,删除线(del标签也可以),清除默认样式

text-decoration:underline (添加下划线)

text-decoration:overline(添加上划线)

text-decoration:line-through(添加删除线)

text-decoration:none(清除默认下划线)

这些属性都是相同的,如果写了多个的话就会以后加载的为准

文本颜色:

color:加属性值

可以直接加法定单词,也可以加#0000000(十六进制),还可以加rgb(250,250,250)中间用逗号隔开,

rgba(250,250,250,0.5)最后的为透明度0~1之间

opacity:0`1之间可以直接控制所有的颜色透明度

文本的水平对齐:

text-align:(让所选的元素在水平的方向上进行对齐)

常用的为 text-align:center;

让文字水平居中

配合line-height:center 让文字垂直居中

line-height:center;

text-align:center;

文字水平垂直居中

列表属性:

可以把列表前面的实心圆点换成别的

list-style:属性值

常用的为list-style:none 清除实心小圆点

背景属性:

background-color:背景颜色(也可以直接使用background)

背景图片:

background-image:属性值为url()

background-image:url(../../)添加文件路径,也可以直接使用链接

背景图片属于css样式需要一个盒子支持

而img结构图片是有着自己的结构的,会占据一部分的结构位置

背景的平铺

background-repeat:属性值

默认属性值为 repeat(平铺)

可以使用no-repeat来进行取消平铺

背景图片的位置:

属性background-position

属性值1x:left right center

属性值2y:top bottom center

也可以使用50% 50%来进行使用

背景图片的固定:

属性: background-attachement

属性值: fixed 固定

属性值: scroll 滚动

边框属性:

border边框  边框的组成是需要宽度,样式,颜色进行填写的

border-width 边框的宽度/厚度 属性值由数值+单位构成

border-style 边框的样式 有solid(实线),dotter(点线),dashed(虚线),double(双实线)

border-color 边框的颜色 英语单词,十六进制,rgb/grba

盒模型的组成

有

content(内容)

margin(外边距,在进行计算的时候不会会算入盒子的大小)

padding(内边距)在进行计算的时候会加入到盒子的大小计算

border:边框属性:也会加入到盒子大小的计算