CSS-0730~0801

---

title: “CSS 0730~0801”
date: 2022-08-03T16:40:33+08:00
draft: true

字体属性（可复合）

1. 字体大小: font-size: 数值px;

2. 字体粗细: font-weight: bold(bolder)/normal/small(smaller)/数值(不加单位100-900,且整百取数);

   • bold和bolder 效果相同,均为显示加粗(对应数值为600、700、800、900)
   • small和smaller 效果相同,均为显示字体变细(对应数值为100、200、300)
   • normal 代表默认值,字体正常显示(对应数值为400、500)

3. 字体倾斜: font-style: italic/normal;

   • italic 字体倾斜
   • normal 正常,默认值

4. 字体类型: font-family: 字体类型;

   • 中文：设置为中文字体类型时,直接写字体类型即可,也可以用引号引起来,引号可单可双
   • 英文：如果是一个单词的字体可以不加引号，多个单词组成的字体要加引号，引号可单可双

   注意：多个字体类型之间用逗号(,)隔开,浏览器从左到右进行解析有哪个显示哪个，都没有就是默认字体(微软雅黑)

5. 字体复合写法 font:[加粗] [倾斜] 字体大小[/行高] 字体类型;

   • 加粗 倾斜 行高 三个值可选
   • 加粗 倾斜没有顺序 字体大小和行高之间必须用/

   div标签–板块标签/布局标签–双标签、不带任何自带样式、自动换行

文本属性

1. 文本颜色 color:颜色单词/十六进制表示/#b(0-255,0-255,0-255)
   • 十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f
   • rgb(0,0,0)–黑色--------rgb(255,255,255)–白色
2. 文本首行缩进 text-indent:数字px/数字em;
   • 可设置负数
   • 如果缩进的值和字体大小之间有联系的话,可以使用em单位,两个字的缩进一般设置为2em
3. 文本修饰 text-decoration
   • underline 下划线
   • overline 上划线
   • line-through 删除线
   • none 去掉线条,默认值
4. 文本水平位置 text-align:left/center/right;
5. 行高 line-height:数字/数字px;
   • 多行文字: 可以增大行和行之间的距离
   • 单行文字: 设置行高的值和容器的高度一致,可以实现文字垂直居中
   • 设置数字代表行高值是当前字体大小的倍数

em单位: 默认情况下 1em=16px;(默认的字体大小) 如果更改了字体大小的话 1em=该元素的字体大小,em会跟随当前元素的字体大小变化

lorem: 自动生成英文

间距属性

1. 字符间距 letter-spacing:数值px;
   • 增大字和字之间的距离
   • 增大字母和字母之间的距离
2. 词间距 word-spacing:数值px;
3. 大小写的转换 text-transform
   • capitalize 首字母大小
   • uppercase 全部大写
   • lowercase 全部小写
4. 鼠标样式 cursor
   • pointer 手型
   • help 帮助
   • wait 等待

列表属性（可复合）

1. 列表符号类型: list-style-type: disc/circle/square/none;
   • disc 实心圆（默认值）
   • circle 空心圆
   • square 实心方块
   • none 不设置列表符号（常用）
2. 列表符号位置 list-style-position: outside/inside;
   • outside 在li元素外边（默认值）
   • inside 在li元素里面
3. 列表图片 list-style-image:url(图片路径);
4. 复合写法 list-style:类型 位置 图片路径; 用的最多
   • 值没有顺序
   • 三个值都是可选,只写一个的话，其他的就是默认值

背景属性（可复合）

1. 背景色 background-color:transparent,默认值透明色/颜色值

2. 背景图 background-image:url(图片路径);

3. 图片大小 background-size: width height;

4. 背景图重复(平铺) background-repeat:

   • repeat
   • repeat-x
   • repeat-y
   • no-repeat(常用)

5. 背景图位置 background-position: 水平 垂直;

   • 数值px
   • 关键字 水平left/center/right 垂直top/center/bottom
   • 只写一个数值px 代表水平位移 垂直默认居中
   • 只写一个关键字的值,另一个相反方向的位置居中

6. 复合写法 background: 背景色 背景图 背景图重复 背景图位置/背景图大小;

   • 值没有顺序
   • 位置和大小之间必须用/隔开

7. img引入的图和背景图的区别

   • 背景图不占位置,容器必须有大小才能够显示出来背景图
   • img引入的图片占位置的
   • 一般网页上图片都是用img进行引入的,但是文字前面的一些小图标经常会用背景图进行引入,而不是用列表图,因为背景图位置调整起来比较灵活

   #rgba(0-255,0-255,0-255,透明度(0-1))

雪碧图（精灵图：css spirit）

雪碧图/精灵图/图片整合css sprite: 将很多小图标放到的这张大图称之为雪碧图，且必须用背景图的方式进行调整使用

优点

1. 图片体积小(一个图片一个文件总共加起来比较大,如果把图片全部放在一个文件,整体比较小)
2. 减少图片请求次数(图片放不同的文件需要请求不同的路径,如果放一个文件,每次只需要请求同一个地址)

注：主要和background-position一起使用

补充

css中的过渡属性：transition: 1s;