第6章 文本格式化

1、  使用字体

字体font-family:

通用的字体样式:

  • serif字体最适用于冗长的文字信息。这种字体使字母主笔画的结尾处会有一些细小的“足”。
  • sans-serif字体经常用在标题上。
  • monospaced(等宽)字体经常用于显示计算机代码。

2、  使用Web字体

Web字体的CSS部分很简单,只需要两个CSS命令

  • @font-face指令负责告诉Web浏览器字体的名称以及到哪里去下载这种字体。
  • font-family属性定义Web字体的方式。一旦@font-face指令指示浏览器去下载字体,你就可以利用font-family属性在任何CSS样式中设置该字体了。

@font-face {

font-family: " PTSansRegular ";        给字体进行命名

src: url('fonts/PTSansRegular.eot');

url('fonts/ PTSansRegular.eot?#iefix')  format('embedded-opentype') ;

url('fonts/ PTSansRegular t.woff')  format('woff'),

url('fonts/ PTSansRegular.ttf')  format('ttf'),

url('fonts/ PTSansRegular.svg')  format('svg'),

font-weight: bold;

font-family: italy;

}

3、  给文本添加颜色color

4、  修改字号font-size

5、  格式化词语和字母

  • 斜体化font-style
  • 粗体化font-weight
  • 大写化text-transform
  • 小型大写字母font-variant: small-caps;
  • 文本的修饰text-decoration
  • 字母间距letter-spacing
  • 字词间距word-spacing

6、  给文本添加阴影text-shadow

7、  格式化整个段落

  • 调整行间距line-height
  • 对齐文本text-align
  • 首行缩进text-indent
  • 可以利用margin-top和margin-bottom属性控制段落间的距离
  • 格式化段落的首字母和首行,可以利用伪元素:first-letter和:first-line

8、  给列表定义样式

  • 列表的类型list-style-type
  • 利用list-style-position属性控制项目符号的位置,也可以让项目符号显示在文本之外或文本之内。
  • 图形项目符号list-style-image

第7章 margin、padding和border

1、  理解盒模型

对于Web浏览器而言,任何标签都是里面装有东西的盒子,包括文本、图片或者包含别的东西的其他标签。

内容的周围通常环绕着装饰盒子的不同属性:

  • padding是指内容与其边框线之间的空间。
  • border是指盒子周围的直线。
  • background-color是用来填充边框内部空间的,包括padding区域。
  • margin是指一个标签和另一个标签之间的间隔。

2、  用margin和padding控制空间

当元素的bottom margin碰到另一个元素的top margin时,此时浏览器不是把这两个边距相加,而是应用它们中较大的一个。这种现象称为“collapsing margin(边距折叠)”。

CSS有两种不同的盒子类型:block box(块级盒子)和inline box(行内盒子)。它们分别对应于两个标签类型:块级标签和行内标签。

display: inline可以使块级元素像行内元素一样,反之display: block可以使行内元素像块级元素一样。

3、  添加边框border

每个border都通过这3个不同的属性进行控制:color(颜色)、width(宽度)和style(样式)。

4、  设置背景色background-color

在使用border-radius和border时要切记,Web浏览器实际上把背景色显示在边框的下方。

5、  创建圆角border-radius

通过提供单个值,或者两个以/隔开的值,可以创建出圆角或者椭圆角。

只接受一个值,它就会将这个值应用给一个元素的所有4个角。

也可以接受四个值,按顺序:左上角、右上角、右下角、左下角设置四个不同的角。

IE8及其更早的版本不支持border-radius属性,因此将显示为方形角。此外,iOS的Safari 3.2和Android Browser 2.1需要用供应商前缀-webkit-

6、  给元素的边界框添加阴影box-shadow

box-shadow属性的基本语法,包括4个参数,分别为:

  • 水平偏移量(正值是将阴影移动到右边,负值是将阴影移到左边);
  • 垂直偏移量(正值是将阴影放在方框的底边下方,负值则是将阴影移到方框顶边的上方);
  • 阴影的半径,它决定阴影的模糊度和宽度。值为0时,完全不模糊,因此阴影的边沿十分清晰。这个值越大,阴影就会越模糊,并且更宽;
  • 阴影的颜色。

box-shadow属性还包括两个可选的值:inset关键字和阴影的尺寸(spead):

  • 关键字inset告诉浏览器要将阴影画在方框内部。如果将inset作为box-shadow的第一个值,将会创建一个嵌入式阴影。
  • 还可以添加一个阴影尺寸作为第4个值(在阴影半径和阴影颜色之间)。阴影的尺寸会将阴影扩展指定的值,这个值还表示什么时候要应用模糊半径。

7、  确定高度和宽度

height和width属性是构成部分CSS盒模型的另外两个属性。

