CSS-字體及顏色樣式

一、字體的一些屬性及定義

屬性 定義
font-family 定制頁(yè)面中使用的字體
font-size 控制字體大小
color 控制字體顏色
font-weight 控制字體粗細(xì)
text-decoration 為文本增加上劃線/下劃線/刪除線

例子:

body{
font-family: Verdana, Genevs, Arial, sans-serif;
}

body{
font-size:14px;
}

body{
color:red;
}

body{
font-weight:bold;
}

body{
text-decoration: underline;
}

二、字體系列

  • font-family指定字體系列
fant-family5個(gè)字體系列例子

一組候選字體:

body{
font-family: Verdana, Genevs, Arial, sans-serif;
}

Verdana是我們編寫時(shí)最希望瀏覽器顯示的字體,其次是Genevs、Arial,但由于用戶的電腦上不一定裝有這些字體,在最后我們要放一個(gè)通用的候選字體sans-serif。

  • font-family:sans-serif;font-family:"sans-serif"的區(qū)別
  • font-family: sans-serif;代表的是一種普通的sans-serif字體族
  • font-family: "sans-serif";代表的是一種叫“sans-serif”的字體
  • 增加Web字體,使用@font-face屬性
    例子:
@font-face{
font-family: "Emblema One";
src:
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff");
}

src指定“Emblema One”這個(gè)字體的地址,瀏覽器可從這個(gè)地址中找到“Emblema One”字體。

三、調(diào)整字體大小——font-size
調(diào)整字體大小有四種不同的表示方法:

  1. 用像素值px來(lái)表示:font-size: 100px;
body{
font-size: 100px;
}
  1. %來(lái)表示:font-size: 130%;
body{
font-size: 20px;
}
h1{
font-size: 130%;
}

如果沒(méi)有給h1設(shè)置字體的大小,就繼承父級(jí)元素body的屬性,字體大小為20px。此規(guī)則中h1的字體大小則為父級(jí)元素字體大小的130%。

  1. em來(lái)表示:font-size: 1.3em;
body{
font-size: 50px;
}
h1{
font-size: 1.3em;
}
  1. 用關(guān)鍵字來(lái)表示:xx-small,s-small,small,medium,large,x-large,xx-large
body{
font-size: small;
}

最小的為xx-small,每個(gè)大小比前一個(gè)大小大約20%,small通常定義為12px。

四、設(shè)置字體的粗細(xì)——font-weight
body設(shè)置粗體:

body{
font-weight: bold;
}

如果子級(jí)元素繼承了父級(jí)元素的粗體樣式,想要去除粗體:

h1{
font-weight: normal;
}

五、把文本變?yōu)樾斌w

1.font-style: italic;(斜體)
2.font-style: obliqute;(傾斜)

通常使用font-style: italic斜體

六、指定Web顏色

  • 用顏色名指定
body{
background-color: red;
}
  • 用紅、綠、藍(lán)的值指定,255是紅、綠、藍(lán)的度量單位
1.
body{
background-color: rgb(80%, 40%, 10%);
}
2.
body{
background-color: rgb(204, 102, 25);
}
  • 使用十六進(jìn)制碼來(lái)指定顏色
body{
background-color: #cc6600
}

前面兩位cc代表紅,中間66代表綠,最后兩位00代表藍(lán)

  • 簡(jiǎn)寫規(guī)則:如果每一組中數(shù)字相同,則可簡(jiǎn)寫。例如:#ccbb00=#cb0,如果為#ccbb10則不能簡(jiǎn)寫。

七、為文本增加上劃線/下劃線/刪除線——text-decoration

1.增加刪除線
em{
text-decoration: line-through;
}
2.增加下劃線和上劃線
em{
text-decoration: underline overline;
}
3.去除繼承父級(jí)元素的裝飾
em{
text-decoration: none;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,081評(píng)論 0 1
  • 1、垂直對(duì)齊 如果你用CSS,則你會(huì)有困惑:我該怎么垂直對(duì)齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,195評(píng)論 0 11
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,036評(píng)論 1 4
  • 本文為閱讀《Head First HTML 與 CSS》的css部分的讀書(shū)筆記,方便回顧書(shū)上的知識(shí),另一篇為Hea...
    兼續(xù)閱讀 1,857評(píng)論 0 17
  • “朋友圈”: 你好。好久不見(jiàn)。別來(lái)無(wú)恙? 時(shí)間過(guò)的真快,我離開(kāi)你有兩個(gè)多月了呢。 小長(zhǎng)假期間,你的全球攝影大賽舉辦...
    樅榕閱讀 1,241評(píng)論 0 3