CSS介绍

一、链接方式

<link rel="stylesheet"  href="css文件名" />

 

二、元素选择器

div（元素名，对于所有的div都起作用）{
		font-size:12px;
		background-color:#F00;
		border:solid;
	
	}

 三、类选择器

有两种方式，方式1

.testc1{
background:#000;
height:100px;
width:100px
}

 对所有class等于testc1的元素都起作用

方式2：

div.testc1{
background:#000;
height:100px;
width:100px
}

 只是对div中class等于testc1起作用

 

四、id选择器

#gaga {
	text-decoration:line-through;
}
//定义方式
//如果元素要使用的id要等于gaga

 五、包含选择器

<style type="text/css">
  h1 .test{
	  color:red
	  
	  	}

</style>
//只对h1中的子元素且class等于test的元素起作用

 六、常见文件属性

属性名	说明	参数说明
font-family	字体名称
font-size	字体大小	例：24px
font-style	字体风格	normal(缺省)，italic([ɪˈtælɪk), 斜体。对于没有斜体变量的特殊字体，将应用oblique. oblique(ə'bli:k) 倾斜的字体
font-weight	字体粗细	normal(缺省)，bold或数值。
color	字体颜色
line-height	行高	normal | length
letter-spacing	字符间距	normal | length
text-decoration	字体装饰	none || underline || blink || overline || line-through
text-overflow	文本溢出处理	clip (修剪)| ellipsis(省略)
text-align	文本对齐属性	left (居左，缺省值)  right (居右) center (居中)

 七、伪类选择器

这里只介绍4种超链接的伪类选择器

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */ 

如：
<style type="text/css">
	div{
		font-size:12px
		}
	div:first-letter{
		font-size:80px;	
		
	}
	a:link{ color:#0F0}
	a:visited {color:#F00}
	a:hover{
		background-color:#CC0}
		
	a:active {
		color:#F0F
		
		}
</style>
<a href="http://www.baidu123.com">test11111</a>
<a href="http://www.qq123.com">test222222</a>
<a href="http://www.kekeyun123.com">test3333333</a>

八、背景属性

 

属性名	说明	参数
background-color	背景颜色	颜色单词或数值
background-image	背景图片
background-repeat	背景重复	默认：同时向x, y方向重复 repeat-x 背景图片横向重复  repeat-y 背景图片竖向重复  no-repeat 背景图片不重复
background-attachment	背景附着	scroll（缺省），fixed （背景不随滚动条移动）