css基礎(chǔ)學(xué)習(xí)筆記(二)

文字排版--字體

我們可以使用css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體藏杖、字號(hào)懂盐、顏色等樣式屬性竭恬。下面我們來(lái)看一個(gè)例子跛蛋,下面代碼實(shí)現(xiàn):為網(wǎng)頁(yè)中的文字設(shè)置字體為宋體。

body{font-family:"宋體";}

這里注意不要設(shè)置不常用的字體痊硕,因?yàn)槿绻脩?hù)本地電腦上如果沒(méi)有安裝你設(shè)置的字體赊级,就會(huì)顯示瀏覽器默認(rèn)的字體。(因?yàn)橛脩?hù)是否可以看到你設(shè)置的字體樣式取決于用戶(hù)本地電腦上是否安裝你設(shè)置的字體岔绸。)
現(xiàn)在一般網(wǎng)頁(yè)喜歡設(shè)置“微軟雅黑”理逊,如下代碼:

body{font-family:"Microsoft Yahei";}

body{font-family:"微軟雅黑";}

注意:第一種方法比第二種方法兼容性更好一些橡伞。

因?yàn)檫@種字體即美觀又可以在客戶(hù)端安全的顯示出來(lái)(用戶(hù)本地一般都是默認(rèn)安裝的)。

文字排版--字號(hào)挡鞍、顏色

可以使用下面代碼設(shè)置網(wǎng)頁(yè)中文字的字號(hào)為12像素骑歹,并把字體顏色設(shè)置為#666(灰色):

