本模塊繼續(xù)CSS第一步的內(nèi)容—現(xiàn)在您已經(jīng)熟悉了該語言及其語法，并獲得了使用它的一些基本經(jīng)驗，是時候更深入一些了。本模塊將介紹層疊和繼承(cascade and inheritance)、所有可用的選擇器類型、單元、大小、樣式背景和邊框、調(diào)試等等。

本文的目的是為您提供編寫稱職CSS的工具包，并幫助您理解所有基本理論，然后再轉(zhuǎn)向更具體的學(xué)科，如文本樣式和CSS布局。

1、指南

該模塊包含以下文章，它們涵蓋了CSS語言的最基本部分。在這個過程中，你會遇到大量的練習(xí)來測試你的理解。

1.1 選擇器

有各種各樣的CSS選擇器可用，允許在選擇要樣式化的元素時實現(xiàn)細(xì)粒度的精度。在本文及其子文章中，我們將詳細(xì)介紹不同的類型，了解它們是如何工作的。分條款如下:

• Type, class, and ID selectors
• Attribute selectors
• Pseudo-classes and pseudo-elements
• Combinators

1.2 層疊、特異性和繼承性

本課的目的是培養(yǎng)您對CSS的一些最基本概念的理解——層疊、專用性和繼承（cascade, specificity, and inheritance）——這些概念控制著CSS如何應(yīng)用于HTML以及如何解決沖突。

1.3 層疊層

本課旨在向您介紹層疊層，這是一個更高級的功能，建立在CSS層疊和CSS特異性的基本概念之上。

1.4 盒子模型

CSS中的所有內(nèi)容都有一個框，理解這些框是能夠使用CSS創(chuàng)建布局或?qū)㈨椗c其他項對齊的關(guān)鍵。在本課中，我們將適當(dāng)?shù)亓私釩SS盒子模型（CSS Box Model），以便您可以了解它的工作原理和與之相關(guān)的術(shù)語，從而轉(zhuǎn)移到更復(fù)雜的布局任務(wù)上。

1.5 背景與邊框

在本課中，我們將看看你可以用CSS背景和邊框做一些創(chuàng)造性的事情。從添加漸變、背景圖像到圓角，背景和邊框是CSS中許多樣式問題的答案。

1.6 處理不同的文本方向

近年來，CSS不斷發(fā)展，以便更好地支持不同的內(nèi)容方向，包括從右到左以及從上到下的內(nèi)容(如日文)——這些不同的方向被稱為書寫模式（writing modes）。當(dāng)你在學(xué)習(xí)中取得進(jìn)展并開始使用排版時，對寫作模式的理解將對你非常有幫助，因此我們將在本文中介紹它們。

1.7 Overflowing content

在本課中，我們將學(xué)習(xí)CSS中的另一個重要概念——溢出(overflow)。溢出是指當(dāng)有太多的內(nèi)容無法適當(dāng)?shù)匕谝粋€框內(nèi)時發(fā)生的情況。在本指南中，您將了解它是什么以及如何管理它。

1.8 CSS值和單位

CSS中使用的每個屬性都有一個或一組允許的值。在這一課中，我們將看看一些最常用的值和單位。

1.9 CSS中的設(shè)置項的大小

到目前為止，在各種課程中，您已經(jīng)遇到了許多使用CSS在網(wǎng)頁上調(diào)整項大小的方法。了解設(shè)計中不同功能的大小是很重要的，在本課中，我們將總結(jié)元素通過CSS獲得大小的各種方式，并定義一些有關(guān)大小的術(shù)語，這些術(shù)語將在將來對您有所幫助。

1.10 圖像、媒體和表單元素

在這一課中，我們將看看在CSS中如何處理某些特殊元素。圖像、其他媒體和表單元素在使用CSS對其進(jìn)行樣式設(shè)置的能力方面與常規(guī)盒子（boxes）略有不同。了解什么是可能的，什么是不可能的可以避免一些挫折，這節(jié)課將強調(diào)一些你需要知道的主要事情。

1.11 樣式化表格

為HTML表格設(shè)計樣式并不是世界上最迷人的工作，但有時我們都必須這樣做。本文提供了一個使HTML表好看的指南，重點介紹了一些特定的表格樣式技術(shù)。

1.12 CSS調(diào)試

有時在編寫CSS時，您會遇到一個問題，您的CSS似乎沒有按照您的期望工作。本文將為您提供如何調(diào)試CSS問題的指導(dǎo)，并向您展示所有現(xiàn)代瀏覽器中包含的DevTools如何幫助您找出發(fā)生了什么。

1.13 組織CSS

當(dāng)您開始處理更大的樣式表和大型項目時，您會發(fā)現(xiàn)維護(hù)一個巨大的CSS文件是一項挑戰(zhàn)。在本文中，我們將簡要介紹一些編寫CSS以使其易于維護(hù)的最佳實踐，以及您將發(fā)現(xiàn)其他人正在使用的一些解決方案，以幫助提高可維護(hù)性。

2、評價

下面的評估將測試你對上面指南中涉及的CSS的理解。

2.1 CSS的基本理解

這個評估測試您對基本語法、選擇器、特異性、盒子模型等的理解。

2.2 制作精美的信紙

如果你想給人留下好的印象，用漂亮的信紙寫一封信是一個很好的開始。在這個評估中，我們將挑戰(zhàn)您創(chuàng)建一個在線模板來實現(xiàn)這樣的外觀。

2.3 一個看起來很酷的盒子

在這里，你會得到一些練習(xí)使用背景和邊框樣式來創(chuàng)建一個引人注目的框。

3 更多

高級樣式效果
本文就像一個小技巧盒，介紹了一些有趣的高級樣式特性，比如框陰影、混合模式和濾鏡。文章來源地址http://www.zghlxwxcb.cn/news/detail-699016.html

到了這里，關(guān)于CSS構(gòu)建基礎(chǔ)（一）CSS構(gòu)建的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！