css样式表

2018-06-24 01:05:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

                                     CSS样式表

        1.样式复用,方便网站的后期维护;
        2.实现页面的精确控制,实现精美复杂页面;
        3布局定位;
        4外观美化;
  1 【三种使用CSS的方式】
     1、行内样式表:直接在HTML开始标签中使用style=""的方式引用;
                  特点:将CSS代码与HTML代码完全糅杂在一起,不符合W3C关于内容与表现分离的要求。不利于样式复用;
               优先级:最高。
     2、内部样式表: 在<head></head>中,使用<style type="text/css"></style>方式引用;
                  特点:将CSS代码与HTML代码分离,但是没有彻底分离CSS文件与HTML文件,不利于多页面复用样式。
     3、外部样式表:使用link标签链接CSS文件。 
        <link rel="stylesheet" type="text/css" href="css/01css.css" />
                 特点:实现了CSS与HTML的彻底分离,有利于样式复用及后期维护。
  
         【通用选择器】
                       1、写法: *{}
                       2、作用: 选中页面中的所有HTML标签
                       3、优先级:最低!
          【标签选择器】
                       1、写法: HTML标签名{ }
                       2、作用: 选中所有对应的HTML标签,并修改其样。
         【类选择器 class选择器】
                     1、写法: .选择器名{}
                     2、调用: 在需要修改样式的HTML标签上,使用class="选择器名"
                     3、优先级: 当作用于同一层时,class选择器>标签选择器
                       .list{
                      color: blue;
                             }
          【ID选择器】
                 1、写法: #选择器名{}
                 2、调用: 在需要修改样式的HTML标签上,使用id="选择器名"
                 3、优先级:同一层时,id选择器>class选择器
                 4、ID选择器是唯一的!同一页面严禁出现同名ID!!!
                     #first{
                     color: green;
                                 }
         【后代选择器】
                    1、写法: 选择器1 选择器2 …… 选择器N {}
                    2、生效规则: 选择器2必须是选择器1的【后代】……以此类推
          【子代选择器】
                        1、写法: 选择器1>选择器2>……>选择器N{}
                        2、生效规则: 选择器2必须是选择器1的【直接子代】……
                         div>ul>li{
                                          }
           【交集选择器】
                       1、写法: 选择器1选择器2……选择N{}
                      2、生效规则: 必须同时满足所有选择器,才会生效
                   li.list#first{
                                }
             【 并集选择器】
                       1、写法: 选择器1,选择器2,……,选择N{}
                       2、生效规则: 满足任意一个选择器,均可生效
                       .list,#first{
                         color: darkslategray;
                                        }
          【选择器命名规范】
                            1、只能有字母、数字、下划线组成;
                            2、开头不能是数字。
          【选择器优先级】
                         1、就近原则:近者优先。
                         2、当作用于同一层时:可有权重计算
                     权重划分: 标签选择器 1
                     class选择器 10
                    id选择器 100
                    行级样式表style=""  1000
                    #ul .li .li2 li{}  优先级权重121
                      li .li1 .li2 .lis2 {}  优先级权重31
                    #ul #li li{} 优先级201       
              【伪类选择器】
                    未访问与已访问互斥,必须在前面,激活选定状态,鼠标点击,hover鼠标放上去                   写法:选择器的名称:伪类状态;
                    常见的四种伪类状态;
                    1,link未访问状态,2visited已访问状态,3hover鼠标指上,4active激活选定状态(鼠标点下去未松开);5focus  获得焦点时(input常用)
                    2.超链接多种伪类并存的顺序:link (visited)   hover  active
                      
    [margin属性值]
      margin属性值最多有四个
      当只写一个时,四个方向均为这个值;
      当写两个时,上右{下面默认等于上边,左边默认等于右边}
      当写三个时,上右下{左边默认等于右边}
      写四个时,上右下左
      margin:50px 30px 10px auto;{写三个值+auto:控件居右显示}
       *左右两边auto表居中
      margin:0 auto (上下为0,左右居中)设置块级元素在父容器中水平居中
      [border边框]
      三个属性,宽度,样式style,颜色(不写默认为黑色)
     【padding 内边距】
 
  [box-shadow 盒子阴影]
               * 1、六个属性值,空格分割:
               * x轴阴影距离:(必选) 可正可负,正——右移   负——左移
               * y轴阴影距离:(必选) 可正可负,正——下移  负——上移
               * 阴影模糊半径:(可选) 只能为正,默认为0。数值越大,阴影越模糊
               * 阴影扩展半径:(可选) 可正可负,默认为0。数值增大,阴影扩大。数值减小,阴影缩小
               * 阴影颜色:(可选) 默认为黑色
               * 内外阴影:(可选) 可选值:inset(内阴影) 默认为外阴影
                box-shadow: 0px 0px 10px 0px blue inset;
              
[border-radius 圆角]
           * 1、可以接受8个属性值: X轴(左上、右上、右下、左下)/Y轴
           *  例如:border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
           * 2、只写X轴时,Y轴默认等于X轴。只写左上角,默认=右下角。只写右上角,默认=左下角
           * 例如:border-radius: 50px 0px ;
           * =border-radius: 50px 0px 50px 0px;
           * =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
            * 3、只写一个数,默认8个值均相等。
          使用padding会将整个控件撑大,使用时要注意整个可视区域的实际大小
      圆环设计
 
                【圆形】  方法1            .div3{
                                          width: 200px;
                                           height: 200px;
                                           border-radius:100px;
                                           #F2AD0A;
                                               }
                                               .div3 .div4{
                                            width: 100px;
                                            height: 100px;
                                             margin-top: 50px;
                                              margin-left: 50px;
                                             border-radius:50px;
                                               position: absolute;
                                                        }
 
                                   方法二           .div5{
                                                      width: 100px;
                                                      height:100px;
                                                      border: 50px solid #F2AD0A;
                                                      border-radius:100px;
                                                      }
     [border-image 图片边框]
                * 1、十个属性:
                       * ① 图片路径:url()
                       * ② 图片切片宽度:4个值,分别代表上、右、下、左,四条切线。通过四条切线切割后,会把图片分成九宫格,四个角分别对应边框的四角(不会进行任何拉伸),四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
                      * 写的时候,不能带px单位
                      * ③ 图片边框的宽度:4个值,分别代表上、右、下、左四条边框
                     * 写的时候,必须带px单位
                     * ④ 边框背景重复方式:stretch(拉伸)、round(铺满)、repeat(平铺)
            * 【铺满和平铺区别】
                     * 平铺:会保持原有四条边的宽度,进行平铺。可能导致角落处无法显示完整一个图标;
                     * 铺满:会对四条边进行适当的拉伸压缩,确保可以正好显示完全。
                * 2、属性值写法:border-image: ① ②/③px ④;
                   * 第②部分可以只写1个、2个、3个,判断方式同margin
 
 
         
 
 
 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何对网站的文件和资源进行优化?

下一篇:HTML+CSS-采用DIV+CSS布局的利弊