CSS基礎知識

CSS基礎知識

前置知識：使CSS和html能一起使用：(使用外部關聯較好)

1.定義外部CSS文件，在CSS文件中定義選擇器和屬性
2.在html文件中的head標籤中 使用link標籤引入
舉例：
	<link rel = "stylesheet" href="../css/test.css">
說明：
	rel  定義當前文檔與被鏈接文檔之間的關係。
	href 定義被鏈接文檔的位置		

CSS文件內容

option{           /*選擇器*/
	color : red;  /*屬性*/
}

1.選擇器

基礎選擇器：
	1.id選擇器：對指定標籤定義其id屬性，解析時選擇出具體id屬性值的元素
		#idName{屬性...}
		
		舉例：
			#tips{
				color : Blue;
				width : 5;
			}
	2.元素選擇器：對指定的標籤名稱進行選擇
		labelName{屬性...}
			
		舉例：
			option{
				color : red;
			}
	3.類選擇器：對指定標籤定義其class屬性，解析時選擇出具體class屬性值的元素
		.className{屬性...}
		
		舉例：
			.t1{
				color : green;
				width : 4
			}
	總結：
		id > class > 元素選擇器，若存在覆蓋情況，則按優先級高低分配

拓展選擇器：
	1.選擇所有元素：
		*{
			color : red;
		}
	2.並集選擇器：
		div,font{     /*並集選擇器 作用於 font或div標籤  */
			color : blue;
		}

	3.子選擇器：
		font b{   /*子選擇器 作用於 font內部的b標籤 */
			color : blue;
		}
	4.父選擇器：
		font>b{   /*父選擇器 作用於 b外部的font標籤*/
			border:5px solid;
		}
	5.元素屬性選擇器：
		font[size = "10"]{  /*元素屬性選擇器 作用於具備指定屬性值的標籤*/
			color : #ff0080;
			border:5px solid;
		}

	6.僞類選擇器：選擇具有一定狀態的元素
		a:link{    /*超鏈接的初始狀態*/
			color : "grey";
		}
		a:hover{	/*懸浮於之上*/
			color : "yellow";
		}
		a:active{	/*被選中*/
			color : "green";
		}
		a:visited{	/*被訪問了*/
			color : "red";
		}

屬性：

1.文本屬性
	1.color : 		blue;       //文本顏色
	2.font-size :	30px;		//字體大小
	3.text-align :	center;		//對齊方式
	4.line-height:	10;			//行高
	
2.背景
	background : url("../pictures/base.jpg"); 
									 //在一個聲明中設置所有的背景屬性
	background-size:200px 200px;	 //定義背景圖片大小	
3.邊框	
	border:	5px solid           //邊框
4.尺寸
	height : 200px;				//高度
	width : 200px;				//寬度
5.盒子模型
	margin,padding,float   td,div..:padding  p,div..:margin

	padding內邊距會影響盒子的大小,margin不會
	margin:auto:  左右margin會居中，上下不會調整
	
	舉例：
		/*可使兩個盒子，內盒子居中，2種方式*/
		div{
			border : 1px solid;
		}
		
		#small{
			width : 100px;
			height : 100px;
			/*margin :50px;    /*1.所有 4 個外邊距都是 50px*/
		}
		
		#big{
			width : 200px;
			height : 200px;
			box-sizing:border-box;  
			padding : 50px;   /*2.所有 4 個內邊距都是 50px*/
			/*
			固定盒子大小，避免調整內邊距影響盒子的大小
			*/
		}

		

		/*可使3個出於同一行的狀態*/
		.c1{
			float:left;
		}
		
		.c2{
			float:left;
		}
		.c3{
			float:left;
		}

參考教程：

https://www.w3school.com.cn/