css配置命令_CSS 裡面的CLEAR 命令怎麼用

① CSS中在表格中的文字要離上下左右的距離命令是什麼應該怎麼寫

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

② css 我定義了一個class，但我想他圖片變大，怎麼設置他的長度和寬度

設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裡面加上display:inline;

/***************************這里細說一下block與inline兩個元素**************************/
：block元素的特點是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是,和其他元素在同一行上,不可控制(內嵌元素); #box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的效果 diplay:table;

/******************************IE 不認得min-這個定義***************************/
，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，

如果只用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，

可以這樣： #boxhtml>body #box

5、/*******************頁面的最小寬度**************************************************/

min -width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標簽下，然後為div指定一個類, 然後CSS這樣設計：

#container 第一個min-width是正常的；

但第2行的width使用了 javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。

/*************************6.DIV浮動IE文本產生3象素的bug*****************************/

左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. #box #left

#right *html #left <div id="box"> <div id="left"></div> <div id="right"></div> </div>

/*****************************7.IE捉迷藏的問題**************************************/

當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。有些內容顯示不出來，當滑鼠選擇這個區域是發現內容確實在頁面。

解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。

/*****************8.float的div閉合;清除浮動;自適應高度;***************************/
① 例如：<#div id=」floatA」 ><#div id=」floatB」 ><#div id=」 NOTfloatC」 >這里的NOTfloatC並不希望繼續平移，而是希望往下排。

(其中floatA、floatB的屬性已經設置為 float:left;) 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標簽，必須將float標簽閉合。

在 <#div class=」floatB」> <#div class=」NOTfloatC」>之間加上 < #div class=」clear」>這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，

否則會產生異常。並且將clear這種樣式定義為為如下即可： .clear
②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden; 當包含float的 box的時候，高度自動適應在IE下無效，

這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容.

例如某一個wrapper如下定義:.colwrapper
③對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如: <div id=」page」><div id=」left」></div>

<div id=」center」></div><div id=」right」></div></div>比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下

拉長,而 page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們應該這樣解決

<div id=」page」> <div id=」bg」 style=」float:left;width:100%」> <div id=」left」></div> <div id=」center」></div> <div id=」right」></div> </div> </div> 再嵌入一個float left而寬度是100%的DIV解決之
④萬能float 閉合(非常重要!) 關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上

class="clearfix" 即可,屢試不爽. /* Clear Fix */ .clearfix:after

.clearfix /* Hide from IE Mac */ .clearfix /* End hide from IE Mac */ /* end of clearfix */

或者這樣設置：.hackbox

/*******高度不能自適應*********************************/
11.高度不適應

高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。

例：#box #box p <div id="box"> <p>p對象中的內容</p></div> 解決方法：在P對象上下各加2個空的div對象CSS代碼：.1或者為DIV加上border屬性。

12、/******IE6下為什麼圖片下有空隙產生********************/
解決這個BUG的方法也有很多,可以是改變html的排版,或者設置img 為display:block 或者設置vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決.

13./******如何對齊文本與文本輸入框*************************/

加上 vertical-align:middle; <style type="text/css">  </style>

/*********************14.web標准中定義id與class有什麼區別**********************************/
一.web標准中是不容許重復ID的,比如 div id="aa" 不容許重復2次,而class 定義的是類,理論上可以無限重復, 這樣需要多次引用的定義便可以使用他.

二.屬性的優先順序問題 ID 的優先順序要高於class,看上面的例子

三.方便JS等客戶端腳本,如果在頁面中要對某個對象進行腳本操作,那麼可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,

遠遠不如一個ID來得簡單.

/*************15. LI中內容超過長度後以省略號顯示的方法***************************/

此方法適用與IE與OP瀏覽器 <style type="text/css">

 </style>

16、滾動條顏色的設置問題/****************為什麼web標准中IE無法設置滾動條顏色***************/
解決辦法是將body換成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

 </style>

17./************為什麼無法定義1px左右高度的容器**********************************/

E6下這個問題是因為默認的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18./*****************怎麼樣才能讓層顯示在FLASH之上呢******************************/