计算相关元素盒子的实际宽度时,要把margin、border、padding和width属性值全部加起来。计算元素在屏幕中占据的高度也一样。

CSS3还提供了一个属性,可以让你修改浏览器计算元素的屏幕宽度(和高度)的方法。box-sizing属性提供了以下3个选项:

  • content-box选项:浏览器会将border宽度和padding厚度与width和height属性值相加,来确定该标签的屏幕宽度和高度。
  • padding-box选项:是告诉浏览器,当你在一个样式中设置了width或者height属性时,它就应该包含padding作为该值的一部分。
  • border-box值中包含了padding厚度和border厚度,将它作为width和height值的一部分。

Firefox不支持标准的属性名称,因此需要使用供应商前缀版本;对于iSO的旧版Safari以及Android(版本3及其更早)也是如此。

box-sizing属性甚至适用于IE 8及其更新的版本,但IE 7不支持这个属性。

用overflow属性控制溢出文本。用4个关键字来控制溢出盒子边沿的那部分内容该如何显示:visible、scroll、auto、hidden。

高度和宽度的最大化和最小化:

  • max-width属性用于设置元素的最大宽度。这个元素可以比设定值小,但它决不能大于设定值。
  • max-height
  • min-width属性用于设置元素的最小宽度。元素可以扩展宽度到超过最小宽度值,但是永远不会小于这个宽度值。
  • min-height

8、  用浮动元素包围内容

float属性可以把元素移动到左边或者右边。它的选项有3种:left、right或none。

background和border不能像其他网页元素一样浮动。因此,可以给设置了浮动下方跑动的背景图片或边框的样式添加一条规则overflow:hidden; ,可以让任何延伸到浮动下方的背景和边框消失。

clear(清除)属性会指示元素不要包围浮动项目。清除元素时,本质上是迫使它落到浮动项目的下方。有以下选项:left、right、both和none。

第8章 给网页添加图片

1、  以下是一些经常用来处理图片的CSS属性:border(边框)、padding(填充)、float(浮动)、margin(边距)。

2、  添加背景图片background-image

3、  控制重复

如果单独使用background属性,图片将总是平铺,填满网页的整个背景。可以利用background-repeat属性指定图片要如何平铺(或者根本不平铺),该属性接受这4个值:repeat、no-repeat、repeat-x、repeat-y。

4、  定位背景图片

background-position属性允许你以很多种方式来精准控制图片的位置。你可以通过3种不同的方法来设定图片在水平方向和垂直方向的起点,它们分别是keyword(关键字)、精准值和percentage(百分比)。

固定图片background-attachment。它有两个选项:

  • scroll是Web浏览器的默认做法,即背景图片会随着文本和其他网页内容一起滚动。
  • fixed是把图片保持在背景中的某个固定位置上。

可以利用background-origin属性调整图片的起点,它告诉浏览器应该在相对某个元素的边框、边距或内容的什么位置开始显示北京图片。它的值有3个选项:

  • border-box是将图片放在border区域的左上角
  • padding-box是将图片放在padding区域的左上角
  • content-box是将图片放在内容区域的左上角

当然,这个设置与元素周围是否有border或padding无关。

一般来说,背景图片会铺满某个元素的整个区域,包括border和padding区域的背面。通过background-clip属性可以限制背景图片的显示区域。有3个选项:

  • border-box是让图片显示在内容区域的背后,包括border区域的背面。(默认)
  • padding-box是所有背景图片都只能显示到元素的padding区域和内容区域。
  • content-box限制背景图片只显示在内容区域。

background-origin或background-clip属性在IE 8及其更早的版本中均不起作用。

CSS3中增加了一个background-size属性,它可以让你控制背景图片的尺寸。

5、  利用background快捷属性

实际上可以将所有的background属性合并成一行background:

background-color background-image background-position background-repeat background-attachment

可以不用全部设定这些属性值,而只利用其中一个或任意几个属性的组合。

6、  使用多个背景图片

CSS3允许在一个元素的背景中添加多张图片。

对于多张背景图片,只需要使用background-image属性,并带有一个用逗号隔开的图片列表即可。

你还可以添加其他背景属性(如background-repeat属性),同样以逗号隔开各个值即可。

也可以采用快捷方法来指定多张图片。

7、  使用渐变色背景

可以用普通的background-image属性创建渐变效果。渐变的类型有以下几种可以选择:

  • 线性渐变linear-gradient()
  • 重复线性渐变repeating-linear-gradient()
  • 径向渐变radial-gradient()
  • 重复径向渐变repeating-radial-gradient()

对于渐变,需要在属性名称前面再添加一个供应商前缀。令人遗憾的是,必须针对每一款浏览器都编写一个声明。

