zoukankan      html  css  js  c++  java
  • CSS学习随笔

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

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

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

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

        CSS样式:

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

             eg:

                .div1{//声明

                      500px;//样式

                      height:100px;

                     background-color:red;

    }

            浮动与定位:

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

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

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

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

                                                        100px;

                                                         height:100px;

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

                                                           {

                                                             100%;

                                                             height:100%;

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

  • 相关阅读:
    【转载】C++针对ini配置文件读写大全
    CString向char类型转化 ---“=”: 无法从“wchar_t *”转换为“char *
    使用了非标准扩展:“xxx”使用 SEH,并且“xxx”有析构函数
    16进制串hex与ASCII字符串相互转换
    【转载】CCombobox使用大全
    获取c++ edit控件内容
    [转载]C++ CString与int 互转
    MacOS Cocos2d-x-3.2 创建HelloWorld项目
    构建之法阅读笔记6--敏捷开发2
    进度条--第十二周
  • 原文地址:https://www.cnblogs.com/vn-6666/p/5987336.html
Copyright © 2011-2022 走看看