CSS有很多用于格式化文本的屬性。比如,文本的顏色、大小寫轉化、對齊方式、文本間距、文本裝飾等等。
首先,我們來介紹 CSS 如何為文本添加顏色。
通過聲明 color 屬性 來設置文本的顏色,值可以是顏色名稱、十六進制顏色值、RGB顏色值。
我們來做個例子。
打開編輯器,創建一個 005-css-text 文件夾,在文件夾里創建一個 text.html 文件,創建基礎代碼,添加 h1 元素,填入一些文本。再添加一個 p 標簽,填入一些文本。
再創建一個 mystyle-1.css 文件,定義 body 元素選擇器,聲明樣式 color: blue。在頁面里引用它,路徑為當前目錄下的 mystyle-1.css 文。./mystyle-1.css)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text</title>
<link rel="stylesheet" href="./mystyle-1.css">
</head>
<body>
<h1>浠浠呀老師,學前端的大專生就業難嗎?</h1>
<p>
不難,只要你能力過關、項目經驗過關、人品過關,企業就會錄用你。你可以在面試的時候,著重介紹一下你的開發能力、技術能力以及你對技術理解,讓別人挑不出毛病,那學歷這塊是可以自動忽略的。我在面試別人的時候也是這樣,如果這個人的技術能力和過往經驗真的征服了我,我不是很在他乎他的學歷。</p></body></html>
這里說明一下:一個頁面的默認文本顏色是在 body 選擇器中定義的。
body {
/* 一個頁面的默認文本顏色是在body選擇器中定義的。 */
color: blue;
}
細心的小伙伴發現了,這里添加的是注釋嗎?沒錯,和 html 注釋一樣,它是用來解釋CSS 代碼的,瀏覽器會忽略注釋。CSS注釋以 /* (讀作:斜杠 星號) 開始,以 */ (讀作:星號 斜杠)結束,里面編寫注釋內容。注釋一般放到一組樣式定義的前面,或者放在單個樣式聲明的后面,中間可以換行。
在瀏覽器里查看頁面效果,文本全部為藍色。
在 mystyle-1.css 里再定義一個 h1 選擇器,聲明樣式 color: green。
再來看效果,標題變為了綠色,段落還是藍色。
接下來,我們介紹 CSS 如何強制轉換文本中,單詞和字母的大寫和小寫。
使用 text-transform 屬性來實現這個功能,它的值有三個:
uppercase:文本被轉換為大寫。
lower case:文本被轉換為小寫。
capitalize [?kæp?t?la?z]:每個單詞的首字母被轉換為大寫。
這個屬性主要用來設置英文的文本,對中文無效。
回到編輯器,我們再創建一個段落,填入答案的英文版。
<body>
<h1>浠浠呀老師,學前端的大專生就業難嗎?</h1>
<p>
不難,只要你能力過關、項目經驗過關、人品過關,企業就會錄用你。你可以在面試的時候,著重介紹一下你的開發能力、技術能力以及你對技術理解,讓別人挑不出毛病,那學歷這塊是可以自動忽略的。我在面試別人的時候也是這樣,如果這個人的技術能力和過往經驗真的征服了我,我不是很在他乎他的學歷。
</p>
<p class="transform">
It's not difficult, as long as you are competent, have project experience and are a good person, companies will hire you. You can focus on your development skills, technical skills and your understanding of technology during the interview so that no one can pick a fault, then the education piece can be automatically ignored. I do the same thing when interviewing people, if the person's technical skills and past experience really conquered me, I am not very in him about his education.
</p>
</body>
給這個段落定義 class 屬性,值為 transform。
在樣式中,定義 p.transform 選擇器,聲明樣式屬性text-transform ,值為 uppercase。
返回瀏覽器,全部的英文為大寫字母。
修改 text-transform 的屬性值為 lowercase。全部的英文為小寫字母。
修改 text-transform 的屬性值為 capitalize。全部單詞的首字母大寫。
有關 CSS 如何給文本添加顏色,以及轉換文本的大小寫,就介紹完了。最后給大家留一個作業,把屏幕上顯示的這個頁面效果實現一下,大家加油!