任務目的
- 深入掌握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