一、CSS简介:
英文名Cascading Style Sheets——层叠样式表,提供了一系列格式设置的规则,和HTML相结合用来设置网页的格式和美化效果,是丰富和补充HTML不足的一种规则。使用CSS可以更加灵活的控制页面样式,同时将页面内容和显示样式进行分离,提高显示功能。
二、HTML和CSS的结合方式:四种
A:在每个html的标签上都有一个属性style,通过在style属性增加样式。
例文字添加颜色:<div style="background-color:red;color:grad">今天是星期三,天气很好,我去图书馆</div>
B:在<head>中添加<style>标签,对div添加样式
<style type="text/css">
div{
background-color:red;
color:grad;
}
</style>
C:在<head>中添加<style>标签,导入外部css文件,语句@import url(css文件路径)
<style type="text/css">
@import url(css和html的结合方式.css);
</style>
D:在<head>中添加<link>标签,链接外部css文件
<link rel="stylesheet" type="text/css" href="css和html的结合方式.css"/>
说明:前两种方式是通过在html中添加css规则语言来改变网页样式,后两种是把css文件单独编辑完毕后,被引用,实现了样式和内容的分离。但是第三种方式在某些浏览器失效。
三、CSS选择器:选择要对哪个标签进行样式变化
(1)标签选择器;最基本的样式修改
<style type="text/css">
div{
background-color:blue;
color:red;
}
p{
background-color:red;
color:black;
}
</style>
(2)class选择器:在html的标签里添加class属性,对class命名,多个标签的class可以重名,可以单独修改每一个html标签样式,也可以共同修改。
<style type="text/css">
//单个标签更改样式,格式:标签名.class名{css代码}
div.1{
background-color:gray;
}
//定义同一个名称,多个标签更改成同一样式
.1{
background-color:gray;
}
</style>
<div class="1">今天这么倒霉</div>
<p class="1">今天不宜出门</p>
(3)id选择器:每个html标签里都有一个属性id
<style type="text/css">
div#1{
background-color:gray;
}
#1{
background-color:gray;
}
</style>
<div id="1">今天这么倒霉</div>
<p id="1">今天不宜出门</p>
说明:ID选择器和class选择器的区别就在于,一个使用“#”,一个“.” 。三种选择器的优先级:ID 》 class 》 标签
(4)扩展选择器:css提供的一些可以改变样式的规则,扩展选择器指的就是css不断扩展出来的可以改变样式的方式,因为选择器本质就是通过css选择改变哪个html标签的样式,所以各种选择器可以相互替代,同一种效果可以用不同的选择器实现。
A:关联选择器:主要针对多层标签嵌套的处理
<style type="text/css">
div p{
background-color:green;
}
</style>
<div><p>css扩展选择器颜色变化</p></div>
<p>对比值</p>
B:组合选择器:主要针对多个标签设置成相同的样式,不须添加class和ID属性
<styletype="text/css">
div,p{
background-color:green;
}
</style>
<div>css扩展选择器颜色变化</div>
<p>对比值</p>
C:伪类选择器:是css提供定义好的样式,按照规则直接使用
超链接的样式:
<style type="text/css">
/*原始状态*/
a:link{
background-color:red;
}
/*悬停状态*/
a:hover{
background-color:green;
}
/*点击状态*/
a:active{
background-color:blue;
}
/*点击之后变化*/
a:visited{
background-color:gray;
}
</style>
<a href="www.baidu.com">这是一个神奇的超链接</a>
四、盒子模型
通过div+css实现网页布局,将数据封装到一个个的div区域中,通过css的规则改变div的位置和样式,达到网页美化的效果。
(1)边框:border
div边框分为上下左右:border-top、 border-bottom、 border-left、 border-right
在上下左右边框都有颜色color、类型style、宽度width
(2)内边距:padding
是指文本内容到div边框的距离,内边距也分为山下左右
(3)外边距:margin
是指div边框到整个页面操作区边界的距离,外边距也分为山下左右
说明:边框、内边距、外边距都可以通过各自的名称对上下左右共同设置同一数据,也可以单独对某一边设置。
<html>
<head>
<title>css盒子模型</title>
<styletype="text/css">
<!--边框统一设置 -->
div{
width:200px;
height:100px;
border:2pxsolid blue;
}
<!--边框分别设置 -->
#2{
border-right:5pxdashed red;
}
<!--内边距统一设置 -->
div{
padding:20px;
}
<!--内边距分别设置 -->
#3{
padding-left=30px;
}
<!--外边距统一设置 -->
div{
margin:20px;
}
<!--外边距分别设置 -->
#3{
margin-left:30px;
}
</style>
</head
<body>
<divid="1">百度</div>
<divid="2">CSDN</div>
<divid="3">新浪</div>
</body>
</html>
五、CSS布局和定位
float布局: 对象如何浮动,默认none不漂浮。部分浏览器不支持
属性值:left : 文本流向对象的右边(后边的div跑到前一个右边)
right :文本流向对象的左边(后边的div跑到前一个左边)
position定位:
属性值: absolute:将对象从文档流中拖出,使用left、right 、top、buttom等属性进行绝对定位。重叠部分会被覆盖
Relative:不会将对象从文档流中拖出,对象不可层叠,使用top、buttom等属性进行定位。
float和position的区别:float只能改变div的相对位置,要么排列在右边要么左边,而position可以通过绝对定位设置在任意位置。float的一般应用场景图片和文字的排列,如网易博客的未打开状态预览效果,360浏览器新标签页的标签排列,position的absolute属性使对象被拖出,和底层分离,在网页漂浮的广告应用。