html字体及文本样式设置
文本属性
-颜色属性
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
指定光标的样式
html字体及文本样式设置相关推荐
- 05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
- html的字体和文本样式
长度单位 长度单位 1:像素 px 就是电脑屏幕上一个个发光的小点,我们眼睛看不出来, 像素是我们PC端最常用的一个单位,它是一个固定单位 2:百分比 % 是父元素的宽高的百分比,是一个相对单位, 一 ...
- 前端HTML字体和文本样式
前端HTML字体和文本样式 文章目录 前端HTML字体和文本样式 1.字体样式 1.1字体大小 1.2 字体粗细 1.3 字体样式(是否倾斜) 1.4字体类型 1.5 样式层叠问题 1.6 字体复合属 ...
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- CSS基础选择器、字体和文本样式
一.CSS简介 美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
- 【前端学习笔记】(三)（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 ...
- 初识微信小程序 文本样式设置
创建一个微信小程序,利用class属性设置文本样式,包括:文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等 <!--index.wxml--> <view class= ...
- css笔记一-CSS简介、基础选择器、字体和文本样式
一 一.CSS简介 1.1.什么是CSS? CSS(Cascading style sheets):层叠样式表 CSS作用:给页面中的HTML标签设置样式 1.2.CSS语法规则 写在哪里? css写 ...
- CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格 文本样式 颜色 color rgb(颜色) R ...
最新文章
- P2657 [SCOI2009]windy数 数位dp入门
- 12 生成器和生成器函数以及各种推导式
- VMware 虚拟化编程(10) — VMware 数据块修改跟踪技术 CBT
- Spring 注解配置
- Linux系统中read的用法,Linux中read命令的用法
- WPF ListView展示层叠信息
- master slave mysql_MYSQL高可用之复制(MASTER/SLAVE)
- Linux_快速查找文件
- FTP上传无文件以及0字节问题
- tomcat的server.xml中的Context节配置
- Git小乌龟汉化步骤
- arduino使用BCD电波对时模块获取时间
- 1人工智能概述------人工智能发展历程（人工智能的起源、人工智能的发展经历了六个阶段）
- 项目非组件文件进行路由跳转【react与vue等其他框架均可使用】
- 2021年盘州市高考成绩查询,盘州市第一中学2021年招生代码
- python语言strip的作用_Python语言中的strip()的理解
- Bootstrap学习笔记04
- python移除文本中英文，数字和字符
- 大众继续深耕SUV市场：5款新车型先于上海车展登场，ID. ROOMZZ成点睛之笔...
- 最详尽的 Swift 代码规范指南