文档章节

【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
第四章-通过CSS控制字体样式

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

湖心亭看雪
2014/10/16
0
0
Android--面试中遇到的问题总结(三)

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

sealin
2017/02/22
0
0
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

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

一万
2016/07/31
36
0

没有更多内容

加载失败,请刷新页面

加载更多

Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
46分钟前
0
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
3
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
6
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部