通过HTML及CSS模拟报纸排版总结

任务目的

• 深入掌握CSS中的字体、背景、颜色等属性的设置
• 进一步练习CSS布局

任务描述

• 参考 PDS设计稿（点击下载），实现页面开发，要求实现效果与 样例（点击查看） 基本一致
• 页面中的各字体大小，内外边距等可参看 标注图（点击查看）
• 页面宽度固定（定宽）
• 

任务注意事项

• 只需要完成HTML，CSS代码编写，不需要写JavaScript
• 设计稿中的图片、文案均可自行设定
• 在Chrome中完美实现符合标注中的各项说明
• 有能力的同学可以尝试跨浏览器的兼容性
• 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

在线学习参考资料

• MDN HTML入门
• MDN CSS入门教程

通过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