body{font-size:12px;color:#666}

文字排版--粗體

我們還可以使用css樣式來(lái)改變文字的樣式:粗體预烙、斜體墨微、下劃線(xiàn)、刪除線(xiàn)扁掸,可以使用下面代碼實(shí)現(xiàn)設(shè)置文字以粗體樣式顯示出來(lái)翘县。

p span{font-weight:bold;}

在這里大家可以看到,如果想為文字設(shè)置粗體是有單獨(dú)的css樣式來(lái)實(shí)現(xiàn)的谴分,再不用為了實(shí)現(xiàn)粗體樣式而使用h1-h6或strong標(biāo)簽了锈麸。

文字排版--斜體

以下代碼可以實(shí)現(xiàn)文字以斜體樣式在瀏覽器中顯示:

p a{font-style:italic;}

<p>三年級(jí)時(shí),我還是一個(gè)<a>膽小如鼠</a>的小女孩牺蹄。</p>

文字排版--下劃線(xiàn)

有些情況下想為文字設(shè)置為下劃線(xiàn)樣式忘伞,這樣可以在視覺(jué)上強(qiáng)調(diào)文字,可以使用下面代碼來(lái)實(shí)現(xiàn):

p a{text-decoration:underline;}

<p>三年級(jí)時(shí)沙兰,我還是一個(gè)<a>膽小如鼠</a>的小女孩氓奈。</p>

文字排版--刪除線(xiàn)

刪除線(xiàn)的效果:

 .oldPrice{text-decoration:line-through;}

段落排版--縮進(jìn)

中文文字中的段前習(xí)慣空兩個(gè)文字的空白,這個(gè)特殊的樣式可以用下面代碼來(lái)實(shí)現(xiàn):

p{text-indent:2em;}
<p>1922年的春天鼎天,一個(gè)想要成名名叫尼克卡拉威(托比?馬奎爾Tobey Maguire 飾)的作家舀奶,離開(kāi)了美國(guó)中西部,來(lái)到了紐約斋射。那是一個(gè)道德感漸失育勺,爵士樂(lè)流行,走私為王罗岖,股票飛漲的時(shí)代涧至。為了追尋他的美國(guó)夢(mèng),他搬入紐約附近一海灣居住桑包。</p>

注意:2em的意思就是文字的2倍大小南蓬。

段落排版--行間距(行高)

這一小節(jié)我們來(lái)學(xué)習(xí)一下另一個(gè)在段落排版中起重要作用的行間距(行高)屬性(line-height),如下代碼實(shí)現(xiàn)設(shè)置段落行間距為1.5倍捡多。

p{line-height:1.5em;}
<p>菲茨杰拉德蓖康,二十世紀(jì)美國(guó)文學(xué)巨擘之一,兼具作家和編劇雙重身份垒手。他以詩(shī)人的敏感和戲劇家的想象為"爵士樂(lè)時(shí)代"吟唱華麗挽歌蒜焊,其詩(shī)人和夢(mèng)想家的氣質(zhì)亦為那個(gè)奢靡年代的不二注解。</p>

段落排版--中文字間距科贬、字母間距

中文字間隔泳梆、字母間隔設(shè)置:

如果想在網(wǎng)頁(yè)排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing 來(lái)實(shí)現(xiàn)鳖悠,如下面代碼:

h1{
    letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1>

注意:這個(gè)樣式使用在英文單詞時(shí),是設(shè)置字母與字母之間的間距优妙。

單詞間距設(shè)置:

如果我想設(shè)置英文單詞之間的間距呢乘综?可以使用 word-spacing 來(lái)實(shí)現(xiàn)。如下代碼:

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

段落排版--對(duì)齊

想為塊狀元素中的文本套硼,圖片設(shè)置居中樣式卡辰,可以使用text-align樣式代碼,如下代碼可實(shí)現(xiàn)文本居中顯示邪意。

h1{
    text-align:center;
}
<h1>了不起的蓋茨比</h1>

同樣也可以設(shè)置居左

h1{
    text-align:left;
}
<h1>了不起的蓋茨比</h1>

居右

h1{
    text-align:right;
}
<h1>了不起的蓋茨比</h1>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末九妈,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子雾鬼,更是在濱河造成了極大的恐慌萌朱,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件策菜,死亡現(xiàn)場(chǎng)離奇詭異晶疼,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)又憨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)翠霍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人竟块,你說(shuō)我怎么就攤上這事壶运。” “怎么了浪秘?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵蒋情,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我耸携,道長(zhǎng)棵癣,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任夺衍,我火速辦了婚禮狈谊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘沟沙。我一直安慰自己河劝,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布矛紫。 她就那樣靜靜地躺著赎瞎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪颊咬。 梳的紋絲不亂的頭發(fā)上务甥,一...
    開(kāi)封第一講書(shū)人閱讀 49,929評(píng)論 1 290
  • 那天牡辽,我揣著相機(jī)與錄音,去河邊找鬼敞临。 笑死态辛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的挺尿。 我是一名探鬼主播奏黑,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼票髓!你這毒婦竟也來(lái)了攀涵?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤洽沟,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后蜗细,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體裆操,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年炉媒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了踪区。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡吊骤,死狀恐怖缎岗,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情白粉,我是刑警寧澤传泊,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站鸭巴,受9級(jí)特大地震影響眷细,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鹃祖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一溪椎、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恬口,春花似錦校读、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至芯杀,卻和暖如春端考,著一層夾襖步出監(jiān)牢的瞬間雅潭,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工却特, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留扶供,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓裂明,卻偏偏與公主長(zhǎng)得像椿浓,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子闽晦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

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

  • 本文主要是起筆記的作用扳碍,內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱(chēng)為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,630評(píng)論 0 30
  • 第6章 開(kāi)始學(xué)習(xí)CSS,為網(wǎng)頁(yè)添加樣式 1仙蛉、認(rèn)識(shí)CSS樣式CSS全稱(chēng)為“層疊樣式表 (Cascading Styl...
    夏沫xx閱讀 1,054評(píng)論 1 11
  • 1.認(rèn)識(shí)CSS樣式CSS全稱(chēng)為“層疊樣式表 (Cascading Style Sheets)”笋敞,它主要是用于定義H...
    靜默丶閱讀 5,698評(píng)論 30 95
  • 一、什么是選擇器荠瘪? 每一條css樣式聲明(定義)由兩部分組成夯巷,形式如下:選擇器{ 樣式;}在{}之前的部分就是“選...
    空指針的空閱讀 516評(píng)論 0 2
  • 自打有了微信趁餐,拿它干什么的都有,尤其在撩妹撩男人這件事兒上篮绰。 最近一段時(shí)間后雷,我在微信里遇到的兩件事兒,把我以前有關(guān)...
    驚蟄小白閱讀 8,073評(píng)論 1 3