通过HTML及CSS模拟报纸排版总结
任务目的
- 深入掌握CSS中的字体、背景、颜色等属性的设置
- 进一步练习CSS布局
任务描述
- 参考 PDS设计稿（点击下载），实现页面开发，要求实现效果与 样例（点击查看） 基本一致
- 页面中的各字体大小，内外边距等可参看 标注图（点击查看）
- 页面宽度固定（定宽）
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- 设计稿中的图片、文案均可自行设定
- 在Chrome中完美实现符合标注中的各项说明
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
在线学习参考资料
通过HTML及CSS模拟报纸排版总结
1、 CSS opacity 属性
opacity属性设置元素的不透明度水平。
opacity-level描述透明度水平，1表示完全不透明，0.5表示50%透明，0表示完全透明。
注意：当向父元素的背景添加opacity属性，所有它的子元素也变为透明，若子元素为文本则不容易看清楚，如果不想使子元素透明，使用RGBA颜色值。
语法：
opacity: number|initial|inherit;
属性值：
number：指定不透明度，从0.0到1.0。
initial：设为默认值。
inherit：从父元素继承。
2、 CSS 颜色
（1） CSS颜色分为以下几种：
十六进制颜色
RGB颜色
RGBA颜色
HSL颜色
HSLA颜色
预定义/跨浏览器颜色
（2） 十六进制颜色
所有浏览器均支持十六进制颜色。它被定义为：#RRGGBB，RR表示红，GG表示绿，BB表示蓝，每一个值在00到FF中间。
例如：#0000ff值是蓝色，因为BB被设为最高值ff，其他被设为00。
（3） RGB颜色
所有浏览器均支持十六进制颜色，RGB颜色值被定义为：rgb（red，green，blue），每个参数（red，green，blue）定义颜色的强度，可在0到255中取值，也可使用0%到100%。
例如rgb（0，0，255）是蓝色，因为蓝色参数被设置为最大值（255）并且其他参数被设置为0，此颜色也可用rgb（0%，0%，100%）表示。
（4） RGBA颜色
IE9+，Firfox 3+，Chrome，Safari和Opera 10+支持RGBA颜色。RGBA颜色在RGB颜色基础上增加了alpha通道，来制定元素的不透明度。它被定义为rgba（red，green，blue，alpha），alpha参数是一个从0.0（完全透明）到1.0（完全不透明）。
（5） HSL颜色
IE9+，Firfox，Chrome，Safari和Opera 10+支持HSL颜色，HSL代表色相，饱和度和亮度，并且使用颜色的圆柱坐标表示。HSL颜色值被定义为hsl（hue，saturation，lightness）。Hue代表颜色盘中的度（从0到360），0或360代表红色，120表示绿色，240表示蓝色。Saturation是一个百分比，0%表示灰色，100%表示全色。Lightness也是一个百分比，0%是蓝色，100%是白色。
（6） HSLA颜色
IE9+，Firfox 3+，Chrome，Safari和Opera 10+支持HSLA颜色，它在HSL颜色的基础上增加了alpha通道，用来表示对象的透明度。HSLA颜色被定义为hsla（hue，saturation，lightness，alpha），alpha参数来定义透明度，从0.0（全透明）到1.0（全不透明）之间取值。
3、 段落间距
可通过margin-top，margin-bottom; padding-top，padding-bottom和line-height设置段落间距。
4、 CSS text-decoration属性
text-decoration属性定义添加到文本的装饰。
注意：在CSS3中，text-decoration属性可同时设置：text-decoration-line；text-decoration-color和text-decoration-style，但是目前主流浏览器不支持。
在CSS3中，可使用text-decoration-color属性改变颜色，如果不改，颜色和文本颜色相同。
CSS语法：
text-decoration: none|underline|overline|line-through|initial|inherit;
属性值：
none：定义一个普通文本，默认值。
underline：定义一个下划线。
overline：在文本上定义一条线。
line-through:穿过文本的线。
initial：设为默认值。
inherit：继承父元素属性。
5、 CSS text-decoration-style属性
text-decoration-style属性定义线的展示方式。
CSS语法：
text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
属性值：
solid：默认值，单实线。
double：双线。
dotted：虚线。
dashed：点线。
wavy：波浪线。
initial：设为默认值。
inherit：继承父元素属性。
6、 CSS text-transform 属性
text-transform属性控制文本的大小写。
CSS语法：
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
属性值：
none：不转换为大写，文本按本来的方式展现，默认值。
capitalize：将每单词的第一个字母转为大写。
uppercase：将所有字母转为大写。
lowercase：将所有字母转为小写。
initial：设为默认值。
inherit：继承父元素。
7、 CSS font-variant属性
font-variant属性，定义是否将文本以small-caps字体显示。
small-caps字体，将所有的小写字母转换为大写字母，但是，被转换成的大写字母比正常大写字母的字体要小。
CSS语法：
font-variant: normal|small-caps|initial|inherit;
属性值：
normal：浏览器以正常字体显示，默认值。
small-caps：浏览器以small-caps字体显示。
initial：设为默认值。
inherit：继承父元素属性。
8、 CSS font-style属性
font-style属性定义文本中字体样式。
CSS语法：
font-style: normal|italic|oblique|initial|inherit;
属性值：
normal：浏览器以正常字体样式展示，默认值。
italic：浏览器以斜体字展示。
oblique：浏览器以倾斜字体样式展示。
initial：将属性设为默认值。
inherit：从父元素继承属性值。
9、 段落首字下沉
（1）、选择段落第一个字：
可使用:first-letter伪元素，或使用<span>等标签选中段落第一个字。
（2）、将段落首字字体大小改为比其他字大：
可使用font-size，此时首字比同行其他字高。
（3） 、使用padding将首字降下来。
10、文字上下左或上下右环绕图片
（1）、将图片<img>插入图片上面文字的<p>标签下面。
（2）、图片float：left；或float：right；图片将向左或向右浮动。
（3）、将图片下面的文字<p>设置：clear：both；
11、选择器优先级：
!important > id选择器 > class选择器 > 其他选择器。
12、CSS list-style-image 属性
list-style-image属性将列表项目标记修改为图片。
注意：设置此属性时一定同时设置list-style-type属性，当图片不可用时使用list-style-type。
CSS语法：
list-style-image: none|url|initial|inherit;
属性值：
none：不显示图片，需要设置list-style-type。默认值。
url：列表项目标记的图片路径。
initial：设为默认值。
inherit：继承父元素。
13、已完成作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/tree/master/任务六：通过HTML及CSS模拟报纸排版
Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务六：通过HTML及CSS模拟报纸排版/index.html
