前端零基礎入門 用css設定文字樣式

html搭建結構，承載內容

css則可以利用選擇器，來為相應的html標籤設定樣式

邊框（border）以及 背景（background），有了這兩個傢伙之後我們基本上就能清楚的看到乙個盒子的相貌了，那麼現在我們就可以往裡面新增一些內容了。

最基礎的內容當然是文字，當我們把文字放進標籤裡面之後則可以來**一下該如何去設定文字的樣式了：顏色，大小等等。

文字的設定大體可以分為這兩個個方面

文字樣式：大小，字型，粗細等

文字樣式，所謂文字其實就是很多文字，當涉及的文字比較多的時候，我們又可以設定他們的顏色，對齊方式，修飾等

首先文字樣式，涉及到的屬性有這些

font-weight    文字著重（文字粗細）font-style     文字傾斜（是否傾斜）font-size      文字大小（一般均為偶數）line-height    行高（可以簡單理解為文字占用的高度）font-family    字型（中文預設宋體）

應該還是比較好理解的，上學的時候考試要求用0.5的中性筆，這裡面的這個0.5基本就能確定文字寫出來之後的粗細程度。

而我更喜歡原子筆，尤其是0.28的原子筆，寫出來的文字就會比較纖細，會顯得比較好看。

而在頁面中，文字的粗細我們可能不是很敏感，不過對比一下就能看出來區別了。

當然這是在我電腦上的顯示效果，在大家的電腦上可能效果有些微的區別，不過大體如此。

當然文字的粗細也不是這麼簡單的乙個加粗乙個正常就了事的。

文字的粗細還可以用數字來描述，從100-900之間，用整百來描述文字的粗細，100最細，而900最粗。

看下面的對比圖：

100——300是最細的，

400——500是正常粗細，

600——900則是加粗效果。

而這只是大多數windows電腦的顯示效果，蘋果電腦則會更加細緻一些：

而**上，font-weight可以寫兩種值，一種是英文關鍵字，normal 或者 bold，另一種就是用數字來表示：

pp

文字樣式 font-style

文字的樣式基本上是圍繞著文字是否傾斜來展開，值也很簡單，就三個:

normal（正常） / italic（斜體） / oblique（傾斜）。

在這裡面，normal 沒什麼可說的，現在大家看到的文字就是 font-style 值為 normal 的樣式。

而 italic 樣式一般是指書寫體，相比無樣式的字型，通常會占用較少的高度，而 oblique 字形一般只是常規字形的傾斜版本。

斜體（italic） 和傾斜體（oblique）都是通過人工傾斜常規字型的字形來模擬的。具體看下圖：

從圖中可以看出來 斜體 italic 和傾斜 oblique 的區別並不大（ 當然這只是代表一般普通電腦 ）；

所以一般情況下我們只需要記兩個值：normal 和 italic 就可以了

文字尺寸 font-size

文字尺寸的設定在我們前端日常工作中是比較重要的，如果沒有按照設計稿的大小來設定文字大小，則會導致頁面沒有層次感。

那麼這時候設計師可能就會提著菜刀過來找你咯！效果的話也很明顯，來看看大小對比：

對了，這裡有一點需要提醒一下，那就是當你沒有設定文字尺寸的時候，電腦會有乙個預設的字型尺寸；

這個尺寸是根據你的電腦來的，不同的電腦，不同的系統預設的文字尺寸可能都不一樣，所以最好的做法就是在body身上設定乙個統一的文字尺寸，有特殊需求的地方再另外設定就可以了。

還有一點，表單元素（ 來不及解釋什麼是表單元素了 ）的文字尺寸是必須要單獨設定的；

它們有自己預設的文字尺寸，並不會從父級繼承文字尺寸，這一點要千萬注意哦！

文字字型 font-family

光看這個font-family 可能大家還不太理解這條樣式，不過這調樣式才是最簡單的。

那麼font-family描述的就是這些了。

頁面上的文字到底是用正楷？行楷？草書？當然這些字型顯然無法滿足網際網路時代的需求，所以越來越多的字型會湧現出來。

不過值得注意的是，font-family指定的是乙個優先順序從高到低的可選字型列表，字型的選擇不是在發現使用者計算機上安裝的第乙個字型時停止。

相反，字型的選擇是逐字進行的；

也就是說即使某個字元周圍都在某個字型中可以顯示，但是該字元在當前字型檔案中沒有適合的圖形，那麼會繼續嘗試字型列表中靠後的字型。

比如在上圖中，我設定p標籤為：font-family:arial,"方正舒體"；

在這裡面 arial 這個字型的優先順序是最高的，但是它是乙個英文本型，並沒有包含中文字型；

所以這個時候 p 標籤中的中文會使用優先順序更低的 「方正舒體」，而英文則會使用優先順序更高的 arial 字型。

文字行高 line-height

在前面我們已經把文字的樣式都設定得差不多了，粗細，是否傾斜，多大尺寸，用什麼字型等，而現在還需要做的則是需要對文字的位置進行一定的設定了，而決定一行文字的位置，取決於兩方面：

包含文字的標籤的位置，以及這個標籤的行高。

其實我們可以簡單粗暴的把行高理解成一行文字在頁面中所占用的高度。

一行文字則會在行高中處於居中位置：

當然真實的情況遠遠比這句話要複雜的多，但是今天我並不想深入討論它。

當然了，關於字型還有很多可以說道的，包括font-face字型包的引入等等。

最後，這些樣式可以復合在同乙個屬性：font 中設定。

規則：font:weight style size/line-height family;

如，我想設定一行文字

粗細為：100   

樣式為：斜體

尺寸為：30px

行高為：40px

字型為：微軟雅黑

則可以這麼寫 ：

font:100 italic 30px/40px "微軟雅黑";

當然，在這復合屬性裡面有兩個屬性是必須寫的，那就是 font-size 和 font-family 也就代表了如果這樣寫會報錯：

font:100 italic 30px/40px;

font:30px "微軟雅黑";

零基礎學WEB前端 CSS

css指層疊樣式表 cascading style sheets css 是標準的布局語言，用來控制元素的尺寸 顏色 排版。css 由 w3c 發明，用來取代基於 的布局 框架以及其他非標準的表現方法。樣式 style 定義如何顯示 html 元素 樣式通常儲存於樣式表中 外部樣式表儲存於 css ...

前端零基礎

目前的瀏覽器核心主要有5種 1.ie瀏覽器 internet explorer 2 火狐瀏覽器 firefox 3 谷歌瀏覽器 chrome 4 蘋果瀏覽器 safari 5 歐朋瀏覽器 opera 核心就是瀏覽器的核心，其他的瀏覽器也是基於這5種核心的。utf 8 qqq title head b...

零基礎學習前端

最近也是找了個學校學習前端，將這幾天學到的東西做個小結 下面就是html的基礎筆記了！1.html 全名叫 超文字標記語言 hyper text markup languge html標籤的基本結構 雙標籤 有開始和結束的標籤叫雙標籤，例如 單標籤 只有開始沒有結束的標籤叫單標籤 根節點頭部標籤 標...