字體
通過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è)字體的樣式
行間距
line-height用于設(shè)置行高,行高越大則行 間距越大
行間距 = line-height – font-size
font: 30px "微軟雅黑";
大寫化
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ì)齊
<body>
<div>我是定寬塊狀元素,哈哈捐寥,我要水平居中顯示</div>
</body>
style> div{ border:1px solid red;/為了顯示居中效果明顯為 div 設(shè)置了邊框/ width:200px;/定寬/ margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */ } </style>
首行縮進(jìn)
text-indent用來設(shè)置首行縮進(jìn)
該樣式需要指定一個(gè)長(zhǎng)度笤昨,并且只對(duì)第一 行生效
盒子
CSS處理網(wǎng)頁時(shí),它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見的盒子里
為什么要想象成盒子呢握恳?因?yàn)槿绻阉械脑?素都想象成盒子瞒窒,那么我們對(duì)網(wǎng)頁的布局就相 當(dāng)于是擺放盒子
我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁中相應(yīng)的 位置即可完成網(wǎng)頁的布局
盒子模型
*為元素設(shè)置邊框 要為一個(gè)元素設(shè)置邊框必須指定三個(gè)樣式 border-width:邊框的寬度 border-color:邊框顏色 border-style:邊框的樣式
一個(gè)盒子我們會(huì)分成幾個(gè)部分:
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
border~width 20px 30px 58px 88px; 從上開始 順時(shí)針對(duì)應(yīng)值(上 右 下 左)
內(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)邊距
*為元素設(shè)置邊框 要為一個(gè)元素設(shè)置邊框必須指定三個(gè)樣式 border-width:邊框的寬度 border-color:邊框顏色 border-style:邊框的樣式
例如:
padding:10px 20px 30px 40px
這樣會(huì)設(shè)置元素的上、右匿辩、下腰耙、左四個(gè)方向的內(nèi)邊距
內(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并包括邊框的寬度
外邊距
外邊距是元素邊框與周圍元素相距的空間
使用margin屬性可以設(shè)置外邊距
用法和padding類似,同樣也提供了四個(gè)方向的 margin-top/right/bottom/left
當(dāng)將左右外邊距設(shè)置為auto時(shí)芍瑞,瀏覽器會(huì)將左右外 邊距設(shè)置為相等晨仑,所以這行代碼margin:0 auto可 以使元素居中
/設(shè)置上外邊距,即盒子的上邊框與其他盒子的距離/
margin-top: 100px;
/左外邊距/
margin-left: 100px;
/設(shè)置右和下外邊距/
margin-right: 100px;
margin-bottom: 100px;*/