解決的辦法是給FLASH設置透明 <param name="wmode" value="transparent" />
19./***************************怎樣使一個層垂直居中於瀏覽器中************************/

這里我們使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以二

<style type="text/css">



</style>

/*************************************************************************************************************************************************************************************************************************火狐瀏覽器和IE兼容性的問題解決******************************************************************************************************************/
1. Div居中問題

div設置 margin-left, margin-right 為 auto 時已經居中，IE 不行，IE需要設定body居中，首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。

2.鏈接(a標簽)的邊框與背景

a 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height,

可以在 menubar 中插入一個空格。
3.超鏈接訪問過後hover樣式就不出現的問題

被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A Code: <style type="text/css">

 </style>
4. 游標手指cursor

cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
5.UL的padding與margin

ul標簽在FF中默認是有padding值的,而在IE中只有margin默認有值,所以先定義 ul就能解決大部分問題

6. FORM標簽

這個標簽在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式

ul,form給定義死了,所以後面就不會為這個頭疼了.
7. BOX模型解釋不一致問題

在FF和IE 中的BOX模型解釋不一致導致相差2px解決方法：div 注意這兩個 margin的順序一定不能寫反， important這個屬性IE不能識別,

但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div 重復定義的話按照最後一個來執行，所以不可以只寫margin:xx px!important;

#box #box
8.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)

p[id] 這個對於IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用.屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,

如p[id]中,所有p標簽中有id的都是同樣式的.
9.最狠的手段 - !important;

如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於」!important」會自動優先解析,然而IE則會忽略.

如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經提過
10.IE,FF的默認值問題

或許你一直在抱怨為什麼要專門為IE和FF寫不同的CSS，為什麼IE這樣讓人頭疼，然後一邊寫css，一邊咒罵那個可惡的M$ IE.其實對於css的標准支持方面，IE並沒有我們想像的那麼可惡, 關鍵在於IE和FF的默認值不一樣而已，掌握了這個技巧，你會發現寫出兼容FF和IE的css並不是那麼困難，或許對於簡單的css，你完全可以不用」!important」這個東西了。我們都知道，瀏覽器在顯示網頁的時候，都會根據網頁的 css樣式表來決定如何顯示，但是我們在樣式表中未必會將所有的元素都進行了具體的描述，當然也沒有必要那麼做，所以對於那些沒有描述的屬性，瀏覽器將採用內置默認的方式來進行顯示，譬如文字，如果你沒有在css中指定顏色，那麼瀏覽器將採用黑色或者系統顏色來顯示，div或者其他元素的背景，如果在 css中沒有被指定，瀏覽器則將其設置為白色或者透明，等等其他未定義的樣式均如此。所以有很多東西出現FF和IE顯示不一樣的根本原因在於它們的默認顯示不一樣，而這個默認樣式該如何顯示我知道在w3中有沒有對應的標准來進行規定，因此對於這點也就別去怪罪IE了。
11.為什麼FF下文本無法撐開容器的高度

標准瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這里為了照顧不認識min-height的IE6 可以這樣定義:
12.FireFox下如何使連續長欄位自動換行眾所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我們使用JS插入的方法來解決 <style type="text/css">  </style> <div id="ff"></div>

<scrīpt type="text/javascrīpt"> /* <![CDATA[ */

function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp="";

while(strContent.length>intLen)

strTemp+=""+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ </scrīpt>
13.為什麼IE6下容器的寬度和FF解釋不同呢

<?xml version="1.0" encoding="gb2312"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">  </style>

<div ōnclick="alert(this.offsetWidth)">讓FireFox與IE兼容</div> 問題的差別在於容器的整體寬度有沒有將邊框（border）的寬度算在其內,這里IE6解釋為200PX ,

而FF則解釋為220PX,那究竟是怎麼導致的問題呢？大家把容器頂部的xml去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks mode,關於qurks mode、 standards mode的相關

知識,請參考:http: // ASPNETusStan.mspx?mfr=true

