一.字體的樣式
? 在網(wǎng)頁中將字體分成五大類
? ? senif(襯線字體)
? ? sans-serif(非襯線字體)
? ? monospace(等寬字體)
? ? cursive(草書字體)
? ? fantasy(虛幻字體)
二.斜體和粗體
font-style用來指定文本的斜體(italic){font-family:華文彩云,arial吹榴,微軟雅黑亭敢;帶空格字體需要用引號引起;宋體和雅黑為常用}
一般來說只有用戶計(jì)算機(jī)中安裝了我們指 定的字體時(shí)图筹,它才會顯示吨拗,否則這行代碼 是沒有意義的
字體分類:在網(wǎng)頁中將字體分為五大類? 【如指定,瀏覽器會自己選擇指定類型的字體】
–指定斜體:font-style:italic
–指定非斜體:font-style:normal
font-weight用來指定文本的粗體(bold)
–指定粗體:font-weight:bold? (100~900婿斥;400=normal劝篷;900=bold)
–指定非粗體:font-weight:normal
font-variant屬性可以將字母類型設(shè)置為小 型大寫(small-caps)
– font-variant:small-caps
*三.行間距
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è)置單詞之間的間距
對齊文本
text-align用于設(shè)置文本的對齊方式
–left:左對齊
–right:右對齊
–justify:兩邊對齊
–center:居中對齊
首行縮進(jìn)
text-indent用來設(shè)置首行縮進(jìn)(該樣式需要指定一個(gè)長度,并且只對第一 行生效)
盒子模型
盒子:CSS處理網(wǎng)頁時(shí)活鹰,它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見的盒子里
一個(gè)盒子我們會分成幾個(gè)部分:
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
邊框的樣式
邊框可以設(shè)置多種樣式:
–none(沒有邊框)
–dotted(點(diǎn)線)
–dashed(虛線)
–solid(實(shí)線)
–double(雙線)
–groove(槽線)
–ridge(脊線)
–inset(凹邊)
–outset(凸邊)
內(nèi)容區(qū):
width:設(shè)置內(nèi)容區(qū)的寬
height:設(shè)置內(nèi)容區(qū)的高
邊框:是元素可見框的最外部
? ? ? ? ? ? ? border-width:設(shè)置邊框的寬
? ? ? ? ? ? ? border-height:設(shè)置邊框的高
? ? ? ? ? ? ? border-color:設(shè)置邊框顏色
? ? ? ? ? ? ? border-style:設(shè)置邊框樣式
? ? ? ? ? ? ? background-color:背景顏色(其他幾個(gè)區(qū)通用)
? ? ? ? ? ? ? border:顏色 樣式 寬哈恰;{border:red solid 10px;}
內(nèi)邊距:元素內(nèi)容區(qū)與邊框以內(nèi)的空間
? ? ? ? ? ? ? padding:設(shè)置元素內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding:上 右 下 左? ? {padding:10px 20px 30px 40px}? (其他也遵循此順序)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding:上 左右 下
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding:上下 左右
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding:上下 左右
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-top:頂部
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-left:左邊
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-right:右邊
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-bottom:底部
外邊距:元素邊框與周圍元素相距的空間(本盒子與其他盒子等的距離)
? ? ? margin:設(shè)置元素外邊距
? ? ? ? ? ? ? ? ? ? ? 垂直方向上兩盒子外邊距可以重合(重合需滿足兩條件:1:垂直方向上2:相鄰)
? ? ? ? ? ? ? ? ? ? ? 如果子元素與父元素外邊距相鄰志群,則可能一變?nèi)儯稍O(shè)置邊框着绷、內(nèi)容、內(nèi)外邊距隔開锌云;也可用overflow:hidden)
? ? ? ? ? ? ? ? ? ? ? 用法:和padding類似
? ? ? ? ? ? ? ? ? ? ? margin-top/right/bottom/left? (同遵循此順序)
? ? ? ? ? ? ? ? ? ? ? auto(自動(dòng)):當(dāng)將左右外邊距設(shè)置為auto時(shí)荠医,瀏覽器會將左右外 邊距設(shè)置為相等,
? ? ? ? ? ? ? ? 所以這行代碼margin:0 auto可 以使元素居中? (適用于水平方向上)
? ? ? ? ? ? ? ? ? ? ? margin-left:auto? 左邊最大
? ? ? ? ? ? ? ? ? ? ? margin-right:auto? 右邊最大
? ? ? 清除瀏覽器默認(rèn)樣式:*{margin:0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding:0彬向;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
overflow? 來控制內(nèi)容溢出的情況
可選值:
visible:默認(rèn)值
scroll:添加滾動(dòng)條
auto:根據(jù)需要添加滾動(dòng)條
hidden:隱藏超出盒子的內(nèi)容
visibility? 屬性主要用于元素是否可見
visible:可見的
hidden:隱藏的
display? 可以通過修改display來修改元素的性 質(zhì)
可選值:
block:設(shè)置元素為塊元素
inline:設(shè)置元素為行內(nèi)元素
inline-block:設(shè)置元素為行內(nèi)塊元素
none:隱藏元素(元素將在頁面中完全消失)