文档章节

【css技术指南笔记】 第四章 字体 文本

郑二
 郑二
发布于 2015/03/27 18:54
字数 642
阅读 29
收藏 0

通用字体 font-family

  • serif 衬线字体,在字符笔画的末端会有装饰线

  • san-serif 无衬线字体,笔画末端没有装饰线

  • monospace 等宽字体,每个字符的宽带相等

  • cursive 草书体或手写体

  • fantasy 其他字体,奇形怪状的字体

字体大小 font-size

  • CSS3 新增了一个rem(root em),相对单位,与 em 的区别是:rem 是相对于 HTML 的根元素进行字体大小计算的,em 是根据父元素计算

字体样式 font-style

  • italic / oblique 斜体,在英文中表示强调

  • normal 正常

字体粗细 font-weight

  • bold 粗体

  • normal 正常

字体变化 font-variant

  • normal

  • small-caps 小写字母变大写

简写 font

{font:bold italic small-caps .9em helvetical, arial, sana-serif} 粗、斜体、大写 .9em大小 最后指定三个字体

规则:

  • 必须声明 font-size 和 font-famliy

  • 声明顺便必须如下,大致思想是,首先设定文字的风格、大小,最后是字体

    • font-weight  font-style  font-variant 找三个间不分先后

    • font-size

    • font-family

文本属性

  • 文本缩进 {text-indent:1em} //该属性具有遗传性;1em 为字体宽度,字体不同宽度不同,注意:汉字一个为两个字符;可以设置负值

  • 字符间距 {letter-spacing:.2em} em 为字体宽度

  • 单词间距 {word-spacing:.2em} 调整单词间的距离,对于中、英文来说,都是一样标准:以空格分隔一个单词

  • 文本装饰 {text-decoration:none;}

    • underline:下划线

    • overline:上划线,在文字的上方有条线

    • line-through:划去线,文字中间穿过一条线

    • blink:给文字添加闪动效果(尝试无效果—_—)

  • 文本对齐 {text-align:right;}

    • left、right

    • center 可以使用这个属性来矩阵固定宽度的图片和元素

    • justify 两端对齐,保证两端都有字符,然后平均分布

  • 垂直对齐 {vertical-align:60%;}


  • 行高 {line-height:1.5} 字体大小的1.5倍

    • 简写为 {font:1.2em/1.5 helvetica, arial, sans-serif} //字体为1.2em,行高则是1.2em*1.5

  • 文本转换 {text-transform:none}

    • capitalize 每个单词首字母大小 This Is 

    • uppercase 全大写

    • lowercase 全小写

  • 垂直对齐 {vertical-align:60%},用来实现 H2O 的效果,元素必须为 dispaly:inline

    • 默认的有sub(下标),super(上标),top(元素的顶部与其他的元旦顶部对齐),middle(元素中心与其他元素中间对齐),bottom

    • {vertical-align:-.5em} 下标,往下移动.5个字的宽度

    • {vertical-align:.5em} 上标,往上移动.5个字的宽度

  • {word-wrap:break-word} 在超长单词破坏布局的情况下,讲单词分两行显示(同样适用于长URL)









© 著作权归作者所有

共有 人打赏支持
郑二
粉丝 0
博文 18
码字总数 4318
作品 0
朝阳
程序员
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

Contac
2011/12/02
0
1
前端学习书籍

前端学习书籍 Css 1、CSS时尚编程百例 【内容介绍】 CSS时尚编程百例》超级不错的一本学习CSS的书籍,全部以实例为主讲解如何使用CSS语法、滤镜、高级功能等,百例主要包括最常用的CSS菜单特...

MyDear宸
2017/05/11
0
0
Android--面试中遇到的问题总结(三)

《Android 开发工程师面试指南 LearningNotes 》,作者是陶程,由梁观全贡献部分。大家可以去知乎关注这两位用心的少年。这份指南包含了大部分Android开发的基础、进阶知识,不仅可以帮助准备...

sealin
2017/02/22
0
0
第四章-通过CSS控制字体样式

一.通过CSS控制文本样式: ①设置字体 ②定义行高 {line-height:数值}(例如:{line-height:50px;} ③定义下划线,顶划线,删除线 {text-dec...

湖心亭看雪
2014/10/16
0
0
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

CSS由规则组成,每个规则为选择的HTML元素提供样式。 典型的规则包括一个选择器以及一个或多个属性和值。 选择器指定 规则将应用到哪些元素。 每个属性声明以一个分号结束。 规则中所有属性和...

一万
2016/07/31
36
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx开启stub_status模块配置方法

nginx开启stub_status模块配置方法 2017年12月13日 15:57:29 ly_dengle 阅读数:3765 标签: stub_statusnginxnginx开启stub_status模块 更多 个人分类: 软件工具php 版权声明:本文为博主原...

linjin200
30分钟前
3
0
挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它望而却步,认为它过于复杂而难以理解。同样是 ...

joymufeng
33分钟前
83
0
精通Spring Boot——第十三篇:整合Mybatis多数据源

久违了,最近度过了一段倦怠期,这段时间干什么都没有动力,拖延症复发。好在我回来了.... ——From me . 进入今天的主题——在Spring Boot 项目中整合mybatis多数据源,其实很简单,其实并不...

developlee的潇洒人生
33分钟前
10
0
ADB控制电视盒子备忘

连接 adb connect 192.169.2.111 获取安装软件的列表 adb shell pm list package 删除 adb uninstall cn.uc.test 安装 adb install xxx.apk...

乐_然
41分钟前
3
0
Hadoop生态系统

首先我们先了解一下Hadoop的起源。然后介绍一些关于Hadoop生态系统中的具体工具的使用方法。如:HDFS、MapReduce、Yarn、Zookeeper、Hive、HBase、Oozie、Mahout、Pig、Flume、Sqoop。 Hadoop...

瑞查德-Jack
47分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部