css的基本語法

時(shí)間：2024-07-16 17:08:42 CSS 我要投稿

相關(guān)推薦

css的基本語法

　　cascading stylesheet(級(jí)聯(lián)樣式表)。為網(wǎng)頁提供外觀（也就是，網(wǎng)頁的表現(xiàn)形式）。將網(wǎng)頁的外觀寫在一個(gè)css文件里，方便頁面代碼的維護(hù)（將表現(xiàn)與數(shù)據(jù)分離）。為方便大家學(xué)習(xí)css，yjbys小編為大家分享css的基本語法如下：

　　css的基本語法

　　選擇器{

　　屬性1:屬性值1;

　　屬性n:屬性值n;

　　符合選擇器要求的標(biāo)記，會(huì)添加對(duì)應(yīng)的樣式。

　　Chrome瀏覽器為SVG和CSS添加GPU加速功能

　　互聯(lián)網(wǎng)有消息透露，谷歌正在為Chrome瀏覽器增加新的GPU加速功能。Chrome18瀏覽器將內(nèi)建開關(guān)選項(xiàng)，讓消費(fèi)者選擇使用GPU硬件加速基于矢量的SVG圖形和CSS過濾器，讓Chrome瀏覽器在未來網(wǎng)頁顯示上獲得突破性速度，并且達(dá)成驚人的視覺效果。

　　Chrome瀏覽器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系統(tǒng)，但目前這個(gè)功能仍然主要是實(shí)驗(yàn)性質(zhì)，因?yàn)橹挥袔讉€(gè)少數(shù)網(wǎng)站部署了SVG和CSSGPU加速。

　　但也有信息表示，tomshardware測(cè)試發(fā)現(xiàn)Chrome這項(xiàng)功能在顯示目前網(wǎng)頁方面，顯示速度并沒有出現(xiàn)任何顯著增加，在WebVizHTML5基準(zhǔn)測(cè)試當(dāng)中出現(xiàn)了不穩(wěn)定和崩潰問題。

　　評(píng)論表示，雖然SVG和CSSGPU加速還有待完善，但是Mozilla火狐、微軟IE和其他版本瀏覽器之間的競(jìng)爭(zhēng)，肯定會(huì)推動(dòng)這種技術(shù)快速發(fā)展和完善。

　　設(shè)置容器中的內(nèi)容垂直居中css代碼

　　如實(shí)例1設(shè)置網(wǎng)頁整體居中的代碼中內(nèi)容是居容器的頂部的，而在表格布局時(shí)默認(rèn)是垂直居中的，當(dāng)我們需要垂直居中的時(shí)候該怎么辦呢？別害怕，跟我來，也是比較簡(jiǎn)單的，只用設(shè)置容器內(nèi)的行高就行了。

　　line-height:500px;

　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<htmlxmlns="http://www.w3.org/1999/xhtml">

　　<head>

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

　　<title>標(biāo)準(zhǔn)之路www.aa25.cn</title>

　　<style>

　　#layout{width:778px;margin:0auto;text-align:center;border:1pxsolid#44b6dc;background:#e1edfb;height:500px;line-height:500px;}

　　</style>

　　</head>

　　<body><pid="layout">標(biāo)準(zhǔn)之路www.##.cn </p>

　　</body>

　　</html>

　　提示：可以先修改部分代碼后再運(yùn)行

　　這是一種方法，另外和種方法就是設(shè)置的它內(nèi)邊距padding了，自己可以試試喲～～

　　CSS對(duì)不同瀏覽器的兼容性解決辦法

　　CSS 對(duì)不同瀏覽器的兼容性解決辦法由于CSS 在不同瀏覽器中存在兼容性問題，所以在使用 p+CSS 布局中，可能導(dǎo)致相同的內(nèi)容在不同瀏覽器中出現(xiàn)不同的顯示效果，為了解決這些方面的問題，以下針對(duì)CSS 某些屬性的用法提出相應(yīng)的一些解決辦法。 1、頁面居中問題在IE 瀏覽器下，可以通過定義CSS 樣式body {text- align: center;}來實(shí)現(xiàn)頁面居中，但在FireFox（以下簡(jiǎn)寫為FF）瀏覽器下此屬性就失效了。解決辦法：使用"margin- left: auto; margin- right : auto; " www.diannao114.cn2、padding 屬性在不同瀏覽器的顯示問題當(dāng)給p 設(shè)置padding 屬性后，在FF 瀏覽器中會(huì)導(dǎo)致 width 和height 增加(p 的實(shí)際寬度=p 寬+Padding), 但在 IE 瀏覽器中width 和height 不會(huì)增加，這就導(dǎo)致相同的內(nèi)容在不同瀏覽器中出現(xiàn)不同的顯示效果。解決辦法：給p 設(shè)定IE、FF 兩個(gè)寬度，在IE 的寬度前加上IE 特有標(biāo)記" * " 號(hào)。例如： #pwidth{ padding:5px; width:100px; *width:110px; } 3、奇怪的間隙問題有的時(shí)候我們明明設(shè)好了高度，可在IE6 上卻看見一些奇怪的間隙。解決辦法：試試在有空隙的p 上加上"font- size:0px;" 4、關(guān)于手形光標(biāo)要將頁面內(nèi)容的光標(biāo)顯示為手形，通常的做法是使CSS 屬性cursor: hand; 但這于做法只適用于IE. 解決辦法：cursor: pointer; 5、浮動(dòng)在IE6 產(chǎn)生雙倍距離問題例如： #box{ float:left; width:100px; margin:0 0 0 100px; } 這種情況之下IE6 會(huì)產(chǎn)生200px 的距離。解決辦法：在以上屬性的基礎(chǔ)上，加上display:inline，使浮動(dòng)忽略。6、UL 和FORM標(biāo)簽的padding 與margin ul 標(biāo)簽在FF 中默認(rèn)是有padding 值的, 而在IE 中只有 margin 默認(rèn)有值。FORM標(biāo)簽在IE 中,將會(huì)自動(dòng)margin 一些邊距,而在FF 中margin 則是0；解決辦法：css 中首先都使用這樣的`樣式ul,form{margin:0; padding:0;}。 7、截字省略號(hào) .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 這個(gè)CSS 是定義當(dāng)內(nèi)容溢出寬度后會(huì)自行的截掉超出部分的文字，并以省略號(hào)結(jié)尾，但注意Firefox 并不支持。

