CSS每日学习笔记(1)
7.30.2019
1.CSS 文本屬性
| 屬性 | 描述 |
| color | 設(shè)置文本顏色 |
| direction | 設(shè)置文本方向。 |
| line-height | 設(shè)置行高。 |
| letter-spacing | 設(shè)置字符間距。 |
| text-align | 對(duì)齊元素中的文本。 |
| text-decoration | 向文本添加修飾。 |
| text-indent | 縮進(jìn)元素中文本的首行。 |
| text-shadow | 設(shè)置文本陰影。CSS2 包含該屬性,但是 CSS2.1 沒(méi)有保留該屬性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 設(shè)置文本方向。 |
| white-space | 設(shè)置元素中空白的處理方式。 |
| word-spacing | 設(shè)置字間距。 |
2. 一般來(lái)說(shuō),可以為所有塊級(jí)元素應(yīng)用 text-indent,但無(wú)法將該屬性應(yīng)用于行內(nèi)元素,圖像之類的替換元素上也無(wú)法應(yīng)用 text-indent 屬性。不過(guò),如果一個(gè)塊級(jí)元素(比如段落)的首行中有一個(gè)圖像,它會(huì)隨該行的其余文本移動(dòng)。
如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”,可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。
text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù),可以實(shí)現(xiàn)很多有趣的效果,比如“懸掛縮進(jìn)”,即第一行懸掛在元素中余下部分的左邊。但是如果對(duì)一個(gè)段落設(shè)置了負(fù)值,那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問(wèn)題,建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距。
text-indent 可以使用所有長(zhǎng)度單位,包括百分比值。
百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說(shuō),如果將縮進(jìn)值設(shè)置為 20%,所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。
3. text-transform 屬性處理文本的大小寫(xiě)。這個(gè)屬性有 4 個(gè)值:
none,uppercase,lowercase,capitalize
默認(rèn)值 none 對(duì)文本不做任何改動(dòng),將使用源文檔中的原有大小寫(xiě)。顧名思義,uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫(xiě)和全小寫(xiě)字符。最后,capitalize 只對(duì)每個(gè)單詞的首字母大寫(xiě)。
4. text-decoration 有 5 個(gè)值:
none,underline,overline,line-through,blink
underline 會(huì)對(duì)元素加下劃線,就像 HTML 中的 U 元素一樣。overline 的作用恰好相反,會(huì)在文本的頂端畫(huà)一個(gè)上劃線。值 line-through 則在文本中間畫(huà)一個(gè)貫穿線,等價(jià)于 HTML 中的 S 和 strike 元素。blink 會(huì)讓文本閃爍。none 值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常,無(wú)裝飾的文本是默認(rèn)外觀,但也不總是這樣。例如,鏈接默認(rèn)地會(huì)有下劃線。
text-decoration 值會(huì)替換而不是累積起來(lái)。
5. white-space 屬性會(huì)影響到用戶代理對(duì)源文檔中的空格、換行和 tab 字符的處理。下面的表格總結(jié)了 white-space 屬性的行為:
| 值 | 空白符 | 換行符 | 自動(dòng)換行 |
| pre-line | 合并 | 保留 | 允許 |
| normal | 合并 | 忽略 | 允許 |
| nowrap | 合并 | 忽略 | 不允許 |
| pre | 保留 | 保留 | 不允許 |
| pre-wrap | 保留 | 保留 | 允許 |
6. CSS 字體屬性
| 屬性 | 描述 |
| font | 簡(jiǎn)寫(xiě)屬性。作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中。 |
| font-family | 設(shè)置字體系列。 |
| font-size | 設(shè)置字體的尺寸。 |
| font-size-adjust | 當(dāng)首選字體不可用時(shí),對(duì)替換字體進(jìn)行智能縮放。(CSS2.1 已刪除該屬性。) |
| font-stretch | 對(duì)字體進(jìn)行水平拉伸。(CSS2.1 已刪除該屬性。) |
| font-style | 設(shè)置字體風(fēng)格。 |
| font-variant | 以小型大寫(xiě)字體或者正常字體顯示文本。 |
| font-weight | 設(shè)置字體的粗細(xì)。 |
?
7. 只有當(dāng)字體名中有一個(gè)或多個(gè)空格(比如 New York),或者如果字體名包括 # 或 $ 之類的符號(hào),才需要在 font-family 聲明中加引號(hào)。
8. 能夠設(shè)置鏈接樣式的 CSS 屬性有很多種(例如 color, font-family, background 等等)。
鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來(lái)設(shè)置它們的樣式。
鏈接的四種狀態(tài):
a:link - 普通的、未被訪問(wèn)的鏈接
a:visited - 用戶已訪問(wèn)的鏈接
a:hover - 鼠標(biāo)指針位于鏈接的上方
a:active - 鏈接被點(diǎn)擊的時(shí)刻
當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí),請(qǐng)按照以下次序規(guī)則:
a:hover 必須位于 a:link 和 a:visited 之后;a:active 必須位于 a:hover 之后
text-decoration 屬性大多用于去掉鏈接中的下劃線。background-color 屬性規(guī)定鏈接的背景色。
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
9.CSS 列表屬性(list)
| 屬性 | 描述 |
| list-style | 簡(jiǎn)寫(xiě)屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。 |
| list-style-image | 將圖象設(shè)置為列表項(xiàng)標(biāo)志。 |
| list-style-position | 設(shè)置列表中列表項(xiàng)標(biāo)志的位置。 |
| list-style-type | 設(shè)置列表項(xiàng)標(biāo)志的類型。 |
| marker-offset | ? |
?
?
10.CSS Table 屬性
| 屬性 | 描述 |
| border-collapse | 設(shè)置是否把表格邊框合并為單一的邊框。 |
| border-spacing | 設(shè)置分隔單元格邊框的距離。 |
| caption-side | 設(shè)置表格標(biāo)題的位置。 |
| empty-cells | 設(shè)置是否顯示表格中的空單元格。 |
| table-layout | 設(shè)置顯示單元、行和列的算法。 |
?
11. CSS 邊框?qū)傩?/p>
| 屬性 | 描述 |
| outline | 在一個(gè)聲明中設(shè)置所有的輪廓屬性。 |
| outline-color | 設(shè)置輪廓的顏色。 |
| outline-style | 設(shè)置輪廓的樣式。 |
| outline-width | 設(shè)置輪廓的寬度。 |
?
12. CSS框模型
?
13. 設(shè)置各邊的內(nèi)邊距按照上、右、下、左的順序,各邊均可以使用不同的單位或百分比值。
h1 {padding: 10px 0.25em 2ex 20%;}?????
也可以通過(guò)使用下面四個(gè)單獨(dú)的屬性,分別設(shè)置上、右、下、左內(nèi)邊距
h1 {
? padding-top: 10px;
? padding-right: 0.25em;
? padding-bottom: 2ex;
? padding-left: 20%;
? }
注意:上下內(nèi)邊距與左右內(nèi)邊距一致;即上下內(nèi)邊距的百分?jǐn)?shù)會(huì)相對(duì)于父元素寬度設(shè)置,而不是相對(duì)于高度。
14. CSS 邊框?qū)傩?/p>
| 屬性 | 描述 |
| border | 簡(jiǎn)寫(xiě)屬性,用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。 |
| border-style | 用于設(shè)置元素所有邊框的樣式,或者單獨(dú)地為各邊設(shè)置邊框樣式。 |
| border-width | 簡(jiǎn)寫(xiě)屬性,用于為元素的所有邊框設(shè)置寬度,或者單獨(dú)地為各邊邊框設(shè)置寬度。 |
| border-color | 簡(jiǎn)寫(xiě)屬性,設(shè)置元素的所有邊框中可見(jiàn)部分的顏色,或?yàn)?4 個(gè)邊分別設(shè)置顏色。 |
| border-bottom | 簡(jiǎn)寫(xiě)屬性,用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-bottom-color | 設(shè)置元素的下邊框的顏色。 |
| border-bottom-style | 設(shè)置元素的下邊框的樣式。 |
| border-bottom-width | 設(shè)置元素的下邊框的寬度。 |
| border-left | 簡(jiǎn)寫(xiě)屬性,用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-left-color | 設(shè)置元素的左邊框的顏色。 |
| border-left-style | 設(shè)置元素的左邊框的樣式。 |
| border-left-width | 設(shè)置元素的左邊框的寬度。 |
| border-right | 簡(jiǎn)寫(xiě)屬性,用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-right-color | 設(shè)置元素的右邊框的顏色。 |
| border-right-style | 設(shè)置元素的右邊框的樣式。 |
| border-right-width | 設(shè)置元素的右邊框的寬度。 |
| border-top | 簡(jiǎn)寫(xiě)屬性,用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-top-color | 設(shè)置元素的上邊框的顏色。 |
| border-top-style | 設(shè)置元素的上邊框的樣式。 |
| border-top-width | 設(shè)置元素的上邊框的寬度。 |
?
15. CSS 外邊距屬性
| 屬性 | 描述 |
| margin | 簡(jiǎn)寫(xiě)屬性。在一個(gè)聲明中設(shè)置所有外邊距屬性。 |
| margin-bottom | 設(shè)置元素的下外邊距。 |
| margin-left | 設(shè)置元素的左外邊距。 |
| margin-right | 設(shè)置元素的右外邊距。 |
| margin-top | 設(shè)置元素的上外邊距。 |
?
CSS 定義了一些規(guī)則,允許為外邊距指定少于 4 個(gè)值。規(guī)則如下:
如果缺少左外邊距的值,則使用右外邊距的值。
如果缺少下外邊距的值,則使用上外邊距的值。
如果缺少右外邊距的值,則使用上外邊距的值。
下圖提供了更直觀的方法來(lái)了解這一點(diǎn):
?
16. 外邊距合并指的是,當(dāng)兩個(gè)垂直外邊距相遇時(shí),它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
注意:只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。
轉(zhuǎn)載于:https://www.cnblogs.com/zccfrancis/p/11273762.html
總結(jié)
以上是生活随笔為你收集整理的CSS每日学习笔记(1)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 使用C++代码打印数字正方形
- 下一篇: CSS 小结笔记之文字溢出处理