CSS初探學習總結 一
阿新 • • 發佈：2018-12-17
進入CSS之後，我們的標籤屬性，要換一種風格來寫了。這一塊內容比較多，筆者會分幾塊來記錄，方便大家學習參考探討。
一.CSS3字型樣式和屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3字型樣式屬性</title> <style type="text/css"> h5 { color: orange; font-size: 30px; font-family: "微軟雅黑",serif,tahoma; /*註釋*/ font-weight: 20; font-style: italic; } span { font-weight: bolder; } strong { font-weight: normal,italic（斜體）,olique; /*讓粗體變得不加粗*/ } h2 { font:italic bold 14px "微軟雅黑"; } </style> </head> <body> <h5>我是字型樣式</h5> <fieldset> <legend>字型</legend> <ul> <li>font-size 字號大小</li> <li>font-family 字型 可以多個字型，逗號隔開；中文引號，多個英文要用引號，unicode字型（推薦，宋體，微軟雅黑）</li> <li>font-weight 字型粗細 normal,bold,bolder lighter，也可以數字</li> <li>font-style 字型風格 normal,italic（斜體）,olique</li> </ul> <p><span>測試測</span>試測試測試測<strong>試測試</strong>測試測試測試測試測試</p> <h2>綜合設定字型樣式,按照順序來，至少有字號font-size，字型font-family</h2> </fieldset> </body> </html>
二.選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器</title> <style type="text/css"> span { /*標籤選擇器*/ font-size: 30px; } .blue { color: blue; /*類選擇器*/ } .red { color: red; } .orange { color: orange; } .green { color: green; } .font20 { font-size: 20px; } #pink { color: pink; /*id選擇器*/ } /** { color: blue; /*萬用字元選擇器*/ /*}*/ a:hover { color: red; } </style> </head> <body> <fieldset> <legend>標籤選擇器</legend> <p>系統的標籤</p> </fieldset> <fieldset> <legend>類選擇器</legend> <p>自定義的名字，.開頭，英文做名字,簡單明瞭，呼叫class</p><br> <span class="blue">G</span> <span class="red">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span> </fieldset> <fieldset> <legend>多類名選擇器</legend> <p></p> <span class="red font20">多類名選擇器</span> </fieldset> <fieldset> <legend>id選擇器</legend> <p>自定義的名字，#{}開頭，英文做名字,簡單明瞭，呼叫id</p><br> <p>id和類選擇器的區別：</p> <ul> <li>類選擇器可以重複使用</li> <li>id選擇器不可以重複使用，只能用一次</li> </ul> <span id="pink">id選擇器</span> </fieldset> <fieldset> <legend>萬用字元選擇器</legend> <p>*{}號表示，表示所有標籤，一般測試時用</p> <span>萬用字元選擇器</span> </fieldset> <fieldset> <legend>偽類選擇器</legend> <ul> <li><h3>連結偽類選擇器</h3></li> <li>:link 未訪問的連結</li> <li>:visited 已訪問的選擇器</li> <li>:hover 滑鼠移動到連結上</li> <li>:active 選擇的連結</li> <li>嚴格按照順序來 定義 a:link{}</li> </ul> <a href="#">連結偽類選擇器</a> <br> <ul> <li><h3>結構偽類選擇器</h3></li> <li>li:first-child 選擇第一個</li> <li>li:last-child 選擇最後一個</li> <li>li:nth-child(1) 選擇第1個，</li> <li>li:nth-child(1n) 1n個全選，n從1開始</li> <li>li:nth-child(2n)，從上往下數，2n個全選</li> <li>li:nth-child(2n+1) 2n+1個全選，</li> <li>li:nth-child(odd) 選擇奇數</li> <li>li:nth-child(even) 選擇偶數</li> <li>li:nth-last-child(even) 從最後一個孩子往上數</li> </ul> <br> <ul> <li><h3>目標偽類選擇器</h3></li> <li>:target{} 選中誰，誰變，配合a標籤</li> </ul> </fieldset> </body> </html>
三.CSS外觀屬及應用
<head> <meta charset="UTF-8"> <title>CSS外觀屬及應用</title> <style type="text/css"> h3 { text-align: center; /*水平對齊方式*/ } p { line-height: 25px; /*行間距*/ text-indent: 2em; /*首行縮排，em兩個中文字元*/ } div { letter-spacing: 15px; /*字間距*/ word-spacing: 20; /*單詞間距，相對英文*/ } h4 { color: rgba(0,0,0,0.5); /* 透明色*/ } h1 { text-shadow: 5px 2px 3px rgba(0,0,0,0.5); /*文字陰影： 水平距離，處置距離，模糊距離，顏色，前兩個必須寫: */ } </style> </head>
四.標籤樣式表
<fieldset>
<legend>塊級標籤</legend>
<ol>
<li>總是從新開始</li>
<li>高度，寬度，外邊距都可以控制</li>
<li>寬度預設是容器的100%>
<li>可以容乃內聯元素和其他塊元素</li>
<li></li>
</ol>
</fieldset>
<br>
<fieldset>
<legend>行內標籤</legend>
<ol>
<li>和相鄰行內元素在一行上/li>
<li>設定寬高無效，但水平的padding和margin可以設定，垂直方向的無效</li>
<li>預設寬度是內容本身</li>
<li>行內元素只能容乃文字或者其他行內元素</li>
<li>注意：p，h1，這些文字塊級標籤，裡面裡面不能再放其他塊級元素</li>
<li>注意：連結裡面不能再放連結</li>
</ol>
</fieldset>
<br>
<fieldset>
<legend>標籤相互轉換</legend>
<ol>
<li>display:inline; 塊級元素轉為行內元素</li>
<li>display:block; 行內元素轉為塊級元素</li>
<li>display:inline-block 行內標籤轉為行內塊標籤</li>
</ol>
</fieldset>
五. 複合選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>複合選擇器</title>
<style type="text/css">
/*div.color { 交集選擇器
font-weight: 700;
}*/
/*.color {
color: red;
}*/
/*em,.hehe { 並集選擇器
color: blue;
}*/
/*.demo ul li { 後代選擇器，帶class
color: red;
}
div ul li {
color: pink; 後代選擇器,層層尋找，找到最後要的那個標籤改變，
}*/
/*.child li { .child所有子類都變
color: red;
}
.child > li { 加了>號後，只有.child的一級類變
color: green;
}*/
</style>
</head>
<body>
<!-- <h3>-----交集選擇器-----</h3>
<div class="color">我是交集選擇器,標籤加類或者id選擇器</div>
<p class="color">沒有交集的</p>
<hr> -->
<!-- <h3>-----並集選擇器-----</h3>
<em>並集選擇器，逗號隔開，一起定義</em>
<br>
<span class="hehe">並集選擇器</span> -->
<!--
<hr>
<h3>-----後代選擇器，帶class-----</h3>
<div class="demo">
<ul>
<li>首頁</li>
<li>導航</li>
</ul>
</div>
<hr>
<h3>-----後代選擇器-----</h3>
<div>
<ul>
<li>百度</li>
<li>新浪</li>
</ul>
</div> -->
<!-- <h3>-----子元素選擇器-----</h3>
<ul class="child">
<li>一級選單變色，二級不變
<ul>
<li>二級選單</li>
</ul>
</li>
</ul> -->
<!-- <h3>-----屬性選擇器-----</h3>
<ul>
<li>input[type] input裡面有type屬性的改動</li>
<li>input[type=text] input裡面有type等於text的屬性改動</li>
<li>input[type^=text] input裡面有type等於text開頭的屬性改動</li>
<li>input[type$=text] input裡面有type等於text結尾的屬性改動</li>
<li>input[type*=text] input裡面有type包含text的屬性改動</li>
</ul> -->
<h3>-----偽元素選擇器-----</h3>
<ol>
<li>p::first-letter 段落第一個字選中改變</li>
<li>p::first-line 段落第一行選中改變</li>
<li>p::first-selection 選中文字時可變的樣式</li>
<li>div::before{content:"加字"} 盒子內部前面加字</li>
<li>p::after{content:"加字"} 盒子內部後面加字</li>
</ol>
</body>
</html>