文本属性
-颜色属性
color:black
or color:rgb(255,255,255)
or color:rgba(255,0,0,0.5) 第四个为透明值设置，取值0-1
or color:#000 十六进制
- font-style 用于打开和关闭斜体文本
font-style:italic;斜体 normal 正常
- font-weight 为字体设置粗细程度
font-weight:bold; 加粗，值为700，值有100-900的整数，其中400为正常
bolder 比加粗还要粗
lighter 细线
- font-size 为文字指定大小
- font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加
2.设置的字体必须是用户电脑里面已经安装的字体
3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体
4.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办? 可以给字体设置备选方案 格式:font-family:"字体1", "备选方案1", ...;
5.如果想给中文和英文分别单独设置字体, 怎么办? 但凡是中文字体, 里面都包含了英文 但凡是英文字体, 里面都没有包含中文 也就是说中文字体可以处理英文, 而英文字体不能处理中文 注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
6.补充在企业开发中最常见的字体有以下几个 中文: 宋体/黑体/微软雅黑 英文: "Times New Roman"/Arial
- 缩写格式
font:style weight size family;
-网络字体
推荐：WebFont-为你的网页锦上添花_字体网
使用时需要在style里引用存下来的font-face
即上图代码
整体使用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face{font-family:'ZoomlaWenzhengming-A064'; /*逐浪文征明吴门狂草书*/
src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix'); /* IE9 */
src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
url('https://code.z01.com/font/ZoomlaWenzhengming-A064.woff') format("woff"), /* chrome、firefox */
url('https://code.z01.com/font/ZoomlaWenzhengming-A064.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url('https://code.z01.com/font/ZoomlaWenzhengming-A064.svg#ZoomlaWenzhengming-A064') format("svg"); /* iOS 4.1- */
}
div{
font-family:'ZoomlaWenzhengming-A064';
}
</style>
</head>
<body>
<div>段落标签哒</div>
</body>
</html>- 字体图标
iconfont:iconfont-阿里巴巴矢量图标库
在其中找到自己喜欢的图标
通过右上角图标进入购物车
点击下载代码，并将下载好的代码放到和html同级别的文件夹中等待引用
在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 两种方式 推荐iconfont font-awesome -->
<!-- 1.1 iconfont 单色图标库使用 引入样式文件-->
<link rel="stylesheet" href="../download/font_9saqil75th/iconfont.css">
<!-- 2.1 使用iconfont多色图标库 -->
<!-- script是书写js代码的区域 src引入js文件 -->
<script src="../彩色/font_3536593_hr7w0y2hsga/iconfont.js"></script>
<style>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.iconfont{
color: blue;
}
</style>
</head>
<body>
<!-- 1.2使用单色图标 -->
<i class="iconfont icon-jiankangzhibiaojiance"></i>
<!-- 2.2使用多色图标 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shutiao"></use>
</svg>
</body>
</html>font-awesome:Font Awesome，一套绝佳的图标字体库和CSS框架
引用需要去https://www.bootcdn.cn/ 找到对应的font-awesome链接。我们用的版本是4.7.0，所以找到对应版本，并复制链接进行引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>、
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-bank"></i>
</body>
</html>- 文本装饰的属性
text-decoration:underline; 下划线 line-through 删除线
overline 上划线 none 一般用于去掉超链接的下划线
- 文本水平对齐的属性
text-align:left;左 right 右 center 中
- 文本缩进的属性
text-indent:2em; （2em即两个字宽度）
- 设置或者取消字体改变
text-transform:none;
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
- 字体阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow :必需。水平阴影的位置。允许负值。
v-shadow :必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。 color:可选。阴影的颜色。
列表样式
- list-style 设置列表项标志
list-style-type:none; 取消样式 disc 实心圆 circle 空心圆 square 实心方块 decimal 数字1.2.3.
lower-roman 小写罗马数字i.ii.iii. upper-roman 大写罗马数字I.II.III.
decimal-leading-zero 数字01.02.03.
list-style-position:outside; 列表项标志出现在主块框的外部
inside 列表项标志出现在主块框的内部
list-style-image:url(); 自定义设置列表项标志
list-style速记
[<type>][<image>][<position>]
其他样式
- line-height
设置文本的行高 取值为绝对单位或者相对单位
- display
inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 行内块级元素，行内显示同时宽高有效
none 不显示，不占据屏幕空间
flex 伸缩盒布局
- visibility
hidden 隐藏，占据屏幕空间
visible 显示
- opacity
透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间
- overflow 溢出处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
- cursor
指定光标的样式
