CSS3
A.概述
1.什么是CSS
Cascading Style Sheet 层叠样式表
2.作用
用来控制网页元素的展示形式
3.为什么要用CSS
1)主要作用就是为了解耦
2)弥补了HTML标签自带属性的不足
3)学了CSS后,以后在设置标签的样式时,尽量不要用标签的自带属性,全用CSS去设置
也就是说:HTML只提供标签,剩下的交给CSS来完成
B.使用方式
1.内联样式
将CSS代码写在标签上,所有标签都会有一个style属性
我们的代码就可以写在style属性里面
注意:内联方式只能控制单个标签,且书写凌乱,不推荐使用<font style="color: red;font-size: 20px;font-family: 宋体">文字</font>
2.内部方式
将style属性写在<head>标签内部,常用
3.外联样式
CCS样式写在一个单独文件中,这种方式常用
C.常用属性(部分属性必须使用支持HTML5的浏览器)
1.position:
HTML网页中的坐标原点(0点):页面左上角
1)position:absolute;left:20px;top:80px:
这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置
<div style="background-color:green;height:200px; width:200px; position: absolute;left: 20px;top: 80px"></div>
2)position:relative;margin-leftl20px;matgin-top:20px;
是相对于前面的容器定位的。这个时候不能用top left定位。应该用margin
<div style="background-color: green; height: 200px; width: 200px; position: relative; margin-left: 20px; margin-top: 20px;"></div>
布局原则:尽量使用相对定位
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;"
4.边框7)background: #99FFcc; 层的背景颜色
8)background-image:url('top.jpg'); 为层设置背景图片
9)display:block/none/inline 显示为块 隐藏 显示为行
10)visibility:visible 显示元素
11)visibility:hidden 隐藏元素
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.鼠标显示相关
6.不同浏览器不同写法1)cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
2)cursor:url(''),default;
-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)层的属性
<body> <!-- div soild 层是实线 --> <div style="background-color: red; height: 200px; width: 200px; border: 2px blue solid;"> 我是层标签<br> 我是层标签<br> 我是层标签<br> 我是层标签<br> </div> 我是层外标签<br> <span style="color: #00ff33; font-size: 20px; font-family: 楷体">这是我要控制的文字</span>后面的内容 </body>
2)层的叠层顺序
<head> <meta charset="UTF-8"> <title>层叠顺序</title> <!-- js语句,先了解 --> <script> var index = 0; function huan(obj){ index++; obj.style.zIndex = index; } </script> </head> <body> <div style="width: 200px; height:200px; background-color: red; position: absolute; left: 50px; top: 50px;"οnclick="huan(this)"></div> <div style="width: 200px; height:200px; background-color: yellow; position: absolute; left: 100px; top: 100px;"οnclick="huan(this)"></div> <div style="width: 200px; height:200px; background-color: blue; position: absolute; left: 150px; top: 150px;"οnclick="huan(this)"></div> </body>
结果:绝对路径,都以0点为基础
可以尝试下改为相对路径
3)层的浮动
自行观察清除前和清除后的效果<body> <div style="width: 200px; height:200px; background-color: red; float: left;"></div> <div style="width: 200px; height:200px; background-color: yellow; float: left;'"></div> <div style="width: 200px; height:200px; background-color: blue; float: right;"></div> <!-- 清除浮动 --> <div style="clear: both;"></div> <button>hello</button> <button>hello</button> <div style="background-color: #000000; width: 200px; height: 200px;"></div> </body>
4)显示隐藏层
<body> <div style="background-color: red; width: 200px; height: 200px; float: left;" οnclick="hiddenDiv(this)" id="div1"></div> <!-- display:none; 隐藏层 不显示该位置 --> <div style="background-color: yellow; width: 200px; height: 200px; float: left; display: none;"></div> <div style="background-color: blue; width: 200px; height: 200px; float: left;"></div> <div style="clear: left"></div> <br><br> <div style="background-color: green; width: 200px; height: 200px; float: left"></div> <!-- 隐藏一个层 位置还在--> <div style="background-color: black; width: 200px; height: 200px; float: left; visibility: hidden;"></div> <div style="background-color: yellow; width: 200px; height: 200px; float: left"></div> <script type="text/javascript"> function hiddenDiv(sb){ sb.style.display = "none"; } </script> </body>
D.选择器
1.标签选择器
<title>标签选择器</title> <style type="text/css"> /*标签选择器*/ div{ font-size: 24px; color: #F00; } </style> </head>
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 之后,才是有效的
<title>伪类选择器</title> <style type="text/css"> /*未访问过的状态:link*/ a:LINK { font-size: 24px; color: blue; } /*访问过的状态:visited 鼠标点击并且松开*/ a:VISITED { font-size: 24px; color: red; text-decoration: underline; } /*hover:状态:鼠标经过的状态*/ a:HOVER { font-size: 24px; color: green; } /* 鼠标激活状态:active状态:鼠标按下(点击),并且不松开 */ a:ACTIVE { font-size: 24px; color: yellow; text-decoration: none; } </style> </head> <body> <a href="http://www.qq.com">腾讯</a> </body>
8.伪类练习
使用伪类选择器,实现鼠标经过表格的每行,行的背景颜色变为蓝色。除过表头
提示: 背景颜色: background-color
<title>伪类练习</title> <style type="text/css"> /*只让tbody范围内一整行变色*/ tbody tr:HOVER { background-color: blue; } </style> </head> <body> <table border="1px" width="500px" height="150px" align="center"> <caption>2017年期末考试成绩单</caption> <thead> <tr> <th>姓名</th> <th>班级</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>计算机1班</td> <td>80</td> </tr> <tr> <td>李四</td> <td>计算机1班</td> <td>90</td> </tr> <tr> <td>王五</td> <td>计算机1班</td> <td>85</td> </tr> </tbody> </table> </body>
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后台开发,只需要了解,会用皆可