1六荒、字體大小
字體(一)通過(guò)font-family可以指定標(biāo)簽中文字使用?的字體舔箭。例如:p{font-family:Arial}–?上邊這行代碼指定了p標(biāo)簽中使用名為arial作?為字體一般來(lái)說(shuō)只有用戶(hù)計(jì)算機(jī)中安裝了我們指?定的字體時(shí)啊央,它才會(huì)顯示缔赠,否則這行代碼?是沒(méi)有意義的晤碘。字體(二)
通過(guò)font-family可以同時(shí)指定多個(gè)字體褂微。例如:p{font-family:Arial?,?Helvetica?,?sans-serif}如上我實(shí)際上指定了三種字體,那么到底?使用的是哪個(gè)呢园爷?瀏覽器會(huì)優(yōu)先使用第一?個(gè)宠蚂,如果沒(méi)有找到則使用第二個(gè),以此類(lèi)?推童社。這里面sans-serif并不是指的具體某一個(gè)字?體求厕。而是一類(lèi)字體。字體分類(lèi)
serif(襯線(xiàn)字體)sans-serif(非襯線(xiàn)字體)monospace?(等寬字體)cursive?(草書(shū)字體)fantasy?(虛幻字體)以上這些分類(lèi)都是一些大的分類(lèi)扰楼,并沒(méi)有?涉及具體的類(lèi)型呀癣,如果將字體指定為這些?格式,瀏覽器會(huì)自己選擇指定類(lèi)型的字體弦赖。
斜體和粗體font-style用來(lái)指定文本的斜體项栏。指定斜體:font-style:italic指定非斜體:font-style:normalfont-weight用來(lái)指定文本的粗體。指定粗體:font-weight:bold指定非粗體:font-weight:normal小型大寫(xiě)字母
font-variant屬性可以將字母類(lèi)型設(shè)置為小?型大寫(xiě)蹬竖。在該樣式中沼沈,字母看起來(lái)像是稍?微縮小了尺寸的大寫(xiě)字母流酬。–?font-variant:small-caps字體屬性的簡(jiǎn)寫(xiě)font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。語(yǔ)法:–?font:加粗?斜體?小型大寫(xiě)?大小/行高?字體這里前邊幾個(gè)加粗列另、斜體和小型大寫(xiě)的順?序無(wú)所謂康吵,也可以不寫(xiě),但是大小和字體?必須寫(xiě)且必須寫(xiě)到后兩個(gè)访递。行間距
line-height用于設(shè)置行高晦嵌,行高越大則行?間距越大。
行間距 = line-height – font-size
如何做文字垂直居中:把行高的高度調(diào)成和父元素一樣的高度
2拷姿、大寫(xiě)化
text-transform樣式用于將元素中的字母全都變成大寫(xiě)惭载。
大寫(xiě):text-transform:uppercase
小寫(xiě):text-tansform:lowercase
首字母大寫(xiě):text-transform:capitalize
正常:text-transform:none
3、文本的修飾
text-decoration屬性响巢,用來(lái)給文本添加各 種修飾描滔。通過(guò)它可以為文本的上方、下方 或者中間添加線(xiàn)條踪古。
可選值:
underline? 下劃線(xiàn)
overline? ? ? 上劃線(xiàn)
line-through? ? 中劃線(xiàn)
none? ? 沒(méi)線(xiàn)
字母間距和單詞間距
letter-spacing用來(lái)設(shè)置字符之間的間距含长。
word-spacing用來(lái)設(shè)置單詞之間的間距。
這兩個(gè)屬性都可以直接指定一個(gè)長(zhǎng)度或百 分?jǐn)?shù)作為值伏穆。正數(shù)代表的是增加距離拘泞,而 負(fù)數(shù)代表減少距離。
4枕扫、對(duì)齊文本
text-align用于設(shè)置文本的對(duì)齊方式陪腌。
可選值:
left:左對(duì)齊
right:右對(duì)齊
justify:兩邊對(duì)齊
center:居中對(duì)齊
5、首行縮進(jìn)
text-indent用來(lái)設(shè)置首行縮進(jìn)烟瞧。常用單位是em
該樣式需要指定一個(gè)長(zhǎng)度诗鸭,并且只對(duì)第一 行生效。
6参滴、盒子模型
一個(gè)盒子我們會(huì)分成幾個(gè)部分:
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
內(nèi)容區(qū)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域强岸,也就是元素 中的文本內(nèi)容,子元素都是存在于內(nèi)容區(qū)中的砾赔。
如果沒(méi)有為元素設(shè)置內(nèi)邊距和邊框蝌箍,則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的。
通過(guò)width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大 小过蹂。
width和height屬性只適用于塊元素十绑。
內(nèi)邊距
顧名思義聚至,內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以?xún)?nèi) 的空間酷勺。
默認(rèn)情況下width和height不包含padding的大小。
使用padding屬性來(lái)設(shè)置元素的內(nèi)邊距扳躬。
例如:
padding:10px 20px 30px 40px
這樣會(huì)設(shè)置元素的上脆诉、右甚亭、下、左四個(gè)方向的內(nèi)邊距击胜。
padding:10px 20px 30px;
分別指定上亏狰、左右、下四個(gè)方向的內(nèi)邊距
padding:10px 20px;
分別指定上下偶摔、左右四個(gè)方向的內(nèi)邊距
padding:10px;
同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距
同時(shí)在css中還提供了padding-top暇唾、padding-right、padding-
right辰斋、padding-bottom分別用來(lái)指定四個(gè)方向的內(nèi)邊距策州。
邊框
可以在元素周?chē)鷦?chuàng)建邊框,邊框是元素可見(jiàn)框的最外部宫仗。
可以使用border屬性來(lái)設(shè)置盒子的邊框:
border:1px red solid;
上邊的樣式分別指定了邊框的寬度够挂、顏色和樣式。
也可以使用border-top/left/right/bottom分別指定上右下左