韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理

文西马龙：http://blog.csdn.net/wenximalong/

div+css细节

1.初始CSS
2.块元素和行内元素
3.CSS核心内容
3.1标准流
3.2盒子模型
3.3浮动
3.4定位
4.CSS综合案例
4.1盒子模型经典案例
4.2仿sohu首页面布局

学习目标
1.掌握CSS的基本用法
2.掌握CSS的四种选择器用法

CSS使用必要性

css使用的基本语法
选择器{
属性1:属性值;
属性2:属性值;
……
}

demo.html

	
		
		
	
	
		
		
		栏目一

		栏目二

		栏目三

		栏目四

		栏目五
	

demo.css

/*.s1 用术语 类选择器*/
.s1{
	color: green;
	font-size: 30px;
	text-decoration: underline;
}
.s2{
	color: yellow;
	font-size: 12px;
}
.s3{
	color: blue;
	font-style: italic;
}
.s4{
	color: green;
	font-weight: bold;
}
.s5{
	color: #9c3131;
}

案列：把所有的网站的图片，都变成黑白的，这个怎么实现呢
采用滤镜技术 ？

CSS选择器
选择器是css中非常重要的概念。css中有四种不同的常用选择器
1.类选择器，又叫class选择器
2.id选择器
3.html元素选择器
4.通配符选择器

简单的说，选择器就是在css中创建，而在网页页面（html，jsp，php，asp.net）中使用

类选择器
.类选择器名{
属性名:属性值；
}


id选择器
#id选择器名{
}


html选择器
html元素名称{
属性名:属性值;
}

选择器优先级的问题

selector.html

	
		
	
	
		北京你好
		新闻一
		新闻二
		新闻三
		新闻四
		新闻五

		这是一则非常重要的新闻
	

selector.css

/*类选择器*/
.s1{
	background-color: pink;
	font-weight: bold;
	font-size: 16px;
	color: black;
}

/*id选择器的使用*/
#id1{
	background-color: silver;
	font-size: 40px;
	color: black;
}

/*html选择器*/
body{
	color: orange;
}

 韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录