css
1、简介
css:层叠样式表
层叠:一层一层
样式表:很多的属性和属性值
使页面显示效果更加好
css将页面内容和显示样式进行分离,提高了显示功能
2、css和html的结合方式(四种结合方式)
(1)在每个html标签上面都有一个属性style,使其结合
<div style="background-color:red;color:green;">
(2)使用html的一个标签实现<style>标签,写在head里面
<style type="text/css">
*css代码;
div{
background-color:red;
color:green;
}
</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)标签选择器
使用标签名作为选择器的名称
div{
background-color:red;
color:green;
}
(2)class选择器
每个html标签都有一个属性class
<div class="haha">aaaa</div>
.haha{
background-color:red;
color:green;
}
(3)id选择器
每个html标签上有一个属性 id
<div id="hehe">haha</div>
#hehe{
background-color:red;
color:green;
}
优先级
style > id > class > 标签
4、css的扩展选择器
(1)关联选择器
<div><p>wwww</p></div>
设置div标签里面p标签的样式,嵌套标签里面的样式
div p{
background-color:red;
}
(2)组合选择器
<div>111</div>
<p>222</p>
把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
div,p{
background-color:red;
}
(3)伪元素选择器
css里面提供了一些定义好的样式,可以拿过来使用
比如超链接
超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
5、css的盒子模型
在进行布局前需要把数据封装到一块一块的区域内(div)
(1)边框
border:2px solid blue;
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
(2)内边距
padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距
(3)外边距
margin:20px;
使用margin统一设置
也可以分别设置
上下左右四个外边距
6、css的布局的漂浮
float:
属性值
left:文本流向对象的右边
right:文本流向对象的左边
7、css的布局定位
position:
属性值
absolute:
将对象从文档流中拖出
可以是top、bottom等属性进行定位
relative:
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位
8、图文混排
图形和文字在一起显示
9、图像签字
在图片上显示文字
CSS简介
最新推荐文章于 2024-06-05 09:00:00 发布