文本樣式

字體

通過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)頁的布局
盒子模型


13008127-e780e52da26ade97.png

*為元素設(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;*/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拆檬,一起剝皮案震驚了整個(gè)濱河市洪己,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌竟贯,老刑警劉巖答捕,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異屑那,居然都是意外死亡拱镐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門持际,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沃琅,“玉大人,你說我怎么就攤上這事选酗≌竽眩” “怎么了岳枷?”我有些...
    開封第一講書人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵芒填,是天一觀的道長(zhǎng)呜叫。 經(jīng)常有香客問我,道長(zhǎng)殿衰,這世上最難降的妖魔是什么朱庆? 我笑而不...
    開封第一講書人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮闷祥,結(jié)果婚禮上娱颊,老公的妹妹穿的比我還像新娘。我一直安慰自己凯砍,他們只是感情好箱硕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著悟衩,像睡著了一般剧罩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上座泳,一...
    開封第一講書人閱讀 51,775評(píng)論 1 307
  • 那天惠昔,我揣著相機(jī)與錄音,去河邊找鬼挑势。 笑死镇防,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的潮饱。 我是一名探鬼主播来氧,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼香拉!你這毒婦竟也來了饲漾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤缕溉,失蹤者是張志新(化名)和其女友劉穎考传,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體证鸥,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡僚楞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了枉层。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泉褐。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖鸟蜡,靈堂內(nèi)的尸體忽然破棺而出膜赃,到底是詐尸還是另有隱情,我是刑警寧澤揉忘,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布跳座,位于F島的核電站端铛,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏疲眷。R本人自食惡果不足惜禾蚕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望狂丝。 院中可真熱鬧换淆,春花似錦、人聲如沸几颜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蛋哭。三九已至易猫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間具壮,已是汗流浹背准颓。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留棺妓,地道東北人攘已。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像怜跑,于是被迫代替她去往敵國(guó)和親样勃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案性芬? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 和 em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)峡眶。 strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性。這兩個(gè)標(biāo)簽可以單獨(dú)使用植锉,也可以...
    2simple閱讀 1,148評(píng)論 0 0
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,314評(píng)論 2 66
  • 一辫樱、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”俊庇。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,598評(píng)論 0 6
  • 歲月把愛譜寫成一首歌 卻讓唱歌的人四處流浪
    漫游星際閱讀 221評(píng)論 0 0