中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

herf后的地址即為本網(wǎng)站css的地址,這里應(yīng)用的地址為絕對(duì)地址,而在本地調(diào)試時(shí)一般用相對(duì)地址,將在后文說明.建立本地調(diào)試的文件結(jié)構(gòu):如下圖所示建立名為local的文件夾,以及其子文件夾style和image,分別用于存放css文件和圖片文件,在local文件夾的根目錄下創(chuàng)建Html文件index.htm,在style文件夾的根目錄下創(chuàng)建css文件style.css:

用文本編輯器打開index.htm,寫入以下代碼:

然后打開style.css,輸入以下代碼:

body {
  background-color: #333;
}
h1 {
  color: #F00;
  background-color: #FFF;
}

用Firefox打開index.htm,如果你看到Example1的效果,那么恭喜你,一個(gè)基本的本地調(diào)試環(huán)境建立了.

下面開始逐個(gè)介紹css屬性

顏色(color)

css能夠控制的顏色主要包括文本顏色,邊框顏色等,對(duì)于背景顏色和邊框顏色會(huì)在以后說明,在這主要解釋文本顏色的表現(xiàn).

在如上所示style.css的選擇器h1中,文本顏色的屬性是用color表示的,h1的顏色的屬性值為#FF0000(一個(gè)#加上十六進(jìn)制值),簡(jiǎn)寫為#F00. 我們甚至可以用英文單詞red表示屬性值: color: red; 效果是一樣的. 顏色的其他屬性值還有RGB值,在css中不太常用,這里就不再敘述.

例:查看Jorux.com首頁的css文件,可以看到以下代碼:

a {   
    color: #545454;
    text-decoration:none;
}
a:hover {
    color: #919191;
}

在選擇器a中,文本顏色的屬性值為#545454, 即存在超級(jí)鏈接的文本顏色為#545454; 而a:hover為偽類選擇器(表現(xiàn)依賴于瀏覽器的狀態(tài)), 它的屬性值為#919191, 即鼠標(biāo)在超級(jí)鏈接上懸停時(shí)文本的顏色. 你可以用ColorZilla驗(yàn)證本站首頁的標(biāo)題文字顏色.

文本(text)

css控制的文本屬性主要包括以下四個(gè): text-indent, text-align, text-decoration, text-transform;

1. text-align:

屬性text-align指文本的對(duì)齊方式,其有向左,向右,居中對(duì)齊以及自動(dòng)適應(yīng)四種對(duì)齊方式:

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

例:查看Jorux.com首頁的css文件,可以看到以下代碼:

body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}

在選擇器body中聲明屬性text-align為left,可以避免在其他需要文本左對(duì)齊的選擇器中重復(fù)聲明.

2. text-indent:

屬性text-indent指段落首行的縮進(jìn), 既然是段落的屬性,一般用于選擇器p(段落)中,代碼如下:

p {
text-indent: 26px;
}

本站的段落縮進(jìn)為0, 所以在css文件中能找到text-indent: 0;,不聲明即此屬性,即默認(rèn)為0.

3. text-decoration:

屬性text-decoration為文本修飾, 其包括下劃線, 上劃線, 中劃線和無四種修飾方式, 代碼如下:

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

在這就不例舉具體的下劃線, 上劃線, 中劃線的例子, 相信大家很容易想像的到它的效果. 需要強(qiáng)調(diào)的是屬性值none, 如果你查看本站css的話, 可以看到所有屬性text-decoration的值均為none. 這是因?yàn)槟壳暗臑g覽器對(duì)于選擇器a(即超級(jí)鏈接), 默認(rèn)text-decoration屬性值為underline. 這就會(huì)使很多你不希望出現(xiàn)的下劃線大量涌現(xiàn), 而且由于無法約束下劃線的粗細(xì), 以及瀏覽器之間的差異, 甚至?xí)�出現(xiàn)各種粗細(xì), 不同瀏覽器顯示不同的下劃線.

例:你可以看到本站文章內(nèi)的超級(jí)鏈接的文本修飾是點(diǎn)劃線, 這個(gè)效果不是屬性text-decoration所能實(shí)現(xiàn)的, 其需要下邊框?qū)傩缘闹С? 將會(huì)在邊框?qū)傩詴r(shí)說明. 實(shí)現(xiàn)方法如下(請(qǐng)查看本站css代碼):

1.在全局聲明中將選擇器a的text-decoration屬性值設(shè)為none, 代碼如下:

a {   
    color: #545454;
    text-decoration:none;
}

2.為使文章正文部分的超級(jí)鏈接顯示藍(lán)色點(diǎn)劃線的效果,代碼如下(讀者目前只需了解,目前暫不說明):

.post_body a{
    color:#0061CA;
    padding:0;
    border-bottom:1px dotted #0061CA;
}

4. text-transform:

這個(gè)屬性可能大家不太熟悉, 因?yàn)檫@個(gè)屬性是只為英文服務(wù)的, 用于轉(zhuǎn)換字母大小寫之用. 其包括首字母大寫, 大寫, 小寫和無變化四種屬性值, 代碼如下:

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

例:如果你再本站留過言, 而且用的是英文名的話, 你就會(huì)發(fā)現(xiàn)無論你輸入的姓名是有沒有將首字母大寫, 顯示評(píng)論者姓名時(shí)首字母均被轉(zhuǎn)化為大寫, 查看本站css代碼如下:

.comment_author {
    text-transform:capitalize;
}