文章目录

1 文本属性
- 1.1 color 为字体指定颜色
- - 格式：
  - 取值类型：
  - - （1）英文单词
    - （2）rgb
    - （3）rgba
    - （4）十六进制
- 1.2 font-style 用于打开和关闭斜体文本
- - 格式：
  - 取值：
- 1.3 font-weight 为字体设置粗细程度
- - 格式：
  - 取值：
- 1.4 font-size 为文字指定大小
- - 格式：
- 1.5 font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
- - 格式：
  - 注意：
- 1.6 webFont 网络字体
- - 字体库：（免费使用）
  - 步骤：
- 1.7 字体图标
- - 推荐使用的字体图标库：incontfont
  - - 1 普通图标使用步骤：
    - - （1）打开incontfont网站：[https://www.iconfont.cn/](https://www.iconfont.cn/)
      - （2）搜索需要的图标
      - （3）将需要的图标添加入购物车
      - （4）打开购物车将代码下载到本地
      - （5）将下载后的文件夹放在项目的目录下
      - （6）在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可
    - 2 多色图标使用步骤：
- 1.8 text-decoration 设置或者取消文本修饰
- - 格式：
  - 取值：
- 1.9 text-align 文字排列方式
- - 格式：
  - 取值：
- 1.10 text-indent 文本缩进属性
- - 格式：
  - 单位：em
- 1.11 text-transform 设置或者取消字体改变
- - 格式：
  - 取值：
- 1.12 text-shadow 设置或者取消文本阴影
- - 格式：
  - 取值：
2 列表样式
- 2.1 list-style-type 属性指定列表项标记的类型
- - 取值：
- 2.2 list-style-position 设置列表项标志出现的位置
- - 取值：
- 2.3 list-style-image 属性将图像指定为列表项标记
- - 取值：
- 2.4 list-style 简写
- - 格式：list-style：[]
3 其他样式
- 3.1 line-height 行高
- 3.2 display 显示方式
- - 取值：
- 3.3 visibility 显示与隐藏
- - 取值：
- 3.4 opacity 透明度
- 3.5 overflow 溢出处理
- 3.6 cursor 指定光标的样式

1 文本属性

1.1 color 为字体指定颜色

格式：

color：值

取值类型：

（1）英文单词

颜色对应的英文单词，如red（红色）、blue、green、yellow、black…等

（2）rgb

rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
格式: rgb(0,0,0)（rgb中每个数字的取值为0-255）

红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);

（3）rgba

rgba类似于rgb,只不过比rgb多了个a

a代表透明度，取值范围为0-1，取值越小就越透明

例如：rgba(0,0,255,0.5)

（4）十六进制

规定颜色值为十六进制值的文本颜色，用六位数来代表颜色值

本质是RGB，用两位数代表旗帜的一个值，如果两位数可简写成一位数

格式：#000000

例如：#ffccaa ->#fca(简写)

1.2 font-style 用于打开和关闭斜体文本

格式：

font-style：值；

取值：

normal ：正常的，默认就是正常的（快捷键：fs）
italic : 倾斜的（快捷键：fsn）

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

格式：

font-weight：值；（快捷键：fw）

取值：

bold 加粗（快捷键：fwb）
bolder 比加粗还要粗（快捷键：fwbr）
lighter 细线，默认就是细线
数字取值：（100-900之间整百的数字）
400 等同于 normal
700 等同于 bold

1.4 font-size 为文字指定大小

格式：

font-size：数值px；（快捷键：fz）

例如：font-size：30px （快捷键：fz30）

1.5 font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

格式：

font-family：字体样式；

注意：

英文样式不需要加双引号，直接使用，例如：font-family:serif；
中文样式需要加双引号或单引号,例如：font-family:“楷体”；
如果设置的字体不存在，系统将采用默认字体（宋体）
如果设置的字体不存在，可以给字体设置备选方案，例如：font-family:“字体1”, “备选方案1”, …;
可以给英文、中文字体单独设置样式，但英文样式要在中文样式前，例如：font-family: “Menlo”,“微软雅黑”；
并不是名称是英文就一定是英文字体，因为中文字体也有自己的英文名称，例如：微软雅黑 Microsoft YaHei

1.6 webFont 网络字体

当用户并不满足与系统字体时，可以使用网络字体

字体库：（免费使用）

https://www.ziti163.com/webfont/

步骤：

