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
即上图代码
整体使用如下:
- 字体图标Document 段落标签哒
iconfont:iconfont-阿里巴巴矢量图标库
在其中找到自己喜欢的图标
通过右上角图标进入购物车
点击下载代码,并将下载好的代码放到和html同级别的文件夹中等待引用
在对应的页面中,通过link标签引入iconfont.css,直接根据对应的类名使用即可
Document
font-awesome:Font Awesome,一套绝佳的图标字体库和CSS框架
引用需要去https://www.bootcdn.cn/ 找到对应的font-awesome链接。我们用的版本是4.7.0,所以找到对应版本,并复制链接进行引用
- 文本装饰的属性Document 、
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速记
[
其他样式 - line-height
设置文本的行高 取值为绝对单位或者相对单位
- displayinline 行内显示,宽高无效
block 块级显示,宽高有效
inline-block 行内块级元素,行内显示同时宽高有效
none 不显示,不占据屏幕空间
flex 伸缩盒布局
- visibility hidden 隐藏,占据屏幕空间
visible 显示
- opacity透明度,0-1之间的取值,取值为0的时候隐藏,占据屏幕空间
- overflow 溢出处理hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
- cursor指定光标的样式