css与html

1、css和html的结合方式（4种）

①、在每个html标签上面都有一个属性style，把css和html结合在一起

     --<div style=”background-color:red;color:green;”>

②、使用html的一个标签实现<stylr>标签，写在head里面

l  <style type=”text/css”>

        css代码

</style>

<style type=”text/css”>

div{

      background-color:blue;

      color:red;

}

</style>

③   、在style标签里面 使用语句@import url(css的路径)。先创建一个css文件，

然后<style type=”text/css”>

              @import url(div.css)

     </style>

④   、使用头标签link，引入外部css文件

--第一步，创建css文件

--<link rel=”stylesheet” type=”text/css” href=”css文件的路径”/>

第三种结合方式存在缺点（在某些浏览器下不起作用），所以一般使用第四种方式。

优先级（一般情况）：由上到下，由内到外，优先级由低到高。都加载的优先级高。

选择器格式：选择器名称{属性名:属性值;属性名:属性值;…}

2、css的基本选择器（三种）：要对哪个标签里面的数据进行操作

（1）标签选择器：使用标签作为选择器的名称。

（2）class选择器：每个html标签都有一个属性class

    <style type="text/css">

      div.haha{

       background-color:red;

     }

                         

<div class="haha">哈哈哈</div>

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

<style type="text/css">

      div#hehe{

       background-color:gray;

      }

</style>

  

div class="hehe">呵呵呵呵</div>

优先级：style>id选择器>class选择器>标签选择器

3、css的盒子模型：在进行布局之前需要把数据封装到一块一块的区域内（div）

    （1）边框：border:统一设置

分别设置： 上:border-top  下:border-bottom  左:border-left  右:border-right

   （2）内边距:padding统一设置。分别设置：和边框同

   （3）外边距:margin：统一设置。分别设置：和边框同。