CSS
CSS:层叠样式表用来定义网页的显示效果(解决html代码对样式定义的重复)
将网页内容和显示样式进行分离,提高了显示功能
目录
CSS和html的四种结合方式
1.每个html标签上都有一个style属性,各属性之间用分号隔开
<div style="background-color:red;color:green;">这是演示语句/*这句话是body部分*/</div>
2.使用html的<style>标签,写在head里面
<head>
<style type="text/css">
div{<!-- 对body当中的所有div中的数据设置样式,就是一个选择器 -->
background-color:blue;<!-- 格式 属性名:属性值; -->
color:red;
}
</style>
</head>
3.在style标签里使用语句 @import url(css文件的路径)
<style type="text/css">
@import url(div.css);
</style>
<!--
div.css文件中可以写
div{
background-color:green;
color:red;
}
-->
4.使用头标签link,引入外部css文件
<link rel="stylesheet" type="text/css" href="css文件路径" />
第三种结合方式,在某些浏览器不起作用,我们一般采用第四种方式
结合方式之间的优先级:由上到下,由内到外,优先级由低到高(即后加载优先级高)
CSS的选择器
1.三种基本选择器
(1)使用标签名作为选择器的名称
div{
background-color:blue;
color:red;
}
这种情况下,要写在head里面,所有div标签属性都一致
(2)class选择器(每个标签都有一个class属性)
<head>
<!-- 选择器 -->
div.haha{
backgrond-color:yellow;
}
.haha{<!-- 作用于所有class为haha的标签 -->
backgrond-color:yellow;
}
<head>
<body>
<div class="haha">演示1!</div>
<p class="haha">演示2!</p>
<body>
3)id选择器(每个标签都有一个属性id)
<head>
div#hehe{
background-color:green;
}
#hehe{}<!-- 作用于所有id为hehe的标签 -->
<head>
<body>
<div id="hehe">演示!</div>
<body>
三个选择器的优先级:style > id选择器 > class选择器 > 标签选择器
2.三种扩展选择器
(1)关联选择器(单独改变嵌套标签的样式)
<head>
div p{
background-color:green;
}
<head>
<body>
<div><p>演示!</p></div>
<body>
(2)组合选择器(不同标签设置相同的样式)
<head>
div,p{
background-color:orenge;
}
<head>
<body>
<div>演示1</div>
<p>演示2</p>
<body>
(3)伪元素选择器(css里面提供了定义好的样式,可以直接使用,详见CSS文档)
例如:超链接的状态(原始状态link,鼠标悬停状态hover,点击状态active,点击后状态visted)
<head>
<style type="text/css">
a:link{
background-color:red;
}
a:hover{
background-color:green;
}
a:active{
background-color:blue;
}
a:visted{
background-color:orenge;
}
</style>
<a href="超链接地址">超链接</a>
<head>
CSS的盒子模型
在进行布局前需要把数据封装到一块一块的区域内
1.边框:文本内容的边框,border(可以统一设置,也可以分别设置border-top,border-bottom,border-left,boder-right)
<head>
div{
width:200px;
height:150px;
border:2px solid blue;<!-- 粗细 样式 颜色 -->
}
<head>
2.内边距:文本距边框的距离,padding(padding-top,padding-bottom,padding-left,padding-right)
#div32{
border:2px solid blue;
padding:20px;
}
3.外边距:边框距外边框的距离,margin(margin-top,margin-bottom,margin-left,margin-right)
#div33{
margin:30px;
}
CSS的布局
1.布局的漂浮,属性float(属性值:left,right)
<!-- div都是盒子封装过的数据 -->
#div34{
float:left;<!-- 文本(div35)流向对象的右边 -->
}
2.布局的定位,属性position(属性值:static,absolute,relative)
#div36{
position:absolute;<!-- 将对象(div36)从文本流中脱出,div36叠在div37上面 -->
top:300px;
left:300px;
right:300px;
bottom:400px;<!-- 可以通过这些进行div36的定位 -->
}
#div36{
position:relative;<!-- 不会将对象从文本流中脱出(区别) -->
top:300px;
left:300px;
right:300px;
bottom:400px;<!-- 可以通过这些进行div36的定位 -->
}