css學習筆記
css是cascading style sheets(層疊樣式表)的縮寫。是一種對web文件新增樣式的簡單機制，屬於表現層的布局語言。
1、css基本規則
然後在樣式表裡這樣定義：
#menubar
其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。
id選擇器也同樣支援派生，例如：
#menubar p
這個方法主要用來定義層和那些比較複雜，有多個派生的元素。
.14px
在頁面中，用class="類別名"的方法呼叫：
14px大小的字型
這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。
a:link
a:visited
a:hover
a:active
以上語句分別定義了"鏈結、已訪問過的鏈結、滑鼠停在上方時、點下滑鼠時"的樣式。注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是「lvha」。
css布局與傳統**(table)布局最大的區別在於：原來的定位都是採用**，通過**的間距或者用無色透明的gif來控制文布局版塊的間距；而現在則採用層(div)來定位，通過層的margin,padding,border等屬性來控制版塊的間距。
2、定義div
分析乙個典型的定義div例子：
#sample說明如下：
層的名稱為sample，在頁面中用就可以呼叫這個樣式。
margin是指層的邊框以外留的空白，用於頁邊距或者與其它層製造乙個間距。"10px 10px 10px 10px"分別代表"上右下左"(順時針方向)四個邊距，如果都一樣，可以縮寫成"margin: 10px;"。如果邊距為零，要寫成"margin: 0px;"。注意：當值是零時，除了rgb顏色值0%必須跟百分號，其他情況後面可以不跟單位"px"。margin是透明元素，不能定義顏色。
padding是指層的邊框到層的內容之間的空白。和margin一樣，分別指定上右下左邊框到內容的距離。如果都一樣，可以縮寫成"padding:0px"。單獨指定左邊可以寫成"padding-left: 0px;"。padding是透明元素，不能定義顏色。
border是指層的邊框，"border-right: #ccc 2px solid;"是定義層的右邊框顏色為"#ccc"，寬度為"2px"，樣式為"solid"直線。如果要虛線樣式可以用"dotted"。
background是定義層的背景。分2級定義，先定義背景，採用"url(../images/bg_logo.gif)"來指定背景路徑；其次定義背景色"#fefefe"。"no-repeat"指背景不需要重複，如果需要橫向重複用"repeat-x",縱向重複用"repeat-y",重複鋪滿整個背景用"repeat"。後面的"right bottom;"是指背景從右下角開始。如果沒有背景可以只定義背景色background: #fefefe
color用於定義字型顏色，上一節已經介紹過。
text-align用來定義層中的內容排列方式，center居中,left居左,right居右。
line-height定義行高，150%是指高度為標準高度的150%，也可以寫作：line-height:1.5或者line-height:1.5em，都是一樣的意思。
width是定義層的寬度，可以採用固定值，例如500px，也可以採用百分比，象這裡的"60%"。要注意的是:這個寬度僅僅指你內容的寬度，不包含margin,border和padding。但在有些瀏覽器中不是這麼定義的，需要你多試試。
下面是這個層的實際表現:
我們可以看到邊框是2px的灰色，背景在右下沒有重複，內容距離上和左邊框20px，內容居中，一切和預想的一樣。hoho，雖然不好看，但它是最基本的，掌握了它，你就已經學會一半的css布局技術了。就是這樣，不算難吧！(另一半是什麼？另一半是層與層之間的定位。我會在後面逐步講解。)
3、css2盒模型
自從2023年css1的推出，w3c組織就建議把所有網頁上的對像都放在乙個盒(box)中，設計師可以通過建立定義來控制這個盒的屬性，這些對像包括段落、列表、標題、以及層。盒模型主要定義四個區域：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的sample層就是乙個典型的盒。對於初學者，經常會搞不清楚margin，background-color，background-image，padding，content，border之間的層次、關係和相互影響。這裡提供一張盒模型的3d示意圖，希望便於你的理解和記憶。
4、輔助一律用背景處理
儘管可以用
這樣做的原因有2點：
將表現與結構徹底相分離，用css控制所有的外觀表現，便於改版。
使頁面更具有易用性，更有親和力。例如：盲人使用螢幕閱讀機，用背景技術實現的就不會被朗讀出來。
附帶：問題解決方案匯集
css筆記 更新中
層疊樣式表 標記語言 增強控制網頁樣式 樣式與網頁分離 選擇器1.第一種方式內嵌樣式 2.第二種方式外鏈樣式 3.第三種方式行內樣式 標籤名 style 屬性1 屬性值1 屬性2 屬性值2 基本選擇器 id選擇器 id的屬性值 class選擇器 class的屬性值 標籤選擇器 標籤名作為選擇器 萬用...
CSS學習（持續更新）
學習css的過程中遇到的一些值得留下筆記的地方 1.樣式衝突 特殊性 id class 元素名本身 如元素p 順序 特殊性相同時，後出現的優先順序高 重要性important 在樣式後加 important 提高樣式重要性，這樣在遇到樣式衝突時，網頁將使用有important的樣式，而不是後出現的樣...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...