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

来源：互联网发布：内网穿透软件 linux 编辑：程序博客网时间：2024/05/29 18:30

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;"

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）层的属性

<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;"onclick="huan(this)"></div><div style="width: 200px; height:200px; background-color: yellow; position: absolute; left: 100px; top: 100px;"onclick="huan(this)"></div><div style="width: 200px; height:200px; background-color: blue; position: absolute; left: 150px; top: 150px;"onclick="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;" onclick="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后台开发，只需要了解，会用皆可

阅读全文

1 0