前端HTML+CSS之网页排版（三）

    在对HTML和CSS有了一定的了解和结构之后，我们需要知道真正在网页排版中如何设定其属性值，如何得到我们想要的字体，文本以及背景属性的设置

    在正式说网页排版之前，由于我们需要在对每次代码修改之后看一下页面效果，每次自动刷新页面会比较的麻烦，所以我们有一个小技巧，在网页中
菜单栏 – 工具 – 自动刷新 – 勾选5秒
这样页面就会自动每过5秒刷新一次

---

一、字体属性

字体包括字体的风格，粗细，大小，文本行高属性

字体风格

其格式为：

font-style: normal | italic | oblique | inherit ;

属性值	描述
normal	默认值，标准字体风格
italic	斜体字体
oblique	倾斜的字体
inherit	继承父级字体的风格

字体粗细

设置语法为：

font-weigth: normal | bold | bolder | number | inherit;

属性值	描述
normal	默认值，标准字体粗细
bold	粗字体
bolder	更粗字体
lighter	继承父级字体的风格
100 200 300 … 900	由细到粗字体，400相当于normal，700相当于bold
inherit	继承父级字体粗细

字体大小

设置语法为：

font-size: medium | length | 百分数 | inherit ;

属性值	描述
medium	浏览器默认值，大小为16px， 若父元素也没设置字体大小，则使用该值
length	某个固定大小，常用单位为px(像素)，em和pt(点)
%	相对值，基于父元素或默认值的一个百分比值
inherit	继承父级字体的尺寸

在具体的应用中，单位对于设定字体有重要的作用

• px
  主要电脑屏幕媒体，一个像素为电脑上的一个点
  像素为固定大小的单元，不具有伸缩性
• pt
  用于印刷媒体，一个点等于一英寸的1/72，不具可伸缩性
• em
  用于web媒体，是相对长度单位，相对于父元素或默认值，可伸缩，适用移动设备

字体族属性

设置语法为：

font-family: 字体族1, 字体族2, 字体族3..通用字体族 | inherit ; 

属性值	描述
字体族1, 字体族2, 字体族3…通用字体族	值为1或1个以上的字体系列，默认字体由浏览器决定
inherit	继承父级字体系列

额外补充：
西方国家罗马字体分为sans-serif（无忖线体）和serif（忖线体），而sans-serif在显示器的显示效果更好，因此在设置的时候一般在末尾添加sans-serif
e.g.

font-family: tahoma, "Times New Roman", "微软雅黑", "宋体", "黑体",sans-serif ;

文本行高

即ine-height属性，即上下文的行间距，其不能为负数
设置语法为：

line-height: noraml | number | length | 百分数 | inherit

属性值	描述
noraml	默认值，行间距为当前字体大小的110%-120%
number	不带任何单位的数字，行间距等于此数字与当前字体尺寸相乘的效果，效果等效为em单位
length	以px
%	相当于当前字体大小的行间距，100%的行间距等于当前字体尺寸
inherit	继承父级元素的line-height属性

---

二、文本属性

修改文本的颜色，行高，对齐方式，字符间距，段首缩进位置

颜色属性

设置的为文本颜色
其语法为：

color: 颜色英文单词 | 颜色的十六进制数 | 颜色RGB值 | inherit;

属性值	描述
颜色英文单词	例如：red(红色)，blue（蓝色）等
颜色的十六进制数	使用#加16进制数表颜色，例如红色 #ff00000，也可简写为#F00,(前提是两两分组数字相同)，同时注意不区分大小写
颜色RGB值	例如红色为rgb(255, 0, 0)
inherit	继承父级元素的颜色

扩展
由于我们使用的是PS作为图片编辑器，其拾色器中的集中颜色表示就得清楚

模式	描述
HSB模式	色相，饱和度，亮度来表示颜色，H为色相，S为饱和度，B为亮度
Lab模式	明度，色彩通道表示亮度，L表示明度，a和b表示色相通道，其产生的颜色较明亮
RGB模式	红，绿，蓝三种颜色混合色来表示，R为红，G为绿，B为蓝，其各个值范围为(0~255)
CMYK模式	使用青色，洋红色，黄色和黑色来表示颜色，C为青色，M为洋红色，Y为黄色，K为黑色

有时我们会遇见像RGBA的描述
其中最后一个A代表alpha(透明度)，alpha决定透过这个图像的像素，就是你可以看到多少背景
如果颜色的alpha为0，为不论RGB为多少，该颜色均不可见
e.g.全红表示(255,0, 0,255)
全绿为(0,255,0,255)

水平对齐属性

设置语法为：

text-align: left | right | center | inherit ;

即左对齐，右对齐，居中对齐或继承父元素的值

首行缩进属性

设置每段文本的首行字符的缩进距离，允许属性值为负，文字被缩到左边

text-indent: length | % | inherit ;

属性值	描述
length	某个具体的值，单位为px/pt/em，默认值为0
%	相当于父级元素宽度的百分比
inherit	继承父级的属性值

文本修饰属性

显示文本是否显示下划线或上划线或删除线等修饰样式，设置语法为：

text-decoration: none | underline | overline | line-through | inherit ;

属性值	Value
none	无任何修饰
underline	显示下划线
overline	显示上划线
line-through	显示删除线
inherit	继承

字符间距属性

增加或减少字符与字符之间的间隔

letter-spacing: normal | length | inherit ;

normal为正常默认值，length 仍以px/pt/em为单位，可为负数，inherit继承

字间距属性

增加或减少单词与单词之间的及间隔

word-spacing: normal | length | inherit ;

---

三、背景属性

背景颜色属性

设置的语法为：

background -color: 颜色英文单词 | 颜色的十六进制 | 颜色的RGB | transparent | inherit ;

背景图片属性

background-image: url(image_file_path) | inherit ;

属性值	描述
url(image_file_path)	参数用来指定背景图片的路径
inherit	继承父元素的属性

背景图片重复属性

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit ;

即设定在
水平垂直方向均重复
或只在水平方向
或只在垂直方向
或只显示一次
或继承父元素

背景图片位置属性

元素的背景图片都是从左上角显示的，如果希望从特定的位置开始显示

background-position: 表示位置的关键字 | x% y% | xpos ypos ;

表示位置的关键字有
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

x y 分别表示水平位置和垂直位置，偏移量为相对于元素的宽度和背景图片宽度之差的百分数

xpos ypos 默认值为0 0 （表示元素边框内的左上角），偏移量是相对于左上角的一个数值，单位为px/em，为正则为从左往右或从上往下，为负则反之

背景图片滚动属性

默认情况下背景图片会随页面的滚动条滚动

background-attachment: scroll | fixed | inherit ;

属性值	描述
scroll	默认值，背景图片随页面滚动条而滚动
fixed	页面滚动条滚动时，背景图片不会动
inherit	继承父级元素

---

在进行了上述的学习，我们已经能做一个简单的界面了，我们可以自己动手创作一个自己喜欢的界面
像设计一个这样的网页和优惠券，你可能最开始只能将其设定在左上角而不能控制整个居中，故这就涉及到我们下一节的盒子模型了

该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第三篇HTML+CSS学习笔记到此结束 cheers! ?