掃二維碼與項(xiàng)目經(jīng)理溝通
我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
使用CSS可以對HTML頁面中的文字進(jìn)行全方位的設(shè)置,本文從基礎(chǔ)的文字設(shè)置出發(fā),詳細(xì)講解設(shè)置各種CSS文字效果的方法,然后再進(jìn)一步講解段落排版的相關(guān)內(nèi)容,希望本文介紹對你有所幫助。

設(shè)置豐富的CSS文字效果
文字是網(wǎng)頁設(shè)計(jì)種永遠(yuǎn)不可缺少的元素,各種各樣的文字效果遍布在整個(gè)英特網(wǎng)中。本文從基礎(chǔ)的文字設(shè)置出發(fā),詳細(xì)講解設(shè)置各種CSS文字效果的方法,然后再進(jìn)一步講解段落排版的相關(guān)內(nèi)容。
CSS文字樣式
使用過Word編輯文檔的用戶一定對會注意到,Word可以對文字的字體、大小、顏色等各種屬性進(jìn)行設(shè)置。CSS同樣可以對HTML頁面中的文字進(jìn)行全方位的設(shè)置。我們在這里在上兩章的基礎(chǔ)上主要介紹設(shè)置CSS文字各種屬性的基本方法。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容:
字體
文字大小
文字顏色
文字粗細(xì)
斜體
文字的下劃線、頂劃線、刪除線
英文字母大小寫
文字實(shí)例一:模擬Google公司logo
前面對設(shè)置CSS文字的各種單獨(dú)效果進(jìn)行了詳細(xì)的介紹,我們在這里通過一個(gè)簡單的實(shí)例,將各種效果綜合運(yùn)用,達(dá)到基本模擬Google公司logo的效果。
文字實(shí)例二:制作頁面的五彩標(biāo)題
對于任何文章,標(biāo)題的作用是顯而易見的。在頁面中標(biāo)題的設(shè)計(jì)往往也決定著整個(gè)頁面的風(fēng)格樣式。我們在這里以CSS設(shè)計(jì)標(biāo)題為例,進(jìn)一步介紹CSS在控制文字時(shí)的各種方法和技巧。對于我們在這里中使用的一些CSS屬性,前面課程可能還沒有涉及,讀者不必深究,在以后的課程都將詳細(xì)介紹。
CSS段落文字
段落是由一個(gè)個(gè)CSS文字組合而成的,同樣是網(wǎng)頁中最最重要的組成部分,因此前面提到的文字屬性,對于段落同樣適用。但CSS針對段落也提供了很多樣式屬性,我們在這里將通過實(shí)例進(jìn)行詳細(xì)介紹。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容:
段落的水平對齊方式
段落的垂直對齊方式
行間距和字間距
首字放大
段落實(shí)例:百度搜索
搜索引擎一直都是在網(wǎng)上沖浪必不可少的工具,而搜索引擎在顯示搜索結(jié)果時(shí)如何能讓用戶一目了然的找到關(guān)鍵字,是每一個(gè)搜索網(wǎng)站在排版時(shí)都必須認(rèn)真對待的,而各種搜索結(jié)果恰恰都只是文字段落為主。作為國內(nèi)搜索引擎霸主之一的百度一直保持著友好的用戶界面。我們在這里通過具體實(shí)例,模擬Baidu搜索的顯示結(jié)果,進(jìn)一步鞏固CSS文字、段落的排版方法。
【編輯推薦】

我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流