@charset "utf-8";
/* CSS Document */

/*知識點一：複雜選擇器：1.父子選擇器（派生選擇器） 2.直接子元素選擇器  3.並列選擇器  4.分組選擇器*/

/*1. 父子選擇器或者是派生選擇器：父子關係存在即可*/

div span
{
	background-color:red;	
}

div strong em
{
	background-color:red;	
}

div em /*div下所用的em的背景顏色都會變 */
{
	background-color:red;	
}


/*2.直接子元素選擇器 */
div > em
{
	background-color:green;
}


section div ul li a em  /*程式碼是從左向右快還是從右向左快？回答：從右向左快 瀏覽器遍歷父子選擇器的順序是從右向左的 */
{
	background-color:red;
}


/*3.並列選擇器 */
div.demo{
	background-color:red;	
}


/*4.分組選擇器 */
em,
strong,
span
{
	background-color:red;	
}



.demo1
{
	width:100px;
	height:100px;
	background-color:red;	
}


.demo2
{
	width:100px;
	height:100px;
	background-color:green;	
}


/*將以上的兩個程式碼簡化*/
.demo1
,demo2
{
	width:100px;
	height:100px;	
}

/*******************************************/


/*知識點二：權重計算問題
以下的兩種方法會是文字部分變為什麼顏色 */

#idDiv p  /*權重計算：100+1 */
{
	background-color:red;	
}
    
.classDiv .classP/*權重計算：10+10 */
{
	background-color:green;	
}



/************************************************/


/*CSS基礎屬性： 
1.font-size:
	字型大小(預設字型大小16px，一般瀏覽器大小是12px)
	font-size設定是字型的高
2.font-weight:(normal)
 	  bold相當於strong
 	  bolder
3.font-style:italic  斜體  （類似於斜體）
4.font-family:arial  字型 
5.color:顏色
6.border:1px（brorder-width）  solid(border-style)  black(border-color:dashed);



/*

/*
1.土鱉式（英文單詞）
2.顏色程式碼
3.顏色函式


顏色程式碼：光學三原色：
r      g       b
00-ff  00-ff    00-ff

#000000
#ff0000  紅色
#00ff00  綠色
#0000ff  藍色
#ffffff(#fff)：白色



顏色函式：rgb(0-255,0-255,0-255);

*/


/*div
{
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	font-family:arial;
	color:rgb(0,255,255);
	width:10px;
	height:10px;
	border:100px solid black;
	border-left-color:#f00;
	border-top-color:#0f0;
	border-right-color:#00f;
	
}*/
 

/****** 如何用border畫出一個直角三角形    *********/ 
div
{
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	font-family:arial;
	color:rgb(0,255,255);
	width:0px;
	height:0px;
	border:100px solid black;
	border-left-color:black;
	border-top-color:transparent;
	border-right-color:transparent;
	
}*/