一、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字体连写及外观属性的更多相关文章

  1. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  2. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  3. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  4. 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 ...

  5. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  6. 前端学习 -- Css -- 字体的几个属性学习

    font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...

  7. CSS字体属性

    CSS字体属性 CSS Fonts(字体)属性拥有定义字体系列.大小.粗细和文字样式(如斜体) 字体系列 <style type="text/css"> div{ fo ...

  8. 3.CSS字体属性

    CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体) 3.1字体系列 CSS使用font-family属性定义文本字体系列 p { font-family:'微软雅黑' ;} ...

  9. CSS字体属性与文本属性

    CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...

随机推荐

  1. JDK源码之StringBuffer与StringBuilder类分析

    一 概述 StringBuffer类被 final 所修饰,不能被继承,StringBuffer继承了AbstractStringBuilder类, 是一个可变的字符序列,并且类中方法都有synchr ...

  2. SpringBoot学习(2) - 自定义starter

    自己开发一个spring boot starter的步骤1.新建一个项目(全部都基于maven),比如新建一个spring-boot-starter-redis的maven项目 pom.xml: &l ...

  3. 读取纯真IP数据库

    #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <stdli ...

  4. 教你5分钟做个手机APP[视频]

    天天宅在家里,没什么事做,录个教学视频吧! 发到了视频网站上去根本没人看,伤心ing啊! 不知cnblogs上面是否让我发! 先上一张效果图看看哈: 如果播放不正常请点这里:https://www.b ...

  5. random模块学习笔记

    import random #生成随机浮点数(0到1,没有参数) rf1= random.random() #生成随机浮点数(指定区间) rf2=random.uniform(1,4) #浮点数保留指 ...

  6. Go语言实现:【剑指offer】合并两个排序的链表

    该题目来源于牛客网<剑指offer>专题. 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. Go语言实现: //递归 func merge(l ...

  7. 从Golang中open的实现方式看Golang的语言设计

    Golang有很多优点: 开发高效:(C语言写一个hash查找很麻烦,但是go很简单) 运行高效:(Python的hash查找好写,但比Python高效很多) 很少的系统库依赖:(环境依赖少,一般不依 ...

  8. Property - 特性(Python)

    Property - Python 特性 不同的书籍对 property 一词的翻译有所不同, 我们将 property 翻译成 '特性' 以区别于 attribute 一词. 先看看 propert ...

  9. 使用GitHub+Travis-CI+Docker打造自动化流水线

    全文采用的是阿里云的ESC服务器,系统是CentOS 7 示例项目是NodeJS编写,本文主要是Docker的使用,在文章前2/3都是Docker命令介绍,最后我们会完成一个自动化的示例. 准备 注册 ...

  10. LwIP的udp学习笔记

    * Bind an UDP PCB. * * @param pcb UDP PCB to be bound with a local address ipaddr and port. * @param ...