CSSスタイルシートと基本セレクタ

CSSスタイルシート

1.外部CSSスタイルCSSファイルを使用する.

table{
	background-color:#003366;
	width:400px
}

td{
	background-color:#fff;
	font-family:"  _GB2312";
	font-size:20pt;
	text-shadow:-2px 4px 2px #333;
}

htmlのhead要素でこのファイルを参照します.

   
   
   


	

		

			
  Java  
		
		

			
   Java EE
		
		

			
  Ajax  
		
	

2.内部スタイルの内部スタイルを使用するには、htmlのhead要素に次のように追加します.

3.行内スタイル行内スタイルを使用するには、htmlでbody要素内の要素にstyle属性を追加します.たとえば、次のようにします.

	
div    
	
p    

優先度:行スタイル>内部スタイル>外部スタイル(Line Style>Internal Style>External Style)

CSS基本セレクタ

1.要素選択器要素選択器は最も簡単な選択器であり、文法形式は以下の通りである:E {...}具体的には以下の通りである.

*{}
div{}
p{}
class{}

2.属性セレクタ属性セレクタは、要素の属性と属性値に基づいて一致します.

   
   
   


	
       div  
	
 id   div  
	
id     xx     div  
	
id    xx   div  
	
id    xx div  

3.IDセレクタIDセレクタは、id属性値を指定した要素に対して機能し、idの前に#を付ける.

   
   
   


	
       div  
	
 id   div  
	
id    xx div  

4.classセレクタclassセレクタは、classを指導する属性値を持つ要素に作用し、idの前付けと書く.次のようになります.

   
   
   


	
       div  
	
 id   div  
	
id    xx div  

5.セレクタを含むセレクタとは、次のように、セレクタがセレクタに対応する要素の内部にある必要があることを指定します.

	   div .a{
			width:300px;
			height:30px;
			background-color:#eee;
			border:1px soild black;
			padding:10px;
	   }

class属性値が.aのかつdivの中にある要素.6.サブセレクタサブセレクタは、次のように、セレクタがセレクタに対応する要素である必要があることを指定するサブ要素です.

	   div .a{
			width:300px;
			height:30px;
			background-color:#eee;
			border:1px soild black;
			padding:10px;
	   }

class属性値が.aのかつdiv要素のサブ要素である.7.兄弟選択器の文法は、Selector 1~Selector 2{...}です.例:

   


	 

	       
...
	       ...
	       

	 

はclass属性値lcのp要素に作用します.8.セレクタの組み合わせは、いくつかのセレクタを同一の修飾を行う.次のようになります.

div,p,spanについても同様の役割を果たす.