四、(1)文字大小?

? ? font-size用來指定文字的大小

? ? ?字體(一) 通過font-family可以指定標簽中文字使用 的字體。

? ? 例如: p{font-family:Arial} – 上邊這行代碼指定了p標簽中使用名為arial作 為字體

? ? 字體(二) 通過font-family可以同時指定多個字體。(瀏覽器會優先使用第一 個，

? ? 如果沒有找到則使用第二個，以此類 推。)

? ? 例如: p{font-family:Arial , Helvetica , sans-serif}

? ? (2)字體分類

? ? serif（襯線字體）? ? ? ? sans-serif（非襯線字體）

? ? monospace （等寬字體）? cursive （草書字體）? ? ? fantasy （虛幻字體）

? ? (3)斜體和粗體

? ? font-style用來指定文本的斜體。

? ? 指定斜體：font-style:italic? ? 指定非斜體：font-style:normal

? ? font-weight用來指定文本的粗體。

? ? 指定粗體：font-weight:bold? ? ? 指定非粗體：font-weight:normal

? ? (4)小型大寫字母

? ? font-variant屬性可以將字母類型設置為小型大寫。

? ? ? 在該樣式中，字母看起來像是稍微縮小了尺寸的大寫字母。

? ? – font-variant:small-caps

? ? (5)字體屬性的簡寫

? ? font可以一次性同時設置多個字體的樣式。

? ? 語法： – font:加粗 斜體 小型大寫 大小/行高 字體

? ? 這里前邊幾個加粗、斜體和小型大寫的順 序無所謂，也可以不寫。

? ? 777(但是大小和字體 必須寫且必須寫到后兩個)777

? ? (6)行間距

? ? line-height用于設置行高，行高越大則行 間距越大。

? ? 行間距 = line-height – font-size

? ? (7)大寫化

? ? text-transform樣式用于將元素中的字母全都變成大寫。

? ? 大寫：text-transform:uppercase? ? ? ? ? 小寫：text-tansform:lowercase

? ? 首字母大寫：text-transform:capitalize? ? 正常：text-transform:none

? ? (8)文本的修飾

? ? text-decoration屬性，用來給文本添加各 種修飾。通過它可以為文本的上方、下方 或者中間添加線條。

? ? 可選值：

? ? underline \ overline \ line-through \ none

? ? (9)字母間距和單詞間距

? ? letter-spacing用來設置字符之間的間距。

? ? word-spacing用來設置單詞之間的間距。

? ? 這兩個屬性都可以直接指定一個長度或百 分數作為值。正數代表的是增加距離，而 負數代表減少距離。

? ? (10)對齊文本

? ? text-align用于設置文本的對齊方式。

? ? 可選值：

? ? ? ? left：左對齊? ? ? ? right：右對齊

? ? ? ? justify：兩邊對齊? center：居中對齊

? ? (11)首行縮進

? ? text-indent用來設置首行縮進。

? ? 該樣式需要指定一個長度，并且只對第一 行生效。

五、盒子模型

? ? (1)盒子

? ? CSS處理網頁時，它認為每個元素都包含在一 個不可見的盒子里。

? ? 為什么要想象成盒子呢？因為如果把所有的元 素都想象成盒子，那么我們對網頁的布局就相 當于是擺放盒? ? ? 子。

? ? 我們只需要將相應的盒子擺放到網頁中相應的 位置即可完成網頁的布局。

? ? (2)一個盒子我們會分成幾個部分：

? ? 內容區(content)? 內邊距(padding)

? ? 邊框(border)? ? ? 外邊距(margin)

? ? (3)內容區

? ? 內容區指的是盒子中放置內容的區域，也就是元素 中的文本內容，子元素都是存在于內容區中的。

? ? 如果沒有為元素設置內邊距和邊框，則內容區大小 默認和盒子大小是一致的。

? ? 通過width和height兩個屬性可以設置內容區的大 小。

? ? width和height屬性只適用于塊元素。

? ? (4)內邊距

? ? 顧名思義，內邊距指的就是元素內容區與邊框以內 的空間。

? ? 默認情況下width和height不包含padding的大小。

? ? 使用padding屬性來設置元素的內邊距。

? ? 例如：padding:10px 20px 30px 40px? 這樣會設置元素的上、右、下、左四個方向的內邊距。

? ? padding:10px 20px 30px; 分別指定上、左右、下四個方向的內邊距

? ? padding:10px 20px; 分別指定上下、左右四個方向的內邊距

? ? padding:10px; 同時指定上左右下四個方向的內邊距

? ? 同時在css中還提供了padding-top、padding-right、padding-

? ? right、padding-bottom分別用來指定四個方向的內邊距。

? ? (5)邊框

? ? 可以在元素周圍創建邊框，邊框是元素可見框的最外部。

? ? 可以使用border屬性來設置盒子的邊框： border:1px red solid;

? ? 上邊的樣式分別指定了邊框的寬度、顏色和樣式。

? ? 也可以使用border-top/left/right/bottom分別指定上右下左 四個方向的邊框。

? ? 和padding一樣，默認width和height并包括邊框的寬度。

? ? (6)邊框的樣式

? ? 邊框可以設置多種樣式：

? ? none（沒有邊框） dotted（點線）

? ? dashed（虛線） solid（實線）

? ? double（雙線） groove（槽線）

? ? ridge（脊線） inset（凹邊）

? ? outset（凸邊）

? ? (6)外邊距

? ? 外邊距是元素邊框與周圍元素相距的空間。

? ? 使用margin屬性可以設置外邊距。

? ? 用法和padding類似，同樣也提供了四個方向的? margin-top/right/bottom/left。

? ? 當將左右外邊距設置為auto時，瀏覽器會將左右外 邊距設置為相等，

? ? 所以這行代碼margin:0 auto可 以使元素居中。重疊的要點(垂直、相鄰)

? ? (7)display

? ? 我們不能為行內元素設置width、height、? margin-top和margin-bottom。

? ? 我們可以通過修改display來修改元素的性 質。

? ? 可選值：block：設置元素為塊元素? ? ? inline：設置元素為行內元素

? ? inline-block：設置元素為行內塊元素? none：隱藏元素（元素將在頁面中完全消失）

? ? (8)visibility

? ? visibility屬性主要用于元素是否可見。

? ? 和display不同，使用visibility隱藏一個元素，

? ? 隱藏后其在文檔中所占的位置會依然 保持，不會被其他元素覆蓋。

? ? 可選值：visible：可見的? hidden：隱藏的

? ? (9)overflow

? ? 當相關標簽里面的內容超出了樣式的寬度 和高度是，

? ? 就會發生一些奇怪的事情，瀏 覽器會讓內容溢出盒子。

? ? 可以通過overflow來控制內容溢出的情況。

? ? 可選值： visible：默認值? ? ? ? ? ? scroll：添加滾動條

? ? auto：根據需要添加滾動條? hidden：隱藏超出盒子的內容