CSS样式相关汇总
1.CSS背景
CSS 背景屬性用于定義HTML元素的背景。
| background | 簡寫屬性，作用是將背景屬性設置在一個聲明中 | ? |
| background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動 | scroll、fixed |
| background-color | 設置元素的背景顏色 | ? |
| background-image | 把圖像設置為背景 | ? |
| background-position | 設置背景圖像的起始位置 | left、top、center、bottom、x% y% |
| background-repeat | 設置背景圖像是否及如何重復 | repeat、no-repeat、repeat-x、repeat-y |
2.文本樣式
| color | 設置文本顏色 | ? |
| direction | 設置文本方向 | ltr(左到右)、rtl(右到左) |
| letter-spacing | 設置字符間距 | length(eg:5px || -2px) |
| line-height | 設置行高 | number(固定間距)、number(字體倍數)、%(字體百分比) |
| text-align | 對齊元素中的文本 | left、right、center |
| text-decoration | 向文本添加修飾 | underline、overline、line-through、none |
| text-indent | 縮進元素中文本的首行 | length(eg:50px) |
| text-shadow | 設置文本陰影 | text-shadow: h-shadow v-shadow blur color |
| text-transform | 控制元素中的字母 | capitalize(首字母大寫)、uppercase、lowercase |
| unicode-bidi | 設置或返回文本是否被重寫 | ? |
| vertical-align | 設置元素的垂直對齊 | text-top、text-bottom |
| white-space | 設置元素中空白的處理方式 | nowrap(不換行)、pre-line(合并空白符) |
| word-spacing | 設置字間距 | length(eg:50px) |
3.字體樣式
| font | 在一個聲明中設置所有的字體屬性 | ? |
| font-family | 指定文本的字體系列 | ? |
| font-size | 指定文本的字體大小 | ? |
| font-style | 指定文本的字體樣式 | normal、italic(斜體) |
| font-variant | 以小型大寫字體或者正常字體顯示文本 | small-caps |
| font-weight | 指定字體的粗細。 | bold、bolder、lighter、100-900 |
4.列表樣式
在 HTML中，有兩種類型的列表：
-
無序列表 ul - 列表項標記用特殊圖形（如小黑點、小方框等）
-
有序列表 ol - 列表項的標記有數字或字母
使用 CSS，可以列出進一步的樣式，并可用圖像作列表項標記。
| list-style | 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中 | ? |
| list-style-image | 將圖像設置為列表項標志 | URL、none |
| list-style-position | 設置列表中列表項標志的位置 | inside、outside |
| list-style-type | 設置列表項標志的類型 | none、disc、circle |
默認情況下列表 <ul> 或 <ol> 還設置了內邊距和外邊距，可使用 margin:0 和 padding:0 來移除:
ul {list-style-type: none;margin: 0;padding: 0; }5.表格樣式
表格邊框
指定CSS表格邊框，使用border屬性。
下面的例子指定了一個表格的Th和TD元素的黑色邊框。
border-collapse 屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開：
table {border-collapse:collapse; } table, th, td {border: 1px solid black; }表格寬度和高度
下面的例子是設置100％的寬度，50像素的th元素的高度的表格：
table {width:100%; } th {height:50px; }表格填充
td {padding:15px; }表格顏色
table, td, th {border:1px solid green; } th {background-color:green;color:white; } td {background-color:orange;color:white; }效果如下：
?
6.邊框樣式
| border | 簡寫屬性，用于把針對四個邊的屬性設置在一個聲明 |
| border-style | 用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式 |
| border-width | 簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度 |
| border-color | 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色 |
我們也可以單獨對上下左右邊框進行設置 border-bottom|left|top|right-xxx
7.輪廓樣式
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
?
| outline | 在一個聲明中設置所有的輪廓屬性 |
| outline-color | 設置輪廓的顏色 |
| outline-style | 設置輪廓的樣式 |
| outline-width | 設置輪廓的寬度 |
8.屬性選擇器
屬性選擇器
下面的例子是把包含標題（title）的所有元素變為藍色：
[title] {color:blue; }屬性和值選擇器
下面的實例改變了標題title='runoob'元素的邊框樣式:
[title=runoob] {border:5px solid green; }屬性和值的選擇器 - 多值
下面是包含指定值的title屬性的元素樣式的例子，使用（~）分隔屬性和值:
這個包含，并不是指屬性值中某個片斷的值，而是屬性值被空格隔開的一個完整單詞
比如 hello world、student hello都包含hello
[title~=hello] { color:blue; }下面是以指定值開頭的lang屬性的元素樣式的例子，使用（|）分隔屬性和值:
這個的值必須得是一個單詞，如果為多個單詞，就獲取不到。比如en就匹配不到 en a，但可以匹配到en-gb。
[lang|=en] { color:blue; }表單樣式
屬性選擇器樣式無需使用class或id的形式:
input[type="text"] {width:150px;display:block;margin-bottom:10px;background-color:yellow; } input[type="button"] {width:120px;margin-left:35px;display:block; }9.計數器
CSS 計數器通過一個變量來設置，根據規則遞增變量。
CSS 計數器使用到以下幾個屬性：
-
counter-reset - 創建或者重置計數器
-
counter-increment - 遞增變量
-
content - 插入生成的內容
-
counter() 或 counters() 函數 - 將計數器的值添加到元素
下面是代碼演示：
<style> body {counter-reset: section; } ? h1 {counter-reset: subsection; } ? h1::before {counter-increment: section;content: "Section " counter(section) ". "; } ? h2::before {counter-increment: subsection;content: counter(section) "." counter(subsection) " "; } </style> </head> <body> ? ? <h1>HTML 教程:</h1> <h2>HTML 教程</h2> <h2>CSS 教程</h2> ? <h1>Scripting 教程:</h1> <h2>JavaScript</h2> <h2>VBScript</h2> ? <h1>XML 教程:</h1> <h2>XML</h2> <h2>XSL</h2>效果如下：
?
計數器也可用于列表中，列表的子元素會自動創建。這里我們使用了 counters() 函數在不同的嵌套層級中插入字符串:
<style> ol {counter-reset: section;list-style-type: none; } ? li::before {counter-increment: section;content: counters(section,".") " "; } </style> </head> <body> ? <ol><li>item</li><li>item ? <ol><li>item</li><li>item</li><li>item<ol><li>item</li><li>item</li><li>item</li></ol></li><li>item</li></ol></li><li>item</li><li>item</li> </ol> ? <ol><li>item</li><li>item</li> </ol>效果如下：
總結
- 上一篇： ZooKeeper入门之数据模型和常用命
- 下一篇： CSS布局相关汇总