前端学习之初识CSS
一、CSS背景
1、背景的基本属性
背景的基本属性有:
background-color:背景颜色;
background-image:背景图片;
background-repeat:背景图片的展示方式;
background-attachment:设置背景图片是滚动的还是固定的;
background-position:背景图片位置。
background-color
设置背景颜色值,默认是transparent(透明色)。
颜色的设置方式也是可以通过三种方法:颜色名称、rgb、#十六进制表示法。
背景颜色的作用范围是border-box(即内容区域+填充区域+边框区域)。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
background-color: #00FFFF;
border: 20px dotted #FF4400;
width: 200px;
height: 100px;
}
</style>
<body>
<div>
这是背景颜色的演示
</div>
</body>
</html>
结果:
可以明显看出,background-color的作用区域包括到了border-box。
这个作用区域也可以通过background-clip进行修改,例如:
div{
background-color: #00FFFF;
border: 20px dotted #FF4400;
width: 200px;
height: 100px;
background-clip: content-box;
}
这样作用区域就变成了content-box(内容区域):
但是使用background-clip是有兼容性的要求,在IE8及IE8以下的浏览器,是没有办法生效的。
background-image
在一个页面中,一般有两种的方法来添加图片:
1.添加图片元素;
2.设置background-image属性。
当图片属于网页内容时,就使用img。当图片为了美化页面时,就使用background-image。
background-image的使用:
/*默认值为none*/
background-image: url(图片路径);
注:背景颜色和背景图片是可以同时进行设置的,这里涉及到了层级的问题,边框样式是在最顶部的,背景图片次之,而背景颜色是在最底部的。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
background-color: #00FFFF;
width: 200px;
height: 100px;
background-image: url(../img/csdn.png);
}
</style>
<body>
<div>
这是背景图片的演示
</div>
</body>
</html>
默认是铺满:
这里图片会将整个容器铺满,这里就涉及到了铺放格式的问题。
background-repeat
铺放格式可以通过设置background-repeat属性来改变,background-repeat的值有:
repeat:水平和垂直方向上的重复(默认值)。
repeat-x:水平方向上重复。
repeat-y:垂直方向上重复。
no-repeat:不进行重复。
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.repeat1{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid black;
background-image: url(../img/csdn.png);
background-repeat: repeat-x;
}
.repeat2{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid red;
background-image: url(../img/csdn.png);
background-repeat: repeat-y;
}
.repeat3{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid green;
background-image: url(../img/csdn.png);
background-repeat: no-repeat;
}
</style>
<body>
<div class="repeat1">
这是背景图片的演示
</div>
<div class="repeat2">
这是背景图片的演示
</div>
<div class="repeat3">
这是背景图片的演示
</div>
</body>
</html>
结果:
背景图片还可以设置显示方式background-attachment,设置背景图片是否滚动,值有:
scroll:随着浏览器滚动条一起滚动(默认值)。
fixed:背景图片固定不动。
这里就不作演示了。
background-position
语法:
background-position: X Y;
/*X:水平方向上的距离*/
/*Y:垂直方向上的距离*/
XY可以是具体的数值、或者是百分比
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.position1{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid black;
background-image: url(../img/csdn.png);
background-position: 50px 10px;
background-repeat: no-repeat;
}
</style>
<body>
<div class="position1">
这是背景图片的演示
</div>
</body>
</html>
结果:
background-position还可以通过设置关键词来改变位置,水平方向上的值有:left、center、right,竖直方向上的值有:top、center、bottom。语法:
background-position:left top;/*或top left等等*/
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.position1{
background-color: #00FFFF;
width: 400px;
height: 100px;
border: 2px solid black;
background-image: url(../img/csdn.png);
background-position: left bottom;
background-repeat: no-repeat;
}
</style>
<body>
<div class="position1">
这是背景图片的演示
</div>
</body>
</html>
如果只设置了一个参数,如:
background-position:top;
则剩下那个参数默认是center,结果:
同时background-position还可以设置百分比的形式:
background-position:50% 30%;
百分比的图示:
background(简写)
background可以对上述属性进行简写:
background:[color][image][repeat][attachment][position];
说明:
1.几种属性用空格进行分隔;
2.几种属性不分先后顺序;
3.可以只写需要的值。
二、CSS雪碧图
1.概念
CSS雪碧,即CSS Sprite,也有人叫CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分。
如:
实际上它是由一张张的小图片合成的一张图片:
2.为什么需要雪碧图
浏览器加载单张图片的速度取决于图片的大小,图片的大小和加载的速度成正比,在图片大小一致的情况下,图片张数越少载入速度越快,因此我们常对背景图片进行优化,常见的优化方法有:
1.减小文件体积大小。
2.减少图片资源请求数(合并HTTP请求)。
而使用雪碧图的目的就是减少页面图片资源请求数,从而来提高页面的加载速度。
3.雪碧图使用场景(组成)
雪碧图一般是由小尺寸的、静态的、不需要二次修改的图标组成的。
4.雪碧图相关的CSS属性
与雪碧图相关的CSS有:
background-image、background-position。
5.雪碧图生成的方法
雪碧图主要的获取方法有三种:
1.使用PS进行图片合成。
2.在线雪碧图生成工具:CSS Sprites Generator。
3.推荐的制作工具:CSS Sprites。
第三个工具生成雪碧图之后会自动生成CSS代码,可以直接复制到代码中使用,这里就不作演示了。
三、CSS布局
1.网页布局
网页布局就是网页元素的排列组合。简单来说,我们需要采用CSS中的各种特性,来进行网页元素的排列。
2.常用的布局
(1)经典行布局
图示:
行布局实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div{
background-color: #00FFFF;
height: 400px;
text-align: center;
/*自适应宽度,最小宽度为1000像素*/
/* width: 100%; */
/* min-width: 1000px; */
/* 固定宽度 */
width: 1000px;
margin: 0 auto;
/* 让整个div居中 */
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;/*设置为内容高度的一半*/
margin-left: -500px;/*设置为内容宽度的一半*/
}
</style>
<body>
<div>
行布局的演示
</div>
</body>
</html>
结果(容器在整个屏幕中间):
(2)两列布局
图示:
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
background-color: #00FFFF;
height: 400px;
text-align: center;
width: 1000px;
margin: 0 auto;
}
.left{
height: 100%;
float: left;
width: 300px;
background-color: #FF4400;
}
.right{
height: 100%;
width: 700px;
float: left;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
</div>
</body>
</html>
结果:
上述方法是通过浮动实现的,我们也可以通过定位来实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
background-color: #00FFFF;
width: 100%;
height: 500px;
min-width: 1000px;
text-align: center;
position: relative;
}
.left{
height: 100%;
position: absolute;
top: 0;
right: 0;
width: 700px;
background-color: #FF4400;
}
.right{
height: 100%;
margin-right: 700px;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
</div>
</body>
</html>
结果:
三列及多列布局也是类似的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
background-color: #00FFFF;
width: 100%;
height: 500px;
min-width: 1000px;
text-align: center;
position: relative;
}
.left{
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 500px;
background-color: #FF4400;
}
.middle{
height: 100%;
background-color: #556677;
margin: 0 500px 0 500px;
}
.right{
height: 100%;
width: 500px;
background-color: #FFC0CB;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
<div class="middle">
中间
</div>
</div>
</body>
</html>
结果:
四、兼容性
1.定义
浏览器兼容性是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不一致的情况。
2.常见的浏览器
五大主流浏览器:
IE,内核:Trident;
Chrome,内核:以前是Webkit内核,现在是Blink内核;
FireFox,内核:Gecko;
Safari,内核:Webkit;
Opera,内核:最早是Presto,后来是Blink。
之所以成为主流,其实是因为他们都有属于自己的内核。造成浏览器兼容问题的根本原因,就是浏览器的内核不同导致的。
3.解决兼容性问题的方法
1.浏览器CSS样式初始化
初始化:
*{
margin: 0;
padding: 0;
}
2.使用CSS Hack解决兼容性问题
CSS Hack就是针对不同的浏览器或者不同版本的浏览器书写特定的CSS。
原理:
1.不同的浏览器对CSS的支持和解析的效果不一致;
2.不同的浏览器或者版本具有特殊的识别符;
3.CSS中有优先级关系。
IE中不同版本的特殊识别符:
IE6及以下:_;
IE7及以下:*;
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: green;
*color: #00FFFF;
_color: #f40;
}
</style>
</head>
<body>
<p>IE6及以下是红色</p>
<p>IE7及以下是青色</p>
<p>其他是绿色</p>
</body>
</html>
IE11是绿色:
IE7是青色:
IE6是红色:
其他版本都可以识别不带识别符的CSS样式。
4.IE常见问题
IE6中浮动产生双边距问题:
解决方式:设置_display:inline;
_display:inline;
IE6中不支持png24的透明图片:
解决方式:设置过滤器:
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="绝对地址")
IE6-IE8不支持RGBA颜色设置:
解决方式:设置过滤器:
background: rgba(0,0,0,0.2);/*最后一个是透明度*/
_filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#33000000',EndColorStr='#33000000');
/*单引号内的是色值,色值查询地址:https://www.html.cn/demo/hex_color*/
5.关于兼容性的建议
1.编写符合规范的代码;
2.提前确认需求;
3.尽可能少地适用CSS Hack;
4.编码后做好兼容性的自测。
这一部分到这里就结束啦,有不足的地方还望大家指正啦,蟹蟹!