本文重要内容
- CSS的機關
- 字型屬性
- 文本屬性
- 定位屬性：position、float、overflow等
CSS的機關
html中的機關隻有一種，那就是像素px，是以機關是可以省略的，但是在CSS中不一樣。 CSS中的機關是必須要寫的，因為它沒有預設機關。
絕對機關
1 in=2.54cm=25.4mm=72pt=6pc。
各種機關的含義：
- in：英寸Inches (1 英寸 = 2.54 厘米)
- cm：厘米Centimeters
- mm：毫米Millimeters
- pt：點Points，或者叫英鎊 (1點 = 1/72英寸)
- pc：皮卡Picas (1 皮卡 = 12 點)
相對機關
px：像素 em：印刷機關相當于12個點 %：百分比，相對周圍的文字的大小
為什麼說像素px是一個相對機關呢，這也很好了解。比如說，電腦螢幕的的尺寸是不變的，但是我們可以讓其顯示不同的分辨率，在不同的分辨率下，單個像素的長度肯定是不一樣的啦。
百分比%這個相對機關要怎麼用呢？這裡也舉個例子：
font 字型屬性
CSS中，有很多非布局樣式(與布局無關)，包括：字型、行高、顔色、大小、背景、邊框、滾動、換行、裝飾性屬性(粗體、斜體、下劃線)等。
這一段，我們先來講一下字型屬性。
css樣式中，常見的字型屬性有以下幾種：
p{font-size: 50px; /*字型大小*/line-height: 30px; /*行高*/font-family: 幼圓,黑體; /*字型類型：如果沒有幼圓就顯示黑體，沒有黑體就顯示預設*/font-style: italic ;/*italic表示斜體，normal表示不傾斜*/font-weight: bold;/*粗體*/font-variant: small-caps; /*小寫變大寫*/}
行高
CSS中，所有的行，都有行高。盒子模型的padding，絕對不是直接作用在文字上的，而是作用在“行”上的。
如下圖所示：
上圖中，我們設定行高為30px，30px * 5 = 150px，通過檢視審查元素，這個p标簽的高度果然為150px。而且我們發現，我們并沒有給這個p标簽設定高度，顯然是内容将其撐高的。
垂直方向來看，文字在自己的行裡是居中的。比如，文字是14px，行高是24px，那麼padding就是5px：
為了嚴格保證字在行裡面居中，我們的工程師有一個約定： 行高、字号，一般都是偶數。這樣可以保證，它們的差一定偶數，就能夠被2整除。
如何讓單行文本垂直居中
小技巧：如果一段文本隻有一行，如果此時設定行高 = 盒子高，就可以保證單行文本垂直居中。這個很好了解。
上面這個小技巧，隻适用于單行文本垂直居中，不适用于多行。如果想讓多行文本垂直居中，還需要計算盒子的padding。計算方式如下：
vertical-align: middle; 屬性
vertical-align: middle; /*指定行内元素(inline)或表格單元格(table-cell)元素的垂直對齊方式。*/
字号、行高、字型三大屬性
(1)字号：
font-size:14px;
(2)行高：
line-height:24px;
(3)字型：(font-family就是“字型”，family是“家庭”的意思)
font-family:"宋體";
是否加粗屬性以及上面這三個屬性，我們可以連寫：(是否加粗、字号 font-size、行高 line-height、字型 font-family)
格式：
font: 加粗 字号/行高/ 字型
舉例：
font: 400 14px/24px "宋體";
PS：400是nomal，700是bold。
上面這幾個屬性可以連寫，但是有一個要求，font屬性連寫至少要有字号和字型，否則連寫是不生效的(相當于沒有這一行代碼)。
2、字型屬性的說明：
(1)網頁中不是所有字型都能用，因為這個字型要看使用者的電腦裡面裝沒裝，比如你設定：
font-family: "華文彩雲";
上方代碼中，如果使用者的 Windows 電腦裡面沒有這個字型，那麼就會變成宋體。
頁面中，中文我們一般使用：微軟雅黑、宋體、黑體。英文使用：Arial、Times New Roman。頁面中如果需要其他的字型，就需要單獨安裝字型，或者切圖。
(2)為了防止使用者電腦裡，沒有微軟雅黑這個字型。就要用英語的逗号，提供備選字型。如下：(可以備選多個)
font-family: "微軟雅黑","宋體";
上方代碼表示：如果使用者電腦裡沒有安裝微軟雅黑字型，那麼就是宋體。
(3)我們須将英語字型放在最前面，這樣所有的中文，就不能比對英語字型，就自動的變為後面的中文字型：
font-family: "Times New Roman","微軟雅黑","宋體";
上方代碼的意思是，英文會采用Times New Roman字型，而中文會采用微軟雅黑字型(因為美國人設計的Times New Roman字型并不針對中文，是以中文會采用後面的微軟雅黑)。比如說，對于smyhvae哈哈哈這段文字，smyhvae會采用Times New Roman字型，而哈哈哈會采用微軟雅黑字型。
可是，如果我們把中文字型寫在前面：(錯誤寫法)
font-family: "微軟雅黑","Times New Roman","宋體";
上方代碼會導緻，中文和英文都會采用微軟雅黑字型。
(4)所有的中文字型，都有英語别名。
微軟雅黑的英語别名：
font-family: "Microsoft YaHei";
宋體的英語别名：
font-family: "SimSun";
于是，當我們把字号、行高、字型這三個屬性合二為一時，也可以寫成：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
(5)行高可以用百分比，表示字号的百分之多少。
一般來說，百分比都是大于100%的，因為行高一定要大于字号。
比如說， font:12px/200% “宋體”等價于font:12px/24px “宋體”。200%可以了解成word裡面的2倍行高。
反過來， font:16px/48px “宋體”;等價于font:16px/300% “宋體”。
字型加粗屬性
.div {font-weight: normal; /*正常*/font-weight: bold; /*加粗*/font-weight: 100;font-weight: 200;font-weight: 900;}
在設定字型是否加粗時，屬性值既可以填寫normal、bold這樣的加粗字型，也可以直接填寫 100至900 這樣的數字。normal的值相當于400，bold的值相當于700。
文本屬性
CSS樣式中，常見的文本屬性有以下幾種：
- letter-spacing: 0.5cm ; 單個字母之間的間距
- word-spacing: 1cm; 單詞之間的間距
- text-decoration: none; 字型修飾：none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線
- text-transform: lowercase; 單詞字型大小寫。uppercase大寫、lowercase小寫
- color:red; 字型顔色
- text-align: center; 在目前容器中的對齊方式。屬性值可以是：left、right、center(在目前容器的中間)、justify
- text-transform: lowercase; 單詞的字型大小寫。屬性值可以是：uppercase(單詞大寫)、lowercase(單詞小寫)、capitalize(每個單詞的首字母大寫)
這裡來一張表格的圖檔吧，一覽無遺：
清單屬性
ul li{list-style-image:url(images/2.gif) ; /*清單項前設定為圖檔*/margin-left:80px; /*公有屬性*/}
另外還有一個簡寫屬性叫做list-style，它的作用是：将上面的多個屬性寫在一個聲明中。
我們來看一下list-style-image屬性的效果：
給清單前面的圖檔加個邊距吧，不然顯示不完整：
這裡來一張表格的圖檔吧，一覽無遺：
overflow屬性：超出範圍的内容要怎麼處理
overflow屬性的屬性值可以是：
- visible：預設值。多餘的内容不剪切也不添加滾動條，會全部顯示出來。
- hidden：不顯示超過對象尺寸的内容。
- auto：如果内容不超出，則不顯示滾動條；如果内容超出，則顯示滾動條。
- scroll：Windows 平台下，無論内容是否超出，總是顯示滾動條。Mac 平台下，和 auto屬性相同。
針對上面的不同的屬性值，我們來看一下效果： 舉例：
Document
其實很簡單 其實很自然 兩個人的愛由兩人分擔 其實并不難 是你太悲觀 隔着一道牆不跟誰分享 不想讓你為難 你不再需要給我個答案
其實很簡單 其實很自然 兩個人的愛由兩人分擔 其實并不難 是你太悲觀 隔着一道牆不跟誰分享 不想讓你為難 你不再需要給我個答案
其實很簡單 其實很自然 兩個人的愛由兩人分擔 其實并不難 是你太悲觀 隔着一道牆不跟誰分享 不想讓你為難 你不再需要給我個答案
效果：
滑鼠的屬性 cursor
滑鼠的屬性cursor有以下幾個屬性值：
- auto：預設值。浏覽器根據目前情況自動确定滑鼠光标類型。
- pointer：IE6.0，豎起一隻手指的手形光标。就像通常使用者将光标移到超連結上時那樣。
- hand：和pointer的作用一樣：豎起一隻手指的手形光标。就像通常使用者将光标移到超連結上時那樣。
比如說，我想讓滑鼠放在那個标簽上時，光标顯示手狀，代碼如下：
p:hover{cursor: pointer;}
另外還有以下的屬性：(不用記，需要的時候查一下就行了)
- all-scroll : IE6.0 有上下左右四個箭頭，中間有一個圓點的光标。用于标示頁面可以向上下左右任何方向滾動。
- col-resize : IE6.0 有左右兩個箭頭，中間由豎線分隔開的光标。用于标示項目或标題欄可以被水準改變尺寸。
- crosshair : 簡單的十字線光标。
- default : 用戶端平台的預設光标。通常是一個箭頭。
- hand : 豎起一隻手指的手形光标。就像通常使用者将光标移到超連結上時那樣。
- move : 十字箭頭光标。用于标示對象可被移動。
- help : 帶有問号标記的箭頭。用于标示有幫助資訊存在。
- no-drop : IE6.0 帶有一個被斜線貫穿的圓圈的手形光标。用于标示被拖起的對象不允許在光标的目前位置被放下。
- not-allowed : IE6.0 禁止标記(一個被斜線貫穿的圓圈)光标。用于标示請求的操作不允許被執行。
- progress : IE6.0 帶有沙漏标記的箭頭光标。用于标示一個程序正在背景運作。
- row-resize : IE6.0 有上下兩個箭頭，中間由橫線分隔開的光标。用于标示項目或标題欄可以被垂直改變尺寸。
- text : 用于标示可編輯的水準文本的光标。通常是大寫字母 I 的形狀。
- vertical-text : IE6.0 用于标示可編輯的垂直文本的光标。通常是大寫字母 I 旋轉90度的形狀。
- wait : 用于标示程式忙使用者需要等待的光标。通常是沙漏或手表的形狀。
- *-resize : 用于标示對象可被改變尺寸方向的箭頭光标。
- w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
- url ( url ) : IE6.0 使用者自定義光标。使用絕對或相對 url 位址指定光标檔案(字尾為 .cur 或者 .ani )。
濾鏡
這裡隻舉一個濾鏡的例子吧。比如說讓圖檔變成灰階圖的效果，可以這樣設定濾鏡：
舉例代碼：
原始圖檔圖檔加入黑白效果
css宋體代碼_CSS屬性：字型屬性和文本屬性 css宋體代碼_CSS屬性：字型屬性和文本屬性 效果如下：(IE有效果，google浏覽器無效果)
延伸： 濾鏡本身是平面設計中的知識。如果你懂一點PS的話···打開PS看看吧：
爆料一下，表示部落客有兩年多的平面設計經驗，我做設計的時間其實比寫代碼的時間要長，嘿嘿···
導航欄的制作(本段内容請忽略)
現在，我們利用float浮動屬性來把無序清單做成一個簡單的導航欄吧，效果如下：
代碼：
Document
部落格園新随筆聯系訂閱管理
實作效果如下：
國慶這四天，連續寫了四天的部落格，白天和黑夜，從未停歇，隻交替沒交換，為的就是這每日一發。以後會不斷更新的。