Web基礎關鍵_004_CSS（二）

目? 錄

一、樣式

1.行內樣式

2.內部樣式

3.外部樣式

?二、選擇器優先級

1.非關系選擇器

2.關系選擇器

三、屬性

四、盒子模型

?五、元素

1.塊級元素

2.行內元素

3.行內塊級元素

4.元素類型轉換

六、浮動

七、定位

1.靜態定位

2.相對定位

3.絕對定位

4.固定定位

一、樣式

1.行內樣式

<html><head><title>Test CSS</title>
</head><body><h3>你是我觸碰不到的風，醒不來的夢</h3><p style="font-family: 楷體;font-size: 20px;color: pink;">尋不到的天堂，醫不好的痛</p><p>點不著的香煙，松不開的手</p><p>忘不了的某某某</p><span>你是我尋覓不到的風，哭不完的紅</span><p>說不出的保重，熬不過的冬</p><div><p>忍不住的歡笑，喝不完的酒</p></div><p>愈合不了的傷口</p></body></html>

2.內部樣式

<html><head><title>Test CSS</title><style>p {font-family: 楷體;font-size: 20px;color: red;}</style>
</head><body><h3>你是我觸碰不到的風，醒不來的夢</h3><p>尋不到的天堂，醫不好的痛</p><p>點不著的香煙，松不開的手</p><p>忘不了的某某某</p><span>你是我尋覓不到的風，哭不完的紅</span><p>說不出的保重，熬不過的冬</p><div><p>忍不住的歡笑，喝不完的酒</p></div><p>愈合不了的傷口</p></body></html>

3.外部樣式

? ? ? ? 內部樣式只能作用于當前頁面，若有多個頁面需要使用同一個樣式，則需要使用外部樣式。

/* index.css */
p {font-family: 楷體;font-size: 20px;color: pink;
}

<html><head><title>Test CSS</title><link rel="stylesheet" href="css/index.css">
</head><body><h3>你是我觸碰不到的風，醒不來的夢</h3><p>尋不到的天堂，醫不好的痛</p><p>點不著的香煙，松不開的手</p><p>忘不了的某某某</p><span>你是我尋覓不到的風，哭不完的紅</span><p>說不出的保重，熬不過的冬</p><div><p>忍不住的歡笑，喝不完的酒</p></div><p>愈合不了的傷口</p></body></html>

?二、選擇器優先級

1.非關系選擇器

被【!important】修飾，優先級最高；
行內樣式優先級其次；
內部樣式和外部樣式會根據加載順序加載進文檔，形成文檔流，所以和內部、外部無關；
文檔流內，選擇器的優先級：id > 屬性、偽類 > 類 > 標簽 > 全局；
優先級相同的，靠后的選擇器生效，遵循就近原則；
部分屬性可以被子繼承，即父容器的樣式會傳遞給子容器。但優先級最低，若子容器有自己的樣式，則會覆蓋繼承的樣式。

2.關系選擇器

?一個選擇器的優先級可以說是由三個不同的值（或分量）相加，可以認為是百（ID）、十（類）、個（元素），三位數的三個位數：
ID：選擇器中包含 ID 選擇器則百位得 1 分。
類：選擇器中包含類選擇器、屬性選擇器或者偽類則十位得 1 分。
元素：選擇器中包含元素、偽元素選擇器則個位得 1 分。

得分高者優先。

三、屬性

詳細可以參考【CSS 屬性】；
常用屬性如下：

屬性名稱	作用
background-color	背景顏色
font-family	字體
font-size	字體大小
font-style	字體風格（斜體、傾斜、正常）
font-weight	字體粗細
font	字體復合屬性（其他字體屬性、font-size、font-family 的簡寫屬性）
color	文本顏色
letter-spacing word-spacing	文本間距
text-decoration	文本劃線
text-indent	文本縮進
text-align	文本對齊
line-height	文本行高
list-style	列表（list-style-type、list-style-position、list-style-image）
border	邊框屬性（border-width、border-style[必需]、border-color）

四、盒子模型

合理利用塊級標簽；
內邊距：
左內邊距：padding-left；
右內邊距：padding-right；
上內邊距：padding-top；
下內邊距：padding-bottom。

外邊距：
左外邊距：margin-left；
右外邊距：margin-right；
上外邊距：margin-top；
下外邊距：margin-bottom。

<html><head><title>Test CSS</title><style>#d1 {border: 3px solid red;padding: 10px 10px 10px 10px;margin: 10px 10px 10px 10px;}#d2 {border: 2px solid blue;padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;}#p1 {border: 1px solid green;text-align: center;text-indent: 10px;}#p2 {border: 1px solid yellow;text-align: right;}#p3 {border: 1px solid pink;text-align: left;}</style>
</head><body><div id="d1"><div id="d2"><p id="p1">遺憾嗎 忘了吧</p><p id="p2">擦掉眼淚送走離開的他</p><p id="p3">平行的直線不該再有牽掛</p></div></div>
</body></html>

