字體大小
字體(一)
通過font-family可以指定標(biāo)簽中文字使用 的字體。
例如:
p{font-family:Arial}
– 上邊這行代碼指定了p標(biāo)簽中使用名為arial作 為字體
一般來說只有用戶計(jì)算機(jī)中安裝了我們指 定的字體時(shí),它才會(huì)顯示,否則這行代碼 是沒有意義的。
字體(二)
通過font-family可以同時(shí)指定多個(gè)字體伊诵。
例如:
p{font-family:Arial , Helvetica , sans-serif}
如上我實(shí)際上指定了三種字體,那么到底 使用的是哪個(gè)呢?瀏覽器會(huì)優(yōu)先使用第一 個(gè)逸寓,如果沒有找到則使用第二個(gè),以此類 推覆山。
這里面sans-serif并不是指的具體某一個(gè)字 體竹伸。而是一類字體。
字體分類
serif(襯線字體)
sans-serif(非襯線字體)
monospace (等寬字體)
cursive (草書字體)
fantasy (虛幻字體)
以上這些分類都是一些大的分類簇宽,并沒有 涉及具體的類型勋篓,如果將字體指定為這些 格式,瀏覽器會(huì)自己選擇指定類型的字體魏割。
斜體和粗體
font-style用來指定文本的斜體譬嚣。
指定斜體:font-style:italic
指定非斜體:font-style:normal
font-weight用來指定文本的粗體。
指定粗體:font-weight:bold
指定非粗體:font-weight:normal
小型大寫字母
font-variant屬性可以將字母類型設(shè)置為小 型大寫钞它。在該樣式中拜银,字母看起來像是稍 微縮小了尺寸的大寫字母殊鞭。
– font-variant:small-caps
字體屬性的簡(jiǎn)寫
font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。
語法:
– font:加粗 斜體 小型大寫 大小/行高 字體
這里前邊幾個(gè)加粗尼桶、斜體和小型大寫的順 序無所謂操灿,也可以不寫,但是大小和字體 必須寫且必須寫到后兩個(gè)泵督。
行間距
line-height用于設(shè)置行高趾盐,行高越大則行 間距越大。
行間距 = line-height – font-size
大寫化
text-transform樣式用于將元素中的字母全都變成大寫小腊。
大寫:text-transform:uppercase
小寫:text-tansform:lowercase
首字母大寫:text-transform:capitalize
正常:text-transform:none
文本的修飾
text-decoration屬性救鲤,用來給文本添加各 種修飾。通過它可以為文本的上方秩冈、下方 或者中間添加線條蜒简。
可選值:
underline? ?下劃線
overline? ? ? 上劃線
line-through? ? 中劃線
none? ? ?沒線
字母間距和單詞間距
letter-spacing用來設(shè)置字符之間的間距。
word-spacing用來設(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用來設(shè)置首行縮進(jìn)。
該樣式需要指定一個(gè)長(zhǎng)度麸折,并且只對(duì)第一 行生效锡凝。
默認(rèn)單位? ?em
盒子模型
一個(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ū)中的窜锯。
如果沒有為元素設(shè)置內(nèi)邊距和邊框,則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的芭析。
通過width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大 小锚扎。
width和height屬性只適用于塊元素。
內(nèi)邊距
顧名思義馁启,內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間驾孔。
默認(rèn)情況下width和height不包含padding的大小。
使用padding屬性來設(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分別用來指定四個(gè)方向的內(nèi)邊距愿吹。
邊框
可以在元素周圍創(chuàng)建邊框,邊框是元素可見框的最外部惜姐。
可以使用border屬性來設(shè)置盒子的邊框:
border:1px red solid;
上邊的樣式分別指定了邊框的寬度犁跪、顏色和樣式。
也可以使用border-top/left/right/bottom分別指定上右下左 四個(gè)方向的邊框歹袁。
和padding一樣坷衍,默認(rèn)width和height并包括邊框的寬度。
邊框的樣式
邊框可以設(shè)置多種樣式:
none(沒有邊框)
dotted(點(diǎn)線)
dashed(虛線)
solid(實(shí)線)
double(雙線)
groove(槽線)
ridge(脊線)
inset(凹邊)
outset(凸邊)
外邊距
外邊距是元素邊框與周圍元素相距的空間条舔。
使用margin屬性可以設(shè)置外邊距枫耳。
用法和padding類似,同樣也提供了四個(gè)方向的? margin-top/right/bottom/left孟抗。
當(dāng)將左右外邊距設(shè)置為auto時(shí)迁杨,瀏覽器會(huì)將左右外 邊距設(shè)置為相等,所以這行代碼margin:0 auto可 以使元素居中凄硼。