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