高效入門css3（二）

引用css文件

若我們的style里面寫了很多很多，很復雜，我們可以新建一個css文件，放在.html同目錄下，然后在style里面輸入

<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

就可以在html文件里面引用css文件，對于大文件修改起來更加方便！

顏色

對于顏色的設置，除了直接color:red；

還可以用hex格式表示，如color:#000000 color:#00FF00；

還可以用rgb格式，如color:rgb(255,0,255)；

對于多個對象，若我們想同時修改，則要一個一個地改？我們可以先用JavaScript定義一個變量defined_color:pink;然后css定義顏色color:defined_color即可，當我們只修改這一變量，則所有用了這個顏色的對象都會被修改?。↗S的知識可以康康我的文章哦）

其他基礎

1. padding填充: 內容在區(qū)域內部的上下左右距離設置。試試padding:20px;你會發(fā)現內容的上下長度變?yōu)?0px。

/*body里*/
<p class="k">hello5</p>

/*style里*/
.k{
	color:orange;
	padding:20px ;
}

你看，定義了padding的hello5比沒定義的hello3要寬。

2. margin邊緣：內容的邊緣外部的距離設置，冰雪聰明的你看下面圖就能理解。

/*body里*/
<p class="k">hello5</p>

/*style里*/
.k{
	color:orange;
	margin:20px ;
}

你看，定義了margin的hello5與外部有了20px的距離，沒有定義的hello3則撐滿了頁面。

3. grid網格布局：二維，可以利用grid布局快捷地繪制表格！
4. 如何繪制一個2行3列的表格？

/*body里*/
<div class="container">
		<div class="d1"> 1 </div>
		<div class="d1"> 2 </div>
		<div class="d1"> 3 </div>
		<div class="d1"> 4 </div>
		<div class="d1"> 5 </div>
		<div class="d1"> 6 </div>
</div>

/*style里*/
.container{
		font-size:20px;                       /*字體大小為20px*/
		display:grid;                         /*grid布局*/
		grid-template-columns:1fr 1fr 1fr;    /*3列，fr是充滿頁面單位*/
		grid-template-rows:1fr 1fr;           /*2行，fr是充滿頁面單位*/
}
.d1{
		background-color:lightblue;   /*背景天藍色*/
		text-align:center;            /*字體居中*/
		border-color:blue;            /*邊框顏色為藍色*/
		border-width:5px;             /*邊框粗5px*/
		border-style:solid;           /*邊框類型為實線*/
		border-radius:0px;            /*邊框無圓角*/
}

相信大家看代碼注釋就能理解，注意這個fr單位非常好，如果1fr 2fr 1fr，則頁面按照1:2:1的比例分配列的寬度。當然我們也可以直接用px設置列和行的長度。

4. flex彈性布局：與grid對應，這個是一維的。

<div class="box">
		<div class="d2"> 1 </div>
		<div class="d2"> 2 </div>
</div>

/*style里*/
.box{
		display: flex;                /*flex布局*/
		flex-direction: row;          /*水平分布*/
}
.d2{
		text-align:center;
		background-color:lightblue;
		border-color:blue;            /*邊框顏色為藍色*/
		border-width:5px;             /*邊框粗10px*/
		border-style:solid;           /*邊框類型為實線*/
		border-radius:0px;            /*邊框圓角*/
		flex: 100%;                   /*充滿頁面*/
}

grid布局你都理解了，flex肯定ok啦。區(qū)別好一個是二維一個是一維就ok了。

4. repeat():grid布局中用到了 1fr 1fr 1fr ，如果有10列，我們豈不是要寫十個1fr？“懶惰 ”的程序猿發(fā)明了repeat函數，repeat( 3 , 1fr )就是3個1fr連著寫的意思，同理10個1fr就是repeat( 10 , 1fr ).
   還可以repeat( 3 , 1fr 50px ) 表示 1fr 50px 1fr 50px 1fr 50px，簡便很多！