css基礎教程屬性篇

2020-03-24 18:01:29

字體：大中小

來源：轉載

供稿：網友

本教程主要介紹css的基礎知識,將逐個講解css的各個屬性,過程可能比較枯燥,但會盡力多舉例說明.css語法例:用Web Developer的css查看功能查看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;}這便是基本css語法結構:引用css:css文件的作用就在于控制Html文件的表現,而從Html文件中引用css文件的方法大致有三種:外聯(external),嵌入(in-line)和內聯(internal),這里限于篇幅以及應用頻度,只介紹外聯方法.例:同樣打開Jorux.com的主頁,點擊Firefox工具欄– 查看– 頁面源代碼,在 head /head 可以看到以下代碼: link rel="stylesheet" type="text/css" media="screen" / herf后的地址即為本網站css的地址,這里應用的地址為絕對地址,而在本地調試時一般用相對地址,將在后文說明.建立本地調試的文件結構:如下圖所示建立名為local的文件夾,以及其子文件夾style和image,分別用于存放css文件和圖片文件,在local文件夾的根目錄下創建Html文件index.htm,在style文件夾的根目錄下創建css文件style.css:用文本編輯器打開index.htm,寫入以下代碼: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html
head
title My first homepage /title
link rel="stylesheet" href="style/style.css" media="screen" / /head
body
h1 My first homepage /h1
/body
/html 然后打開style.css,輸入以下代碼:body {
background-color: #333;
}
h1 {
color: #F00;
background-color: #FFF;
} 用Firefox打開index.htm,如果你看到Example1的效果,那么恭喜你,一個基本的本地調試環境建立了.下面開始逐個介紹css屬性顏色(color)css能夠控制的顏色主要包括文本顏色,邊框顏色等,對于背景顏色和邊框顏色會在以后說明,在這主要解釋文本顏色的表現.在如上所示style.css的選擇器h1中,文本顏色的屬性是用color表示的,h1的顏色的屬性值為#FF0000(一個#加上十六進制值),簡寫為#F00. 我們甚至可以用英文單詞red表示屬性值: color: red; 效果是一樣的. 顏色的其他屬性值還有RGB值,在css中不太常用,這里就不再敘述.例:查看Jorux.com首頁的css文件,可以看到以下代碼:a {
color: #545454;
text-decoration:none;
}
a:hover {
color: #919191;
} 在選擇器a中,文本顏色的屬性值為#545454, 即存在超級鏈接的文本顏色為#545454; 而a:hover為偽類選擇器(表現依賴于瀏覽器的狀態), 它的屬性值為#919191, 即鼠標在超級鏈接上懸停時文本的顏色. 你可以用ColorZilla驗證本站首頁的標題文字顏色.文本(text)css控制的文本屬性主要包括以下四個: text-indent, text-align, text-decoration, text-transform;1. text-align:屬性text-align指文本的對齊方式,其有向左,向右,居中對齊以及自動適應四種對齊方式: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,可以避免在其他需要文本左對齊的選擇器中重復聲明. 2. text-indent:屬性text-indent指段落首行的縮進, 既然是段落的屬性,一般用于選擇器p(段落)中,代碼如下:p {
text-indent: 26px;
} 本站的段落縮進為0, 所以在css文件中能找到text-indent: 0;,不聲明即此屬性,即默認為0.3. text-decoration:屬性text-decoration為文本修飾, 其包括下劃線, 上劃線, 中劃線和無四種修飾方式, 代碼如下:text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;在這就不例舉具體的下劃線, 上劃線, 中劃線的例子, 相信大家很容易想像的到它的效果. 需要強調的是屬性值none, 如果你查看本站css的話, 可以看到所有屬性text-decoration的值均為none. 這是因為目前的瀏覽器對于選擇器a(即超級鏈接), 默認text-decoration屬性值為underline. 這就會使很多你不希望出現的下劃線大量涌現, 而且由于無法約束下劃線的粗細, 以及瀏覽器之間的差異, 甚至會出現各種粗細, 不同瀏覽器顯示不同的下劃線.例:你可以看到本站文章內的超級鏈接的文本修飾是點劃線, 這個效果不是屬性text-decoration所能實現的, 其需要下邊框屬性的支持, 將會在邊框屬性時說明. 實現方法如下(請查看本站css代碼):1.在全局聲明中將選擇器a的text-decoration屬性值設為none, 代碼如下:a {
color: #545454;
text-decoration:none;
} 2.為使文章正文部分的超級鏈接顯示藍色點劃線的效果,代碼如下(讀者目前只需了解,目前暫不說明):.post_body a{
color:#0061CA;
padding:0;
border-bottom:1px dotted #0061CA;
} 4. text-transform: 這個屬性可能大家不太熟悉, 因為這個屬性是只為英文服務的, 用于轉換字母大小寫之用. 其包括首字母大寫, 大寫, 小寫和無變化四種屬性值, 代碼如下:text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;例:如果你再本站留過言, 而且用的是英文名的話, 你就會發現無論你輸入的姓名是有沒有將首字母大寫, 顯示評論者姓名時首字母均被轉化為大寫, 查看本站css代碼如下:.comment_author {
text-transform:capitalize;
} 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS清理浮動的全家

下一篇：使用CSS實現彈性視頻html5案例實踐