CSS網頁設計有哪些必要的方法_CSS網頁設計有什么方法

　　CSS指層疊樣式表 (Cascading Style Sheets)，大家知道網站的前端是離不開CSS樣式的，那如何能學好這個技術呢?下面由學習啦小編為大家整理的CSS網頁設計方法，希望大家喜歡!

　　CSS網頁設計方法

　　一.使用css縮寫

　　使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫語法結見附》，這里就不展開描述。

　　二.明確定義單位，除非值為0

　　忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫width="100"，但是在CSS中，你必須給一個準確的單位，比如: width:100px width:100em。只有兩個例外情況可以不定義單位:行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。

　　三.區分大小寫

　　當在XHTML中使用CSS，CSS里定義的元素名稱是區分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都采用小寫。

　　class和id的值在HTML和XHTML中也是區分大小寫的，如果你一定要大小寫旌閑矗?胱邢溉啡夏閽贑SS的定義和XHTML里的標簽是一致的。

　　四.取消class和id前的元素限定

　　當你寫給一個元素定義class或者id，你可以省略前面的元素限定，因為ID在一個頁面里是唯一的，而clas s可以在頁面中多次使用。你限定某個元素毫無意義。例如：

　　div#content?{?/*?declarations?*/?}?

　　fieldset.details?{?/*?declarations?*/?}?

　　可以寫成

　　#content?{?/*?declarations?*/?}?

　　.details?{?/*?declarations?*/?}?

　　這樣可以節省一些字節。

　　五.默認值

　　通常padding的默認值為0，background-color的默認值是transparent。但是在不同的瀏覽器默認值可能不同。如果怕有沖突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，象這樣:

　　*?{

　　margin:0;

　　padding:0;

　　}

　　六.不需要重復定義可繼承的值

　　CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重復定義。但是要注意，瀏覽器可能用一些默認值覆蓋你的定義。

　　七.最近優先原則

　　如果對同一個元素的定義有多種，以最接近(最小一級)的定義為最優先，例如有這么一段代碼

　　Update: Lorem ipsum dolor set

　　在CSS文件中，你已經定義了元素p，又定義了一個class"update"

　　p?{

　　margin:1em?0;

　　font-size:1em;

　　color:#333;

　　}

　　.update?{

　　font-weight:bold;

　　color:#600;

　　}

　　這兩個定義中，class="update"將被使用，因為class比p更近。你可以查閱W3C的《 Calculating a selector’s specificity》 了解更多。

　　八.多重class定義

　　一個標簽可以同時定義多個class。例如:我們先定義兩個樣式，第一個樣式背景為#666;第二個樣式有10 px的邊框。

