文字與排版樣式
``font`文字樣式
| 屬性 | 描述 | 屬性值 |
|---|---|---|
font-family |
字體族科 | 任意的字體族科名稱，如果有多個中間用逗號隔開，以防止該瀏覽器無法解析 |
font-size |
字體大小 | 可以使用絕對大小、相對大小、長度和百分比 |
font-style |
字體樣式 | normal(普通)，italic(斜體)或oblique(傾斜) |
font-weight |
字體加粗 | normal、bold或lighter |
font-variant |
字體變形 | normal(普通)或small-caps(小型大寫字母) |
注意：使用font同時設置多個文字屬性時，屬性之間用空格隔開。
排版樣式(text)
| 屬性 | 描述 | 屬性值 |
|---|---|---|
letter-spacing |
字母間隔 | 必須符合長度格式，運行使用負值 |
word-spacing |
文字間隔 | 必須符合長度格式，運行使用負值 |
text-decoration |
文字修飾 | underline(下划線),overline(上划線),line-through(刪除線),blink(閃耀)或默認無 |
text-transform |
改變大小寫 | uppercase(大寫),lowercase(小寫),capitalize(首字母大寫)或者none(默認值) |
text-align |
橫向排列 | left,right,center或justify |
text-indent |
文字縮進 | 一個長度或者百分比 |
line-height |
行高 | 數字或者百分比，允許負值，當取值和盒子高度一樣時，則居中 |
vertical-align |
垂直方式 | baseline,top,middle或bottom |
文字半透明
color: rgba(r,g,b,a); a 是alpha 透明的意思 取值范圍 0~1之間
文字陰影
text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;
h-shadow：必需，水平陰影的位置，運行負值v-shadow：必需，垂直陰影的位置，運行負值blur：可選，模糊的距離color：可選，陰影的顏色
背景和顏色
基本
| 屬性 | 描述 | 屬性值 |
|---|---|---|
background-color |
背景顏色 | 與color設置相同，也可以使用transparent(透明)值，必須設置高（寬），要不然無法顯示 |
background-image |
背景圖片 | 圖片URL |
barkground-repet |
背景重復 | repeat(默認),repeat-x,repeat-y,no-repeat |
barkground-attachment |
背景附件 | scroll(滾動),fixed(固定) |
barkground-position |
背景位置 | 橫向的關鍵字(left、center或right),縱向的關鍵字(top、center或bottom)百分比和長度也可以用做安排背景圖像的位置 |
背景位置使用
background-position : length || length
background-position : position || position
先指定background-image屬性。默認值為：(0% 0%)。
如果只指定了一個值，該值將用於橫坐標。縱坐標將默認為50%，第二個值將用於縱坐標。position 后面是x坐標和y坐標，且如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。
背景附着
background-attachment : scroll | fixed
基本參數：
scroll：背景圖像是隨對象內容滾動fixed：背景圖像固定
背景簡寫
background屬性的值的書寫順序官方並沒有強制標准的，不過我們這樣建議：
background: transparent url(image.jpg) repeat-y scroll 50% 0;
背景透明
background: rgba(0,0,0,0.3); /*最后一個參數是alpha 透明度 取值范圍 0~1之間*/
border: 1px solid rgba(0,0,0,0.3);
背景縮放
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain;會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏 */
/* background-size: cover; 會自動調整縮放比例，保證圖片始終完整顯示在背景區域*/
列表樣式
| 屬性 | 描述 | 屬性值 |
|---|---|---|
list-style-type |
列表樣式 | disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha或none |
list-style-image |
圖像列表 | url或none |
list-style-position |
列表符號的縮進 | inside或outside |
表格樣式
表格邊框樣式
我們可以使用如{border:1px solid red;}為table、th或td設置邊框。
折疊邊框
{border-collapse:collapse(合並邊框)|separate(默認，邊框獨立)|inherit(繼承父級樣式)}
設置寬度和高度
通過width和height這兩個屬性定義，可以是百分比也可以是絕地值
表格對齊方式
我們使用text-align和vertical-align來設置表格中文本的對齊方式
定義表格標題位置
caption-size:top|bottom|left|right|inherit|
設置表格布局
使用label-layout屬性來設置是否保證單元格寬度不被改變，其屬性值如下：
auto：當內容超過寬度是能自動換行則自動換行，不能自動換行則增加寬度（默認值）fixed：無論內容是否超過寬度，都保持原來的寬度inherit：繼承父級樣式
元素的隱藏和顯示
display顯示
設置或檢索對象是否及如何顯示，且隱藏之后，不再保留位置。
none：隱藏對象block：顯示元素
visibility可見性
設置或檢索是否顯示對象，隱藏之后，繼續保留原有位置。
visible：對象可見hidden：對象隱藏
overflow溢出
檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
| 屬性 | 含義 |
|---|---|
visible |
不剪切內容也不添加滾動條 |
auto |
超出自動顯示滾動條，不超出不顯示滾動條 |
hidden |
不顯示超過對象尺寸的內容，超出的部分隱藏掉 |
scroll |
不管超出內容否，總是顯示滾動條 |
用戶界面樣式
鼠標樣式cursor
設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀，語法如下：
cursor : default默認|pointer手形|move移動|text文本光標
輪廓outline
是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用，語法如下：
outline : outline-color ||outline-style || outline-width
不過我們平時都是使用outline:0或者outline:none來去掉。
防止拖拽文本域resize
resize:none這個單詞可以防止火狐、谷歌等瀏覽器隨意的拖動文本域。
溢出的文字隱藏
word-break：自動換行
| 屬性值 | 含義 |
|---|---|
normal |
使用瀏覽器默認的換行規則 |
break-all |
允許在單詞內換行 |
keep-all |
只能在半角空格或連字符處換行 |
white-space：設置或檢索對象內文本顯示方式
normal：默認處理方式nowrap：強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行。
text-overflow：文字溢出
設置或檢索是否使用一個省略標記...標示對象內文本的溢出:
clip:不顯示省略標記，而是簡單的裁切ellipsis：對象內文本溢出時顯示省略標記
其他特殊技術
精靈圖技術
CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖。最后，我們使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。
滑動門技術
為了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。其技術核心就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應不同字數的導航欄。
字體圖標技術
字體圖標是一種特殊的字體，它看起來像圖標，但是卻有着字體的各種功能，能自由的改變大小和顏色。
首先，我們要在樣式里面聲明字體：
@font-face {
font-family: 'icomoon'; //可改變的值，用於命名
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
然后我們給盒子使用字體：
span {
font-family: "icomoon"; //對於曾經申明的名字
}
最后給盒子里面添加結構：
<span></span>