進擊のpython
前端學習——CSS
現在的互聯網前端分為三層：
- HTML:超文本標記語言。從語義的角度描述頁面結構
- CSS:層疊樣式表。從審美的角度負責頁面樣式
- JS:Javascript。從交互的角度描述頁面的行為
所以說HTML，CSS，JS也被稱為前端三劍客
CSS是一個很神奇的東西，設計者可以通過修改樣式表的定義從而使我們的網頁呈現出完全不同的外觀
也就是說，CSS其實就是網頁的衣服，將網頁打扮的“花里胡哨”
初識CSS
CSS全稱為‘’層疊樣式表‘（記住這個名字會對你后面的學習很有幫助）
他主要定義了HTML內容在瀏覽器的顯示樣式，比如文字的大小，顏色，字體的加粗等等
我們先看一下效果：
看，這個字就從原先的黑色，變成了現在的紅色，穿上了一件紅色的衣服！
使用CSS
那么，上面的效果是怎么達到的呢？想學嗎？我教你啊
那要是想使用CSS，要先學一個標簽<style></style>,style標簽包含網頁的樣式信息
默認情況下，該標簽的樣式信息通常是CSS的格式
比如我有一段文字百因必有果！你的報應就是我！,現在我想讓百因必有果！變紅
這個時候我們就可以通過設置樣式來作用，而且只需要編寫一條CSS樣式語句
首先在沒有樣式的時候是這么寫的(只改變某一部分，所以用標簽單獨標記)：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p><span>百因必有果！</span>你的報應就是我！</p>
</body>
</html>
然后我們需要在<head></head>標簽里使用<style></style>
並使用以下語句：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<p><span>百因必有果！</span>你的報應就是我！</p>
</body>
</html>
接下來看看效果：
注意：單獨將標語用span標簽標示出來，不會影響文本的正常顯示
如果再給span標簽設置了樣式，那么該span標簽就體現了它的語義
那么在網頁中，尤其是文本，在不影響文本內容變化的情況下
並且將凸顯的內容標識出來，我們就可以使用span標簽再配合我們的css來修改樣式
CSS語法
那上一節寫出了一行CSS代碼，我們就要知道這CSS語法是怎么樣子的
CSS樣式是由選擇符和聲明組成的，而聲明又由屬性和值組成：
- 選擇符:我們又稱為選擇器，指明網頁中應用樣式規則的元素，如上述圖中網頁的所有(span)的文本變為紅色，而其它元素(如ul,ol等等)不會受到影響
- 聲明：在英文大括號”{}”中的就是聲明，屬性和值之間用英文冒號”：“分割。當有多條聲明時，中間可以英文分號”;”分割
那其實可以再舉個栗子，幫助理解選擇符，屬性和值：
張三{身高：175cm；體重：50kg}
我想找個張三，然后把張三的身高設置成175cm，把體重設置成50kg
那為了使樣式更加容易閱讀，一般都將每條代碼寫在一個新行內
p{
font-size：12px;
color:red;
}
CSS注釋
在css也有注釋語句：
用/*注釋語句*/來表明(html中使用<!--注釋語句-->)。就像下面代碼：
/*設置段落默認樣式*/
p {
font-size：12px;
color: red;
}