?五、元素

1.塊級元素

塊級元素獨占一行；
可以設定元素的寬、高、內邊距、外邊距；
未設置寬度時，始終與父元素寬度一致，與內容無關；
塊級元素一般是其他元素的容器，可以容納塊級元素和行內元素；
常見塊級元素：body、div、p、h1~h6、ol、ul、li、pre 等。

<html><head><title>Test CSS</title><style>#d1 {border: 3px solid red;padding: 10px 10px 10px 10px;margin: 10px 10px 10px 10px;}#d2 {border: 2px solid blue;padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;height: 300px;width: 700px;}#sp1 {border: 1px solid green;}#sp2 {border: 1px solid yellow;}#sp3 {border: 1px solid pink;}</style>
</head><body><div id="d1"><div id="d2"><span id="sp1">遺憾嗎 忘了吧</span><br><span id="sp2">擦掉眼淚送走離開的他</span><br><span id="sp3">平行的直線不該再有牽掛</span></div></div>
</body></html>

2.行內元素

行內元素（內聯元素），可以和其他行內元素共處一行；
不可以設置寬、高，內邊距、外邊距左右可控；
行內元素寬度僅與內容有關；
行內元素只能容納文本或其他行內元素。

3.行內塊級元素

行內塊級元素既有塊級元素的特點，也有行內元素的特點；
可以與其他行內元素、行內塊級元素共處一行；
可以設置寬、高；
常見行內塊級元素：img、input。

4.元素類型轉換

display 屬性，可以將一個元素類型轉換為另一個元素類型；

屬性值：

none：此元素不會被顯示，不保留物理空間；

block：此元素會被顯示為塊級元素，前后帶有換行符；

inline：此元素會被顯示為行內元素，前后沒有換行符；

inline-block：行內塊級元素。

六、浮動

將二維文檔流變為三維；?

屬性：float。

<html><head><title>Test CSS</title><style>.img1 {width: 300px;height: 300px;float: left;}</style>
</head><body><img src="img/wydt.jpg" class="img1"><h2>我與地壇</h2><p>人有時候只想獨自靜靜地待一會兒，悲傷也成享受。</p><p>一些人真實的困苦變成了另一些人編織的愉快，一個時代的絕望與祈告，變成了另一個時代的瀟灑的文字調遣。</p><p>風，四處游走，串聯起夜的消息，從沉睡的窗口到沉睡的窗口，去探望被白晝忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消滅恐懼最有效的辦法，就是消滅欲望。</p><p>他熄滅著走下山去，收入蒼涼殘照之際，正是他在另一面燃燒著爬上山巔，布散烈烈朝暉之時。</p><p>但是二十歲上下的人，不談戀愛尚且可做到，不向往愛情則不可能，除非心理有毛病。</p>
</body></html>

七、定位

1.靜態定位

? ? ? ? 文檔流的默認位置。

<html><head><title>Test CSS</title><style>p {position: static;left: -50px;}</style>
</head><body><h2>我與地壇</h2><p>人有時候只想獨自靜靜地待一會兒，悲傷也成享受。</p><p>一些人真實的困苦變成了另一些人編織的愉快，一個時代的絕望與祈告，變成了另一個時代的瀟灑的文字調遣。</p><p>風，四處游走，串聯起夜的消息，從沉睡的窗口到沉睡的窗口，去探望被白晝忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消滅恐懼最有效的辦法，就是消滅欲望。</p><p>他熄滅著走下山去，收入蒼涼殘照之際，正是他在另一面燃燒著爬上山巔，布散烈烈朝暉之時。</p><p>但是二十歲上下的人，不談戀愛尚且可做到，不向往愛情則不可能，除非心理有毛病。</p>
</body></html>

2.相對定位

? ? ? ? ?相對正常文檔流的位置進行定位。

<html><head><title>Test CSS</title><style>p {position: relative;left: -50px;}</style>
</head><body><h2>我與地壇</h2><p>人有時候只想獨自靜靜地待一會兒，悲傷也成享受。</p><p>一些人真實的困苦變成了另一些人編織的愉快，一個時代的絕望與祈告，變成了另一個時代的瀟灑的文字調遣。</p><p>風，四處游走，串聯起夜的消息，從沉睡的窗口到沉睡的窗口，去探望被白晝忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消滅恐懼最有效的辦法，就是消滅欲望。</p><p>他熄滅著走下山去，收入蒼涼殘照之際，正是他在另一面燃燒著爬上山巔，布散烈烈朝暉之時。</p><p>但是二十歲上下的人，不談戀愛尚且可做到，不向往愛情則不可能，除非心理有毛病。</p>
</body></html>

