1 CSS的简介
css:层叠样式表
层叠:一层一层的
样式表:很多的属性和属性值
css将网页内容和显示样式进行分离,提高了显示功能
2 css和html的结合方式(四中结合方式)
1 在每个html标签上面都有一个属性style,把css与html结合在一起
例:<div style="background-color:read;color:green"></div>
2 使用html的一个标签实现<style>标签,写在head里面
例:<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文件的路径"/>
第三种结合方式,缺点:在某些浏览器下不起作用,一般使用第四种方式
优先级:由上到下,由内到外,优先级由低到高,一般情况下,后加载的优先级较高
格式:
选择器名称{属性:属性值;属性:属性值;;...}
3 css的选择器
要对那个标签里面的数据进行操作
(1)标签选择器
使用标签名作为选择器名称
(2) class选择器
每个html标签都有一个属性 class
<div class="名称"></div>
div.名称{}
(3) 每个html标签上面都有一个属性id
<div id="名称"></div>
div#名称{}
选择器的优先级
style>id选择器>class选择器>标签选择器
4 css的扩展选择器
(1)关联选择器
例:<div><p>wwwww</p></div> 对p标签的内容进行设置样式
div p{ }
(2) 组合选择器
例:<div>11111</div> <p>222222</p> 把div与p标签设置成相同的样式
div,p{}
(3)伪元素选择器
css提供了一些定义好的样式,可以拿过来使用
比如超链接的状态 原始状态,鼠标悬停状态 点击,点击之后
:lingk :hover :active :visted
a:lingk{ } a:hover{} a:active{} a:visted{}
5 css的盒子模型
(1) 边框
border 2px(粗细) solid(样式)颜色
border :统一设置
分别设置:border-top border-bottom border-right border-left
(2)内边距
padding:20px;
使用padding统一设置
也可以分别设置上下左右四个内边距
(3)外边距
margin:20px
可以使用margin统一设置
也可以分别设置上下左右四个外边距
6 css的布局的漂浮
float: 属性值 right :文本流向对象的右边
left:文本流向对象的左边
7 css布局的定位
position 属性值
absolute:将对象从文档流中拖出,之后可以设置left,right,top,bottom
relative:不会把对象从文档流中拖出,之后可以设置left,right,top,bottom
8 内容总结
1 css和html的四种结合方式
2 css的基本选择器
标签选择器 使用标签名
class选择器 .名称
id选择器 #名称
优先级: style>id>class>标签
3 css的扩展选择器
关联选择器
设置嵌套标签的样式 div p{}
组合选择器
不同的标签具有相同的样式 div,p{}
伪元素选择器
超链接的状态
原始:link
悬停:hover
点击:active
点击之后:visted
4 盒子模型
边框 border:2px solid red;
上下左右
内边距 padding:20px;
上下左右
外边距 margin:20px;
上下左右
5 布局的漂浮
float left:后面的div到右边
right:后面到div的左边
6 布局的定位
poition absolute 从文档流中拖出
relative 不会从文档流中拖出