IE6,IE7,FF IE7.0 出來了，對CSS的支持又有新問題。瀏覽器多了，網頁兼容性更差了，疲於奔命的還是我們，為解決IE7.0的兼容問題，找來了下面這篇文章：現在我大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！下面是三個瀏覽器的兼容性收集.

第一種，是CSS HACK的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意順序。這樣也屬於CSS HACK，不過沒有上面這樣簡潔。 #example /* Moz */ * html #example /* IE6 */ *+html #example /* IE7 */

 <link rel="stylesheet" type="text/css" href="css.css" />  <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->  <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

第三種，css filter的辦法，以下為經典從國外網站翻譯過來的。. 新建一個css樣式如下： #item 新建一個div,並使用前面定義的css的樣式： <div id="item">some text here</div> 在body表現這里加入lang屬性,中文為zh：<body lang="en"> 現在對div元素再定義一個樣式： *:lang(en) #item 這樣做是為了用!important覆蓋原來的css樣式,由於:lang選擇器ie7.0並不支持,所以對這句話不會有任何作用,於是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式： #item:empty :empty選擇器為css3的規范,盡管safari並不支持此規范,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上。對IE6和FF的兼容可以考慮以前的!important 個人比較喜歡用
另外,團IDC網上有許多產品團購,便宜有口碑

③ CSS 命令微信公眾平台自適應屏幕大小

下面就告訴大家如何解決。
1.使用HTML中的viewport來實現

viewport語法如下：

HTML代碼

<!--在html代碼的<head>...</head>中嵌入下面代碼-->
<metaname="viewport"
content="
height=[pixel_value|device-height],
width=[pixel_value|device-width],
initial-scale=0.5,
minimum-scale=float_value,
maximum-scale=float_value,
user-scalable=[yes|no],
"

/>

width

控制 viewport 的大小，可以指定的一個值或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。

height

和 width 相對應，指定高度。

initial-scale

初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設置初始縮放為「1.0」，那麼，web頁面在展現的時候就會以target density解析度的1:1來展現。如果你設置為「2.0」，那麼這個頁面就會放大為2倍。

maximum-scale

最大縮放。即允許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的最大乘數。例如，如果你將這個值設置為「2.0」，那麼這個頁面與target size相比，最多能放大2倍。

user-scalable

用戶調整縮放。即用戶是否能改變頁面縮放程度。如果設置為yes則是允許用戶對其進行改變，反之為no。默認值是yes。如果你將其設置為no，那麼minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。

(設置屏幕寬度為設備寬度，禁止用戶手動調整縮放)

HTML代碼

<metaname="viewport"content="width=device-width,user-scalable=no"/>

(設置屏幕密度為高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放)

HTML代碼

<meta
name="viewport"content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>

註：1). 所有的縮放值都必須在0.01–10的范圍之內。

2). minimum-scale、maximum-scale要麼寫值，要不留這兩個

2. 不使用絕對寬度

由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;

3. CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。

HTML代碼

@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}

上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

4.流動布局
各個區塊的位置都是浮動的，不是固定不變的。

HTML代碼

.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}

float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要非常小心。

5. 圖片的自適應
圖片的寬度和高度要按百分比來設定，千萬不可以設定成固定大小。

HTML代碼

<imgwidth="95%"src=""alt=""/>

④ CSS的三種使用方法。行內樣式：內嵌式：外部式：

外部式:

（1）用法:當要在站點上所有或部分網頁上一致地應用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，並將它們鏈接到所有網頁，便能確保所有網頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會反映到所有與該樣式表相鏈接的網頁上。

（2）舉例:通常外部樣式表以 .css 做為文件擴展名，例如 Mystyles.css。然後在需要此樣式的頁面中將其鏈接進來。

2.內嵌式:

（1）用法:當人們只是要定義當前網頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表，「嵌」在網頁的標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。

（2）舉例:在 MicrosoftFrontPage2000中，某些格式設置特性會作為內嵌樣式自動應用。例如∶如果使用「邊框與陰影」命令（在「格式」菜單上）在普通段落周圍應用框，FrontPage 會寫下格式設置信息，作為段落標記符的內嵌樣式屬性。

