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:统一设置。分别设置:和边框同。

   

原文地址:https://www.cnblogs.com/tianwenjing123-456/p/12291662.html