1.字體
通過(guò)font-family可以指定標(biāo)簽中文字使用 的字體岭辣。
例如:p{font-family:Arial}
2.字體
通過(guò)font-family可以同時(shí)指定多個(gè)字體
例如:p{font-family:Arial,Helvetica,sans-serif}
字體分類
serif(襯線字體)
sans-serif(非襯線字體)
monospace(等寬字體)
cursive(草書字體)
fantasy(虛幻字體)
斜體和粗體
font-style用來(lái)指定文本的斜體。
指定斜體:font-style:italic
指定非斜體:font-style:normal
font-weight用來(lái)指定文本的粗體加勤。
指定粗體:font-weight:bold
指定非粗體:font-weight:normal
小型大寫字母
font-variant屬性可以將字母類型設(shè)置為小 型大寫胎食。在該樣式中扰才,字母看起來(lái)像是稍微縮小了尺寸的大寫字母。(font-variant:small-caps)
字體屬性的簡(jiǎn)寫
font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式厕怜。
語(yǔ)法:font:加粗 斜體 小型大寫 大小/行高 字體衩匣。(這里前邊幾個(gè)加粗、斜體和小型大寫的順序無(wú)所謂粥航,也可以不寫琅捏,但是大小和字體 必須寫且必須寫到后兩個(gè))
行間距
line-height用于設(shè)置行高,行高越大則行 間距越大递雀。
行間距 = line-height – font-size
大寫化
text-transform樣式用于將元素中的字母全都變成大寫柄延。
大寫:text-transform:uppercase
小寫:text-tansform:lowercase
首字母大寫:text-transform:capitalize
正常:text-transform:none
文本的修飾
text-decoration屬性,用來(lái)給文本添加各種修飾缀程。通過(guò)它可以為文本的上方搜吧、下方或者中間添加線條市俊。
可選值:underline、overline滤奈、line-through秕衙、none
字母間距和單詞間距
letter-spacing用來(lái)設(shè)置字符之間的間距。
word-spacing用來(lái)設(shè)置單詞之間的間距僵刮。
這兩個(gè)屬性都可以直接指定一個(gè)長(zhǎng)度或百分?jǐn)?shù)作為值。正數(shù)代表的是增加距離鹦牛,而 負(fù)數(shù)代表減少距離搞糕。
對(duì)齊文本
text-align用于設(shè)置文本的對(duì)齊方式。
可選值:left:左對(duì)齊曼追,right:右對(duì)齊窍仰,justify:兩邊對(duì)齊,center:居中對(duì)齊
首行縮進(jìn)
text-indent用來(lái)設(shè)置首行縮進(jìn)礼殊。
該樣式需要制定一個(gè)長(zhǎng)度驹吮,并且只對(duì)第一行生效。
盒子模型
一個(gè)盒子我們會(huì)分成幾個(gè)部分:
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
內(nèi)容區(qū)
內(nèi)容區(qū):內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域晶伦,也就是元素中的文本內(nèi)容碟狞,子元素都是存在于內(nèi)容區(qū)中的。
通過(guò)width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大小婚陪。(通過(guò)width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大 小族沃。)
內(nèi)邊距: 內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。(?默認(rèn)情況下width和height不包含padding的大忻诓巍)
例如:padding:10px? 20px? 30px? 40px(這樣會(huì)設(shè)置元素的上脆淹、右、下沽一、左四個(gè)方向的內(nèi)邊距)
padding:10px20px 30px;分別指定上盖溺、左右、下四個(gè)方向的內(nèi)邊距
padding:10px 20px;分別指定上下铣缠、左右四個(gè)方向的內(nèi)邊距
padding:10px;同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距)
邊框: 是元素可見框的最外部 烘嘱。
可以使用border屬性來(lái)設(shè)置盒子的邊框:border:1pxred solid;(上邊的樣式分別指定了邊框的寬度、顏色和樣式)
邊框的樣式
none(沒有邊框)dotted(點(diǎn)線)dashed(虛線)solid(實(shí)線)double(雙線)groove(槽線)ridge(脊線)inset(凹邊)
outset(凸邊)
外邊框:是元素邊框與周圍元素相距的空間 攘残。(margin)
當(dāng)將左右外邊距設(shè)置為auto時(shí)拙友,瀏覽器會(huì)將左右外邊距設(shè)置為相等,所以這行代碼margin:0 auto可以使元素居中歼郭。
display
我們不能為行內(nèi)元素設(shè)置width遗契、height、? margin-top和margin-bottom病曾。
我們可以通過(guò)修改display來(lái)修改元素的性質(zhì)牍蜂。
可選值:block:設(shè)置元素為塊元素? ? ?inline:設(shè)置元素為行內(nèi)元素
inline-block:設(shè)置元素為行內(nèi)塊元素? ?none:隱藏元素(元素將在頁(yè)面中完全消失)
visibility: 屬性主要用于元素是否可見漾根。
和display不同,使用visibility隱藏一個(gè)元素鲫竞,隱藏后其在文檔中所占的位置會(huì)依然 保持,不會(huì)被其他元素覆蓋辐怕。
可選值:visible:可見的? ? ? ?hidden:隱藏的
overflow:可以通過(guò)overflow來(lái)控制內(nèi)容溢出的情況。
可選值:visible:默認(rèn)值? ? ?scroll:添加滾動(dòng)條?
auto:根據(jù)需要添加滾動(dòng)條? ? ?hidden:隱藏超出盒子的內(nèi)容