3.行內樣式:

行內樣式就是直接把CSS代碼添加到HTML的標記中，即作為HTML標記的屬性標記存在。通過這種方法，可以很簡單地對某個元素單獨定義樣式。

拓展資料:

CSS定義:
它是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。
CSS簡介:
CSS（Cascading Style Sheet，可譯為「層疊樣式表」或「級聯樣式表」）是一組格式設置規則，用於控制Web頁面的外觀。通過使用CSS樣式設置頁面格式，可將頁面的內容與表現形式分離。
優越性:CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。

⑤ CSS 裡面的CLEAR 命令怎麼用

用在受影響的元素樣式里，不過在有些情況下，用clear是達不到清除浮動效果的。

可以使用其他方法如：

如果是同級元素之間的影響，在影響的一方里加一個用於清除浮動的div,<div class="clear"></div> .class{clear:both;}
如果是父子關系的元素之間的影響，在父元素的樣式里加一個overflow:hidden
給被影響的，不需要浮動的元素加一個浮動來達到清除浮動的效果
這幾種基本已經夠用了

還有其他的方法，可以搜一搜

⑥ 網頁css中有哪些常用的命令呀！能詳細的告訴我嗎！

經常用的你還是看CSS代碼冊吧

⑦ CSS集群的受益

CSS特性給運營商帶來了明顯的收益：擴容網路時，保護已有投資。擴容的同時，將2台物理設備虛擬為一台設備，簡化了設備的配置和管理。多台設備間冗餘、備份，提高系統的可靠性。
原理描述
在主控板SRU的子卡槽位插入堆疊卡VSTSA，原有主控板、介面板、機框不用更新，就可以支持堆疊。目前僅支持兩台S9300的堆疊。堆疊線纜的連接每塊主控板上可以插一塊堆疊卡，每塊堆疊卡上有4個堆疊口。兩台設備都有兩塊主控板的情況下，通過專用的堆疊電纜將這8組堆疊口按照圖1規則連接起來。堆疊口連接規則是固定的，所有堆疊口都要插上堆疊線纜，不能隨意連接。
命令參考：
css enable 命令功能 css enable命令用來使能設備的堆疊功能。
undo css enable命令用來去使能設備的堆疊功能。預設情況下，設備未使能堆疊功能。命令格式 css enableundo css enable [ all | frameframe-id ] all 去使能堆疊系統中所有設備的堆疊功能。frame指定堆疊機框ID，去使能該設備的堆疊功能。
set css 命令功能 set css用來設置堆疊機框的ID或堆疊機框競爭的優先順序。預設情況下堆疊機框ID為1，堆疊機框競爭優先順序為1。命令格式 set css { idnew-id | prioritypriority } [ frameframe-id ]idnew-id 表示配置生效後的堆疊機框ID。整數形式，取值范圍為1～2。預設值為1.
prioritypriority 表示配置生效後的堆疊競爭優先順序。整數形式，取值范圍為1～255。值越大，優先順序越高。預設值為1。
frameframe-id 指定要修改配置的堆疊機框當前ID。此參數僅在堆疊系統建立成功後可見，單框堆疊和非堆疊狀態不可見。整數形式，取值范圍為1～2
注意事項：在調試過程中，應該先啟用CSS功能，然後不重啟，更改堆疊的機框的優先順序。最後重起，不然優先順序相同，會影響CSS報文正常交換。

⑧ CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程—課程10：外部樣式表(一)

十、外部樣式表

外部樣式表是把各種樣式單獨存在一個文件里，供其他多個網頁調用，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇「HTML」；

2）點菜單「文件－保存」命令，以「lx10.html」為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、外部樣式表

1）點菜單「文件－新建」，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

2）在裡面輸入下面的內容；

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

3）第一行 /* ... */ 是注釋，註明作者版權用途等，根據自己的需要，

下面的內容跟內部樣式表相同，各個標簽和它的樣式，保存一下文件；

4）回到 lx10.html 文檔中，在 head 區內加上下面一行外部引用標識；

