DIV+CSS初學(xué)隨記

kgbook 發(fā)布于2019-04-23 11:51 / 1769人閱讀

摘要：屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。在設(shè)置字體大小時(shí)，的值會(huì)相對(duì)于父元素的字體大小改變。因此的默認(rèn)尺寸是像素。關(guān)鍵字為字體指定了級(jí)加粗度。數(shù)字等價(jià)于，而等價(jià)于。與此相反，關(guān)鍵詞會(huì)導(dǎo)致瀏覽器將加粗度下移而不是上移。

字間隔
word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。

word-spacing 屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。如果提供一個(gè)正長(zhǎng)度值，那么字之間的間隔就會(huì)增加。

為 word-spacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近：

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
p>

letter-spacing 屬性與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。

如果要避免在 Internet Explorer 中無(wú)法調(diào)整文本的問題，許多開發(fā)者使用 em 單位代替 pixels。

W3C 推薦使用 em 尺寸單位。

1em 等于當(dāng)前的字體尺寸。如果一個(gè)元素的 font-size 為 16 像素，那么對(duì)于該元素，1em 就等于 16 像素。在設(shè)置字體大小時(shí)，em 的值會(huì)相對(duì)于父元素的字體大小改變。

瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素。

可以使用下面這個(gè)公式將像素轉(zhuǎn)換為 em：pixels/16=em

（注：16 等于父元素的默認(rèn)字體大小，假設(shè)父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）

實(shí)例

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

字體加粗
font-weight 屬性設(shè)置文本的粗細(xì)。

使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。

關(guān)鍵字 100 ~ 900 為字體指定了 9 級(jí)加粗度。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別，100 對(duì)應(yīng)最細(xì)的字體變形，900 對(duì)應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。

如果將元素的加粗設(shè)置為 bolder，瀏覽器會(huì)設(shè)置比所繼承值更粗的一個(gè)字體加粗。與此相反，關(guān)鍵詞 lighter 會(huì)導(dǎo)致瀏覽器將加粗度下移而不是上移。

實(shí)例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

設(shè)置鏈接的樣式

DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */
style>
head>

<body>
<p><b><a href="/index.html" target="_blank">這是一個(gè)鏈接a>b>p>
<p><b>注釋：b>為了使定義生效，a:hover 必須位于 a:link 和 a:visited 之后！！p>
<p><b>注釋：b>為了使定義生效，a:active 必須位于 a:hover 之后！！p>
body>
html>

表格邊框
如需在 CSS 中設(shè)置表格邊框，請(qǐng)使用 border 屬性。

下面的例子為 table、th 以及 td 設(shè)置了藍(lán)色邊框：

table, th, td
{
border: 1px solid blue;
}

例如，您可以為把一幅圖片的邊框定義為 outset，使之看上去像是“凸起按鈕”：

a:link img {border-style: outset;}

下面的例子為 h1 元素的四個(gè)邊分別定義了不同的外邊距，所使用的長(zhǎng)度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}
與內(nèi)邊距的設(shè)置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時(shí)針旋轉(zhuǎn)的：

margin: top right bottom left
另外，還可以為 margin 設(shè)置一個(gè)百分比數(shù)值：

p {margin : 10%;}
百分?jǐn)?shù)是相對(duì)于父元素的 width 計(jì)算的。上面這個(gè)例子為 p 元素設(shè)置的外邊距是其父元素的 width 的 10%。

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
style>
head>
<body>

<p class="one">一些文本。p>
<p class="two">更多的文本。p>

body>
html>