css常用屬性有哪些

一、html標(biāo)簽

10年積累的網(wǎng)站制作、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有北安免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

pre.../pre文字格式化

div....../div列塊容器

字體大小變化 font size=?想輸入的字/font

字體顏色 font color="..."想輸入的字/font

字體變粗 b想輸入的字/b

字體變斜 i想輸入的字/i

字體加下劃線 u想輸入的字/u

對(duì)正中央ㄉ語(yǔ)法 p align="center"內(nèi)容/p

對(duì)正左邊ㄉ語(yǔ)法 p align="left"內(nèi)容/p

對(duì)正右邊ㄉ語(yǔ)法 p align="right"內(nèi)容 /p

字體刪除線 s想輸入的字/s

字體設(shè)置 font face="字體名稱"想輸入的字/font

打字機(jī)字體 tt想輸入的字/tt

上標(biāo)字 sup想輸入的字/sup

下標(biāo)字 sub想輸入的字/sub

水平線 hr color="..."

換行輸入 想輸入的字br想輸入的字

超鏈接 a href="想鏈接網(wǎng)址"鏈接地的名稱/a

a href="mailto:填入email"要顯示的字打這里/a網(wǎng)絡(luò)郵寄標(biāo)簽

貼圖 img src="圖形的網(wǎng)址"

跑馬燈(循環(huán)) marquee behavior=scroll想輸入的字/marquee

外部文件導(dǎo)入格式標(biāo)簽

CSS外部導(dǎo)入格式：

link rel="stylesheet" type="text/css" href="/css.css" /

直接引用：

style type="text/css"

!--

id{...}

--

/style

javascript - 加載外部.js獨(dú)立文件：

script type="text/javascript" src="/script.js"/script

二、CSS文字屬性：

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設(shè)置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標(biāo)字*/

vertical-align:super; /*上標(biāo)字*/

text-decoration:line-through; /*加刪除線*/

text-decoration:overline; /*加頂線*/

text-decoration:underline; /*加下劃線*/

text-decoration:none; /*刪除鏈接下劃線*/

text-transform : capitalize; /*首字大寫(xiě)*/

text-transform : uppercase; /*英文大寫(xiě)*/

text-transform : lowercase; /*英文小寫(xiě)*/

text-align:right; /*文字右對(duì)齊*/

text-align:left; /*文字左對(duì)齊*/

text-align:center; /*文字居中對(duì)齊*/

text-align:justify; /*文字分散對(duì)齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對(duì)齊*/

vertical-align:bottom; /*垂直向下對(duì)齊*/

vertical-align:middle; /*垂直居中對(duì)齊*/

vertical-align:text-top; /*文字垂直向上對(duì)齊*/

vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/

三、CSS符號(hào)屬性：

list-style-type:none; /*不編號(hào)*/

list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/

list-style-type:lower-roman; /*小寫(xiě)羅馬數(shù)字*/

list-style-type:upper-roman; /*大寫(xiě)羅馬數(shù)字*/

list-style-type:lower-alpha; /*小寫(xiě)英文字母*/

list-style-type:upper-alpha; /*大寫(xiě)英文字母*/

list-style-type:disc; /*實(shí)心圓形符號(hào)*/

list-style-type:circle; /*空心圓形符號(hào)*/

list-style-type:square; /*實(shí)心方形符號(hào)*/

list-style-image:url(/dot.gif); /*圖片式符號(hào)*/

list-style-position:outside; /*凸排*/

list-style-position:inside; /*縮進(jìn)*/

四、CSS背景樣式：

background-color:#F5E2EC; /*背景顏色*/

background:transparent; /*透視背景*/

background-image : url(/image/bg.gif); /*背景圖片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁(yè)默認(rèn)*/

background-repeat : no-repeat; /*不重復(fù)排列*/

background-repeat : repeat-x; /*在x軸重復(fù)排列*/