5）然後在 body 區內，輸入下面的內容；

1）點菜單「文件－新建」，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

6）保存一下文件，回到自己文件夾中，打開 lx10 網頁，看一下效果；

7）在多個網頁具有相同樣式時，使用外部樣式表可以節省空間和減小網頁大小；

本節學習了外部樣式表的使用方法，你成功地完成了本教程，歡迎繼續學習本站的其他課程！

本教程由86團學校TeliuTe製作 http://teliute.laxjyj.com

（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網）

CSS標簽大全(一)

字體屬性：(font)

大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD

樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

行高 line-height: normal;(正常) 單位：PX、PD、EM

粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性：(background)

色彩background-color: #FFFFFF;

圖片background-image: url();

重復background-repeat: no-repeat;

滾動background-attachment: fixed;(固定) scroll;(滾動)

位置background-position: left(水平) top(垂直);

簡寫方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;

區塊屬性： (Block)

字間距letter-spacing: normal; 數值

對劉text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進text-indent: 數值px;

垂直對齊vertical-align: baseline;(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數值

空格white-space: pre;(保留) nowrap;(不換行)

顯示display:block;(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題)

方框屬性：(Box)

width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左

邊框屬性： (Border)

border-style: dotted(點線); dashed(虛線); solid(實線); double(雙線); groove(槽線); ridge;(脊狀) inset;(凹陷) outset;

border-wid

th:; 邊框寬度

border-color:#;

簡寫方法border：width style color;

列表屬性： (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) css屬性代碼大全

一 CSS文字屬性：

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

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

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

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

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

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

line-height : 200%; /*設置行高*/

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

vertical-align:sub; /*下標字*/

vertical-align:super; /*上標字*/

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

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

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

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

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

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

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

二、CSS邊框空白

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

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

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

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

三、CSS符號屬性：

list-style-type:none; /*不編號*/

list-st

yle-type:decimal; /*阿拉伯數字*/

list-style-type:lower-roman; /*小寫羅馬數字*/

list-style-type:upper-roman; /*大寫羅馬數字*/

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

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

list-style-type:disc; /*實心圓形符號*/

list-style-type:circle; /*空心圓形符號*/

list-style-type:square; /*實心方形符號*/

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

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

list-style-position:inside; /*縮進*/

四、CSS背景樣式：

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

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

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

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

background-repeat : repeat; /*重復排列-網頁默認*/

background-repeat : no-repeat; /*不重復排列*/

background-repeat : repeat-x; /*在x軸重復排列*/

background-repeat : repeat-y; /*在y軸重復排列*/

指定背景位置

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

background-position : top; /*向上對齊*/

background-position : buttom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*居中對齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

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

a:visited /*瀏覽過的鏈接文字格式*/

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

a:hover /*滑鼠轉到鏈接*/

滑鼠游標樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 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

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

六、CSS框線一覽表：

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

border-bottom : 1px solid #6699cc;

/*下框線*/

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

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

以上是建議書寫方式,但也可以使用常規的方式如下:

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

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

border-top-style : solid/*設置上框線top樣式*/

其他框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表單運用：

文字方塊

按鈕

復選框

選擇鈕

多行文字方塊

下拉式菜單選項1選項2

八、CSS邊界樣式：

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

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

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

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

CSS 屬性：字體樣式(Font Style)

序號中文說明標記語法

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風格 {font-style:inherit|italic|normal|oblique}

5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數值|inherit|normal;}

9 字間距 {letter-spacing:數值|inherit|normal}