1.将引用代码的@font-face里的全部内容复制到style标签内容第一行@font-face{font-family:'zFont2';src: url('https://code.z01.com/font/zFont2.eot?#iefix'); /* IE9 */src: url('https://code.z01.com/font/zFont2.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */url('https://code.z01.com/font/zFont2.woff') format("woff"), /* chrome、firefox */url('https://code.z01.com/font/zFont2.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */url('https://code.z01.com/font/zFont2.svg#zFont2') format("svg"); /* iOS 4.1- */font-style: normal; font-weight: normal;}2.给要添加样式的标签设置属性font-famile:样式名称
<h1 style="font-family:zFont2; font-weight:500; font-size:4em;"> 中国字体网，做中国最优秀的字体研发中心！</h1>

1.7 字体图标

推荐使用的字体图标库：incontfont

1 普通图标使用步骤：

（1）打开incontfont网站：https://www.iconfont.cn/

（2）搜索需要的图标

（3）将需要的图标添加入购物车

（4）打开购物车将代码下载到本地

（5）将下载后的文件夹放在项目的目录下

（6）在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

<!-- 1.1 引入iconfont.css -->
<link rel="stylesheet" href="./font_atr4ybulu0d/iconfont.css"><!-- 1.2 class="iconfont icon-xxx" 使用对应的图标即可-->
<i class="iconfont icon-flower"></i>

2 多色图标使用步骤：

（1）搜索或选择需要的多色图标

（2）将需要的图标添加入购物车

（3）打开购物车将图标添加至项目，没有项目就创建

（4）在项目中选择symbol，生成线上链接或下载到本地

<!-- 2.1 多色图标的线上链接引入 -->
<script src="http://at.alicdn.com/t/font_2726947_5ik8kq3iq6w.js"></script>
<!-- 2.1 多色图标的本地引入-->
<!-- <script src="./font_2726947_q9oee8p3uls/iconfont.js"></script> -->
<style>/* 2.2 加入通用css代码（引入一次就行） */.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style><!-- 2.3 挑选相应图标并获取类名，应用于页面 -->
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingdanchaxun"></use>
</svg>

1.8 text-decoration 设置或者取消文本修饰

格式：

text-decoration：none；（快捷键：td）

取值：

underline 下划线（快捷键：tdu）
line-through 删除线（快捷键：tdl）
overline 上划线（快捷键：tdo）
none 无样式（常用语a标签去除下划线）

1.9 text-align 文字排列方式

格式：

text-alignt：值；

取值：

left 居左（快捷键：ta）
right 居右（快捷键：tar）
center 居中（快捷键：tac）

1.10 text-indent 文本缩进属性

格式：

text-indent: 2em;

单位：em

一个em代表缩进一个文字的宽度

1.11 text-transform 设置或者取消字体改变

格式：

text-transform: 值;

取值：

uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
ull-width 转换为类似于一个等宽字体
none 无转换

1.12 text-shadow 设置或者取消文本阴影

格式：

text-shadow: h-shadow v-shadow blur color;

（例如：text-shadow: 0px 0px 5px red;）

取值：

h-shadow :必需。水平阴影的位置。允许负值
v-shadow :必需。垂直阴影的位置。允许负值
blur:可选。模糊的距离
color:可选。阴影的颜色
none:取消所有阴影

2 列表样式

2.1 list-style-type 属性指定列表项标记的类型

取值：

circle 空心圆点， disc实心圆点
square 实心矩形
upper-roman 大写罗马数字，lower-roman 小写罗马数字
upper-alpha 大写英文字母，lower-alpha 小写英文字母

2.2 list-style-position 设置列表项标志出现的位置

取值：

outside : 列表项标志出现在主块框的外部
inside : 列表项标志出现在主块框的内部

2.3 list-style-image 属性将图像指定为列表项标记

取值：

url( img地址 )

例如：list-style-image:url(./icon.png);

2.4 list-style 简写

格式：list-style：[]

例如: list-style:square inside url(’/i/arrow.gif’);

注意：list-style:none常用于ul列表清除样式

3 其他样式

3.1 line-height 行高

设置文本的行高

注意: 当一个div的height和line-height的值相同时，可以设置文本垂直居中

3.2 display 显示方式

取值：

inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 行内显示同时宽高有效
none 不显示，不占据屏幕空间

3.3 visibility 显示与隐藏

取值：

hidden 隐藏，占据屏幕空间
visible 显示

3.4 opacity 透明度

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

3.5 overflow 溢出处理

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

3.6 cursor 指定光标的样式

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。

6-CSS字体及文本样式相关推荐

HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
4.CSS -- 字体及文本样式
字体及文本样式 1.文本属性 1.1 颜色属性 1.1.1 取值: 1.1.1.1 英文单词 1.1.1.2 rgb 1.1.1.3 rgba 1.1.1.4 十六进制 1.2 `font-style ...
CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格文本样式颜色 color rgb(颜色) R ...
HTMLCSS Day03 CSS字体及文本样式
文章目录 1.文本属性 - 颜色属性在CSS中如何通过color属性来修改文字颜色英文单词 rgb rgba 十六进制 - font-style 用于打开和关闭斜体文本 - font-weight ...
CSS —— 字体和文本样式
字体样式字体大小属性名: font-size 取值:数字+px 注意点: 谷歌浏览器默认文字大小是16px 单位需要设置,否则无效字体粗细属性名 :font-width 取值: 关键字正常 ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
CSS基础：基础选择器、字体和文本样式
CSS基础 Date: August 31, 2022 Summary: 基础选择器.字体和文本样式基础认知学习路径: CSS初识 CSS引入方式 CSS初识 CSS介绍 CSS:层叠样式表(Ca ...
css笔记一-CSS简介、基础选择器、字体和文本样式
一一.CSS简介 1.1.什么是CSS? CSS(Cascading style sheets):层叠样式表 CSS作用:给页面中的HTML标签设置样式 1.2.CSS语法规则写在哪里? css写 ...

6-CSS字体及文本样式