css核心属性的文本字体属性:
属性 “font-sizes”,属性值:
- 法定属性值和常规属性值
- 常规的属性值设置的时候都会添加单位(web中常用的单位为px)
- 浏览器中默认的字体大小16px;
- 由于浏览器存在差异 规定12px是浏览器中显示的最小字体
- 建议设置字体的大小为偶数
- 如果属性值为零的情况下不需要添加单位 font-size:0 border/margin/padding:0
- 前端除了使用像素,还有一些常见单位
- em 相对于父级进行计算 用在首行缩进
-pt 常用在硬件设备上的单位 (磅)
-rem 相对于的是html根元素进行计算(非常重要-移动端
-% 宽高自适应
-deg 2d与3d 角度值
属性(font-family )
-属性值 有中文和英文,在浏览器中默认的字体类型是微软雅黑
-中文:建议属性值添加引号
-英文:属性值只有一个英文单词不需要加引号,如果有多个属性值需要添加引号
关于加粗和倾斜的标签:b,strong ,i,em
加粗属性:font-weight
属性值 -法定属性值100~900之间(100~500正常字体)(600~900加粗字体)
-bold 加粗
-bolder 更粗
重要的属性值 norma(正常的)用来清加粗标签的默认样式(使用标签,不需要默认样式)
-倾斜属性:font-style
-属性:font-style
-属性值:
-italic 倾斜的
-oblique 更倾斜的
-normal 正常的
属性:line-height
-文本在垂直方向居中(单行文本) 行高= 高度
-行高>高度 文字向下移动
-行高<高度 文字向上移动
注意:line-height多用于单行文本
多行文本行高(ui设计图会标明)
从第一行文本顶部量取到第二行文本顶部即可
文本属性的简写
属性:font
属性值:font-weight, font-style,font-size/line-height font-family
font-weight和font-style可以不写或者互换位置
font-size/line-height 固定写法 不能改不能换位置
font-family 可以默认 但不能不写
拓展:跑马灯标签marquee(已废弃 但可以使用)
属性:color 切记不要写成font-color
属性值
-常见的英文单词 green,yellow,red,pink 等
-十六进制:0-9/a-f(大小写不区分)任意组成的六位字符
常见的十六进制:#fff白色 #0000黑色 #cccc灰色
-六位字符一样的时候可以省略为三位 #000 #abc
重要:rgb(red,green,blue )范围0-255
-rgba(,,,alpha)透明度:范围0-1
透明度的表示方式:-rgba(某一个进行修改)-opacity:0-1(全部都可以修改)
文本水平对齐方式 text-align
-right ,left,center,justify(两端对齐,字符要求)
文本修饰
属性:text-decoration
属性值
-underline 下划线
-overline 上划线
-line-through 删除线
-重要:none 清楚下划线 del 删除
首行缩进(只针对第一行)
属性:text-indent
属性值:数值+单位 可以接负值
字间距:letter-spacing
词间距:word-spacing
有序列表,无序列表,自定义列表
定义列表的符号样式属性
属性:list-style-type
属性值:disc(实心圆)circle(空心圆)
square(实心方块)
none(清楚列表的默认样式)
使用图片作为列表符号list-style-image
属性值url()
定义列表符号位置
属性:list-style-position
属性值
inside/outside
清除列表默认样式
list-style:none
背景属性
背景颜色属性
属性:background-color 可以简写成 background
属性值
-英文单词
-十六进制
-rgb/rgba
背景图片
属性:background-image
属性值:url(相对路径)
当容器大于背景图片的时候,图片会进行铺满
当容器小于背景图只显示一部分
当图片等于背景图相等
关于图片的使用
-background-image:是css属性需要容器大小来支持
-img:html结构
背景平铺属性
属性:background-repeat
属性值:
- no-repeat 不平铺 只显示一张图
- repeat 平铺 默认值
背景图片定位:属性background-position
属性值:两个属性值
-x轴的方向 left right center
-y轴的方向 top bottom center
背景图的固定
属性:backgroung-attachment
属性值
-scroll 滚动 默认值
-fixed 固定
简写方式
属性:backgroung
属性值:颜色 图片 平铺 定位 固定