码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习随笔

时间:2016-10-27 07:52:35      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:ext   浏览器   height   虚拟   float   size   定位   背景图   abs   

 

                      当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

      因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

    CSS样式:

          CSS由两个部分组成 :选择器(你要改变的元素标签 如:div),声明(你想要的样式 如:宽度(width) 背景颜色(background....)。

         eg:

            .div1{//声明

                  width:500px;//样式

                  height:100px;

                 background-color:red;

}

        浮动与定位:

             定位分为两类:绝对定位(absolute),和相对定位(relative)。绝对定位是指定位后就不会随背景图片的变动而变动,且对一个块级元素进行绝对定位后不可再用浮动(即绝对定位与浮动不能共存)。相对定位是指定位后会随背景图片的变动而变动,相对浮动与定位可以共存。

<html>
   <meta charset="UTF-8">
   <head>
   .body{
       width:1000px;
       heighjt:500px;
       background-color:red;
  }
  .div1{
      width:100px;
      height:500px;
      float:left;
      background-color:blue;
     border:absolute;//错误;绝对定位与浮动不可共存
   }
</head>
<body>
    <div class="div1"></div>
</body>
</html>

  背景上的块级元素随着鼠标拉动而变化:

           在css中设置宽、高; 有两种方式:{

                                                    width:100px;

                                                     height:100px;

                                                  }//块级元素是固定的,不会随着鼠标的拉动而变动

                                                       {

                                                         width:100%;

                                                         height:100%;

                                                    }//块级元素会随着鼠标的拉动而长宽也跟着变动

 

CSS学习随笔

标签:ext   浏览器   height   虚拟   float   size   定位   背景图   abs   

原文地址:http://www.cnblogs.com/vn-6666/p/5987336.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!