前言

2017-百度前端技術(shù)學(xué)院編碼任務(wù)：通過(guò)HTML及CSS模擬報(bào)紙排版

任務(wù)目的

• 深入掌握CSS中的字體吐辙、背景派撕、顏色等屬性的設(shè)置
• 進(jìn)一步練習(xí)CSS布局

任務(wù)描述

• 參考 PDS設(shè)計(jì)稿（點(diǎn)擊下載）关摇，實(shí)現(xiàn)頁(yè)面開發(fā)屑埋，要求實(shí)現(xiàn)效果與 樣例（點(diǎn)擊查看） 基本一致
• 頁(yè)面中的各字體大小奶赔，內(nèi)外邊距等可參看 標(biāo)注圖（點(diǎn)擊查看）
• 頁(yè)面寬度固定（定寬）

實(shí)現(xiàn)

DEMO

項(xiàng)目地址

字體

• font
  簡(jiǎn)寫字體屬性

 /* font簡(jiǎn)寫聲明順序：style | variant | weight | size/line-height | family */

• font-style
  定義字體風(fēng)格

.normal {
  font-style: normal; //選擇 font-family常規(guī)字體
}
.italic {
  font-style: italic; //選擇斜體惋嚎，如果當(dāng)前字體沒有可用的斜體版本，會(huì)選用傾斜體（oblique ）替代
}
.oblique {
  font-style: oblique; //選擇傾斜體站刑，如果當(dāng)前字體沒有可用的傾斜體版本另伍，會(huì)選用斜體（ italic ）替代
}

• font-variant
  定義小型大寫字母的字體

p.small
  {
  font-variant:small-caps; //設(shè)置為小型大寫字母的字體
  }

• font-weight
  定義字體的粗細(xì)

/* normal   默認(rèn)值。定義標(biāo)準(zhǔn)的字符绞旅。
bold    定義粗體字符摆尝。
bolder  定義更粗的字符。
lighter 定義更細(xì)的字符因悲。
100
200
300
400
500
600
700
800
900
定義由粗到細(xì)的字符堕汞。400 等同于 normal，而 700 等同于 bold晃琳。
*/
p.normal {font-weight:normal;} //默認(rèn)正常
p.thick {font-weight:bold;}         //字體為粗體
p.thicker {font-weight:900;}      //可設(shè)置數(shù)字讯检，由小到大設(shè)置粗細(xì)

• font-size
  定義字體的尺寸

/*
smaller 把 font-size 設(shè)置為比父元素更小的尺寸。
larger  把 font-size 設(shè)置為比父元素更大的尺寸卫旱。
length  把 font-size 設(shè)置為一個(gè)固定的值人灼。
%   把 font-size 設(shè)置為基于父元素的一個(gè)百分比值。
*/
h1 {font-size:18px;}
h2 {font-size: smaller;}
p {font-size: larger;}

• font-family
  定義元素的字體系列

瀏覽器會(huì)使用識(shí)別的第一個(gè)字體系列顾翼，如果沒有就使用瀏覽器默認(rèn)字體

/*amily-name
generic-family
用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表投放。
默認(rèn)值：取決于瀏覽器。*/

p
  {
  font-family:"Times New Roman",Georgia,Serif;
  }

背景

• background
  簡(jiǎn)寫背景屬性

background-size
這個(gè)屬性的定義必須在 <position> 之后, 并使用 '/' 符號(hào)分隔

background-color
background-position/background-size
background-repeat
background-origin
background-clip
background-attachment
background-image 

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

• background-color
  設(shè)置背景顏色

/**
color_name  規(guī)定顏色值為顏色名稱的背景顏色（比如 red）暴构。
hex_number  規(guī)定顏色值為十六進(jìn)制值的背景顏色（比如 #ff0000）跪呈。
rgb_number  規(guī)定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）段磨。
transparent 默認(rèn)。背景顏色為透明耗绿。
**/
body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

• background-position
  設(shè)置元素背景圖片的位置

 默認(rèn)左上角
- 關(guān)鍵詞：left,top
- 百分比：25%苹支，50%，如果只設(shè)置一個(gè)值误阻，另外自動(dòng)為50%
- 像素：24px,40px,     

• background-size
  設(shè)置元素背景圖片的尺寸

background-size: length|percentage|cover|contain;
length: 固定的像素
percentage：百分比設(shè)置
cover：縮放背景圖片以完全覆蓋背景區(qū)债蜜，可能背景圖片部分看不見
contain：縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白

• background-repeat
  設(shè)置背景圖片的平鋪模式

repeat  默認(rèn)究反。背景圖像將在垂直方向和水平方向重復(fù)寻定。
repeat-x    背景圖像將在水平方向重復(fù)。
repeat-y    背景圖像將在垂直方向重復(fù)精耐。
no-repeat   背景圖像將僅顯示一次狼速。