3.絕對定位

? ? ? ? 若沒有父容器，或父容器沒有定位，則以瀏覽器為定位標準。若父容器有定位，則以父容器為定位標準。?

<html><head><title>Test CSS</title><style>#d1 {position: absolute;left: -50px;}</style>
</head><body><div id="d1"><h2>我與地壇</h2><p>人有時候只想獨自靜靜地待一會兒，悲傷也成享受。</p><p>一些人真實的困苦變成了另一些人編織的愉快，一個時代的絕望與祈告，變成了另一個時代的瀟灑的文字調遣。</p><p>風，四處游走，串聯起夜的消息，從沉睡的窗口到沉睡的窗口，去探望被白晝忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消滅恐懼最有效的辦法，就是消滅欲望。</p><p>他熄滅著走下山去，收入蒼涼殘照之際，正是他在另一面燃燒著爬上山巔，布散烈烈朝暉之時。</p><p>但是二十歲上下的人，不談戀愛尚且可做到，不向往愛情則不可能，除非心理有毛病。</p></div>
</body></html>

4.固定定位

? ? ? ? 相對瀏覽器窗口進行定位，當瀏覽器出現滑動滾輪時，元素位置不變。

<html><head><title>Test CSS</title><style>img {position: fixed;width: 300px;height: 300px;right: 0px;bottom: 0px;}</style>
</head><body><img src="img/wydt.jpg"><h2>我與地壇</h2><p>人有時候只想獨自靜靜地待一會兒，悲傷也成享受。</p><p>一些人真實的困苦變成了另一些人編織的愉快，一個時代的絕望與祈告，變成了另一個時代的瀟灑的文字調遣。</p><p>風，四處游走，串聯起夜的消息，從沉睡的窗口到沉睡的窗口，去探望被白晝忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消滅恐懼最有效的辦法，就是消滅欲望。</p><p>他熄滅著走下山去，收入蒼涼殘照之際，正是他在另一面燃燒著爬上山巔，布散烈烈朝暉之時。</p><p>但是二十歲上下的人，不談戀愛尚且可做到，不向往愛情則不可能，除非心理有毛病。</p><p>秋風起時，瘋狂的搖滾才能聚斂成愛的語言。</p><p>我忽然覺得，我一個人跑到這世界上來玩真是玩的太久了。</p><p>人終會被年少不可得之物困其一生，也終會為一時一景解開一生困惑。 現在是將來的過去，現在是過去的將來，將來是將來的現在。</p><p>我常以為是愚氓舉出了智者 我常以為是懦夫襯照了英雄 我常以為是眾生度化了佛祖。可是不必著急的事并不證明是一件必要拖延的事呀？你總是決定活下來，這說明什么？是的，我還是想活。人為什么活著？因為人想活著，說到底是這么回事，人真正的名字叫作：欲望。</p><p>但要是“愛”也喧囂，“美”也招搖，“真誠”淪為一句時髦的廣告，那怎么辦？惟柔弱是愛愿的識別，正如放棄是喧囂的解劑。人一活脫便要囂張，天生的這么一種動物。</p><p>誦經聲如無字的伴歌，好像黑夜的愁嘆，好像被灼烤了一白天的土地終于得以舒展便油然飄繚起的霧靄。</p><p>那一天，我也將沉靜著走下山去，扶著我的拐杖。有一天，在某一處山洼里，勢必會跑上來一個歡蹦的孩子，抱著他的玩具。 當然，那不是我。 但是，那不是我嗎？宇宙以其不息的欲望將一個歌舞煉為永恒。這欲望有怎樣一個人間的姓名，大可忽略不計。</p><p>比如你起早熬夜準備考試的時候，忽然想起有一個長長的假期在前面等待你，你會不會覺得輕松一點？并且慶幸并且感激這樣的安排?</p><p>我不高興是指精神的我 我發燒了是指肉身的我 我想自殺是精神的我想殺死肉身的 我 但是我不敢死 是肉身的我在哀求精神的我 我想結束的是痛苦 不是生命</p><p>命運把我推到懸崖邊，我就在這里坐下來，唱支歌給你聽。</p><p>看見了傷殘，卻擺脫不了春天。春風強勁也是一座牢籠，一副枷鎖，一處煉獄，一條命定的路途。</p><p>四處無人，寂靜悠久，寂靜的我和寂靜的墻之間，膨脹和盛開著野花，膨脹和盛開著冤屈。</p>
</body></html>