IE 9及其更早的版本不支持渐变,因此最好要添加一种备用的背景色。

《CSS3秘籍》(第三版)-读书笔记(2)的更多相关文章

  1. Linux设备驱动程序 第三版 读书笔记(一)

    Linux设备驱动程序 第三版 读书笔记(一) Bob Zhang 2017.08.25 编写基本的Hello World模块 #include <linux/init.h> #inclu ...

  2. effective java(第三版)---读书笔记

    第一章 引言 < Effective Java>这本书并不厚,而且并不适合初学者,适合有一定的工作经验的java攻城狮.这本书不是百科全书式的JAVA 手册,而是试图在讲述如何正确.高效地 ...

  3. javaScript高程第三版读书笔记

    看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...

  4. 《ECMAScript6标准入门》第三版--读书笔记

    2015年6月,ECMAScript 6正式通过,成为国际标准.尽管在目前的工作中还没有使用ES6,但是每项新技术出来总是忍不住想尝尝鲜,想知道ES6能为前端开发带来哪些变化?对自己的工作有哪些方面可 ...

  5. JavaScript高级程序设计第三版-读书笔记(1-3章)

    这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript   提供核心语言功能 DOM     提供访问 ...

  6. CSS权威指南-第三版--读书笔记

    第一章:CSS和文档 html是结构化语言,css是样式语言,html主要用来被强大的搜索引擎更好的索引,更好的让一个盲人通过语音浏览器来了解我们的网页,这也就是为什么说html是结构话语言,因为这是 ...

  7. CLR.via.C#第三版 读书笔记

    第一章 CLR的执行模型 1.1将源代码编译成托管代码 决定将.NET Framework作为自己的开发平台之后,第一步是决定要生成什么类型的应用程序或组件.假定你已经完成了这些次要的细节:一切都已经 ...

  8. 9Andrew.S.Tanenbaum计算机网络第三版读书笔记-总体概览

  9. 高性能mysql第三版读书笔记3

    innodb以前不支持高并发,在搞病房下就是悲剧,全部卡在mutex(缓冲池mutex)上,现在通过线程调度器控制线程怎么进入内核访问数据,参数为innodb_thread_concurrency,它 ...

  10. LINUX内核设计与实现第三周读书笔记

    LINUX内核设计与实现第三周读书笔记 第一章 LINUX内核简介 1.1 Unix的历史 1969年的夏天,贝尔实验室的程序员们在一台PDR-7型机上实现了Unix这个全新的操作系统. 1973年, ...

随机推荐

  1. android的ArrayMap类

    运行的时候出现: java.lang.NoClassDefFoundError: android.util.ArrayMap http://stackoverflow.com/questions/24 ...

  2. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  3. [Spring MVC] - InitBinder验证

    Spring MVC使用InitBinder验证: 使用InitBinder做验证的情况一般会在此Controller中提交的数据需要有一些是业务性质的,也即比较复杂的验证情况下才会使用.大部份简单的 ...

  4. java程序打包成jar文件,使用到第三方jar包

    1.右击工程选择Export—>选择JAR file—>选择NEXT,如下图所示 2.选择需要打包的工程,并且选择存放目录,我这放在 E:\jartest 目录下,然后点击NEXT,如下图 ...

  5. 用于所有Windows驱动程序开发者的概念

    用户模式和内核模式 虚拟地址空间 设备节点和设备堆栈 I/O 请求数据包 驱动程序堆栈 微型驱动程序和驱动程序对 Windows 驱动程序工具包中的头文件 为不同版本的 Windows 编写驱动程序

  6. BMP图片格式

    BMP图片 BMP采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大.BMP文件的图像深度可选lbit.4bit.8bit及24bit和32bit.BMP文 ...

  7. EL简介

    一.EL简介 1.语法结构    ${expression}2.[]与.运算符    EL 提供.和[]两种运算符来存取数据.    当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字的符 ...

  8. 黑盒测试与白盒测试(Black box Testing)

    黑盒测试和白盒测试的优缺点 类别 优点 缺点 黑盒测试 不需要了解软件代码 从用户角度出发 无法保证代码内各个路径被覆盖到 白盒测试 强制测试开发工程师关注代码的具体实现 揭露隐藏在代码中的Bug 是 ...

  9. sql group by

    group by实例 实例一 数据表: 姓名 科目 分数 张三 语文 80 张三 数学 98 张三 英语 65 李四 语文 70 李四 数学 80 李四 英语 90 期望查询结果: 姓名 语文 数学 ...

  10. "A transport-level error has occurred when sending the request to the server"的解决办法

    http://blog.csdn.net/luckeryin/article/details/4337457 最近在做项目时,遇到一个随机发生的异常:"A transport-level e ...