10 單詞間距 {word-spacing:數值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

序號中文說明標記語法

行間距 {line-height:數值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

序號中文說明標記語法

1 背景顏色 {background-color:數值}

2 背景圖片 {background-image: url(URL)|none}

3 背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

框架樣式(Box Style)

序號中文說明標記語法

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值： thin|medium|thick|數值

4 邊框顏色 {border-color:數值數值數值數值} 數值：分別代表top、right、bottom、left顏色值

5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊框 {border:border-width border-style color}

上邊框 {border-top:border-top-width border-style color}

右邊框 {border-right:border-right-width border-style color}

下邊框 {border-bottom:border-bottom-width border-style color}

左邊框 {border-left:border-left-width border-style color}

7 寬度 {width:長度|百分比| auto}

8 高度 {height:數值|auto}

9 漂浮 {float:left|right|none}

10 清除 {clear:none|left|right|both}

分類列表

序號中文說明標記語法

1 控制顯示 {display:none

|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 圖形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

7 滑鼠形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

word-wrap是控制換行的。使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，就不起作用。break-word是控制是否斷詞的。normal是默認情況，英文單詞不被拆開。break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。為了解決長串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通的英文語句中的單詞會被斷開（ie下也是）。目前主要的問題存在於長串英文和英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。即英文單詞應不應該被斷開那？那問題很明顯了，顯然不應該被斷開了。對於長串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。所以，綜上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

CSS樣式表代碼布局基礎教程—課程9：鏈接樣式

九、鏈接樣式

使用偽類可以設置鏈接的樣式，比如改變顏色、去掉下劃線等，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇「HTML」；

2）點菜單「文件－打開」命令，打開自己文件夾里的lx7.html

3）再點菜單「文件－另存為」命令，保存文件名為「lx9.html」

2、設置偽類

1）在 head 區內，輸入內部樣式表，設定各個的錨標記樣式，如下；

2）第一個 a 設定全局錨點的樣式，用塊顯示、寬度是50像素、背景色是淺綠色，接下來是錨點 a 的成員：

link 是鏈接，設定頁面中的鏈接樣式，顏色藍色，不帶下劃線，

visted 是訪問過的鏈接，設定樣式為栗色、不帶下劃線，

active 是按下滑鼠時的鏈接，設定顏色為綠色、無下劃線，

hover 是滑鼠移過來懸停，設定顏色為紅色、有下劃線，背景色改成黃色，hover 放在其他幾個成員的後面；

3）保存一下文件，回到自己的文件夾中，打開 lx9 網頁，試著用滑鼠點擊、拖動鏈接，看一下效果；

本節學習了設置鏈接樣式的基本方法，如果你成功地完成了練習，請繼續學習下一課內容；

CSS樣式表代碼布局基礎教程—課程8：內部樣式表(一)

八、內部樣式表

內部樣式表放在網頁的...區內，集中在一起方便管理，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇「HTML」；

2）點菜單「文件－保存」命令，以「lx8.html」為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、內部樣式表

1）對系統標簽使用樣式，這會影響所有的這種標簽，在 head 區輸入下面的代碼；

2）第一行是樣式表開始，最後是樣式表結束，是注釋標簽，

首先是對 body 標簽設置樣式，這樣凡是在 body 區里的內容，都會使用這個樣式，設置背景色和文字大小

然後對 span 標簽設置樣式，設置內容的顏色，以後凡是用到 span 的地方，都使用這個顏色；

3）接著在 body 區里輸入下面的內容；

1）對系統標簽使用樣式，這會影響所有的這種標簽，在 head 區輸入下面的代碼；

4）保存一下文件，回到自己的文件夾里，打開 lx8 網頁，看一下效果；

5）自定義樣式選擇符，除了系統的標簽外，也可以自己定義需要的樣式標記，在 head 的.樣式表裡加入下面的代碼；

.myblue {

color:blue;

前面的點，表示這是一個通用的樣式，可以重復使用，如果是 #號，表示是一個標識符，是專用唯一的 id，myblue 是自定義的樣式名稱；

6）在 body 區里加入下面的代碼，加在上一行的前面，再加上

標簽分成兩段；

7）這兒使用的是 span，裡面的 class 套用的是 myblue 樣式，替換了前面設的樣式，

保存一下文件，到瀏覽器中看看效果；

本節學習了使用內部樣式表的基本方法，如果你成功地完成了練習，請繼續學習下一課內容；

CSS樣式表代碼布局基礎教程—課程7：ul列表(一)

七、ul 列表

對於排列有序的條目，可以使用列表來實現，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇「HTML」；

2）點菜單「文件－保存」命令，以「lx8.html」為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、使用列表（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網）

1）在後面接著輸入下面的代碼；

第一課

第二課

第三課

2）前面的

建立一個列表，裡面的各個

是列表項，各個列表項排列對齊縮進，前面有一個圓點列表符號，

保存一下文件，到自己文件夾里，打開 lx7 網頁，看看列表的效果，這兒加了超級鏈接；

3）如果要去掉前面的圓點，可以在 ul 的樣式里設定，前面的縮進也可以設定內邊距為 0，輸入下面的代碼；

第一課

第二課

第三課

4）保存一下，再到瀏覽器里看一下，三個列表都排到了左邊對齊；

5）如果要排列成橫向水平的菜單樣式，可以在每個列表項里加上 float 屬性，防止重疊再設定一個寬度，代碼如下；

6）保存一下，再到瀏覽器里看一下，三個列表項都水平排列了；

本節學習了列表的基本使用方法，如果你成功地完成了練習，請繼續學習下一課內容；

CSS樣式表代碼布局基礎教程—課程6：div布局(一)

六、div 布局

默認 div 占據一行，第二個 div 到下一行去，怎樣用 div 進行分欄布局，我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇「HTML」；

2）點菜單「文件－打開」命令，打開上次的 lx5 網頁，再點「文件－另存為」，以「lx6.html」為文件名，保存到自己的文件夾；

3）按照兩列並排來進行布局；

2、定位布局

1）在下面加一個

標簽，作為主框架，在標簽里加入下面的樣式；

2）前面的 id 是這個 div 的標識符，用來標記這個 div 容器，

在裡面的樣式里設置了顏色、邊框、內邊距，

設定了固定寬度 604，高度 202，這個可以計算出來，根據下面兩列的寬度再加上內邊距；

3）修改裡面的古詩的 div 樣式，加上背景色、去掉內外邊距，最後加上一個左浮動 float:left

4）在這個後面，再加上另一個 div，樣式相同，裡面輸入另一首古詩；

5）這兒的 float:left; 讓這個 div 框，跟上一個框並排左對齊，而不是到下一行去，

最後再加一個標簽，結束最外面的大框架；

6）保存一下文件，回到自己文件夾里，打開 lx6 網頁看看效果；

本節學習了使用 div 布局的基本方法，如果你成功地完成了練習，請繼續學習下一課內容；

;

⑨ 常用css命令

有些是用JS做的。有些用css+js就可以，有些是用純div+css也可以實現的。

⑩ 在CSS中如何設置圖層

可以用z-index控制，具體步驟如下：

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

導航:首頁 > 程序命令 > css配置命令

css配置命令

拓展資料:

CSS樣式表代碼布局基礎教程—課程10：外部樣式表(一)

CSS標簽大全(一)

一 CSS文字屬性：

vertical-align屬性

指定背景位置

滑鼠游標樣式：

CSS 屬性：字體樣式(Font Style)

文本樣式(Text Style)

背景樣式

框架樣式(Box Style)

分類列表

CSS樣式表代碼布局基礎教程—課程9：鏈接樣式

CSS樣式表代碼布局基礎教程—課程7：ul列表(一)

CSS樣式表代碼布局基礎教程—課程6：div布局(一)

與css配置命令相關的資料

導航:首頁 > 程序命令 > css配置命令

css配置命令

拓展資料:

CSS樣式表代碼布局基礎教程—課程10：外部樣式表(一)

CSS標簽大全(一)

一 CSS文字屬性：

vertical-align屬性

指定背景位置

滑鼠游標樣式：

CSS 屬性： 字體樣式(Font Style)

文本樣式(Text Style)

背景樣式

框架樣式(Box Style)

分類列表

CSS樣式表代碼布局基礎教程—課程9：鏈接樣式

CSS樣式表代碼布局基礎教程—課程7：ul列表(一)

CSS樣式表代碼布局基礎教程—課程6：div布局(一)

與css配置命令相關的資料

CSS 屬性：字體樣式(Font Style)