CSS学习02

  • CSS列表属性
    • list-style:列表样式,取值:none。去掉项目符号或编号前面的各种符号。
    • ul,li{
            list-style:none;
      }
  • CSS边框属性:每个元素都可以加边框线
    • border-left:左边框线
      • 格式:border-left:粗细 线型 颜色;
      • 线型:none、solid(实线)、dashed(虚线)、dotted(点状线)
        • 举例:border-left:1em dashed red;
    • border-right:右边框线
    • border-top:上边框线
    • border-bottom:下边框线
    • border:同时给四个边加边框线。
    • 注意:行内元素没有width和height的属性;块元素才有width和height的属性。
    • 例如:
      • h1{
           width:600px;
           border-left:10px dashed red;
           border-top:1px solid red;
           background-color:#cccccc;
           color:#663366;
         }
      • 表单中的各元素,都是行内元素。
      • 表单中的各元素,可以指定width或height;我们更改文本框的宽度和高度(input属性)。
  • CSS内边距属性:边框线到内容间的距离
    • 注意:平常我们所说的width和height属性,他们指内容的宽度和高度,不含内、外边距、边框线。
    • padding-left:左内填充距离,左边线到内容间的距离。
    • padding-right:右内填充距离,右边线到内容见的距离。
    • padding-top:上内填充距离,上边线到内容间的距离。
    • padding-bottom:下内填充距离,下边线到内容间的距离。
    • 缩写模式:
      • padding:10px;  //四个边的内填充分别为10px
      • padding:10px 20px;   //上下10px,左右20px
      • padding:5px 10px 20px ; //上5px,左右10px,下20px
      • padding:5px 10px 15px 20px;   //顺序一定是“上右下左”。
      • 举例:
      • h1{
            width:600px;
            background-color:#cccccc;
            color:#663366;
            padding:5px;
         }

  • CSS外边距属性:边线往外的距离
    • margin-left:左边线往外的距离。
    • margin-right:右边线往外的距离。
    • margin-top:上边线往外的距离。
    • margin-bottom:下边线往外的距离。
    • 缩写:
      • margin:10px;   //四个外边距分别为10px。
      • margin:10px 20px;    //上下外边距10px,左右外边距20px
      • margin:5px 10px 20px;   //上5px,左右10px,下20px
      • margin:5px 10px 15px 20px;    //上5px,右10px,下15px,左20px
    • 举例:
    • <span style="color:#000000;">.box{
          margin:5px;               /*外边距,边线往外的距离*/
          padding:10px;          /*内边距,边线往里的距离*/
          float:right;       /*浮动:让多个元素在一行内显示*/
         }</span>

      • CSS学习02_第1张图片
      • 我们可以把网页中的每个元素,都看成是一个“盒子”。
      • “盒子”有哪些特征:内容的width或height、border、padding、margin。
  • Firefox浏览器汇总,firebug调试工具的安装使用
    • 如果Firefox的版本高于30的话,请使用firebug2.0及以上版本。
    • 如果你的Firefox的版本低于30的话,请使用firebug1.9、firebug1.7版本。
  • CSS背景属性
    • background-color:背景颜色。
    • background-image:背景图片地址。如:background-image:url(images/bg.gif/)
    • background-repeat:背景平铺方式,取值:no-repeat(不平铺)、repeat-x(水平方向)、repeat-y(垂直方向)
    • background-position:背景定位。格式:background-position:水平方向定位  垂直方向定位;
      • 用英文单词定位:background-position:left|center|right  top|center|bottom;
      • 用固定值定位:background-position:50px 50px;  //背景距离容器左边50px,容器顶端50px。
      • 用百分比定位:background-position:50% 50%;  //水平居中,垂直居中。
      • 用混合定位:background-position:left 10px;       //背景靠左边齐,距离容器顶端10px
    • 简写方式:
      • 格式:background:背景色 背景图 是否定位 定位方式;
      • 举例:background:url(images/bg.gif) no-repeat left 10px;
      • 举例:background:#ccc url(images/01.jpg) no-repeat left 10px;
  • CSS浮动和清除
    • float:让元素浮动,取值:left、right
    • clear:清除浮动,取值:left、right、both(同时清除上面的左右浮动)
    • CSS浮动
      • 浮动的元素,将向左或向右浮动,浮动到包围元素的边上或上一个浮动元素的边上为止。
      • 浮动的元素,不再占空间,并且,浮动元素的层级要高于普通元素
      • 浮动的元素,一定是“块元素”。不管它原来是什么元素。(<span>这类行元素浮动后也会变成块元素)
      • 如果浮动的元素,没有指定宽度的话,浮动后它将尽可能的变窄。 因此,浮动元素一般要定宽和高。
      • 一行的多个元素,要浮动一起浮动。
    • 浮动的功能:可以实现将多个块元素并列排版。
    • 举例:
      • CSS学习02_第2张图片
      •  
         <style type="text/css">
           /*全局样式设置*/
           html,body,h2,p{margin:0;padding:0;}
           ul,li,ol{list-style:none;}
           a:link,a:visited{color:blue;text-decoration:none;}
           a:hover{color:red}
           body{font-size:18px;color:#444;font-family:黑体;background:#cccccc;}
           .box{
               border:1px solid #444;
               width:600px;
               margin:30px auto;
              }
           .box .div1{
               width:220px;
               height:100px;
               background-color:green;
               float:left;
             }
            .box .div2{
               width:220px;
               height:100px;
               background-color:blue;
               float:left;
              }
          .box .div3{
               width:100px;
               height:100px;
               background-color:red;
               float:left;
              }
           </style>
         </head>
        <body>
                                  <div class="box">
                                        <div class="div1"></div>
                                        <div class="div2"></div>
                                        <div class="div3"></div>
                                </div>
                            </body>
    • 清除元素:
      • 如何让包围元素,包住浮动元素。
      • 需要再浮动元素的下边,使用清除浮动操作。
      • .clear1{
             clear:both;
             }
        <body>
               <div class="box">
                 <div class="div1"></div>
                 <div class="div2"></div>
                 <div class="div3"></div>
                <div class="clear1"></div>
            </div>
        </body>
        
        
      • CSS学习02_第3张图片
  • CSS清除浮动
    • CSS清除浮动的功能有两个:(1)可以使包围元素从“视觉上”包住浮动元素;(2)清除之下的其他元素将恢复默认排版。
    • 有浮动,就得有清除。
    • 如果包围元素指定了高度,那么可以不使用清除功能。
  • display属性
    • 功能:规则网页元素如何显示的问题。
    • 取值:none(隐藏)、block(以块显示)、inline(以行内元素显示)
    • block:可以实现将行内元素转成块元素。
    • inline:可以实现将块元素转成行内元素。 
    • 例如:
    •  .news{
           width:600px;
           margin:0px auto;
           border:1px solid #444;
           padding:20px;
           background-color:#cccccc;
           display:none; /*将元素隐藏起来*/
         }

  • overflow属性
    • 当内容溢出时,溢出的内容该如何显示。取值:visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(自动)
    • overflow:auto;
  • cursor光标类型
    • 网页中光标的类型,取值:help(帮助)、wait(等待)、hand、pointer(手形)等
    • cursor:pointer;
  • CSS继承性
    • CSS属性继承:外层元素的样式,会被内层元素进行继承。多个外层元素的样式,最终都会“叠加”到内层元素上。
    • CSS学习02_第4张图片
    • 什么样的CSS属性能被继承呢?
      • CSS文本属性能被继承:
        • color、font-size、font-family、font-style、font-weight
        • text-align、text-decoration、text-indent、letter-spacing、line-height
      • 提示:<body>中的CSS属性,会被所有的子元素继承。
  • CSS优先级
    • 单个选择器的优先级
      • 行内样式>id选择器>class选择器>标签选择器
      • CSS学习02_第5张图片
    • 多个选择器的优先级
      • 多个选择器的优先级,指向越准确,优先级越高。
      • 特殊情况下,我们需要假设一些值:
        • 标签选择器        优先级为1
        • 类选择器           优先级为10
        • id选择器            优先级为100
        • 行内样式           优先级为1000
      • 计算以下优先级:
        • .news h1{color:red;}     优先级:10+1=11
        • .title{ color:blue}            优先级:10

你可能感兴趣的:(CSS学习02)