css样式、选择器

样式

行内式

<span style="color: red;"></span>

内嵌式

<style type="text/css">
 div {
		background-color: gray;
		width: 500px;
		height: 500px;
		}
span {
		color: red;
		}
</style>

外链式

<link rel="stylesheet" href="css/01.css">

基本原则：“最晚，优先级最高”

                行内式优先级最高

导入式

使用@import指令可以将css文件中的css样式导入到不同的地方

导入式的结果和直接书写是同样的效果 导入式可以共享样式代码

可以在内嵌式里使用导入，也可在css文件中使用

@import url(“sheet1.css”);
@import “sheet1.css”;

 css选择器

标签选择器

 即使用标签的名字作为选择符     

语法：标签名{

                        样式属性名：属性值；

                }
例：td{color:#F00;}

ID选择器

每个html标签的id都是不一样的     

 语法：#id{

                        样式属性名：属性值；

                }

 类(class)选择器

注意：也可以在前面添加标签名字，如div.className（之间无空格，和包含选择符区分开） 可以为标签指定多个class值，多个值之间用空格隔开

语法：.className{规则}

 包含选择器

通过标签的嵌套选择标签，只要包含就行      

用空格隔开

语法：选择符a  选择符b {

                                               样式属性名：属性值； 

                                        }

通配符选择器 

*{
     样式属性名:属性值
}

 伪类

<style type="text/css">
			/* 未访问状态 */
			.box:link{
				color: #FFC0CB;
			}
			/* 访问后的状态 */
			.box:visited{
				color: #008000;
			}
			/* 鼠标悬停状态 */
			.box:hover{
				color: #FF0000;
			}
			/* 激活状态 */
			.box:active{
				color: #0000FF;
			}
</style>

 长度单位

px像素

em    1em=16px

cm/mm/pt/pc  主要用在非显示器输出上

颜色表达 

1.直接用颜色的英文单词  ， 如red;

2.三色的数值    ，如rgb(120,222,100)

3.三色数值的十六进制    ，如#0000ff