第六天学习内容
CSS核心属性
一、文本字体所属性
1.文本大小:{font-size:12px/14px/16px;}
属性值:法定属性值和常规属性值;
常规属性值设置的时候都会添加单位(web中常用像素px);
最小为12px;默认为16px,建议设置字体的大小为偶数。
-em 相对于父级进行计算、首行缩进
-pt 磅,常用于硬件设备
-rem 相对于html根元素进行计算【重点】
-% 宽高自适应
-deg 2d 3d角度值
2.文本字体类型:font-family
属性值:
-默认字体类型为微软雅黑
-中文:建议添加引号
-加粗属性font-weight
法顶属性值 100~900 100~500正常字体 600~900加粗字体
-bold 加粗bolder更粗
-重要 normal 正常的 用来清除{加粗标签}的默认样式 (使用标签的效果但不需要默认样式)
-倾斜属性
(/)font-style
-italic倾斜
-oblique更倾斜的
-normal正常字体
3.文本行高的设置
属性:line-height
行高=高度 文本在垂直方向居中
行高>高度 文本往下移动
行高<高度 文字往上移动
注意:
量取多行文本行高(ui设计图会标明)
文本水平居中:text-align:center
文本对齐方式
4.文本属性的简写
属性:font(后面接冒号)
属性值:font-weight font-style font-size/line-height font-family(中间用空格分开)
5.文本颜色
属性:color 不能写成font-color
属性值:
法定属性值:英文单字 red、pink等
十六进制代码:需要#
-常见的十六进制#ffffff #000000 #cccccc
-六位字符一样的时候可以省略为3位
【重点】
-rgb(red,green,blue)范围0-2551
-rgba(,,,alpha) 透明度0-1
6.透明度
7.文本修饰
属性:text-decoration
属性值:
-underline 下划线
-overline上横线
-line-through删除线
重点 -none清除下划线
8.首行缩进属性:text-indent
属性值:数值+单位 可以接负数
字间距属性:letter-spacing
词间距属性:word-spacing
列表属性
1.定义列表的符号样式
属性:list-style-type
属性值:disc(实心圆)-默认值 circle(空心圆) square(实心方块) none(清除列表的默认样式)
2.使用图片作为列表符号
属性:list-style-image
属性值:url(
)
3.定义列表符号位置
属性:list-style-position
属性值:outside
4.清除列表的默认样式
ul,ol,li{none}
背景属性
1.背景颜色
属性:background-color 可以简写成background即可
属性值:
-英文单词
-十六进制
-rgb/rgba
2.背景图片
属性:background-image
属性值:url(相对路径)
-当容器大于背景图片的时候,图片会进行平铺
-当容器小于背景图片的时候,图片只显示一部分
background-image和image的区别:
前者是css属于,需要容器大小去支持,img是html结构
3.背景平铺
属性:background-repeat
属性值:
-no-repeat不平铺只显示一张背景图
-repeat平铺
-repeat x/y 沿着x/y轴平铺
4.背景图片定位
属性:background-position
属性值:
-x轴的方向left right center
-y轴的方向 top bottom center
5.背景图的固定
属性:background-attachment
属性值:
-scroll 滚动
-fixed 固定