CSS字体连写及外观属性
一、font:字体连写
使用font属性时,必须按以下语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
/*选择器{font: 字体风格 字体粗细 字体大小/行间距 字体样式;}*/
p{font: font-style font-weight font-size/line-height font-family;}
1.1 font-size:字号大小
字号大小一般用px或者em来设定。
em指相对于当前对象内文本的字体尺寸。
1.2 font-family:字体样式
p{ font-family:"微软雅黑","黑体",sans-serif;}
/*san-serif/serif:无衬线和有衬线字体。很多中文字体都有衬线。*/
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。
可以使用英文或者Unicode编码来代替。
p{ font-family:"Microsoft Yahei","SimHei",sans-serif;}
p{ font-family:\5FAE\8F6F\96C5\9ED1,\9ED1\4F53,sans-serif;}
为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体。
1.3 font-weight:字体粗细
在HTML中,可以用b或者strong等语义化标签,进行加粗。
在CSS中,可以使用的属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
其中,400等价于normal,700等价于bold
p{font-weight: normal bold bolder lighter 100~900;}
1.4 font-style:字体风格
在HTML中,可以用i或者em(强调,也是斜体)
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
p{font-style: normal italic oblique;}
二、CSS外观属性
2.1 color:文本颜色
color属性用于定义文本的颜色,其取值方式有如下3种: 1.预定义的颜色值,如red,green,blue等。 2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。 3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
2.2 line-height:行间距/行高
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种, 分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px。
2.3 text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。
p{text-align: left|right|center;}
2.4 text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%, 允许使用负值, 建议使用em作为设置单位。 一般都是2em
2.5 text-decoration:文本的装饰
通常我们用于给链接修改装饰效果
p{text-decoration: none|underline|overline|line-through;}
CSS字体连写及外观属性的更多相关文章
- css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、
CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- 前端学习 -- Css -- 字体的几个属性学习
font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...
- CSS字体属性
CSS字体属性 CSS Fonts(字体)属性拥有定义字体系列.大小.粗细和文字样式(如斜体) 字体系列 <style type="text/css"> div{ fo ...
- 3.CSS字体属性
CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体) 3.1字体系列 CSS使用font-family属性定义文本字体系列 p { font-family:'微软雅黑' ;} ...
- CSS字体属性与文本属性
CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...
随机推荐
- docker学习笔记1认识docker
简介 Docker是一个开源的应用容器,开发者可以打包其应用以及依赖到一个可移植的容器当中.当然容器与容器之间不存在任何接口,完全独立.最大程度的解决了我的软件只能不能在你的电脑上运行的尴尬局面.开发 ...
- supervisor守护filebeat服务进程
1.变更原因 部署安装supervisor进行filebeat守护及后面的各种服务进程守护可以用2.变更内容增加supervisor服务 3.变量时间:6月2号-6月3号4.变更风险评估:无风险4.1 ...
- django3.x版本不支持MySQL5.x版本
其实django2.0版本已经不再支持MySQL5.x的了,最开始是安装了MySQL5.1,在学习django 的时候,django版本为3.0,在执行`python manage.py migrat ...
- C++ 类模板详解(一):概念和基本使用方式
与函数模板类似地(C++函数模板详解(一):概念和特性) ,类也可以被一种或多种类型参数化.例如,容器类就是一个具有这种特性的典型例子,它通常被用于管理某种特定类型的元素.只要使用类模板,我们就可以实 ...
- Bash 脚本中的 set -euxo pipefail
有些开发人员会用Bash来实现很复杂的功能,就像使用别的高级语言一样.他可能觉得自己很牛逼但其他人早就想锤爆他了,Bash的可读性和可维护性远远低于任何高级语言.更要命的是,Bash并没有方便的调试工 ...
- POJ_2752_KMP
http://poj.org/problem?id=2752 求字符串的字串,使前缀后缀都为这个字串,按字母数量排序输出数量. 用了KMP的未优化的next数组. #include<iostre ...
- HDU_4456_二维树状数组
http://acm.hdu.edu.cn/showproblem.php?pid=4456 第一道二维树状数组就这么麻烦,题目要计算的是一个菱形范围内的和,于是可以把原来的坐标系旋转45度,就是求一 ...
- vuejs之vue和springboot后端进行通信
一.新建一个vue项目,建立好后的相关文件 查看一下新建好的vue项目的结构: 当前各个文件中的内容: App.vue:主入口 <template> <div id="ap ...
- Python实现IOC控制反转
思路: 用一个字典存储beanName和资源 初始化时先将beanName和资源注册到字典中 然后用一个Dscriptor类根据beanName动态请求资源,从而实现控制反转 # -*- coding ...
- Linux系统下常见的数据盘分区丢失的问题以及对应的处理方法
在修复数据前,您必须先对分区丢失的数据盘创建快照,在快照创建完成后再尝试修复.如果在修复过程中出现问题,您可以通过快照回滚将数据盘还原到修复之前的状态. 前提条件 在修复数据前,您必须先对分区丢失的数 ...