background-repeat : repeat-y; /*在y軸重復(fù)排列*/

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-position : top; /*向上對(duì)齊*/

background-position : buttom; /*向下對(duì)齊*/

background-position : left; /*向左對(duì)齊*/

background-position : right; /*向右對(duì)齊*/

background-position : center; /*居中對(duì)齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

a:link /*超鏈接文字格式*/

a:visited /*瀏覽過(guò)的鏈接文字格式*/

a:active /*按下鏈接的格式*/

a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/

鼠標(biāo)光標(biāo)樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問(wèn)號(hào) cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}

六、CSS框線一覽表：

border-top : 1px solid #6699cc; /*上框線*/

border-bottom : 1px solid #6699cc; /*下框線*/

border-left : 1px solid #6699cc; /*左框線*/

border-right : 1px solid #6699cc; /*右框線*/

以上是建議書(shū)寫(xiě)方式,但也可以使用常規(guī)的方式 如下:

border-top-color : #369 /*設(shè)置上框線top顏色*/

border-top-width :1px /*設(shè)置上框線top寬度*/

border-top-style : solid/*設(shè)置上框線top樣式*/

其他框線樣式

solid /*實(shí)線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內(nèi)凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表單運(yùn)用：

文字方塊 input type="text" name="T1" size="15"

按鈕 input type="submit" value="submit" name="B1"

復(fù)選框 input type="checkbox" name="C1"

選擇鈕 input type="radio" value="V1" checked name="R1"

多行文字方塊 textarea rows="1" name="S1" cols="15"/textarea

下拉式菜單 select size="1" name="D1"option選項(xiàng)1/option

option選項(xiàng)2/option/select

八、CSS邊界樣式：

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

九、CSS邊框空白

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白*/

基本語(yǔ)法

　規(guī)則

選擇符

任何HTML元素都可以是一個(gè)CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如， P { text-indent: 3em }

當(dāng)中的選擇符是P。

類(lèi)選擇符

單一個(gè)選擇符能有不同的CLASS(類(lèi))，因而允許同一元素有不同樣式。例如，一個(gè)網(wǎng)頁(yè)制作者也許希望視其語(yǔ)言而定，用不同的顏色顯示代碼 :

code.html { color: #191970 }

code.css { color: #4b0082 }

　以上的例子建立了兩個(gè)類(lèi)，css和html，供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類(lèi)，例如，

P

例如，code.html.proprietary是無(wú)效的。/p

類(lèi)的聲明也可以無(wú)須相關(guān)的元素:

.note { font-size: small }

在這個(gè)例子，名為note的類(lèi)可以被用于任何元素。

一個(gè)良好的習(xí)慣是在命名類(lèi)的時(shí)候，根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的note類(lèi)也可以命名為small，但如果網(wǎng)頁(yè)制作者決定改變這個(gè)類(lèi)的樣式，使得它不再是小字體的話，那么這個(gè)名字就變得毫無(wú)意義了。

ID 選擇符

ID 選擇符個(gè)別地定義每個(gè)元素的成分。這種選擇符應(yīng)該盡量少用，因?yàn)樗哂幸欢ǖ木窒蕖Ｒ粋€(gè)ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:

#svp94O { text-indent: 3em }

這點(diǎn)可以參考HTML中的ID屬性:

　P ID=svp94O文本縮進(jìn)3em

關(guān)聯(lián)選擇符

關(guān)聯(lián)選擇符只不過(guò)是一個(gè)用空格隔開(kāi)的兩個(gè)或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性，而且因?yàn)閷盈B順序的規(guī)則，它們的優(yōu)先權(quán)比單一的選擇符大。例如， 以下的上下文選擇符

P EM { background: yellow }

是P EM。這個(gè)值表示段落中的強(qiáng)調(diào)文本會(huì)是黃色背景；而標(biāo)題的強(qiáng)調(diào)文本則不受影響。

　聲明

屬性

