Web学习笔记_02

1 CSS入门
1.1 引入
html：负责网页的结构
css： 负责网页的美观（样式）
1.2 体验

			
			
			
			
			
			

			
			超链接

			超链接

			超链接

			超链接

			
			

设置后 所有a标签的字体大小变为 24px ，颜色变为#0F0；


1.3 定义
CSS（Cascading Style Sheet 层叠样式表） 简称，样式。
主要负责网页的美观。
1.4 css的使用方式
1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
超链接

2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用



3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

href  : 表示外部css文件的位置
rel: 表示关联的是样式表


2 CSS语法

a{
font-size:24px;
color:#F00;
}


选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景.....
CSS值（value）：添加样式的具体值。12px , 红色，背景图片....


2.1 选择器
a)标签选择器
作用： 选择同名的标签

	div{
			font-size:24px;
			color:#F00;	
		}

注意：
1）选择到所有同名的标签

b)类选择器
作用： 选择同类的标签

		.c1{
			font-size:24px;
			color:#F00;	
		}

注意：
1）选择的标签必须有class的属性。同类的标签使用同名

2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！

c)id选择器
作用： 选择一个标签
#d1{
font-size:24px;
color:#0F0;
}
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
3）id选择器的优先级最高！


d)并集选择器

.c1,#d1{
font-size:24px;
color:#0F0;
}
作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。


e)交集选择器
div里面的span标签
.c1 span{ 
font-size:24px;
color:#0F0;
}

作用： 选择某个选择器中的子标签。


f)通用选择器
{
font-size:24px;
color:#0F0;
}
作用； 选择所有的标签
e)伪类选择器
作用：控制标签在不同状态下的样式。


标签有四种状态：
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活（按下但没有松开）的状态

visited: 已经被访问过的状态（鼠标点下且松开）

超链接

1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有
效的。

   正确顺序： link visited hover active



案例：给表格每一行鼠标经过加上背景

姓名
班级
成绩


A君
Java
90


B君
Java
80


C君
java
90

输出效果：当鼠标经过第一行时没有任何变化，当鼠标经过其他行时，该行背景颜色会变为绿色；


2.2 常用的CSS属性和值

CSS文本

喂喂喂

测试 一下

输出效果：



CSS字体

写了几个字

简写的顺序：


CSS背景

图片位置图解：

CSS列表

	
	
	
	
	
	
	


	
	系统菜单
	

		
学生管理
		
教师管理
		
课程管理
	
	
		

CSS表格

	
	
	
	
	
	
	


	
	

		
成绩表
		

			
姓名
			
班级
			
成绩
		
		

		

			
A
			
Java
			
80
		
		

			
B
			
Java
			
78
		
		

			
C
			
Java
			
90
		
		
	
	
	

输出效果：

CSS边框

	
	
	
	
	
	
	


	
	
div1
	
	

3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。

通过需求讲解盒子模型：
1.将盒子的宽高变为之前的两倍
2.将盒子厚度变为原来的两倍
3.盒子里面的内容距顶部内10px
4.盒子里面的内容距离左内边10px
5.下面的盒子距离上面的盒子10px(两种方式实现)

盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离




4. CSS定位（画图解释）
相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)

hahaha
hahaha
hahaha

输出效果：

当滚动网页时，第三个div标签的位置保持不变；

5. 作业：利用div+css设计一个qq登录页面，画图说明需求，代码完成

用户名：



密   码：


        

     

输出效果：