　　.one{width:200px;background:#666;}

　　.two{border:10px?solid?#F00;}

　　在頁面代碼中，我們可以這樣調用

　　這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣做是可以的，你可以嘗試一下。

　　九.使用子選擇器(descendant selectors)

　　CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼:

　　Item 1>

　　Item 1

　　Item 1

　　這段代碼的CSS定義是:

　　div#subnav?ul?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitem?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitem?a.subnavitem?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitemselected?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitemselected?a.subnavitemselected?{?/*?Some?styling?*/?}

　　你可以用下面的方法替代上面的代碼

　　Item 1

　　Item 1

　　Item 1

　　樣式定義是:

　　?? 　#subnav?{?/*?Some?styling?*/?}

　　#subnav?li?{?/*?Some?styling?*/?}

　　#subnav?a?{?/*?Some?styling?*/?}

　　#subnav?.sel?{?/*?Some?styling?*/?}

　　#subnav?.sel?a?{?/*?Some?styling?*/?}

　　用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

　　十.不需要給背景圖片路徑加引號

　　為了節省字節，我建議不要給背景圖片路徑加引號，因為引號不是必須的。例如:

　　background:url("images/***.gif") #333;

　　可以寫為

　　background:url(images/***.gif) #333;

　　如果你加了引號，反而會引起一些瀏覽器的錯誤。

　　CSS簡寫的方法

　　色彩縮寫

　　色彩的縮寫最簡單，在色彩值用16進制的時候，如果每種顏色的值相同，就可以寫成一個：

　　color：#113366

　　可以簡寫為

　　color：#136

　　所有用到16進制色彩值的地方都可以使用簡寫，比如background-color、border-color、text-shadow、box-shadow等。

　　盒子大小

　　這里主要用于兩個屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個方向，每個方向都有個外邊距：

　　margin-top:1px;

　　margin-right:1px;

　　margin-botton:1px;

　　margin-left:1px;

　　這四個值可以縮寫到一起：

　　margin:1px 1px 1px 1px;

　　縮寫的順序是上->右->下->左。順時針的方向。相對的邊的值相同，則可以省掉：

　　margin:1px;//四個方向的邊距相同，等同于margin:1px 1px 1px 1px;

　　margin:1px 2px;//上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px

　　margin:1px 2px 3px;//右邊距和左邊距相同，等同于margin:1px 2px 3px 2px;

　　margin:1px 2px 1px 3px;//注意，這里雖然上下邊距都為1px，但是這里不能縮寫。

　　邊框(border)

　　border是個比較靈活的屬性，它有border-width、border-style、border-color三個子屬性。

　　border-width:數字+單位;

　　border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;

　　border-color: 顏色 ;

　　它可以按照width、style和color的順序簡寫：

　　border:5px solid #369;

　　list-style也有三個屬性：

　　list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman

　　list-style-position: inside || outside || inherit

　　list-style-image: (url) || none || inherit

　　CSS應該注意哪些

　　1. CSS字體屬性簡寫規則

　　一般用CSS設定字體屬性是這樣做的：

　　font-weight: bold;

　　font-style: italic;

　　font-varient: small-caps;

　　font-size: 1em;

　　line-height: 1.5em;

　　font-family: verdana,sans-serif

　　但也可以把它們全部寫到一行上去：

　　font: bold italic small-caps 1em/1.5em verdana,sans-serif

　　真不錯!只有一點要提醒的：這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用缺省值，這點要記上。

　　2. 同時使用兩個類

　　一般只能給一個元素設定一個類(Class)，但這并不意味著不能用兩個。事實上，你可以這樣：

　　...

　　同時給P元素兩個類，中間用空格格開，這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有沖突的話，后設置的起作用，即在CSS文件中放在后面的類的屬性起作用。

　　3. CSS border的缺省值

　　通常可以設定邊界的顏色，寬度和風格，如：

　　border: 3px solid #000

　　這位把邊界顯示成3像素寬，黑色，實線。但實際上這里只需要指定風格即可。

　　如果只指定了風格，其他屬性就會使用缺省值。一般地，Border的寬度缺省是medium，一般等于3到4個像素;缺省的顏色是其中文字的顏色。如果這個值正好合適的話，就不用設那么多了。

　　4. CSS用于文檔打印

　　許多網站上都有一個針對打印的版本，但實際上這并不需要，因為可以用CSS來設定打印風格。

　　也就是說，可以為頁面指定兩個CSS文件，一個用于屏幕顯示，一個用于打印：

　　第1行就是顯示，第2行是打印，注意其中的media屬性。

　　但應該在打印CSS中寫什么東西呢?你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片，再關掉一些導航按鈕。要想了解更多，可以看“打印差異”這一篇。

　　5. 圖片替換技巧

　　一般都建議用標準的HTML來顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時，就只能用圖片了。

　　比如你想整個賣東西的圖標，你就用了這個圖片：

　　這當然可以，但對搜索引擎來說，和正常文字相比，它們對alt里面的替換文字幾乎沒有興趣這是因為許多設計者在這里放許多關鍵詞來騙搜索引擎。所以方法應該是這樣的：

　　Buy widgets

　　但這樣就沒有特殊字體了。要想達到同樣效果，可以這樣設計CSS：

　　h1

　　{

　　background: url(widget-image.gif) no-repeat;

　　height: image height

　　text-indent: -2000px

　　}

　　注意把image height換成真的圖片的高度。這里，圖片會當作背景顯示出來，而真正的文字由于設定了-2000像素這個縮進，它們會出現在屏幕左邊2000點的地方，就看不見了。但這對于關閉圖片的人來說，可能全部看不到了，這點要注意。