一個(gè)屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。

值

聲明的值是一個(gè)屬性接受的指定。例如，屬性顏色能接受值red。

組合

為了減少樣式表的重復(fù)聲明，組合的選擇符聲明是允許的。例如，文檔中所有的標(biāo)題可以通過(guò)組合給出相同的聲明:

H1, H2, H3, H4, H5, H6 {

color: red;

font-family: sans-serif }

　繼承

實(shí)際上，所有在選擇符中嵌套的選擇符都會(huì)繼承外層選擇符指定的屬性值，除非另外更改。例如，一個(gè)BODY定義了的顏色值也會(huì)應(yīng)用到段落的文本中。

有些情況是內(nèi)部選擇符不繼承周?chē)倪x擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會(huì)繼承的；直覺(jué)上，一個(gè)段落不會(huì)有同文檔BODY一樣的上邊界值。

注解

樣式表里面的注解使用C語(yǔ)言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:

/* COMMENTS CANNOT BE NESTED */

偽類(lèi)和偽元素

偽類(lèi)和偽元素是特殊的類(lèi)和元素，能自動(dòng)地被支持CSS的瀏覽器所識(shí)別。偽類(lèi)區(qū)別開(kāi)不同種類(lèi)的元素(例如，visited links(已訪問(wèn)的連接)和active links(可激活連接)描述了兩個(gè)定位錨(anchors)的類(lèi)型)。偽元素指元素的一部分，例如段落的第一個(gè)字母。

偽類(lèi)或偽元素規(guī)則的形式如

選擇符:偽類(lèi) { 屬性: 值 }

或

選擇符:偽元素 { 屬性: 值 }

偽類(lèi)和偽元素不應(yīng)用HTML的CLASS屬性來(lái)指定。一般的類(lèi)可以與偽類(lèi)和偽元素一起使用，如下:

選擇符.類(lèi): 偽類(lèi) { 屬性: 值 }

或

選擇符.類(lèi): 偽元素 { 屬性: 值 }

定位錨偽類(lèi)

　偽類(lèi)可以指定A元素以不同的方式顯示連接(links)、已訪問(wèn)連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類(lèi)link、visited或active。一個(gè)已訪問(wèn)連接可以定義為不同顏色的顯示，甚至不同字體大小和風(fēng)格。

一個(gè)有趣的效果是使當(dāng)前(或“可激活”)連接以不同顏色、更大的字體顯示。然后，當(dāng)網(wǎng)頁(yè)的已訪問(wèn)連接被重選時(shí)，又以不同顏色、更小字體顯示。這個(gè)樣式表的示例如下:

A:link { color: red }

A:active { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

首行偽元素

通常在報(bào)紙上的文章，例如Wall Street Journal中的，文本的首行都會(huì)以粗印體而且全部大寫(xiě)地展示。CSS1包括了這個(gè)功能，將其作為一個(gè)偽元素。首行偽元素可以用于任何塊級(jí)元素(例如P、H1等等)。以下是一個(gè)首行偽元素的例子:

　P:first-line {

　font-variant: small-caps;

　font-weight: bold }

首個(gè)字母?jìng)卧?/p>

首個(gè)字母?jìng)卧赜糜诩哟?drop caps)和其他效果。含有已指定值選擇符的文本的首個(gè)字母會(huì)按照指定的值展示。一個(gè)首個(gè)字母?jìng)卧乜梢杂糜谌魏螇K級(jí)元素。例如:

　P:first-letter { font-size: 300%; float: left }

會(huì)比普通字體加大三倍。

常用重要CSS樣式的屬性

盒子模型是CSS中一個(gè)很重要的概念，頁(yè)面中的所有元素都可以看成一個(gè)盒子，并占據(jù)一定的頁(yè)面空間，一個(gè)頁(yè)面由很多盒子組成，盒子之間會(huì)互相影響。只有掌握盒模型以及其中每個(gè)屬性的用法，才能真正控制好頁(yè)面元素。

