一.Html基础标签
段落标签:
文本格式化标签:
div和span标签:
图像标签:
一般图片只设置宽或者只设置高,以免图片被压缩。
超链接标签:
可以设置target对目标窗口的弹出方式进行设置
如果href里面指定的是一个压缩文件,那么会下载文件
锚点连接:
表格标签:
table是表格标签,其中tr是每行,td是每一列,
表头可以使用th标签进行修饰,会被加粗和居中显示。
表格的属性:
合并单元格:
设置完了以后删除多余的单元格即可。
无序列表:
有序列表:
自定义列表:
Label标签:
二.Css样式表
选择器:
1.标签选择器:选择对应的标签进行修改。
2.类选择器: 选择class=" ", 使用 . 什么
3.id选择器: 使用#
4.通配符选择器:选择所有元素:*
5.后代选择器:会选择一个元素下的所有子元素:
6.子元素选择器:
只会选择子元素
7.并集选择器
8.伪类选择器
选择器权重:
字体设置:
font-family:设置字体
font-size:设置字体大小
font-weight:设置字体粗细,通常设置700为粗体,设置400为变细。
font-style:
文本颜色设置:color
文本对齐:text-align
文本装饰:text-decoration
行间距:line-height
会减去文字像素后平分分成三个部分,所以文字水平居中一般要设置行间距。
文本缩进:text-indent:2em ,文字开头缩进两个字符长度。
元素显示模式:
html元素一般分为行内元素和块元素。
块元素:
行内元素:
行内块元素:
元素之间可以转换:
转换成行内元素 设置display:inline
转换成块元素 设置display:block
转换成行内块元素 设置display:inline-block
这样行内元素就可以设置宽高。
背景设置
背景颜色 :background-color:
背景图片: background-image:url(图片路径)
一般设置背景时,默认是背景平铺的,可以通过
background-repeat:no-repeat设置不平铺,或者设置repeat-x,repeat-y设置沿着x轴或者y轴平铺。
背景图片的位置
可以通过background-position设置,
可以设置上下左右,例如:
图片在最中间先往右移动,然后往下移动。
位置的单位还可以通过精确单位确定:
混合使用:
背景图像固定:
背景图片的复合写法:
背景半透明:
Css的三大特性
层叠性:即相同样式设置出现时,会采用离代码近的样式使用。
继承性:即父元素拥有的样式,子元素也拥有。
优先性:权重越高的就会执行。
盒子模型
1.边框
边框设置时,会影响盒子的实际大小,所以在设置盒子的宽高时,要减去边框的大小才是原来盒子的大小。
例如:
所以在设置边框时,要注意边框大小带来的影响。
2.内边距
复合写法:
内边距也会影响盒子大小,解决方法和边框影响一样,删除对应宽高多出的像素。但是在盒子没有指定宽高的时候,padding的设置不会影响盒子的大小。
3.外边距
外边距让盒子居中:
行内元素和行内块元素水平居中:
text-align:center
外边距塌陷问题:
子元素的外边距大于父元素的外边距会覆盖父元素的外边距。
圆角边框
border-radius: px ,表示以px为半径的圆在边框的四个角,以这样显现出圆角的样子。
其实他是四个圆形的半径,分别是左上角,右上角,右下角,左下角。
盒子阴影
box-shadow:10px,10px,10px,10px,black;第一个参数是阴影在x轴的移动,第二个参数是阴影在y轴的移动,第三个参数是阴影的虚实程度,第四个参数是阴影的大小,最后一个是阴影的颜色。
浮动
浮动可以让元素水平排列一行。
清除浮动:
有时候父元素的高度并不确定,是随着内部的内容的多少来确定高度的,这个时候,如果内部的元素是浮动的,那么会导致父元素的高度为零,所以需要清除浮动。如果父盒子本身具有高度,那么就不需要清除浮动。
清除浮动的方法一:
额外标签法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*当某些特殊情况,父级元素无法确定高度有多少,例如很多页面都是有多少元素
就显示多高,而且子元素都是浮动显示的,但是一旦浮动显示就不占空间
此时父级元素的高度就会变为0,这个时候就需要取消浮动,就会影响父元素以外的元素*/
.box {
width: 900px;
background-color: pink;
margin: 10px auto;
border: 1px solid black;
}
.son {
float: left;
width: 120px;
height: 120px;
background-color: blue;
}
.son1 {
float: left;
width: 120px;
height: 120px;
background-color: orange;
}
.footer {
height: 120px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
<div class="son1"></div>
<!--额外标签法,就是在浮动标签的最后一个位置加一个块级元素标签,然后设置clear: both
就可以取消浮动所带来的影响-->
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
清除浮动的方法二:给父级元素添加overflow属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*当我们要取消浮动的时候,
对浮动元素的父级元素中添加overflow,
他的值有hidden,scroll,auto*/
.box {
overflow: auto;/*给父级元素添加overflow*/
width: 900px;
background-color: pink;
margin: 10px auto;
border: 1px solid black;
}
.son {
float: left;
width: 120px;
height: 120px;
background-color: blue;
}
.son1 {
float: left;
width: 120px;
height: 120px;
background-color: orange;
}
.footer {
height: 120px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
<div class="son1"></div>
</div>
<div class="footer"></div>
</body>
</html>
方法三,添加伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*在父级元素设置一个伪元素after ,就是创造一个虚拟行内标签(所以要转化为块级元素),
跟额外标签法类似,
只不过不用添加额外标签*/
.clearfix:after {
content: "";
display: block;/*将伪元素转化为块级元素*/
height: 0;
clear: both;
visibility: hidden;
}
.box {
width: 900px;
background-color: pink;
margin: 10px auto;
border: 1px solid black;
}
.son {
float: left;
width: 120px;
height: 120px;
background-color: blue;
}
.son1 {
float: left;
width: 120px;
height: 120px;
background-color: orange;
}
.footer {
height: 120px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="son"></div>
<div class="son1"></div>
</div>
<div class="footer"></div>
</body>
</html>
方法四,双伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*双伪元素比单个的after伪元素更强,他会在浮动元素的前后都生成一个伪元素
以达到闭合浮动的效果*/
.clearfix:before,.clearfix:after {
content: "";
display: table;/*将伪元素转化为表格*/
}
.clearfix:after {
clear: both; /*取消浮动*/
}
.clearfix {
*zoom: 1; /*为了适配ie 6和7*/
}
.box {
width: 900px;
background-color: pink;
margin: 10px auto;
border: 1px solid black;
}
.son {
float: left;
width: 120px;
height: 120px;
background-color: blue;
}
.son1 {
float: left;
width: 120px;
height: 120px;
background-color: orange;
}
.footer {
height: 120px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="son"></div>
<div class="son1"></div>
</div>
<div class="footer"></div>
</body>
</html>
定位
相对定位:
绝对定位:
元素具有绝对定位的属性后,如果父元素没有定位,那么元素会以浏览器为参照进行移动。
子绝父相:一个元素想要在父元素中任意的移动,那么子元素需要设置定位就设置为绝对定位,父元素就设置成相对定位,因为相对定位不脱标。
固定定位: