资讯 小学 初中 高中 语言 会计职称 学历提升 法考 计算机考试 医护考试 建工考试 教育百科
栏目分类:
子分类:
返回
空麓网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
空麓网 > 计算机考试 > 软件开发 > 后端开发 > Java

html字体及文本样式设置

Java 更新时间: 发布时间: 计算机考试归档 最新发布

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

 

即上图代码

整体使用如下:




    
    
    
    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

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

- display

inline 行内显示,宽高无效

​block 块级显示,宽高有效

​inline-block 行内块级元素,行内显示同时宽高有效

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

​flex 伸缩盒布局

- visibility

​ hidden 隐藏,占据屏幕空间

​ visible 显示

- opacity

透明度,0-1之间的取值,取值为0的时候隐藏,占据屏幕空间

- overflow 溢出处理

hidden 超出内容隐藏

​ auto 超出产生滚动条

​ scroll 滚动条

- cursor

指定光标的样式

 

转载请注明:文章转载自 http://www.konglu.com/
本文地址:http://www.konglu.com/it/1024948.html
免责声明:

我们致力于保护作者版权,注重分享,被刊用文章【html字体及文本样式设置】因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理,本文部分文字与图片资源来自于网络,转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请立即通知我们,情况属实,我们会第一时间予以删除,并同时向您表示歉意,谢谢!

我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2023 成都空麓科技有限公司

ICP备案号:蜀ICP备2023000828号-2