CSS （看得懂就好）

1、CSS的简介：层叠样式表

用处：增强了网页的显示效果功能，将网页内容和显示样式进行分离，提高了后期代码的维护性

     2、CSS和html的结合方式（4种结合方式）

（1）  在每个html标签上面都有一个属性：style

比如<div Style =“属性名称”：属性；>

（2）  使用html的一个标签实现<style>标签，写在head里面

比如<style type = “text/css”>

 div {

   background-color:blue;

    color:red;

}

</style>

（3）、在style标签里面，使用语句  @import url（css文件的路径） CSS文件要自己创建，里面的内容和（2）步的div类似。 某些浏览器不起作用

比如<style type = “text/css”>

    @import url（images/a.css） </style>

（4）、使用头标签link，引入外部CSS文件   这种情况最常用

        创建一个CSS文件

     比如 <link rel =“stylesheet” type=“text/css” href =“CSS文件路径”/>

   3、CSS的优先级：最终以谁的样式为结果

   顺序： 由上到下，由外到内，优先级由低到高。

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

   4、CSS的选择器（3种）：要对哪个标签里面的数据进行操作 在head里面

   （1）标签选择器

   div {               在body里面

   background-color:blue;

   color:red;

}

   (2)Class选择器：每个html标签都有一个属性：class

     .haha{

  background-color:orange;

    }

  <div class =“haha”>  aaaa <div>

  <p class =“haha”>  aaaa <p>

 如果属性名称都是一样的话用.属性名称代替全部的。

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

     #haha{

  background-color:orange;

}

  <div id =“haha”>  aaaa <div>

  <p id =“haha”>  aaaa <p>

   如果属性名称都是一样的话用#属性名称代替全部的。

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

   5、扩展选择器

（1）  关联选择器：外部的选择器加个空格然后接着内容选择器

  div p {

   background-color:blue;

}

<div><p>aaaaa</p></div>

（2）  组合选择器：不同标签用逗号连接

div,p{

  background-color:orange;

}

<div>23132</div>

<p>dsfsdfds</p>

（3）  伪元素选择器

可以用来超链接点击前后的状态颜色表示

：link、 ：hover、 ：active、 ：visited

 原始       悬停      点击       点击之后

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

（1）边框

     border：2px solid blue   （粗细、线的样式、颜色）

  可以统一设置：border   也可以按照上下左右设置：border-top、border-bottom、border-left、border-right

（2）内边距

  padding：20px    距离

可以统一设置：padding   也可以按照上下左右设置：padding-top、padding -bottom、padding-left、padding-right

（3）外边距

  margin：20px  距离

可以统一设置：margin   也可以按照上下左右设置：margin-top、margin -bottom、margin-left、margin-right

   7、CSS的布局的漂浮

  float    属性值 left    right（了解）

 比如div{ float :left;}            就变成了   aaaa  bbbb

  <div id =“div41”>aaaa </div>            cccc

<div id =“div41”>bbbb </div>

<div id =“div41”>cccc </div>

   8、CSS的布局的定位

  position  属性值

       absolute：将对象从文档流中拖出  可以用top、button、left、right等属性进行绝对定位  案例：网页的小广告、图片上的文字

       relative：不会把对象从文档流中拖出  可以用top、button、left、right等属性进行绝对定位

转载于:https://www.cnblogs.com/zengjiao/p/6894306.html