前端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! ?