1. 程式人生 > >CSS初探學習總結 一

CSS初探學習總結 一

進入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>