1、css的简介
* css: 层叠样式表
** 层叠:一层一层的
** 样式表:
很多的属性和属性值
* 是页面显示效果更加好
* CSS将网页内容和显示样式进行分离,提高了显示功能。
2、css和html的结合方式(四种结合方式)
(1)在每个html标签上面都有一个属性 style,把css和html结合在一起
<div style="background-color:red;color:green;">
(2)使用html的一个标签实现 <style>标签,写在head里面
<style type="text/css">
css代码;
</style>
<style type="text/css">
div {
background-color:blue;
color: red;
}
</style>
(3)在style标签里面 使用语句(在某些浏览器下不起作用)
@import url(css文件的路径);
第一步,创建一个css文件
<style type="text/css">
@import url(div.css);
</style>
(4)使用头标签 link,引入外部css文件(经常使用)
- 第一步 ,创建一个css文件
<link rel="stylesheet" type="text/css" href="css文件的路径" />
(5)优先级(一般情况)
由上到下,由外到内。优先级由低到高。
*** 后加载的优先级高
3、css的基本选择器(三种)
** 要对哪个标签里面的数据进行操作
格式 :选择器名称 { 属性名:属性值;属性名:属性值;…….}
(1)标签选择器
* 使用标签名作为选择器的名称
div {
background-color:gray;
color:white;
}
(2)class选择器
* 每个html标签都有一个属性 class
<div class="haha">aaaaaaa</div>
.haha {
background-color: orange;
}
(3)id选择器
* 每个html标签上面有一个属性 id
<div id="hehe">bbbbb</div>
#hehe {
background-color: #333300;
}
*** 优先级
style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
(1)关联选择器
<div><p>wwwwwwww</p></div>
设置div标签里面p标签的样式,嵌套标签里面的样式
div p {
background-color: green;
}
(2)组合选择器
<div>1111</div>
<p>22222</p>
* 把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
div,p {
background-color: orange;
}
(3)伪元素选择器(了解,浏览器的兼容性比较差)
* css里面提供了一些定义好的样式,可以拿过来使用
* 比如超链接
** 超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
** 记忆的方法
lv ha
5、css的盒子模型
** 在进行布局前需要把数据封装到一块一块的区域内(div)
(1)边框:有三个参数(粗细,样式,颜色)
border: 2px solid blue;
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
(2)内边距:一个参数
padding:20px;
padding:统一设置
上 padding-top
下 padding-bottom
左 padding-left
右 padding-right
(3)外边距:一个参数
margin: 20px;
margin:统一设置
上 margin-top
下 margin-bottom
左 margin-left
右 margin-right
6、css的布局的漂浮(了解)
float:
** 属性值
left : 文本流向对象的右边
right : 文本流向对象的左边
7、css的布局的定位(了解)
position:
** 属性值
- absolute :
*** 将对象从文档流中拖出(在空中飘着)
*** 可以是top、bottom等属性进行定位
- relative :
*** 不会把对象从文档流中拖出
*** 可以使用top、bottom等属性进行定位
8、案例
<html>
<head>
<title>图文混排</title>
<style type="text/css">
/*id选择器*/
#div0 {
border:2px dashed orange;
width:350;
height:300;
}
#div1 {
float:left;
}
#div2 {
color:green;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1"><img src="images/aa.jpg" style="width:250;height:200"></div>
<div id="div2">
根据检查反馈意见完成毕业设计(论文)的修改和定稿学生自行论文查重(学校免费给每个学生提供两次论文查重机会)
填写《 2020 届毕业设计(论文)答辩安排表》报教务处毕业设计(论文)评审:
填写《毕业设计(论文)指导教师成绩评定表》、
《毕业设计(论文)评阅教师成绩评定表》
</div>
</div>
</body>
</html>