前言
2017-百度前端技術學院編碼任務：通過HTML及CSS模擬報紙排版
任務目的
- 深入掌握CSS中的字體、背景、顏色等屬性的設置
- 進一步練習CSS布局
任務描述
- 參考 PDS設計稿（點擊下載），實現頁面開發，要求實現效果與 樣例（點擊查看） 基本一致
- 頁面中的各字體大小，內外邊距等可參看 標注圖（點擊查看）
- 頁面寬度固定（定寬）
實現
字體
-
font
簡寫字體屬性
/* font簡寫聲明順序：style | variant | weight | size/line-height | family */
-
font-style
定義字體風格
.normal {
font-style: normal; //選擇 font-family常規字體
}
.italic {
font-style: italic; //選擇斜體，如果當前字體沒有可用的斜體版本，會選用傾斜體（oblique ）替代
}
.oblique {
font-style: oblique; //選擇傾斜體，如果當前字體沒有可用的傾斜體版本，會選用斜體（ italic ）替代
}
-
font-variant
定義小型大寫字母的字體
p.small
{
font-variant:small-caps; //設置為小型大寫字母的字體
}
-
font-weight
定義字體的粗細
/* normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
100
200
300
400
500
600
700
800
900
定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。
*/
p.normal {font-weight:normal;} //默認正常
p.thick {font-weight:bold;} //字體為粗體
p.thicker {font-weight:900;} //可設置數字，由小到大設置粗細
-
font-size
定義字體的尺寸
/*
smaller 把 font-size 設置為比父元素更小的尺寸。
larger 把 font-size 設置為比父元素更大的尺寸。
length 把 font-size 設置為一個固定的值。
% 把 font-size 設置為基于父元素的一個百分比值。
*/
h1 {font-size:18px;}
h2 {font-size: smaller;}
p {font-size: larger;}
-
font-family
定義元素的字體系列
瀏覽器會使用識別的第一個字體系列，如果沒有就使用瀏覽器默認字體
/*amily-name
generic-family
用于某個元素的字體族名稱或/及類族名稱的一個優先表。
默認值：取決于瀏覽器。*/
p
{
font-family:"Times New Roman",Georgia,Serif;
}
背景
-
background
簡寫背景屬性
background-size
這個屬性的定義必須在 <position> 之后, 并使用 '/' 符號分隔
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
設置背景顏色
/**
color_name 規定顏色值為顏色名稱的背景顏色（比如 red）。
hex_number 規定顏色值為十六進制值的背景顏色（比如 #ff0000）。
rgb_number 規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）。
transparent 默認。背景顏色為透明。
**/
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
-
background-position
設置元素背景圖片的位置
默認左上角
- 關鍵詞：left,top
- 百分比：25%，50%，如果只設置一個值，另外自動為50%
- 像素：24px,40px,
-
background-size
設置元素背景圖片的尺寸
background-size: length|percentage|cover|contain;
length: 固定的像素
percentage：百分比設置
cover：縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見
contain：縮放背景圖片以完全裝入背景區，可能背景區部分空白
-
background-repeat
設置背景圖片的平鋪模式
repeat 默認。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
-
background-origin
background-origin 屬性規定 background-position 屬性相對于什么位置來定位。
padding-box
(默認)背景圖像相對于內邊距框來定位。
border-box
背景圖像相對于邊框盒來定位。
content-box
背景圖像相對于內容框來定位。
-
background-clip
設置背景的繪制區域
border-box
(默認)背景被裁剪到邊框盒。
padding-box
背景被裁剪到內邊距框。
content-box
背景被裁剪到內容框。
-
background-attachment
設置背景圖片是否固定或者隨著頁面滾動
scroll 默認值。背景圖像會隨著頁面其余部分的滾動而移動。
fixed 當頁面的其余部分滾動時，背景圖像不會移動。
-
background-image
設置元素的背景圖片
url('URL') 指向圖像的路徑。
none 默認值。不顯示背景圖像。
顏色
<color>
三種方式描述顏色
- 關鍵字：red
- RGB系統： rgb(255,0,51) rgba(255,0,51,.5)
- HSL系統：hsl(240,100%,50%)或hsla(240,100%,50%,0.05)
currentColor 關鍵字
表示和當前元素的color一樣的顏色
文本
-
text-indent
文本縮進
length 定義固定的縮進。默認值：0。
% 定義基于父元素寬度的百分比的縮進。
// 文本縮進2字符
text-indent：2em;
em默認父元素字體大小的倍數，
-
text-align
規定文本水平對齊方式
left 把文本排列到左邊。默認值：由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
justify 實現兩端對齊文本效果。
-
word-spacing
字（單詞）間距；
象形文字的語言或非羅馬書寫體往往無法指定字間隔，注意對中文無效
normal 默認。定義單詞間的標準空間。
length 定義單詞間的固定空間。
p
{
word-spacing:25px;
}
-
letter-spacing
字母間距
與word-spacing類似，區別在于它是對字母或單個字符產生影響
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
-
text-transform
文本大小寫
none 默認。定義帶有小寫字母和大寫字母的標準的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。
-
text-decoration
文本的裝飾
- 一個規則中結合多種裝飾
- text-decoration屬性是一種簡寫屬性，并且可以使用普通屬性三個值中的任何一個。普通屬性如下：text-decoration-line
，text-decoration-color和text-decoration-style
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
blink 定義閃爍的文本。
-
white-space
處理元素內的空白
normal 默認?？瞻讜粸g覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合并空白符序列，但是保留換行符。
-
direction
屬性規定文本的方向 / 書寫方向
ltr 默認。文本方向從左到右。
rtl 文本方向從右到左。
問題
- 首行字母大寫的長寬過大，布局變形
解答：利用偽元素 first-letter 針對整體第一行的首字母進行處理
/* 使每段開頭的第一個字母變紅變大 */
p::first-letter { /* 使用:first來兼容IE8- */
color: red;
font-size: 130%;
}