盒子模型主要定義四個(gè)區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。

盒子的內(nèi)容區(qū)域存放文本和圖片等頁(yè)面元素，擁有如下屬性：

邊框基本屬性：

通過(guò)一個(gè)屬性設(shè)置四個(gè)方向邊框的寬度、樣式、顏色

屬性：border

取值：width style color;

只設(shè)置某一條邊框的寬度、樣式、顏色

語(yǔ)法：border-方向（top/right/bottom/left）：width style color;

只設(shè)置邊框的寬度、樣式、顏色中的一種

語(yǔ)法：border-屬性（width/style/color）：取值;

只設(shè)置某一條邊框的寬度、樣式、顏色中的一種

語(yǔ)法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;

屬性：border-radius

作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。

取值：

屬性：border-image

語(yǔ)法：

border-image-source ：引入背景圖片

取值：

默認(rèn)值：無(wú)圖片

url(圖片URL地址)

border-image-slice ：切割引入背景圖片，把邊框背景切成9份

取值：

number：默認(rèn)單位px

百分比：

fill：保留邊框圖像的中間部分

border-image-width ：指定邊框圖片的寬度

border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個(gè)參數(shù)，即水平和垂直方向

取值：

Stretch：默認(rèn)值，拉伸

Repeat：平鋪

Round：取整平鋪

內(nèi)容區(qū)域和邊框（邊緣）之間的距離

語(yǔ)法：padding: 值；

單邊設(shè)置：padding-方向（top/right/bottom/left）:值；

取值：

數(shù)值px

百分比

內(nèi)邊距的簡(jiǎn)寫(xiě)方式：

padding:value;

四個(gè)方向內(nèi)邊距的值均為value

padding:value1 value2;

Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值

padding:value1 value2 value3;

Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值

padding:value1 value2 value3 value4;

上右下左內(nèi)邊距的值分別為value1， value2， value3， value4

外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過(guò)外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù)，用于拉伸兩個(gè)元素間的距離。

語(yǔ)法：margin: 值；

單邊設(shè)置：margin-方向（top/right/bottom/left）:值；

取值：

重新制定元素尺寸計(jì)算模式

屬性：box-sizing

取值：

屬性：resize

取值：

位于元素邊框之外的一條線

屬性：

outline：width style color;

屬性：box-shadow

語(yǔ)法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：由一組值構(gòu)成的值列表

屬性：background-color

取值：顏色值或transparent

注意：背景顏色是從邊框位置處開(kāi)始繪制

屬性：background-image

取值：url(背景圖像URL)

屬性：background-repeat

取值：

屬性：background-attchment

取值：

scroll：默認(rèn)值，滾動(dòng)

fixed：固定

屬性：background-position

取值：

屬性：background-size

取值：

屬性：background-origin

取值：

屬性：background-clip

取值：

CSS3多背景通過(guò)為每個(gè)背景屬性提供多個(gè)屬性值實(shí)現(xiàn)。

font 簡(jiǎn)寫(xiě)屬性語(yǔ)法：

將所有字體屬性合寫(xiě)為一行，其中font-family是復(fù)合屬性中必不可少的屬性。

可以不設(shè)置其中的某個(gè)值，如果省略值地話，就使用屬性的默認(rèn)值。

②文本屬性：

（2）CSS3文本陰影屬性：

屬性：text-shadow

作用：產(chǎn)生陰影和模糊主體

語(yǔ)法：

作用：定義列表的編號(hào)樣式

屬性：list-style-type

作用：用于設(shè)置列表項(xiàng)的圖像屬性

語(yǔ)法：

圖像URL地址：圖像的相對(duì)路徑或絕對(duì)路徑

none：默認(rèn)值，不指定圖像

注意：圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來(lái)設(shè)置列表的圖片樣式。

