1. 程式人生 > >CSS樣式表(一)

CSS樣式表(一)

縮進 刪除 idt 表示 wid 例如 精確 優點 mage

在HTML中為各標簽加上樣式有內聯、內嵌和外部樣式表三種添加方式。內聯的是直接在標簽內添加style="樣式"即可;內嵌的是直接嵌在網頁內,在<head></head>內加入<style type="text/css">樣式表</style>;而外部樣式表為新建一個單獨的樣式文件(CSS),然後將外部樣式表至當前樣式文件中使用(在head內右鍵點擊,選擇CSS樣式——附加樣式表——文件內點擊瀏覽,然後找到樣式表保存的位置,最後確定即可),也可直接輸入<link href="樣式地址" rel="stylesheet" type="text/css" />。這三者的優缺點進行對比:1.內聯的優點為控制精確,缺點為頁面雜亂、代碼冗余;2.內嵌得優點為代碼重用性較高,缺點為控制不如內聯的精確;外部的優點是代碼重用性最高,缺點同內嵌一樣。優先級為內聯>內嵌=外部,排在下面一行的可以覆蓋上面的一層,因為外部樣式表的重用性最高,因此在網頁中應用最多。

在使用內嵌和外部的時候,需要用到選擇器,在樣式表裏進行使用,使其能找到標簽,需要在標簽內輸入“id”或“class”,其寫法為:選擇器{樣式表}。選擇器有:“#”代表通過id選擇,不過因為一個id只能代表一個(註意:id必須以字母開頭),所以該選擇器只能選擇一個;“.”代表通過class選擇,能選擇多個標簽;標簽名選擇器為直接輸入標簽名,可使所有這個標簽名的樣式進行更改;“*”表示全部,即使網站內所有元素的樣式進行更改。使用選擇器的樣式需要在樣式內加上單位且用“;”隔開,如width:300px; height:300px;。選擇器的優先級為:id>class>標簽名>*。選擇器還存在組合效果:“#a,#b”中“,”代表並列關系;“#c li”中“ (空格)”代表後代關系;"div.d"中"."代表用class篩選出來。要想打破優先級關系,需要在該樣式最後加入“!important”。

樣式表中的樣式是對網頁內所進行展示的文本進行修飾,更改其樣貌,樣式有對內容的大小、背景、字體、對其方式進行修改,還有修改它的間接邊框、列表方塊、格式與布局,還存在一些其他的修改。

對大小的修改就是“width”和“height”的修改,即為寬度和高度的修改。對背景的修改為:“background-color”修改背景顏色;“background-img:url”添加背景圖片;“background-repeat”為平鋪方式,一般選擇“no-repeat”意為不平鋪;“background-position”為圖片的位置,它可以同時輸入兩個方位並且加上一定的數值即可表示向某個方向移動且距離邊框有多少像素的距離,例如top 20px right 20px,表示向右上方向移動,且距離上邊框和右邊框都為20像素;“background-attachment”為是否可以滾動,常用為fixed不滾動;“background-size”為圖片的大小,其中輸入設置的寬度和高度即可,如500px 500px,表示寬500像素高500像素。

對字體的設置有:“colo”設置字體顏色;“font-family”為字體的樣式,網頁中最常用的字體是“微軟雅黑”;“font-size”為字體的大小,而常用的幾種字體大小為12px(常用於頁眉頁腳)、14px(用於正文)和16px(為標註常用);“font-weight”字體粗細,一般使用“bold”加粗字體;“font-style”代表字體樣式,使用傾斜時使用“italic”;“text-decoration”為字體上常用的一些線,“line-through”為刪除線,“overline”為上劃線,“underline”為下劃線,“none”為去掉下劃線,一般用於<a>自帶的下劃線進行刪除效果。

文本之間的對其方式有:“text-aline”為水平對齊方,一般使用“center”進行居中對齊;“line-height”為設置行高;“ertical-aline”為垂直對其方式,常用“middle”進行居中,需要與行高連用才可顯示出效果;“text-inden”表示首行縮進,一般30px為縮進兩字符。

設置其邊界邊框,如設置一個<div>的內外邊距和下邊框時使用:“margin”設置外邊距,可根據上右下左(順時針)的順序以此輸入其大小,也可只設置兩個值,表示上下一樣大小,左右一樣大小,“auto”表示居中;“padding”設置內邊框,同樣按順時針的方向輸入其大小,如果加了內邊距,該元素會相應的變大;“boder”為下邊框,輸入的內容為1px(邊框粗細) solid(實線) (選擇顏色)。

列表方塊則一般用於設置列表前端的符號的設置:“list-style”為列表前面所使用的符號,常用“none”去掉符號;“list-style-image”代表將列表前端的符號變為圖片。

CSS樣式表(一)