CSS常用样式
1.font-weight
作用:设置文字是否加粗显示
单词类型:normal、bold、bolder、lighter
数字类型:100-900直接的整百数字。400等价于normal,700等价于bold
<p style="font-weight: normal;">默认值</p>
<p style="font-weight: bold;">定义粗体字符</p>
<p style="font-weight: bolder;">定义更粗的字体</p>
<p style="font-weight: lighter;">定义更细的字体</p>
2.font-style
作用:设置文字是否斜体显示
属性值:normal、italic、oblique
<p style="font-style: normal;">正规的字体</p>
<p style="font-style: italic;">斜体文字</p>
<p style="font-style: oblique;">倾斜的文字</p>
3.line-height
作用:设置一行文字的行高
行高是文字占有的高度,并垂直居中
<p style="line-height: 40px;">行高</p>
4.font综合属性
<p style="font: 14px "宋体";">字号 字体</p>
<p style="font: 14px/28px "宋体";">字号/行高 字体样式</p>
<p style="font: bold italic 14px/28px '宋体';">加粗 斜体 字体大小/行高 字体样式</p>
5.text-align 水平对齐
作用:设置文本水平方向对齐
属性:left、center、right
<p style="width: 200px;
height: 100px;
background-color: aquamarine;
text-align: center;
">设置水平对齐方式</p>
6.text-decoration文本修饰属性
设置文本整体是否有线条的修饰效果
属性:none、overline、line-through、underline
<p style="text-decoration: none;">没有修饰</p>
<p style="text-decoration: overline;">上划线</p>
<p style="text-decoration: line-through;">中划线,删除线</p>
<p style="text-decoration: underline;">下划线</p>
7.text-indent文本缩进
作用:设置段落首行是否缩进
属性:px单位、em单位、百分比
盒模型
用来描述盒子位置、尺寸的属性,分别是width、height、padding、border、margin
1.width
作用:设置元素内容的区域宽度
2.height
作用:设置可以添加元素内容的区域高度
3.padding
作用:设置元素边框内部到宽高之间的距离
p{
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
4.border
作用:设置内边距外面的边界区域,作为盒子实体化的最外层
属性:分别设置线的宽度、线的形状、线的颜色
boder-style
定义边框样式
常用属性:none:无边框,solid:实线,dashed:虚线
boder-color
设置边框颜色
5.margin
作用:设置盒子与盒子之间的距离
p{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
盒模型属性
清除默认样式
大部分标签都有浏览器加载的默认样式,会对布局造成一些影响。为避免默认样式影响,一定要清楚默认样式
*{margin: 0;padding: 0;}
p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight: normal}
height应用
高度可以不设置,会根据内部内容高度自动撑开
如果设置了高度,后面同级元素过多,会溢出盒子区域
overflow属性
如果出现溢出现象,通过overflow进行溢出部分内容显示
overflow="visible" 默认值,显示溢出部分
overflow="hidden" 隐藏溢出部分,隐藏超过边框内容
overflow="scroll" 溢出部分出现滚动条,无论有没有溢出,水平和垂直都会出现滚动条
overflow="auto" 自动的,没有溢出正常显示,溢出就出现滚动条
居中
单行文本垂直居中: 让文字行高line-height等于盒子高度height
多行文本垂直居中: 让元素高度自适应设置元素内边距上下值相同‘
元素水平居中:子盒子宽度低于父盒子宽度,设置子盒子的margin值,水平方向的值设置auto
父子盒模型
子元素的宽度加在一起不能大于父元素的宽带
盒模型自动内减:不设置子元素的width,同时设置子元素其他属性,子元素的width会自动缩减
margin塌陷现象
同级元素塌陷:在垂直方向如果两个元素的外边距有相遇的,浏览器加载两个边距中值较大的那个
解决:两元素之间只设置一个方向的margin
父子元素塌陷:父元素和子元素设置了同方向的margin-top两属性之间相遇造成塌陷
能用padding属性就不用margin属性,水平间不存在margin塌陷现象
标准文档流
元素排版过程中,元素默认从左往右,从上往下,前面内容发生变化,后面的内容位置也会变化
HTML就是一种标准文档流文件
微观现象
空白折叠现象
文字类元素排在一行出现高低不齐,底边对齐效果
写满元素时,自动换行
元素等级、布局元素的分类
1.标准流中,元素区分等级的,习惯将元素划分为几种常见的加载级别:块级元素、行内元素、行内块元素
块级元素:大部分容器级标签都是块级元素 div、h1
2.块级元素可以设置宽高,在浏览器中正常加载本身属性为display:block;
独占一行,不能和其他标签并排,可以直接控制宽度、高度等其他相关css属性
在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下,块级元素的高度是它本身内容的高度
3.行内元素:大部分文本级标签 span标签、a、b
行内元素不能正常加载宽高,本身属性为display:inline;
可以和其他行内块元素并排一行,不可以直接控制宽度、高度等其他相关css属性
无论设置宽高,都只被内容撑开,不能嵌套块级元素
4.行内块元素也叫内联块状元素:img标签、input标签
可以设置宽度和高度,本身属性为display:inline-block;
可以与其他并排一行显示
如果不设置宽高,以原始尺寸加载,或被内容撑开
具有标准流的微观性质
显示模式display
可以改变标签的显示模式
根据属性值的不同,可以加载对应元素等级的特点
display: block 元素以块级元素模式加载,具备块级特点
display: inline 元素以行内元素模式加载,具备行内特点
display: inline-block 元素以行内块元素加载,具备行内块特点
display: none 标签及内部内容直接隐藏,让出原有标准流位置
脱离标准流
标签元素脱离标准流的方法包括:浮动,绝对定位、固定定位
浮动float
作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示
浮动的性质
浮动的元素脱离标准流,具备行块二象性,不会有空白折叠现象
浮动元素依次贴边
浮动的属性值:left、right
父元素宽度足够,子元素会依次贴边
float: left
float: right
浮动元素没有margin塌陷
margin塌陷现象出现在标准流中,浮动元素已经脱离标准流,不再具有margin塌陷现象
浮动的元素让出标准流位置
元素浮动之后,脱离了标准流,会将原来占有的标准流位置让给后面的一个同级元素
字围现象
同级元素前面元素浮动,后面元素不浮动,在不浮动的元素中设置文字,文字内容不会被覆盖,会围绕浮动元素进行加载
清除浮动
给标准流的父元素添加一个高度height,如果子元素高度发生变化,父元素不会自适应
给标准流父元素添加clear属性,父元素不受浮动影响
clear: left 清除前面左浮动带来的影响
clear: right 清除前面右浮动带来的影响
clear: both 清除前面所有浮动带来的影响
伪类
:after:表示选中的是某个标签内部的最后位置
content必须添加,内容允许为空
.clearfix:after{
content: "1"; 添加一个文字内容
display: block; 将文字转换为块级元素
height: 0; 高度设置0,避免影响父盒子高度
clear: both; 清除浮动
visibility: hidden; 将元素占位隐藏
}
溢出隐藏
设置overflow: hidden,将超过高度的部分直接隐藏
高度自适应原因:一个元素没有设置高度,同时设置了溢出隐藏,浏览器在加载盒子尺寸,无论子元素是标准还是浮动,都会将最高高度作为子高度加载
浮动影响后面的元素:父元素有了高度,可以管理内部所有浮动元素,不会延申到后面标签中影响贴边
CSS伪类选择器
不需要给标签添加任何属性,都是语法提前规定好的,也不一定立即加载到浏览器上
a标签的伪类
用户触发对应的行为,就可以加载对应的样式
a:link{color:gray;} 访问前状态
a:visited{color: cyan;} 访问后状态
a:hover{color: red;} 鼠标悬浮经过状态
a:active{color: yellow;} 鼠标点击状态
背景属性
background-color
在盒子区域添加背景颜色的修饰
background-image
给盒子添加图片的背景修饰
background-image: url(image/1.jpg);
background-repeat
背景重复,配合background-image一起使用
background-repeat: repeat 重复,默认属性
background-repeat: no-repeat 不重复,只加载一次
background-repeat: repeat-x 水平重复,垂直方向不重复
background-repeat: repeat-y 垂直重复,水平方向不重复
background-position
主要用于设置不重复的图片在背景区域加载开始位置
水平方向可选单词:left、center、right
垂直方向可选单词:top、center、borrom
background-position: center center 先水平再垂直
像素定位:正数表示向右向下移动,负数表示向左向上移动
background-position:100px; 100px; 以左上角为坐标开始移动
background-attachment
背景附着:设置背景图片是否随着页面或盒子的滚动而滚动
background-attachment: scroll 滚动的表示背景与盒子相对位置不变
background-attachment: fixed 固定的,页面滚动背景图片不变
综合写法
background: 图片地址 背景重复 背景定位 背景附着
background: url(image/i.jpg) no-repeat center top fixed #fff; 位置可以互换
文字隐藏方法
将字号设置为0,IE7以下兼容有问题
可以设置text-index,属性值为负的很大的值,文字会走出盒子外部,再设置溢出隐藏隐藏文字
text-index需要转化为块级元素才能设置缩进
CSS精灵
css精灵是一种处理网页背景图像的方式
将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片
利用背景定位技术,将精灵图的每个小图片加载到对应标签
背景半透明
css3支持背景半透明的写法,颜色值增加了一种rgba模式
0-1之间,0表示完全透明,1表示完全不透明
background-color: rgba(255,0,0,0.4)
背景缩放background-size
通过background-size设置背景图片的尺寸,就像我们设置的尺寸一样,在移动web开发中做屏幕适配非常广泛
background-size: 100px; 调整宽度,长度等比缩放
background-size: cover; 把背景图拓展至足够大,使背景图覆盖背景区域,溢出部分会被隐藏
background-size: contain; 把图片扩展至最大尺寸,保证图片完全显示在背景区域
定位
定位属性position
设置定位的元素,它需要根据某个参考元素发生位置偏移
position: relative; 相对定位
position: absolute; 绝对定位
position: fixed; 固定定位
偏移量属性
定位元素药发生位置变化的移动,必须搭配偏移量属性进行设置
相对定位
相对定位的元素不脱离标准流,不会让出原来占有的位置
相对定位的参考元素是自身,left的正值等于right的负值
由于相对定位元素比较稳定,不会随意让出位置,可以作为绝对定位的参考元素
position:relative; 设置相对定位,配合top,right使用
绝对定位
元素脱离标准流,会让出标准流的位置,可以设置宽高,也可以随时定义位置,不设置宽高只能被内容撑开
在绝对定位中,参考点不同,left正值不再等价于right的负值
position:absolute; 设置绝对定位,配合top,right使用
祖先级为参考元素
如果祖先级中有定位的元素,就不会去参考
参考元素:参考的是祖先元素中有任意定位的,在HTML结构中距离目标最近的祖先
如果绝对定位参考元素是某个祖先级,会忽视参考元素的padding区域
固定定位
参考元素:浏览器窗口
由于浏览器窗口的四个顶点位置不会发生变化,会导致固定定位的元素会始终显示在定位位置
position: fixed
定位应用
压盖效果
由于绝对定位的元素脱标,压盖效果更好,实际工作中,常见的是绝对定位制作的压盖
居中
在需要居中的方向使用偏移量属性比如:left:50%
在给绝对定位的子盒子设置一个同方向的margin,属性为负的自身宽度的一半
压盖
如果想要更改定位的元素压盖顺序,可以设置一个z-index属性
属性值大的会压盖属性值小的,设置z-index属性会压盖没有设置的
如果属性值相同,后写的压盖先写的
z-index只能给定位的元素设置才能生效
如果父级设置了z-index,那么子级也会跟随父级一起设置
轮播图实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.lunbo{
position: relative;
width: 500px;
height: 750px;
border: 1px solid chartreuse;
margin: 0 auto;
}
.lunbo .pic li{
position: absolute;
display: none;
top: 0;
left: 0;
}
.lunbo .pic li img{
width: 500px;
}
.lunbo .pic .current{
display: block;
}
.lunbo .btn a{
text-decoration: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.3);
font: 20px/40px "宋体";
text-align: center;
color: #000;
font-weight: bold;
}
.lunbo .btn .leftbtn{
left: 0;
border-radius: 0 50% 50% 0;
}
.lunbo .btn .rightbtn{
right: 0;
border-radius: 50% 0 0 50%;
}
.lunbo .btn a:hover{
background-color: rgba(0, 0, 0, 0.6);
}
.lunbo .sub{
position: absolute;
left: 100px;
bottom: 50px;
width: 300px;
}
.lunbo .sub li{
float: left;
width: 20px;
height: 20px;
margin-right: 20px;
background-color: rgba(0, 0, 0, 0.3);
font: 12px/20px "微软雅黑";
text-align: center;
border-radius:50%;
cursor: pointer; /*光标变成小手*/
}
.lunbo .sub .current{
border: 2px solid snow;
display: block;
}
.lunbo .sub li:hover{
border: 2px solid snow;
}
</style>
</head>
<body>
<div class="lunbo">
<ul class="pic" id="pic">
<li class="current"><img src="lunbo/1.jpg" alt=""></li>
<li><img src="lunbo/2.jpg" alt=""></li>
<li><img src="lunbo/3.jpg" alt=""></li>
<li><img src="lunbo/4.jpg" alt=""></li>
<li><img src="lunbo/5.jpg" alt=""></li>
<li><img src="lunbo/6.jpg" alt=""></li>
</ul>
<div class="btn">
<a href="javascript:;" class="leftbtn"><</a>
<a href="javascript:;" class="rightbtn">></a>
</div>
<ol class="sub" id="sub">
<li onclick="show(0)">1</li>
<li onclick="show(1)">2</li>
<li onclick="show(2)">3</li>
<li onclick="show(3)">4</li>
<li onclick="show(4)">5</li>
<li onclick="show(5)">6</li>
</ol>
</div>
<script>
var lis=document.getElementById('sub').getElementsByTagName('li')
var imgs=document.getElementById('pic').getElementsByTagName('li')
function show(num){
for(var i=0;i<imgs.length;i++){
if(i==num){
imgs[num].className="current"
imgs[num].style.display="block"
}else{
imgs[i].className=""
imgs[i].style.display=""
}
}
}
</script>
</body>
</html>