通過(guò)設(shè)置li的背景圖片的方式來(lái)設(shè)置列表圖片基本步驟：

設(shè)置list-style-type屬性值為none

設(shè)置li標(biāo)記的背景屬性backgruond

作用：用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置

語(yǔ)法：

作用：可以同時(shí)設(shè)定列表樣式類(lèi)型、列表樣式位置、列表樣式圖片等屬性的值。

語(yǔ)法：

注意：

可以不設(shè)置其中的某個(gè)值，未設(shè)置的屬性采用默認(rèn)值

同時(shí)指定list-style-image和list-style-type時(shí)，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯(cuò)誤無(wú)法顯示

當(dāng)列表與列表項(xiàng)目同時(shí)使用樣式時(shí)，列表項(xiàng)目的樣式優(yōu)先顯示

特點(diǎn)：

可以設(shè)置寬度和高度

默認(rèn)情況下每個(gè)塊級(jí)元素獨(dú)占一行

作用：

塊級(jí)元素主要用于頁(yè)面布局

常用塊級(jí)元素：

div、p、h1~h6、ol、ul等

特點(diǎn)：

不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度

默認(rèn)情況下多個(gè)行內(nèi)元素會(huì)在一行內(nèi)顯示，遇父元素邊界時(shí)會(huì)自動(dòng)換行

作用：

行內(nèi)元素主要用于設(shè)置文樣式

常用行內(nèi)元素：

a、span、em、b、i、strong、img、input等

作用：控制頁(yè)面元素脫離原有文檔流，實(shí)現(xiàn)向左或向右移動(dòng)，直到該元素外邊緣碰到其包含框或另一個(gè)浮動(dòng)框的邊緣停止，標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁?dòng)盒子的位置。浮動(dòng)的元素不占據(jù)實(shí)際空間。

屬性： float

取值：

浮動(dòng)元素不會(huì)相互重疊；

浮動(dòng)元素不會(huì)上下浮動(dòng)，如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示，而且會(huì)超出容納塊，則它下降到低于先前任何浮動(dòng)元素的位置。

作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動(dòng)元素。

取值：

作用：控制頁(yè)面元素在頁(yè)面中的位置。

屬性：position

取值：static/relative/absolute/fiexed

默認(rèn)屬性值，元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列，塊級(jí)元素獨(dú)占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動(dòng)換行。

特點(diǎn)：

相對(duì)于自身原有位置進(jìn)行偏移

仍處于標(biāo)準(zhǔn)文檔流中

隨即擁有偏移屬性和z-idex屬性

偏移屬性:

left:數(shù)值px;

right:數(shù)值px;

top:數(shù)值px;

bottom:數(shù)值px;

當(dāng)元素相對(duì)定位后會(huì)產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時(shí)，默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。

特點(diǎn)：

建立了以包含塊為基準(zhǔn)的定位

絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素（設(shè)定了絕對(duì)定位、相對(duì)定位或固定定位中的任何一種），如果元素沒(méi)有已定位的祖先元素，則該元素的位置相對(duì)于瀏覽器窗口。

完全脫離了標(biāo)準(zhǔn)文檔流

隨即擁有偏移屬性和z-idex屬性

偏移屬性：

left:數(shù)值px;

right:數(shù)值px;

top:數(shù)值px;

bottom:數(shù)值px;

絕對(duì)定位未設(shè)置偏移量的特點(diǎn)：

無(wú)論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置

脫離了標(biāo)準(zhǔn)文檔流

設(shè)定固定定位的元素框的表現(xiàn)類(lèi)似于將position設(shè)置為absolute，不過(guò)其包含塊是瀏覽器窗口本身。

在計(jì)算機(jī)顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對(duì)定位容器的z-index屬性即對(duì)應(yīng)該方向。

作用：用于控制元素的層疊次序，使得某個(gè)元素浮于其他元素之上。

語(yǔ)法：

auto：遵循其父元素的定位