　　p+CSS 網(wǎng)頁布局的分類

　　p+CSS 網(wǎng)頁布局的分類1、一列固定寬度一列布局是所有布局的基礎(chǔ)，也是最簡(jiǎn)單的布局方式，用 p+CSS 布局的代碼如下： XHTML 代碼：一列固定寬度CSS 代碼： #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 2、一列自適應(yīng)寬度自適應(yīng)的布局能夠根據(jù)瀏覽器窗口的大小自動(dòng)改變其寬度和高度值，是網(wǎng)頁設(shè)計(jì)中一種非常靈活的布局形式，用 p+CSS 布局的代碼如下： XHTML 代碼：一列自適應(yīng)寬度CSS 代碼： #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 3、一列固定寬度居中頁面整體居中是網(wǎng)頁布局中最常見到形式，在傳統(tǒng)的表格布局中，使用TABLE 的align="center" 屬性來實(shí)現(xiàn)，在p+CSS 布局中采用如下代碼來實(shí)現(xiàn)：XHTML 代碼：一列自適應(yīng)寬度CSS 代碼： p+CSS 網(wǎng)頁布局方法探析。如今的網(wǎng)頁設(shè)計(jì)考慮得更多的是搜索引擎以及給用戶帶來更多的便利，傳統(tǒng)的TABLE 網(wǎng)頁布局由于其龐大的HTML 代碼，使得其在搜索引擎方面顯得有些無能為力，而用p+CSS 進(jìn)行網(wǎng)頁布局具有代碼精簡(jiǎn)的優(yōu)點(diǎn)使得其在這方面又體現(xiàn)出更多的優(yōu)勢(shì)。但是又由于CSS 對(duì)不同瀏覽器存在兼容性問題，所以對(duì)于初學(xué)者來說，在使用p+CSS 進(jìn)行網(wǎng)頁布局過程中可能會(huì)遇到各種問題，本文就給大家探討幾點(diǎn)p+CSS 布局的技巧。4、二列固定寬度在有一列固定寬度布局的基礎(chǔ)上，實(shí)現(xiàn)二列固定寬度也就很簡(jiǎn)單了，用p+CSS 布局的代碼如下：XHTML 代碼：左側(cè)右側(cè)CSS 代碼： #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 5、二列固定寬度居中從一列固定寬度居中的布局方法中，我們就不難完成二列固定寬度居中了，可以使用一個(gè)居中的p 作為容器，將二列分欄的p 放置在容器中，從而就實(shí)現(xiàn)二列的居中顯示。 p+CSS 的代碼如下： XHTML 代碼：左側(cè)右側(cè)CSS 代碼： #main{ width:554px; margin:0px auto; #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 這里僅列舉了一列、二列的布局方式，實(shí)際上三列、四列等多列的布局方式也和二列的布局方式的實(shí)現(xiàn)方法是一樣的。事實(shí)上不管多么復(fù)雜的頁面設(shè)計(jì)，在p+CSS 網(wǎng)頁布局中，均是以p 為基礎(chǔ)，通過一列、二列、三列這些基礎(chǔ)的布局方式的相互組合與嵌套來實(shí)現(xiàn)復(fù)雜的布局。

　　p+CSS網(wǎng)頁布局技巧：設(shè)置網(wǎng)頁整體居中的css代碼

　　以前用表格布局時(shí)設(shè)置網(wǎng)頁居中非常方便，把表格對(duì)齊方式設(shè)置為居中就行了，就這么簡(jiǎn)單，現(xiàn)在呢，用p+CSS樣式表控制，好像不是那么容易了，其實(shí)也很簡(jiǎn)單，只不過方式不同而已。

　　<style>

　　#layout { width:778px; margin:0 auto; text-align:center;}

　　</style>

　　<p id="layout">標(biāo)準(zhǔn)之路www.aa25.cn</p>

　　請(qǐng)看這段代碼，寬度為適合800×600分辨率瀏覽器的寬度，margin:0 auto; 這句代碼就是讓居中了，意思是外邊距上下設(shè)置為0，左右設(shè)為自動(dòng)。這樣它就居中了。

　　那么可能你要問了，text-align:center;為什么還要讓內(nèi)容居中呢？呵呵，別著急，這句是為了適應(yīng)IE6以下版本的瀏覽器而加的，IE6以下對(duì)margin:0 auto;不能解析為居中，所以用這種方式來補(bǔ)救，以下在設(shè)計(jì)內(nèi)容時(shí)再用 text-align:left;就可以了。

　　注：margin和padding的值的順序?yàn)轫槙r(shí)針上右下左，如margin:1px 2px 3px 4px;還可以縮寫為上下、左右，如本例，如果為margin:0px;則是各邊都為0

　　提示：可以先修改部分代碼后再運(yùn)行

【css的基本語法】相關(guān)文章：

英語基本語法結(jié)構(gòu)詳解10-25

日語語法動(dòng)詞的基本形詳解07-26

初級(jí)日語基本語法大全「必備」01-22

初中英語基本語法知識(shí)05-14