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:red;
color:yellow;
}
</style>
(3) 在style标签里面使用语句(在一些老版本的浏览器中不起作用)
@import url(css的文件路径)
---第一步:创建css文件
(4)使用头标签link,引入外部文件
----第一步创建css文件
----<link rel="stylesheet" type="text/css" href="css文件的路径"/>
*******第三种结合方式,缺点:在某些浏览器下不起作用,一般不用,一般使用第四种方式
*******优先级(一般情况)
由上到下,由外到内,优先级由低到高
后加载的优先级高
*******格式 选择器的格式{属性名:属性值;属性名:属性值}
3.CSS的基本选择器(三种)
*****对哪个标签里面的数据进行操作
(1)标签选择器
*使用标签名作为选择器的名称
div{
background-color:black;
color:white;
}
(2)class选择器
**每个html标签都有一个属性class
--<div class="haha">aaaaa</div>
(3) id选择器
*每一个html标签上面都有一个属性id
---<div id="hehe">bbbbb</div>
4.CSS的扩展选择器
(1)关联选择器
*<div><p>wwwwwwwww</p></div>
* 设置div标签中的p标签的设置,嵌套标签里面的样式
<style type="text/css">
div p{
background-color:red;
}
</style>
(2)组合选择器
*<div>111111</div>
<p>2222222</p>
*把div和p标签设置成同一样式,把不同的标签设置成相同的样式
<style type="text/css">
div,p{
background-color:red;
}
</style>
(3)伪元素选择器
**在CSS里面提供了定义好的样式,可以直接拿过来使用
**比如使用超链接
****超链接的状态
原始状态(:link),鼠标放上去的状态(:hover),点击(:active),点击之后(:visited)
****记忆方法:lv ha
/*原始状态*/
a:link{
background-color:red;
}
/*悬停状态*/
a:hover{
background-color:green;
}
/*点击状态*/
a:active{
background-color:blue;
}
/*点击之后的状态*/
a:viisted{
background-color:gray;
}
5.CSS的盒子模型
*****在进行布局前需要把数据封装到一块一块的区域内(div)
(1)边框
border:2px(粗细) solid(样式) blue(颜色)统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
(2)内边距
padding:20px
使用padding进行统一设置,也可以进行分别设置,上下左右四个内边距
(3)外边距
margin:length
可以统一设置,也可以上下左右设置
6.CSS的布局漂浮(了解)
float:
*****属性值
left:文本流向对象的右边
right:文本流向对象的左边
7.CSS的布局的定位
position:
***属性值:
-absolute:
*****将对象从文件流中拖出
******可以是top,bottom等属性对属性进行绝对定位
--relative:
********不会把对象从文件流中拖出去
*******可以使用top,bottom等属性进行定位
8.案例 图片和文字在一起显示
利用div标签把内容包裹起来,然后用CSS修饰样式位置