前端CSS学习笔记之字体及文本样式

前端CSS学习笔记之字体及文本样式

1、文本属性

1、颜色属性color

在CSS中通过color属性来修改文字颜色

格式：color:值；

颜色的取值有：

• 英文单词

一般情况下常见的颜色都有对于的英语单词，如：red、blue、green等

• grb(三原色)

格式：rgb(0,0,0)

其中每个数字的取值是0~225之间，0代表不发光，225代表发光，值越大就越亮

• rgba

rgba和rgb的内容差不多，多了一个字母a，表示透明度，取值为0-1，取值越小就越透明

十六进制

在前端开发中通过十六进制来表示颜色，其实本质就是RGB，十六进制中是通过每两位表示一个颜色，如：#FFEE00 FF表示R EE表示G 00表示B

2、font-style 用于打开和关闭斜体的文本

格式：font-style:italic;

取值：

​ normal：正常的，默认就是正常值

​ italic：倾斜的

3、font-weight 为字体设置粗细程度

格式：font-weight:bold;

取值：

​ bold:加粗

​ bolder:比加粗还粗

​ lighter:细线，默认就是细线

数字取值：

​ 100~900之间整百数字

​ 400等同于normal

​ 700等同于bold

4、font-size 为字体指定大小

格式：font-size:20px;

单位：px(像素)

注意：通过font-size设置大小一定要带单位，也就是一定要写px

5、font-family 为文字指定特殊的字体

格式：font-family：“楷体”；

通用字体(直接使用，不需要加引号)

​ serif：有衬线的字体,笔画结尾有特殊的装饰线或衬线

​ sans-serif:无衬线的字体，笔画结尾是平滑的字体

​ monospace:等宽字体，用于代码，字体中每个字宽度相同

​ cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果

​ fantasy:装饰字体 ，具有特殊艺术效果的字体

注意：

1、如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加

2、设置的字体必须是用户电脑里面已经安装的字体

3、如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体

6、文本装饰属性

格式：text-decoration:underline;

取值：

​ underline 下划线

​ line-through 删除线

​ overline 上划线

​ none 什么都没有，最常见的用途就是用于去掉超链接的下划线

7、文本水平对齐属性

格式：text-align:center

取值：

​ left 左

​ right 右

​ center 中

8、文本缩进的属性

格式：text-indent：2em;

取值：

​ 2em 其中em单位，一个em代表缩进一个文字的宽度

9、设置或者取消字体改变

用于使文本显示全大写或者全小写

格式：text-transform 允许字体改变，字体变形

​ none 防止任何改变

​ uppercase 将文本转换为大写

​ lowercase 将文本转换为小写

​ capitalize 将所有单词的第一个字母转换为大写

​ full-width 转换为类似于一个等宽字体

10、字体阴影

格式：text-shadow：h-shadow v-shadow blur color;

取值;

​ none 取消所有阴影

​ h-shadow 必需 水平阴影 允许负值

​ v-shadow 必需 垂直阴影 允许负值

​ blur 可选 模糊的距离

​ color 可选 阴影的颜色

2、列表样式

1、默认样式

​ ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em)
​ li 元素没有设置默认的空白（行间距）
​ dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距
​ dd 元素的margin-left为40px(2.5em)
​ p 元素的margin-top，margin-bottom为16px(1em)

2、list-style-type 设置列表项标志类型

​ 常用取值：

​ none:无标记

​ disc：默认，标记是实心圆。

​ circle：标记是空心圆。

​ square：标记是实行方块。

​ decimal：标记是数字。

3、list-style-image 自定义设置列表项标志

​ 取值：

​ url():指定图标的位置。

3、其他样式

1、line-height

​ 设置文本的行高，取值为绝对单位或者相对单位

• display：显示方式的切换

​ inline 行内显示 宽高无效

​ block 块级显示 宽高有效

​ inline-block 为了能够让元素既能够不独占一行，又可以设置宽高和高度，就需要设置为行内块级元素，行内显示同时宽高有效。

​ none 不显示，不占据屏幕空间

​ flex 伸缩盒布局

• visbility:显示与隐藏

​ hidden 隐藏，占据屏幕空间

​ visible 显示

• opacity：透明度

取值：0~1之间，取值为0的时候隐藏 ，占据屏幕空间

• overflow：溢出处理

​ hidden 超出内容隐藏

​ auto 超出产生滚动条

​ scroll 滚动条

cursor ：指定光标的样式

​ auto 默认，浏览器设置的光标

​ crosshair 光标呈现为十字线

​ pointer 光标呈现为指示链接的指针