DIV+CSS

来源：互联网发布：js 对象作为参数编辑：程序博客网时间：2024/05/18 03:46

一、CSS简介：

英文名Cascading Style Sheets——层叠样式表，提供了一系列格式设置的规则，和HTML相结合用来设置网页的格式和美化效果，是丰富和补充HTML不足的一种规则。使用CSS可以更加灵活的控制页面样式，同时将页面内容和显示样式进行分离，提高显示功能。

二、HTML和CSS的结合方式：四种

A：在每个html的标签上都有一个属性style，通过在style属性增加样式。

例文字添加颜色：<div style="background-color:red;color:grad">今天是星期三，天气很好，我去图书馆</div>

B:在<head>中添加<style>标签，对div添加样式

div{

background-color:red;

color:grad;

}

</style>

C:在<head>中添加<style>标签，导入外部css文件，语句@import url(css文件路径)

@import url(css和html的结合方式.css);

</style>

D:在<head>中添加<link>标签，链接外部css文件

说明：前两种方式是通过在html中添加css规则语言来改变网页样式，后两种是把css文件单独编辑完毕后，被引用，实现了样式和内容的分离。但是第三种方式在某些浏览器失效。

三、CSS选择器：选择要对哪个标签进行样式变化

（1）标签选择器；最基本的样式修改

div{

background-color:blue;

color:red;

}

background-color:red;

color:black;

}

</style>

（2）class选择器：在html的标签里添加class属性，对class命名，多个标签的class可以重名，可以单独修改每一个html标签样式，也可以共同修改。

//单个标签更改样式，格式：标签名.class名{css代码}

div.1{

background-color:gray;

}

//定义同一个名称，多个标签更改成同一样式

.1{

background-color:gray;

}

</style>

<div class="1">今天这么倒霉</div>

<p class="1">今天不宜出门</p>

（3）id选择器：每个html标签里都有一个属性id

div#1{

background-color:gray;

}

#1{

background-color:gray;

}

</style>

<div id="1">今天这么倒霉</div>

<p id="1">今天不宜出门</p>

说明：ID选择器和class选择器的区别就在于，一个使用“#”，一个“.” 。三种选择器的优先级：ID 》 class 》标签

（4）扩展选择器：css提供的一些可以改变样式的规则，扩展选择器指的就是css不断扩展出来的可以改变样式的方式，因为选择器本质就是通过css选择改变哪个html标签的样式，所以各种选择器可以相互替代，同一种效果可以用不同的选择器实现。

A:关联选择器：主要针对多层标签嵌套的处理

div p{

background-color:green;

}

</style>

<div><p>css扩展选择器颜色变化</p></div>

B:组合选择器：主要针对多个标签设置成相同的样式，不须添加class和ID属性

<styletype="text/css">

div,p{

background-color:green;

}

</style>

<div>css扩展选择器颜色变化</div>

C:伪类选择器：是css提供定义好的样式，按照规则直接使用

超链接的样式：

/*原始状态*/

a:link{

background-color:red;

}

/*悬停状态*/

a:hover{

background-color:green;

}

/*点击状态*/

a:active{

background-color:blue;

}

/*点击之后变化*/

a:visited{

background-color:gray;

}

</style>

<a href="www.baidu.com">这是一个神奇的超链接</a>

四、盒子模型

通过div+css实现网页布局，将数据封装到一个个的div区域中，通过css的规则改变div的位置和样式，达到网页美化的效果。

（1）边框：border

div边框分为上下左右：border-top、 border-bottom、 border-left、 border-right
在上下左右边框都有颜色color、类型style、宽度width

（2）内边距：padding

是指文本内容到div边框的距离，内边距也分为山下左右

（3）外边距：margin

是指div边框到整个页面操作区边界的距离，外边距也分为山下左右
说明：边框、内边距、外边距都可以通过各自的名称对上下左右共同设置同一数据，也可以单独对某一边设置。
<html>
       <head>
              <title>css盒子模型</title>
              <styletype="text/css">
                     
                     div{
                            width:200px;
                            height:100px;

                            border:2pxsolid blue;
                     }
                     
                     #2{
                            border-right:5pxdashed red;
                     }
                     
                     div{
                            padding:20px;
                     }
                     
                     #3{
                            padding-left=30px;
                     }
                     
                     div{
                            margin:20px;
                     }
                     
                     #3{
                            margin-left:30px;
                     }
              </style>
       </head
       <body>
              <divid="1">百度</div>
              <divid="2">CSDN</div>
              <divid="3">新浪</div>
       </body>
</html>

五、CSS布局和定位

float布局：对象如何浮动，默认none不漂浮。部分浏览器不支持

属性值：left : 文本流向对象的右边（后边的div跑到前一个右边）

right :文本流向对象的左边（后边的div跑到前一个左边）

position定位：

属性值： absolute:将对象从文档流中拖出，使用left、right 、top、buttom等属性进行绝对定位。重叠部分会被覆盖

Relative:不会将对象从文档流中拖出，对象不可层叠，使用top、buttom等属性进行定位。

float和position的区别：float只能改变div的相对位置，要么排列在右边要么左边，而position可以通过绝对定位设置在任意位置。float的一般应用场景图片和文字的排列，如网易博客的未打开状态预览效果，360浏览器新标签页的标签排列，position的absolute属性使对象被拖出，和底层分离，在网页漂浮的广告应用。

阅读全文

0 0