CSS样式单与基本选择器的总结整理

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元素中引用此文件:




   
   链接外部CSS样式单
   


	
疯狂Java讲义
轻量级Java EE
疯狂Ajax讲义

2.使用内部样式
内部样式是在html中head元素中添加,如:


   
   

3.使用行内样式
行内样式是在html中对body元素内的元素添加style属性,如:


	
div内的文字

p内的文字

优先级:行内样式>内部样式>外部样式

CSS基本选择器

1.元素选择器
元素选择器是最简单的选择器,语法格式如下:E {...}
具体如:

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

2.属性选择器
属性选择器其实就是根据元素中的属性及属性值进行匹配,如:




   
   属性选择器
   


	
没带任何属性的div元素
带id属性的div元素
id属性值包含xx子字符串的div元素
id属性值以xx开头的div元素
id属性值为xx的div元素

3.ID选择器
ID选择器就是对具有指定id属性值的元素起作用,写法是id前加#,如:




   
   ID选择器
   


	
没带任何属性的div元素
带id属性的div元素
id属性值为xx的div元素

4.class选择器
class选择器就是对具有指导class属性值的元素起作用,写法是id前加.,如:




   
   class选择器
   


	
没带任何属性的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.兄弟选择器
语法如下:Selector1~Selector2{…}。例:


   


	 

...

...

是对class属性值为lc的p元素进行作用。
8.选择器组合
对几种选择器进行同一种修饰。如:


   

对于div,p,span都进行一样的作用。

你可能感兴趣的:(CSS样式单,CSS基本选择器)