二、css笔记

一、简介

CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

 

　　

二、css样式优先级和代码规范

• 样式优先级
  　　 由上到下，由外到内。优先级由低到高。

• 代码规范
  　　选择器名称 { 属性名：属性值；属性名：属性值；…….}
  　　属性与属性之间用 分号 隔开
  　　属性与属性值直接按用 冒号 连接
  　　如果一个属性有多个值的话，那么多个值用 空格 隔开。

三、css基本选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS选择器的类型

• 标签名选择器。使用的就是html的标签名

  div {
       background-color:red;
       color:white
  }

• class选择器(.)。其实使用的标签中的class属性

  <div class="haha">qqqqqqqqqq</div>
  .haha {
          background-color:red;
  }

• id选择器(#)。其实使用的是标签的中的id属性。

  <div id="hehe">wwwwwwwwwww</div>
  #hehe {
         background-color:#334455;
  }

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

四、css扩展选择器

• 关联选择器

               标签是可以嵌套的，两个或多个选择器之间产生关系，就可以用此选择器。

<div><p>wwwwwwwwwwwww</p></div>
<!-- 设置div标签里面p标签的样式，嵌套标签里面的样式 -->
div p {
        blackground-color:green;
}

• 组合选择器

               对多个不同选择器进行相同样式设置的时候应用此选择器。

<div>11111</div>
<p>222222222</p>
<!-- 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式 -->
div,p {
        blackground-color: orange;      
}

• 伪元素选择器(了解，浏览器兼容性比较差)

               其实就在html中预先定义好的一些选择器。或者说当前元素处于的状态。

                      ***比如超链接  的状态

                         原始状态       鼠标放上去的状态       点击         点击之后

                           link                   hover              active         visited

 

五、css盒子模型

• 在进行布局前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子。(div)

• 边框（border）分为上 下 左 右

border: 2px solid blue;
border：统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right

• 内边距（padding）分为上 下 左 右

padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距

• 外边距（margin）分为上 下 左 右

margin: 20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距

 

六、css布局的漂浮和定位属性

• lfloat（漂浮）

              none :　 默认值。对象不飘浮

              left :　 文本流向对象的右边

              right :　 文本流向对象的左边

• lposition（定位）

              static :　 默认值。无特殊定位，对象遵循HTML定位规则

              absolute :　 将对象从文档流中拖出，使用left ， right ， top ， bottom 等属性相对于其进行绝对定位。

              relative :　 对象不可层叠，但将依据left ， right ， top ， bottom 等属性在正常文档流中偏移位置

 

七、css和html的结合方式（四种）

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

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

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

<style type="text/css">
         css代码
</style>


<style type="text/css">
         div {
              background-color:red;
              color:green;
         }
</style>

（3）在style标签里面 使用语句（在某些浏览器下不起作用，一般使用第四种结合方式）

<!-- @import url(css文件的路径); -->
<!-- 首先创建一个css文件：abc.css -->
<style type="text/css">
           @import url(abc.css);
</style>

（4）使用头标签 link，引入外部css文件

<!-- 创建一个css文件： def.css -->
<link rel="stylesheet"  type="text/css">  herf="def.css" />

 优先级（一般情况）

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

       【后加载的优先级高】