• background-origin
  background-origin 屬性規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位。

padding-box
(默認(rèn))背景圖像相對(duì)于內(nèi)邊距框來(lái)定位卦停。

border-box
背景圖像相對(duì)于邊框盒來(lái)定位向胡。

content-box
背景圖像相對(duì)于內(nèi)容框來(lái)定位。

• background-clip
  設(shè)置背景的繪制區(qū)域

border-box
(默認(rèn))背景被裁剪到邊框盒惊完。

padding-box
背景被裁剪到內(nèi)邊距框僵芹。

content-box
背景被裁剪到內(nèi)容框。

• background-attachment
  設(shè)置背景圖片是否固定或者隨著頁(yè)面滾動(dòng)

scroll  默認(rèn)值小槐。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)拇派。
fixed   當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)凿跳。

• background-image
  設(shè)置元素的背景圖片

url('URL')  指向圖像的路徑件豌。
none    默認(rèn)值。不顯示背景圖像拄显。

顏色

<color>
三種方式描述顏色

• 關(guān)鍵字：red
• RGB系統(tǒng)： rgb(255,0,51) rgba(255,0,51,.5)
• HSL系統(tǒng)：hsl(240,100%,50%)或hsla(240,100%,50%,0.05)

currentColor 關(guān)鍵字
表示和當(dāng)前元素的color一樣的顏色

文本

• text-indent
  文本縮進(jìn)

length  定義固定的縮進(jìn)苟径。默認(rèn)值：0。
%   定義基于父元素寬度的百分比的縮進(jìn)躬审。

// 文本縮進(jìn)2字符
text-indent：2em;
em默認(rèn)父元素字體大小的倍數(shù)，

• text-align
  規(guī)定文本水平對(duì)齊方式

left    把文本排列到左邊蟆盐。默認(rèn)值：由瀏覽器決定承边。
right   把文本排列到右邊。
center  把文本排列到中間石挂。
justify 實(shí)現(xiàn)兩端對(duì)齊文本效果博助。

• word-spacing
  字（單詞）間距；

象形文字的語(yǔ)言或非羅馬書寫體往往無(wú)法指定字間隔痹愚，注意對(duì)中文無(wú)效

normal  默認(rèn)富岳。定義單詞間的標(biāo)準(zhǔn)空間蛔糯。
length  定義單詞間的固定空間。
p
  {
  word-spacing:25px;
  }

• letter-spacing
  字母間距

與word-spacing類似窖式，區(qū)別在于它是對(duì)字母或單個(gè)字符產(chǎn)生影響

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

• text-transform
  文本大小寫

none    默認(rèn)蚁飒。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。
capitalize  文本中的每個(gè)單詞以大寫字母開頭萝喘。
uppercase   定義僅有大寫字母淮逻。
lowercase   定義無(wú)大寫字母，僅有小寫字母阁簸。

• text-decoration
  文本的裝飾

• 一個(gè)規(guī)則中結(jié)合多種裝飾
• text-decoration屬性是一種簡(jiǎn)寫屬性爬早，并且可以使用普通屬性三個(gè)值中的任何一個(gè)。普通屬性如下：text-decoration-line
  启妹，text-decoration-color和text-decoration-style

none    默認(rèn)筛严。定義標(biāo)準(zhǔn)的文本。
underline   定義文本下的一條線饶米。
overline    定義文本上的一條線桨啃。
line-through    定義穿過(guò)文本下的一條線。
blink   定義閃爍的文本咙崎。

• white-space
  處理元素內(nèi)的空白

normal  默認(rèn)优幸。空白會(huì)被瀏覽器忽略褪猛。
pre 空白會(huì)被瀏覽器保留网杆。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。
nowrap  文本不會(huì)換行伊滋，文本會(huì)在在同一行上繼續(xù)碳却，直到遇到 <br> 標(biāo)簽為止。
pre-wrap    保留空白符序列笑旺，但是正常地進(jìn)行換行昼浦。
pre-line    合并空白符序列，但是保留換行符筒主。

• direction
  屬性規(guī)定文本的方向 / 書寫方向

ltr 默認(rèn)关噪。文本方向從左到右。
rtl 文本方向從右到左乌妙。

問題

• 首行字母大寫的長(zhǎng)寬過(guò)大使兔，布局變形
  解答：利用偽元素 first-letter 針對(duì)整體第一行的首字母進(jìn)行處理

/* 使每段開頭的第一個(gè)字母變紅變大 */

p::first-letter {  /* 使用:first來(lái)兼容IE8- */
  color: red; 
  font-size: 130%; 
}

查看鏈接

• CSS 文本
• CSS 背景
• CSS 字體
• color