一、css四种基本操作
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:red;
color:green;
}
</style>
3. 在sytle标签里面使用语句
@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文件的路径">
优先级(一般情况)
由上到下,由外到内,优先级由低到高
后加载的优先级高
格式 选择器名称{属性名:属性值：属性名：属性值：}
二、css的基本选择器(三种)
(1) 标签选择器
使用标签名作为选择的名称
div{
background-color:red;
color:white;
}
(2) class选择器
每个html标签都有一个属性class
<div class="hahah">|aaaaa</div>
.hahah{
background-color:red;
}
(3) id选择器
每个html标签都有一个属性id
<div class="hahah">|aaaaa</div>
#hahah{
background-color:red;
}
*style>优先级 id选择器>class选择器>标签选择器
三、css的扩展选择器
1.关联选择器
<div><p>aaaaa</p></div>
设置div标签里面p标签的样式,嵌套标签里面的样式
div p{
background-color:red
}
2.组合选择器
<div>11111</div>
<p>45454</p>
把div和p标签设置成相同的样式,把不同发标签设置相同的样式
div,p{
background-color:red;
}
3.伪元素选择器
css里面提供一些定义好的样式,可以拿过来使用
四、css的盒子模型
1.边框
border: 2px solid blue;
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
2.内边距
padding:20
使用padiing统一配置
也可以分别设置
上下左右四个内边距
3.外边距
margin:20px;
使用margin统一配置
也可以分别设置
上下左右四个内边距
五、css的布局的漂浮
float:
属性值
left:文本流行对象的右边
right:文本流行对象的左边
六、css的布局的定位
position:
属性值
absolute:
将对象从文档流中拖出
可以是top,bottom等属性进行定位
relative：
不会把对象从文档流中拖出
可以是top,bottom等属性进行定位
