




版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領
文檔簡介
常用的CSS標簽標記屬性翻譯注釋這里收藏一些編寫網(wǎng)頁的常用屬性,便于以后編寫網(wǎng)頁查詢。""這里收藏一些編寫網(wǎng)頁的常用屬性,便于以后編寫網(wǎng)頁查詢。1、 字體屬性(type)font-family(使用什么字體)font-style(字體的樣式,是否斜體):normal/italic/obliquefont-variant(字體大小寫):normal/small-capsfont-weight(字體的粗細):normal/bold/bolder/lithterfont-size(字體的大?。篴bsolute-size/relative-size/length/percentage2、 顏色和背景屬性(backgroud)color(定義前景色,例如:p{color:red})background-color(定義背景色)background-image(定義背景圖片)background-repeat(背景圖案重復方式):repeat-x/repeat-y/no-repeatbackground-attachment(設置滾動):scroll(滾動)/fixe(固定的)background-position(背景圖案的初始位置):percentage/length/top/left/right/bottom3、 文本屬性:(block)定義間距:word-spacing(單詞之間的距離)letter-spacing(字母之間的距離)text-decoration(定義文字的裝飾):nore/underline/overline/line-through/blinkvertical-align(元素在垂直方向的位置) :baseline(基線)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform(使文本轉換為其它方式):capitalize(大寫)/uppercase(首字母大寫)/lowercase(小寫)/nonetext-align(文字的對齊):left/right/center/justifytext-indent(文本的首行縮進)length/percentageline-height(文本的行高):normal/numbet/lenggth/percentage(百分比)定義超鏈接:a:link{color:green;text-decoration:nore}(未訪問過的狀態(tài))a:visited{color:ren;text-decoration:underline;16pt}(訪問過的狀態(tài))a:hover{color:blue;text-decoration:underline;16pt}(鼠標激活的狀態(tài))4、塊屬性(block)邊距屬性:margin-top(設置頂邊距)margin-right(設置右邊距)margin-bottom(設置底邊距)margin-left(設置左邊距)填充距屬性:padding-top設置頂端真充距)padding-right設置頂端真充距)padding-bottom設置頂端真充距)padding-left設置頂端真充距)5、 邊框屬性(border)border-top-width(頂端邊框寬度)border-right-width(右端邊框寬度)border-bottom-width(底端邊框寬度)border-left-width(d左邊框寬度)border-width(一次定義邊框寬度)border-color(設置邊框顏色)border-style(設置邊框樣式)border-top(一次定義頂端各種屬性)border-right(一次定義右端各種屬性)border-bottom(一次定義底端各種屬性)border-left(一次定義左端各種屬性)圖文混排:width(定義寬度屬性)height(定義高度屬性)float(文字環(huán)繞在一個元素的四周)clear(定義某一邊是否有環(huán)繞)6、 項目符號和編號(list)display(定義是否顯示)white-space(怎樣處理空白部分):normal/pre/nowraplist-style-type(在列表前加項目符號)disc(圓點"circle(圈"square(方形)/decimal(阿拉伯數(shù)字)/lower-roman(小寫羅馬數(shù)字)/upper-roman(大寫羅馬數(shù)字)/lower-alpha(小寫英文字母)/upper-alpha(大寫英文字母)/norelist-style-tyle(在列表前加圖案):vurl>/nonelist-style-position(決定列表項中第二行的起邕位置)list-style(一次性定義所有屬性)7、 定位(positioning)即層屬性Type:設定對象的定位方式。有三種方式:Absolute(絕對定位)、Relative(相對定位)、Static(無特殊定位)。相對應的CSS屬性是"position”。Visibility:設定對象定位層的最初顯示狀態(tài)。有三種狀態(tài):Inherit(繼承父層的顯示屬性)、Visible(對象可視)、Hidden隱藏對象。相對應的CSS屬性是”visibility”。Z-Index:設置對象的層疊順序。編號較大的層會顯示在編號較小的層上邊。變量值可以是正值也可以是負值。相對應的CSS屬性是”z-index”。Overflow:設置如果層的內(nèi)容超出了層的大小時如何處理。有四種處理方式:visible,增加層的大小,從而將層的所有內(nèi)容顯示出來;hidden,保持層的大小不變,將超出層的內(nèi)容剪裁掉;Scroll,總是顯示滾動;Auto,只有在內(nèi)容超出層的邊界時才顯示滾動條。相對應的CSS屬性是"overflow”。Placement:設置對象定位層的位置和大小??梢苑謩e設置left(左邊定位)、top(頂部定位)、width(寬)、height(高)。相對應的CSS屬性分別是"left;top;width;height"oClip:定義定位層的可視區(qū)域。區(qū)域外的部分為不可視區(qū),為透明的。可以理解為在定位層上放一個矩形遮罩的效果。相對應的CSS屬性是”clip”。8、擴展(Extensions)Pagebreak:在打印的時候強迫在樣式控制的對象前后換頁。Before:設置對象前出現(xiàn)的頁分割符。設置為always時,始終在對象之前插入頁分割符。相對應的CSS屬性是”break-before”。After:設置對象后出現(xiàn)的頁分割符。設置為always時,始終在對象之后插入頁分割符。相對應的CSS屬性是”'>。注意:以上IE5僅支持always值和空白值(null)。Cursor:當鼠標滑過樣式控制的對象時改變鼠標形狀??梢栽O置為hand(手型)、crosshair“十”型)、text“I”型)、wait(等待)、default(默認)、help(幫助)、e-resize(東箭頭)、ne-resize(東北箭頭)、n-resize(北箭頭)、nw-resize(西北箭頭)、w-resize(西箭頭)、sw-resize(西南箭頭)、s-resize(南箭頭)、se-resize(東南箭頭)和auto(自動)。Filter:在樣式中加上濾鏡特效。由于此屬性內(nèi)容比較多,我們將到下一章單獨對濾鏡介紹。Alpha:設置透明度Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)Opacity:透明度級別,范圍是0-100,0代表完全透明,100代表完全不透明。FinishOpacity:設置漸變的透明效果時,用來指定結束時的透明度,范圍也是0到100。Style:設置漸變透明的樣式,值為0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。StartX和StartY:代表漸變透明效果的開始X和Y坐標。FinishX和FinishY:代表漸變透明效果結束X和Y的坐標。BlendTrans:圖像之間的淡入和淡出的效果BlendTrans(Duration=?)Duration:淡入或淡出的時間。注意:這個濾鏡必須配合JS建立圖片序列,才能做出圖片間效果。Blru:建立模糊效果Blur(Add=?,Direction=?,Strength=?)Add是否單方向模糊,此參數(shù)是一個布爾值,true(非0、或false(0)。Direction:設置模糊的方向,其中0度代表垂直向上,然后每45度為一個單位。Strength:代表模糊的象素值。Chroma:把指定的顏色設置為透明Chroma(Color=?)Color:是指要設置為透明的顏色。DropShadow:建立陰影效果DropShadow(Color=?,OffX=?,OffY=?,Positive^?)Color:指定陰影的顏色。OffX:指定陰影相對于元素在水平方向偏移量,整數(shù)。OffY:指定陰影相對于元素在垂直方向偏移量,整數(shù)。Positive:是一個布爾值,值為true(非0)時,表示為建立外陰影;為false(O),表示為建立內(nèi)陰影。FlipH :將元素水平反轉FlipV :將元素垂直反轉Glow :建立外發(fā)光效效果Glow(Color=?,Strength=?)Color:是指定發(fā)光的顏色。Strength:光的強度,可以是1到255之間的任何整數(shù),數(shù)字越大,發(fā)光的范圍就越大。Gray:去掉圖像的色彩,顯示為黑白圖象Invert:反轉圖象的顏色,產(chǎn)生類似底片的效果Light:放置光源的效果,可以用來模擬光源在物體上的投影效果注意:此效果需要用JS設置光的位置和強度。Mask:建立透明遮罩Mask(Color=?)Color:設置底色,讓對象遮住底色的部分透明。RevealTrans:建立切換效果RevealTrans(Duration=?,Transition=?)Duration:是切換時間,以秒為單位。Transtition:是切換方式,可設置為從0到23。注意:如果做頁面間的切換效果,可以在vhead>區(qū)加上一行代碼:<Metahttp-equiv=entercontent=revealTrans(Transition=?,Duration=?)>。如果用在頁面里的元素必須配合JS使用。Shadow:建立另一種陰影效果Shadow(Color=?,Direction^?)Color:是指陰影的顏色。Direction:是設置投影的方向,0度代表垂直向上,然后每45度為一個單位。Wave:波紋效果Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength^?)Add表示是否顯示原對象,0表示不顯示,非0表示要顯示原對象。Freq:設置波動的個數(shù)。LightStrength:設置波浪效果的光照強度,從0到100。0表示最弱,100表示最強。Phase:波浪的起始相角。從0到100的百分數(shù)值。(例如:25相當于90度,而50相當于180度。)Strength:設置波浪搖擺的幅度。Xray:顯現(xiàn)圖片的輪廓,X光片效果注意:在使用CSS濾鏡時,必須使用在有區(qū)域的元素,比如表格,圖片等。而文本,段落這樣沒有區(qū)域的元素不能使用CSS濾鏡,對這樣的元素我們可以設置元素的Height和Width樣式或坐標來實現(xiàn)。"CSS中的長度絕對單位:幾乎不用在網(wǎng)頁中in英寸 1in=2.54cmcm厘米 1cm=0.394inpt磅 1in=72ptpcpica 1in=6pc相對單位:較常用em1em=相應字體的font-size值emex 1ex=相應字體中的小寫x字母的高度值,較難求得,一般取0.5empx 最為常用的CSS中的元素分類display設定元素所屬類別,不可繼承none(設定為不顯示在屏幕上)block(塊級元,包括P,H1-H6,list,div,body)inline(內(nèi)聯(lián)元,包括a,em,span)list-item(列表元,如LI)顏色與背景類color 設置文字顏色#rgb#rrggbbrgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color設置背景顏色,格式同上;不可繼承,可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 設置背景圖片,默認為none,不可繼承,可用于所有元url(imageURL)nonebody{backround-image:url(back.jpg);}background-repeat設置背景圖片是否重復排列,不可繼承,用于所有元repeat(XY軸均重復) repeat-x(X軸重復排列) repeat-y(Y軸重復排列) No-repeat(不重復排列,默認值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment設定背景圖片是否卷動,不可繼承,用于所有元scroll(隨網(wǎng)頁卷動,默認值)fixed(不隨網(wǎng)頁卷動)BODY{background-attachment:fixed;}background-position設定背景圖片或背景顏色開始顯示的位置,不可繼承,用于塊級元和可替換元top,buttom,left,right,center(用關鍵字)70px10px(用長度值)50%30%(用百分比)BODY{background-position:righttop;}BODY{background-position:50px10px;}BODY{background-position:20%50%;}background定義背景綜合屬性,不要求順序,各屬性值以空格分開BODY{background:#ffcc00url(bg.jpg)fixedcenter}字型類font-family設置字型屬性,取值可以是任何字型名稱,缺省為瀏覽器內(nèi)定字型,可以設多個以逗號(,)分開,有空格的英文字型可用單引號或雙引號括起來??衫^承,用于所有元P{font-family:宋體,楷體,黑體,"TimeNewRom";}font-style設定字型樣式,可繼承,用于所有元Normal(正常,默認值)italic(斜體)objlique(直斜體)P{font-style:italic;}font-variant需要特定的字體配合,可繼承,用于所有元Normal(默認)small-caps(如果是中文字型則將字型縮小顯示,如果是英文則全部改為較小的大寫)H3{font-variant:small-caps;}font-weight設定字體粗細,可繼承,用于所有元Normal(默認)boldbolderlighter100 200...900由于瀏覽器支持程度不同,一般只用normal和bold兩種屬性P{font-weight:bold;}font-size設定字體的大小,可繼承,用于所有元絕對大小:xx-smallx-smallsmallmedium(默認值) largex-largexx-large;相對大?。簂argersmaller數(shù)字表示可用單位:磅(pt),像素(px),英寸(in),厘米(cm);亦可用百分比表示H2{font-size:36pt;}P{font-size:200%;}font設定字型的綜合屬性,必須含有字體名稱和字體大小,順序如下{font-stylefont-variantfont-weightfont-size/line-heightfont-family;}P{bold12pt/14ptimpact,Arial;}文字類letter-spacing設定文字間距,默認為0,可為負值,可繼承,用于所有元P{letter-spacing:5pt;}text-decoration設定文字加上下劃線、刪除線等效果,不可繼承,用于所有元none(無,默認值) underline(下劃線) overline(上劃線) line-through(刪除線)vertical-align設定文字或圖片垂直方向的對齊方式baseline(默認值)sub(下標)super(上標)top(垂直向上對齊) middle(垂直居中)bottom(垂直向下對齊) 百分比(相對于行高,可為負值)text-transform轉換英文字母大小寫,可繼承,用于所有元none(默認值)capitalize(首字母大寫)uppercase(所有英文字母大寫)lowercase(所有英文字母小寫)text-align設置文字的水平對齊方式,可繼承,用于塊級元left(左對齊)right(右對齊)center(水平居中)justify(左右對齊)text-indent 設定標記元素內(nèi)文字的首行縮進或配合margin-left屬性設定首行凸排,可為負值,可繼承,用于塊級元line-height設定行高,聲明方式有標準行高、固定值表示法、百分比行高(相對于字體尺寸)、字型大小比例行高等,可繼承,用于所有元white-space設定空白符處理方式,不可繼承,用于塊級元pre(不忽略塊中的空白符)nowrap(文字不在塊中自動換行)normal(忽略空白符,默認值)列表類list-style-type有序列表的編號方式(供標記使用),可繼承none:無編號decimal:阿拉伯數(shù)字lower-roman:小寫羅馬數(shù)字upper-roman:大寫羅馬數(shù)字lower-alpha:小寫英文字母upper-alpha:大寫英文字母list-style-type無序列表的符號樣式(供使用),可繼承none:無符號disc:實心圓符號circle:空心圓符號square:實心方形符號list-style-image無序列表的自定義符號樣式,可繼承url(圖片名稱)none(默認值)UL{list-style-imag:url(dd.gif);}list-style-position設置列表清單符號縮排屬性,可繼承outside(凸排,默認值)inside(縮排)UL{list-style-imag:url(dd.gif);list-style-position:outside;}list-style列表清單項目的綜合設定,屬性之間用空格隔開UL{list-style-imag:url(dd.gif)inside;}邊界及其相關類margin標記元素邊界值的綜合設定,可為負值,不可繼承,用于所有元。應用于塊級元時,縱向相鄰邊界被壓縮/重疊;應用于內(nèi)聯(lián)元時,不影響文本的行高。亦可以用margin-top、margin-right、margin-bottom、margin-left分開設定各邊的邊界。聲明4個值,其順序為上、右、下、左邊界,如:DIV{margin:12pt15pt20pt16pt;}聲明3個值,其順序為上、右、下,缺少的左邊界取其對邊(右),如:DIV{margin:12pt15pt16pt;}聲明2個值,其順序為上、右,缺少的下、左邊界取其對邊,如:DIV{margin:12pt15pt;}聲明1個值,則4個邊界同一個值,如:DIV{margin:15pt;}padding設定標記內(nèi)容與標記邊框之間的留白的綜合設定,不能為負值,不可繼承,用于所有元。也可分開設定padding-top、padding-right、padding-bottom、padding-lef
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 復雜貨運項目案例試題及答案
- 2025(統(tǒng)編版)語文必修上冊第二單元大單元教學設計
- 精細研究CPSM考試試題及答案集
- 2024國際物流師的就業(yè)市場調(diào)查與試題及答案
- 預防近視呵護眼睛課件
- CPMM考試指南:一站式參考試題及答案
- 2024年CPSM人員素質要求試題及答案
- 2024年CPMM試題及答案全方位指南
- 能源管理體系建設指導材料之13:6策劃-6.6能源數(shù)據(jù)收集的策劃(雷澤佳編制-2025A0)
- 肇慶市高中畢業(yè)班2025屆高三最后一模化學試題含解析
- 精神障礙社區(qū)康復服務投標方案
- 冰箱溫度監(jiān)測登記表
- 急性心力衰竭中國急診管理指南2022
- 《利用導數(shù)研究函數(shù)的零點問題》教學設計
- 唯識二十論述記講記(完整版)-智敏上師
- 建設單位甲方對監(jiān)理單位考核管理辦法
- 摩登情書原著全文在線【3篇】
- 統(tǒng)一戰(zhàn)線理論與政策(講課稿)
- 表貼式永磁同步電動機永磁體氣隙磁場解析計算
- 橋臺錐坡工程量計算公式
- 配電柜維護保養(yǎng)規(guī)程
評論
0/150
提交評論