【Web前端学习笔记】CSS3_常用属性,选择器,盒子模型

CSS3

A.概述

1.什么是CSS

Cascading Style Sheet 层叠样式表

2.作用

用来控制网页元素的展示形式

3.为什么要用CSS

1）主要作用就是为了解耦

2）弥补了HTML标签自带属性的不足

3）学了CSS后，以后在设置标签的样式时，尽量不要用标签的自带属性，全用CSS去设置

也就是说：HTML只提供标签，剩下的交给CSS来完成

B.使用方式

1.内联样式

将CSS代码写在标签上，所有标签都会有一个style属性

我们的代码就可以写在style属性里面

	文字

注意：内联方式只能控制单个标签，且书写凌乱，不推荐使用

2.内部方式

将style属性写在标签内部，常用

3.外联样式

CCS样式写在一个单独文件中，这种方式常用

C.常用属性（部分属性必须使用支持HTML5的浏览器）

1.position：

HTML网页中的坐标原点(0点)：页面左上角

1）position:absolute;left:20px;top:80px：

这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置

2）position:relative;margin-leftl20px;matgin-top:20px;

是相对于前面的容器定位的。这个时候不能用top left定位。应该用margin

布局原则：尽量使用相对定位

2.距离

1）top:80px;   距顶部距离

2）left:35px;   距左距离

3）width:20px;   宽度

4）height:20px;   高度

3.内容

1）font-family:楷体;   字体

2）font-size:14pt;      字号

3）color:blue;           层里面的字体颜色

4）overflow:scroll/visible/hidden/auto  超出内容显示/截取/滚动条显示

5）float:rigth;   浮动到哪个位置，设置left或right层为左右排列，默认是上下排列

6）clear:both/left/right/none;  属性规定元素的哪一侧不允许其他浮动元素

一般用于使用float后无法换行，给两个控件中间夹一个空层设置style="clear:both;"

7）background: #99FFcc;    层的背景颜色

8）background-image:url('top.jpg');     为层设置背景图片

9）display:block/none/inline    显示为块  隐藏  显示为行

10）visibility:visible     显示元素

11）visibility:hidden     隐藏元素

4.边框

1）border:2px solid #f98510;      边框的宽度和样式以及颜色

2）z-index:2;     属性设置元素的堆叠顺序

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

3）transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移

4）border-radius:20px;    边框圆角

5）border-image:url(border.png) 30 30 round;  边框图片 大小模式

6）box-shadow: 10px 10px 5px #888888;   添加阴影

7）outline:#00ff00 dotted thick;    轮廓

5.鼠标显示相关

1）cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help

2）cursor:url(''),default;

6.不同浏览器不同写法

-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */

7.还有许多其他属性，可根据需求，查找W3School文档来学习使用

8.div

1）层的属性

	
	

		我是层标签
 
		我是层标签
 
		我是层标签
 
		我是层标签

	
	我是层外标签

	这是我要控制的文字后面的内容

2）层的叠层顺序

结果：绝对路径，都以0点为基础

可以尝试下改为相对路径

3）层的浮动

	

	

	

	
	

	hello
	hello
	

自行观察清除前和清除后的效果

4）显示隐藏层

D.选择器

1.标签选择器

2.类选择器

在标签中要指定一个class属性

书写格式：.class属性值

类选择器的优先级大于标签选择器

/*类选择器*/
	.ch{
		font-size: 36px;
		color: #00F;
	}

注意事项：在同一个页面下，可以给多个标签指定同一个class属性

3.id选择器

在标签中指定id属性

书写格式：

#id属性值{

样式

}

id选择器的优先级大于类选择器

/*id选择器*/
	#dl{
		font-size: 24px;
		color: #0F0;
	}

4.并集选择器

id选择器和类选择器一块使用

/*并集选择器*/
	ch,#dl{
		font-size: 36px;
		color: #0F0;
	}

5.交集选择器

/*交集选择器*/
	#dl span {
		font-size: 36px;
		color: #0F0;
	}

6.通用选择器

/*通用选择器*/
	*{
		font-size: 36px;
		color: #0F0;
	}

7.伪类选择器

link:表示没有访问过的状态

hover:表示鼠标经过的状态

active:鼠标激活状态,鼠标按下了,但是没有松开的状态

visited:访问的状态,鼠标按下了,并且松开了

伪类选择的顺序:

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

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的

	腾讯

8.伪类练习

使用伪类选择器，实现鼠标经过表格的每行，行的背景颜色变为蓝色。除过表头

提示： 背景颜色： background-color

	

		
2017年期末考试成绩单
		

			

				
姓名
				
班级
				
成绩
			
		
		

			

				
张三
				
计算机1班
				
80
			
			

				
李四
				
计算机1班
				
90
			
			

				
王五
				
计算机1班
				
85
			
		
	

E.盒子模型

1.顺序排列，用于div设置显示方式为盒子模型给父布局设置，其子元素按父元素设置的效果排列：

2.设置盒子模型

display:flex;后给其子元素设置margin:auto;为自动居中

a.排列方式横向或竖向，后面加上wrap可自动控制高度

flex-direction:row | row-reverse | column | column-reverse

b.按方向居左开始 中间  末尾

justify-content:flex-start | flex-end | center;

c.flex-flow:和上面的属性值相同 加上warp可以换行或换列

d.flex-wrap:wrap;//自动换行 或换列

e.让div往右边移动10px:padding-left:10px;

f.给盒子的内容设置上内边距:给盒子的内容设置上内边距

g.margin表示外边距

F.关于CSS

CSS同HTML一样，其中的的属性纯属记忆性的东西

整个学习过程在于多练，多记

对于Java后台开发，只需要了解，会用皆可