number：整數(shù)，可負(fù)，值大者疊加在上層

注意：使用z-index屬性時(shí)，要求該元素的position屬性值為absolute、relative或fixed。

作用：用于定義建立布局時(shí)元素生成的顯示框類(lèi)型

語(yǔ)法：dispaly:值;

作用：用于定義建立布局時(shí)元素生成的顯示框類(lèi)型

語(yǔ)法：visibility:值;

css樣式的屬性。

css縮寫(xiě)的主要規(guī)則如下：

margin/padding

通常寫(xiě)法,會(huì)遇到以下三種情況

margin-top:1px;

margin-right:10px;

margin-bottom:5px;

margin-left:20px;

margin-top:5px;

margin-right:5px;

margin-bottom:5px;

margin-left:5px;

margin-top:0px;

margin-right:10px;

margin-bottom:0px;

margin-left:5px;

那么我們進(jìn)行CSS縮寫(xiě)后會(huì)讓你目驚口呆的效果.如下

margin:1px

10px

5px

20px;

margin:5px;

margin:0

10px

5px;

書(shū)寫(xiě)順序是

margin:上

右

下

左

,

在CSS中.值為0的時(shí)候可以將單位省略不寫(xiě)就像第三種寫(xiě)法一樣.

其中padding和margin基本是一樣的寫(xiě)法

怎么樣.是不是大吃一驚.是的.CSS縮寫(xiě)就是這樣做到的.

border

通常寫(xiě)法:

border-width:1px;

border-style:solid;

border-color:#000;

縮寫(xiě)后:

border:1px

solid

#000;

書(shū)寫(xiě)順序:border:寬度

邊框線種類(lèi)

顏色;

Background

通常寫(xiě)法:

background-image:url(bg.png);

background-color:#00f;

background-repeat:no-repeat;

background-position:0

0;

縮寫(xiě)后:

background:url(bg.png)

#00f

no-repeat

0;

書(shū)寫(xiě)順序:background:背景圖片

顏色

重復(fù)類(lèi)型

定位;

background:image

color

repeat

position;

Font

通常寫(xiě)法:

font-family:"宋體";

font-size:2em;

line-height:180%;

font-weight:800;

縮寫(xiě)后：

font:800

2em/180%

"宋體";

書(shū)寫(xiě)順序:font:加粗

字體大小/行高

字體;

在使用Font縮寫(xiě)時(shí)至少要有

字體大小和字體這兩項(xiàng)

font:字體大小

字體;

Color

通常寫(xiě)法:

color:#000000;

color:#001188;

縮寫(xiě)后:

color:#000;

color:#018;

16進(jìn)制的色彩值時(shí)，如果每?jī)晌坏闹迪嗤梢钥s寫(xiě)一個(gè)

css樣式與html標(biāo)簽屬性的優(yōu)劣

css 樣式是css渲染引擎解析的 如 style="color:red;"

html標(biāo)簽屬性是html解析的 input name="email" autoComplete="off"/

html標(biāo)簽屬性難以重復(fù)使用，多個(gè)頁(yè)面想達(dá)到一樣的效果需要針對(duì)單獨(dú)頁(yè)面添加標(biāo)簽

css樣式則可以被多個(gè)頁(yè)面調(diào)用，更加方便，易于維護(hù)和管理

標(biāo)簽屬性和css樣式哪個(gè)優(yōu)先級(jí)高

css的樣式會(huì)優(yōu)先于標(biāo)簽的屬性，比如img src="" width="255" height="60"和

.img{ width:300px;height=70px;} 。你會(huì)發(fā)現(xiàn)圖片的最終效果是300*70，所以是css樣式會(huì)優(yōu)先于標(biāo)簽屬性。

分享標(biāo)題：css樣式標(biāo)簽屬性,CSS樣式標(biāo)簽
文章起源：http://chinadenli.net/article39/dsshdsh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站維護(hù)、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)