CSS基本語法（慕課網學習筆記）
阿新 • • 發佈：2018-11-08
CSS的宣告，內外聯樣式以及CSS的優先順序
css學習.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS學習</title> <!-- 這是其中一種外聯樣式 --> <style type="text/css"> /*CSS宣告、CSS宣告塊、CSS選擇器*/ /*body為CSS選擇器 ，此處為元素選擇*/ body{ /*{}中所有的內容為一個宣告塊*/ /*CSS宣告（屬性名稱:值;）*/ background-color:#56ADDC; } </style> <!-- 這是最常用的一種外聯樣式的使用 --> <link rel="stylesheet" href="CSS學習.css"> </head> <body> <!-- 直接加入style內聯樣式 --> <p style="background-color: #C82424;font-size: 25px;">這是一個段落內容發</p> <p>這是外聯樣式的測試</p> </body> </html>
css學習.css
p{
background-color: #C82424;
font-size: 25px;
}
CSS選擇器
選擇器的優先順序，內聯選擇器 > 外聯選擇器（ id選擇器 > class選擇器 > 元素選擇器）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS選擇器</title> <style> /*id選擇器*/ #myid { color:#FD0000; } /*class選擇器*/ .myclass { color:#000FFA; } /*元素選擇器*/ span{ color:#FFB900; } /*屬性選擇器*/ [title] { color:#00F7AA; } /*後代選擇器，父代選擇器之下的所有後代選擇器 選擇器之間加空格*/ #id1 span{ color: #FF0000; } /*子元素選擇器,只作用於兒子*/ #id2 > span{ color: #A70000; } /*兄弟元素選擇器，只作用於其兄弟且只作用於一個相鄰兄弟 */ #myspan + span{ color: #FF0000; } /*偽類選擇器，改變a元素點選過程中的各種變化*/ /*改變未訪問是的內容*/ a:link{ color: #00C9FF; text-decoration: none; } /*滑鼠劃入時的變化*/ a:hover{ color: #FF0000; } /*點選後的變化*/ a:active{ color: #58FF00; } /*點選後的效果*/ a:visited{ color: #E8FF00; } /*偽元素*/ /*::before會在當前元素建立一個子元素（第一個位置）作為偽元素*/ /*::after會在當前元素建立一個子元素（最後一個一個位置）作為偽元素*/ /*content顯示的內容*/ q::before{ content: "<<"; color:#00FFC4; } q::after{ content: ">>"; color:#00FFDE; } </style> </head> <body> <p id="myid">這是一段文字內容</p> <p class="myclass">這是一段文字內容</p> <span>這是一段文字內容</span> <p title="this is p.">這是一段文字內容</p> <div id="id1"> <span>span1. <span>span2.</span> </span> </div> <div id="id2"> <span>span1. <span>span2.</span> </span> </div> <span id="myspan">span1.</span> <span>span2.</span> <span>span3.</span> <br> <a href="http://www.imooc.com">偽類選擇器，改變a便籤的前後狀態</a> <br> <q>一些引用</q>,他說,<q>比沒有好。</q> </body> </html>