CSS
1、CSS的简介
*CSS：层叠样式表
**层叠：一层一层的
**样式表：很多的属性和属性值
*使页面显示效果更好
*CSS将网页内容和显示样式进行分开，提高了显示功能
2、CSS和HTML的结合方式（4中结合方式）
（1）在每个html标签上面都有一个属性style，把html和css结合在一起
<div style:"background-color:red;color:green;"></div>
（2）使用html的一个标签实现<style>标签，写在head里
<style type="text/css">
div{
background-color:red;
color:green;
}
</style>
（3）在style标签里面 使用语句
@import url(css文件的路径)；
-第一步，创建一个css文件
<style type="text/css">
div{
@import url(div.css);
}
</style>
（4）使用头标签link，引入外部css文件
-第一步，创建一个css文件
<link rel="stylesheet" tyoe="text/css" href="css文件路径">
***第三种方式在某些浏览器写不起作用
***优先级（一般情况）
按照由上到下，由内到外：优先级由低到高。
后加载的优先级高
***格式
选择器名称 {
属性名：属性值；
属性名：属性值；
...
}
3、CSS的基本选择器（三种）
**要对哪个标签里面的数据进行操作
（1）标签选择器
*使用标签名作为选择器的名称
div{
background-color:red;
color:green;
}
（2）class选择器
*每个html标签都有一个class属性
*使用class的值作为选择器名称 .classvalue
<html>
<head>
<style type="text/css">
div.red{
color:red;
}
p.red{
color:red;
}
</style>
</head>
<body>
<div class="red"></div>
<p class="red"></p>
</body>
</html>
（3）id选择器
*每个html标签都有一个id 属性
*使用id的值作为选择器名称 #idvalue
<html>
<head>
<style type="text/css">
div#red{
color:red;
}
p#red{
color:red;
}
</style>
</head>
<body>
<div id="red"></div>
<p id="red"></p>
</body>
</html>
***优先级
标签内的style > id选择器 > class选择器 > 标签选择器
4、CSS扩展选择器
（1）关联选择器
*<div><p>www.baidu.com</p></div>
*设置div标签里面p标签的样式，嵌套标签里面的样式
div p{
color:green
}//两个标签之前一定要有空格
（2）组合选择器
*<div>AAA</div>
<p>BBB</p>
*把div和p设置成相同的样式，把不同标签设置成相同样式
div,p{
color:green
}//两个标签用,隔开
（3）伪元素选择器
*CSS里面提供了一些定义好的样式可以拿过来使用
*比如超链接
**超链接的状态
原始状态 ：link
鼠标放上去 ：hover
点击 ：active
点击之后 ：visited
5、CSS的盒子模型
（1）边框 border
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）外边距 padding
同样分上下左右，类似border
（3）内边距 margin
同样分上下左右，类似border
5、CSS的布局漂浮
float:none|right|left
**left:文本流向对象右边
**right:文本流向对象右边
6、CSS的布局定位
position:
**属性值
-absolute:将对象从文档流中拖出，使用left、right、top、
bottom进行绝对定位(可能会产生层叠)
-relative:对象不可层叠使用left、right、top、bottom等属性
在正常文档流中偏移位置
1、CSS的简介
*CSS：层叠样式表
**层叠：一层一层的
**样式表：很多的属性和属性值
*使页面显示效果更好
*CSS将网页内容和显示样式进行分开，提高了显示功能
2、CSS和HTML的结合方式（4中结合方式）
（1）在每个html标签上面都有一个属性style，把html和css结合在一起
<div style:"background-color:red;color:green;"></div>
（2）使用html的一个标签实现<style>标签，写在head里
<style type="text/css">
div{
background-color:red;
color:green;
}
</style>
（3）在style标签里面 使用语句
@import url(css文件的路径)；
-第一步，创建一个css文件
<style type="text/css">
div{
@import url(div.css);
}
</style>
（4）使用头标签link，引入外部css文件
-第一步，创建一个css文件
<link rel="stylesheet" tyoe="text/css" href="css文件路径">
***第三种方式在某些浏览器写不起作用
***优先级（一般情况）
按照由上到下，由内到外：优先级由低到高。
后加载的优先级高
***格式
选择器名称 {
属性名：属性值；
属性名：属性值；
...
}
3、CSS的基本选择器（三种）
**要对哪个标签里面的数据进行操作
（1）标签选择器
*使用标签名作为选择器的名称
div{
background-color:red;
color:green;
}
（2）class选择器
*每个html标签都有一个class属性
*使用class的值作为选择器名称 .classvalue
<html>
<head>
<style type="text/css">
div.red{
color:red;
}
p.red{
color:red;
}
</style>
</head>
<body>
<div class="red"></div>
<p class="red"></p>
</body>
</html>
（3）id选择器
*每个html标签都有一个id 属性
*使用id的值作为选择器名称 #idvalue
<html>
<head>
<style type="text/css">
div#red{
color:red;
}
p#red{
color:red;
}
</style>
</head>
<body>
<div id="red"></div>
<p id="red"></p>
</body>
</html>
***优先级
标签内的style > id选择器 > class选择器 > 标签选择器
4、CSS扩展选择器
（1）关联选择器
*<div><p>www.baidu.com</p></div>
*设置div标签里面p标签的样式，嵌套标签里面的样式
div p{
color:green
}//两个标签之前一定要有空格
（2）组合选择器
*<div>AAA</div>
<p>BBB</p>
*把div和p设置成相同的样式，把不同标签设置成相同样式
div,p{
color:green
}//两个标签用,隔开
（3）伪元素选择器
*CSS里面提供了一些定义好的样式可以拿过来使用
*比如超链接
**超链接的状态
原始状态 ：link
鼠标放上去 ：hover
点击 ：active
点击之后 ：visited
5、CSS的盒子模型
（1）边框 border
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）外边距 padding
同样分上下左右，类似border
（3）内边距 margin
同样分上下左右，类似border
5、CSS的布局漂浮
float:none|right|left
**left:文本流向对象右边
**right:文本流向对象右边
6、CSS的布局定位
position:
**属性值
-absolute:将对象从文档流中拖出，使用left、right、top、
bottom进行绝对定位(可能会产生层叠)
-relative:对象不可层叠使用left、right、top、bottom等属性
在正常文档流中偏移位置
925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
