Learn_CSS.css

/*selector*/
/*CSS 1*/
    // 标签选择器
    p {}
    // 后代选择器
    p span {}
    // 类选择器
    /*Only one class can be specified per selector, work at IE6 and lower*/
    /* multiple classes，IE6 and lower act p.test.small as p.small.*/
    .class {}
    // id选择器
    #id {}
    /* 伪类选择器 pseudo-classes */
    a:(link|visited|active) {}    /* IE7 IE6 only <a>, in CSS1*/
    p:first-line/first-letter {}
    !important                 /*IE7*/
/*CSS 2.1*/
    *
    E:hover,                /*IE6  only work at <a> */
    E:first-child,          /*IE7*/
    Ep > Ec,                /*IE7 directly siblings*/
    E + F,                  /*IE7 next element*/
    E[attr],                /*IE7*/
    E[attr = "value"],      /*IE7*/
    E[attr~= "word"],       /*IE7  word in attr.split(/\s/)*/
    E[attr|= "word"],       /*IE7  word in attr.split(/[\s\-]/)*/
    E:focus,                /*IE8S*/
    E:before/after {}       /*IE8 pseudo-element*/
/*CSS3*/
    E ~ E,              /*IE7*/
    E[attr($|^|*)="val"] /* IE7 分别以val结尾|开头|包含*/
    /*伪类选择器 /*IE9*/
    :root,           /*等同于html*/
    ::selection,     /*定义选中文本样式*/
    E::before/after, /*IE9*/
    E:target,        /*select Element'anchor*/
    E:not(selector),   /*否定*/
    E:empty,  /* 空 */
    E:only-child,          /*select Element with only one Children*/
    E:(last|first)-child,
    E:nth-child/nth-last-child(kn+b),
    E:only-of-type,        /*select Element type-only in parentEle*/
    E:(first|last)-of-type
    E:nth-(last-)of-type(kn+b)
    E:enabled/disabled/checked/read-only/read-write(/default/indeterminate) {}


/*属性选择器*/

/*css hack*/
    /*条件编译 IE9-*/
    /* <!--[if (gt|gte|lt|lte)? IE (version)?]> */
    /* CSS statement */
    /* <![endif]--> */
    /*属性前缀 IE10-*/
    p {
        color:red\9;            /*all ie*/
        color:beige\9\0;        /*ie9+S*/
        color:beige \0;         /*ie9+S*/
        color:yellow\0;         /*ie8+S, opera*/
        color:yellow !important; /*ie7+*/
        +|#|*|[|*+color:orange;  /*ie6,7,IEQ*/
        _color:orange;          /*ie6,IE7Q*/
        -color:orange;          /*ie6*/
    }

    /*在标准模式中*/
    // •“-″减号是IE6专有的hack
    // •“\9″ IE6/IE7/IE8/IE9/IE10都生效
    // •“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
    // •“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
    /*选择器前缀*/
    *+html selector, /*IE7 only*/
    *html selector {}  /*IE6 only*/
    @media screen\9 {}      /*IE6/7*/
    @media \0screen {}       /*IE8*/
    @media \0screen\,screen\9{}  /*IE6-8*/
    @media screen\0 {}       /*IE8-10*/
    @media screen and (min-width:0\0) {} /*IE9/10*/
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

/*haslayout*/
    // IE6/7专有属性
    // 设置为true则称之为触发haslayout，使元素表现为一个独立的矩形容器，可以设置宽高而且不受外部元素的影响，类似于现代浏览器中的BFC。
    // 如果haslayout=false，那么元素需依靠某个拥有布局的祖先元素来渲染它。这就是很多的ie bugs诞生的地方。
    /*触发haslayout*/
    // * zoom:1，缩放比例，对当前元素没有影响.
    // * display: inline-block
    // * width: (任何值除了auto)
    // * height: (任何值除了auto)
    // * float: (left 或 right)
    // * position: absolute
    // * writing-mode: tb-rl

    // Internet Explorer 7 还有一些额外的属性(不完全列表):
    // * min/max-width/height: (任意值)
    // * overflow: (除 visible 外任意值)
    // * overflow-x: (除 visible 外任意值)
    // * overflow-y: (除 visible 外任意值)
    // * position: fixed
    /*其他*/
    // IE6/7的inline-block = inline + haslayout
/*BFC*/
    // 使元素表现为一个独立的容器，其子元素与外面的元素互不影响，常用于清除浮动
    // 1.处于同一个BFC中的两个垂直窗口的margin会发生重叠
    // 2.BFC容器不会与在流中的上下边缘接触的子元素垂直方向的margin发生重叠
    // 3.限制容器内子元素文本选择样式应用范围
    /*触发BFC*/
    // float:left/right。
    // overflow的值不为visible。
    // display:table-cell/table-caption/inline-block
    // position: absolute/fixed
    // border：任意 /*IE8+，IE7不会且使左，上margin消失*/
/*单位 unit*/
    // px
    // em
    // %
    // rem         em of root(html) /*IE9+*/
    // vh/vw       1vh/vm = 1% of screen.height/width /* IE9 */
    // vmin/vmax   min/max(vh, vw)                     /* IE 不支持vmax，in IE9 refers to supporting "vm" instead of "vmin"*/
    // ex          当前字体的小写x字母的高度或者 1/2 的 1em
    // ch          数字0的宽度

/*××××××××××××20140827××××××××××××*/

/*加载字体文件，让浏览器端可以显示用户电脑里没有安装的字体。*/
@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

div {
    /*设置元素背景图片的原始起始位置。*/
    /*如果背景不是no-repeat，这个属性无效，它会从边框开始显示。*/
    background-origin: border-box | padding-box | content-box; /* 参数同box——sizing */
    /*将背景图片做适当的裁剪以适应实际需要。*/
    background-clip: bordre-box | padding-box | content-box | no-clip;
    /*设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。*/
    background-size: auto | <长度值> | <百分比> | cover | contain;
    background-image: url('/abc/def.png');
    background-color: beige;
    background-attachment: fixed;

    // 简写
    background: color image repeat attachment position/size;

    /*变换*/
    transform：rotate(angle) positive value means clockwise;
    transform: skew(x, y)/skewX(x)/skewY(y);
    transform: scale(x, y)/scaleX(x)/scaleY(y);
    transform: translate(x, y)/translateX(x)/translateY(y)/translateZ(放大);
    transform: matrix(?,?,?,?,tranlateX,translateY);
    transform-origin:(x, y)/column(top bottom left right);
    transform-style: flat|preserve-3D;

    /*过度?????*/
    transition: property duration timing-func delay;
    /*timing-func: ease/linear/ease-in/ease-out/ease-in-out*/

    /*盒模型尺寸解析方式*/
    box-sizing: content-box| border-box /*height = content+ padding + border*/;

    /*调用动画 experimental*/
    -prefix-animation: name duration timing-func delay;
    /*
        iteration-count: infinite | <float number>
        direction:
        normal 循环;
        alternate 来回
        reverse
        alternate-reverse
        play-stats:runing | paused
        fill-mode: none| forwards| backwards|both ????
    */

    /*彩色边框*/
    border-colors: color1, color2, colorn; /*one color, one px width*/

    /*边框图片*/
    border-image: url round|repeat|stretch;

    /*shadow*/
    box-shadow: (x y blur expand color outset|inset)*;
    text-shadow: (x y blur color outset|inset)*;

    -webkit-box-shadow: 3px 3px 4px #000;
         -moz-box-shadow: 3px 3px 4px #000;
            box-shadow: 3px 3px 4px #000;
    /*IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /*IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

    /*省略标记实现*/
    text-overflow: ellipsis;
    overflow: hidden;
    wrap-space: nowrap;


    /*段落排版*/
    text-indent: 2em;
    text-decoration: underline| line-through;
    text-align: left| center| right | justify;
    line-height: 2em;
    letter-spacing: ;

    /*样式简写*/
    font: style variant weight size/height font-family;

    /*scroolbar*/
    /*http://codemug.com/html/custom-scrollbars-using-css*/
    /*for IE*/
    scrollbar-base-color: #C0C0C0;
    scrollbar-3dlight-color: #C0C0C0;
    scrollbar-highlight-color: #C0C0C0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: black;
    scrollbar-shadow-color: #C0C0C0;
    scrollbar-dark-shadow-color: #C0C0C0;

    /*for chrome*/
    ::-webkit-scrollbar { width: 3px; height: 3px;}
    ::-webkit-scrollbar-button {  background-color: #666; }
    ::-webkit-scrollbar-track {  background-color: #999;}
    ::-webkit-scrollbar-track-piece { background-color: #ffffff;}
    ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
    ::-webkit-scrollbar-corner { background-color: #999;}}
    ::-webkit-resizer { background-color: #666;}
    /*for FF*/
    @-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
         -moz-appearance: none !important;
         background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
         -moz-appearance: none !important;
         background-color: rgb(0,0,255) !important;
    }
    thumb:hover,scrollbarbutton:hover {
         -moz-appearance: none !important;
         background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
         display: none !important;
    }
    scrollbar[orient="vertical"] {
        min-width: 15px !important;
    }
}

/*关键帧 assigned to animation  IE10+*/
@-prefix-Keyframes name {
    0% | from {}
    n% {}
    /*......*/
    100% | to {}
}


/*盒模型*/
/*margin |padding: top right bottom left , top!bottom right|left, top right|left bottom*/


/*盒模型层次*/
/*border content+padding background-image background-color margin*/

/*媒体查询 media queries ：set css to corresponding media*/
    // assume MT = "all| screen| print..."
    // assume MQ = "(not) MT and mediaAttr[and mediaAttr.....]"
    // assume MQ = MQ[,MQ]*
    // 1.use MQ as the media attr in link tab
    // 2.@import url("###.css")MT /*use in css file or style tab ,but ie6/7*/;
    // 3.@media MQ{ css statement}

/*只有缩放属性*/
._ {

    resize: none|both|horizontal|inherit;

    outline: width style color offset;

    content: none|attr()|url|string;
}


/*元素分类*/
/*块状元素 -> display: block*/
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
    2、元素的高度、宽度、行高以及顶和底边距都可设置。
    3、元素宽度父容器的100%。
/*内联(行内)元素 -> display: inline*/
    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    1、和其他元素都在一行上；
    2、元素的高度、宽度、行高及顶部和底部边距不可设置；
    3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
/*内联块状元素 -> display: inline-block*/
    <img>、<input>
    1、和其他元素都在一行上；
    2、元素的高度、宽度、行高以及顶和底边距都可设置。

/*css布局模型*/
/*1、流动模型（Flow）*/
    在流动模型下，元素都会在所处的包含元素内从左到右水平，从上到下分布显示。块状元素由于以行的形式占据位置，所以只是自上而下垂直分布

/*2、浮动模型 (Float) ：=inline-block + 方向 + 环绕*/
    1.不脱离文档流，脱离行排列(行实际高度取决于高度最高的元素 ||line-height)
    2.浮动会使元素成为行内块元素，宽度默认自适应内容
    3.在排版流里自定义排列方向,影响后面元素
    4.后面邻接的行、块元素会环绕浮动元素，用于实现文字环绕
    5.清除环绕(对于块元素)：当元素宽度大于剩余宽度转入换行
    1.overflow:hidden;
    3.display：inline-block;
    2.clear:both/left/right

/*3、层模型（Layer）*/
    /*1、相对定位(position: relative)*/
    相对于默认文档流位置，
    /*2、绝对定位(position: absolute)*/
    脱离文档流，相对于其最接近的一个具有定位属性的父包含块。无则相对于body元素，即浏览器窗口。
    宽度自适应内容
    /*3、固定定位(position: fixed)*/
    脱离文档流，相对于浏览器窗口，可看作特殊的绝对定位
    宽度自适应内容
    再根据top bottom left right属性定位
    而其层叠顺序则通过z-index属性来定义。

/*CSS3目前有5种布局方案：*/
._ {

    /*1. 多栏布局(Multi-Column Layout ) 适合内容流布局，不适合页面布局。*/
    columns：width count;
    column-width：100px;   #目前还不支持
    column-count：3;
    column-gap：10px;
    column-rule：width style color; /*列分割框 参数同border*/
    column-span: none| all; /*用于子元素*/
    /*2. 灵活盒布局(Flexible Box Layout)//伸缩布局*/
    /*define a flex container*/
    display: flex;
    flex-direction: column|row; /* vertically and horizonly*/
    justfy-content|align-items: flex-start| center| flex-end;
    flex-flow: [flex-direction] [flex-wrap];
    /*define a flexitem*/
    flex: n; /*set flexitem*/
    order：n; /*set the order flexitem*/
    /*3. 栅格布局(Grid Layout)*/
    /*4. CSS3的浮动盒(CSS3 Floating Boxes)*/
    /*5. Regions*/
}





/*LESS and SaSS*/

    /*1.插入文件*/
    @import 'path/filename'; /*若扩展名为.css则直接插入*/

    /*2.嵌套*/
    #p{
        c{
        &:hover{}
        }
    } ==>
        #p{}
        #p c{}
        #p c:hover{}

    /*3.注释*/
    /*保留*/
    // 过滤

    /*4.变量*/
    LESS: @variable: value   /*@color：#4D6535*/
    SaSS: $variable: value [!default]   /*$color：#4D6535*/

    /*5.mixin混合 ,类似函数*/
    LESS:
    .mixin-name( @var: defaultVal ){       // parameter is seperated by ';'
        /*less code*/
    }
    .class{
        color: blue;
        .mixin-name
    }
    SaSS:
    @mixin mixin-name() {                  // parameter is seperated by ','
        /*sass code*/
    }
    .class{
        color: blue;
        @include mixin-name;
    }

    /*6.函数与操作符*/
    LESS：
    /*字符串函数*/
    escape(String)
    replace(String,REpattern, replacement, REflags)
    %(String, paras)
        /*占位符(以%开头)：*/
        d, D, a, A - 以被任意类型的参数替换 (颜色、数字、转义后的字符串、表达式等)。如果将它们和字符串一起使用，则整个字符串都会被使用，包括引号。然而，引号将会按原样放在字符串中，不会用 "/" 或类似的方式转义。
        s, S - 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用，则只有字符串的值会被使用，引号会被忽略。

    /*数学函数*/
    ceil/floor/percentage(number)
    round(number[, n=0])
    abs/sqrt
    pow/mod()       /*ignore unit of the second*/
    min max
    cos acos sin asin tan atam
    pi()   /*return PI*/

    /*列表函数*/
    @list: "banana", "tomato", "potato", "peach"; /*逗号或空格隔开*/
    length(@list);      /*4*/
    extract(@list, 2);  /*tomato 1-based*/

    /*类型函数*/
    isnumber/string/color/keyword/url/pixel/em/percentage
    isunit(cssText，unit)  /*匹配单位*/

    /*颜色定义函数*/
    rgb(90, 129, 32)  /*#5a8120*/
    hsl(hue, saturation, lightness)
        hue:  色相    0-360
        saturation:   0-100%
        lightness:    0-100%
    hsv
        hue:        0-360
        saturation: 0-100%
        value: 色调 0-100%
    rgba
    hsla
    hsva
    argb(rgba(90, 23, 148, 0.5) #805a1794

    /*颜色通道获取函数*/
    hue/saturation/lightness(HSL)
    hsvhue/hsvsaturation/hsvvalue(HSV)
    red/green/blue/alpha/luma(RGB)

    /*颜色处理*/
    saturate/desaturate(HSL, percentage)
    darken/lighten(HSLA, 10%)
    fadein/fadeout(color, 10%)
    fade(HSLA, percentage)    /*just set to be*/
    spin(HSL, Integer)  /*Rotate the hue angle of a color in either direction.*/
        spin(hsl(10, 90%, 50%), 30)  /* #f2a60d // hsl(10+30, 90%, 50%)*/
        spin(hsl(10, 90%, 50%), -30) /* #f20d59 // hsl(10-30+360, 90%, 50%)*/
    mix(color1,color2)  /*get average of each channel*/
    greyscale(color)    /*desaturate(@color, 100%)*/
    contrast

    /*颜色混合函数*/
    multiply(c1, c2)    /*各通道值相乘/255，变暗*/
    screen              /*变亮/滤色*/
    overlay           /*叠加，令浅的颜色变得更浅，深的颜色变得更深*/
    softlight   /*柔光*/
    hardlight   /*强光/亮光/线性光/点光*/
    negation    ==>c2-c1
    difference  ==>c1-c2
    average     ==>(c1+c2)/2
    exclusion   /*差值/排除*/


    /*其他*/
    color('#ccc')           /*string to Color*/
    convert(14cm, mm)       /*==> 140mm*/
    data-uri([mime,] url)   /*url to base64Object*/
    default
    unit(dimension, unit)   /*单位转换，无单位参数则删除单位*/

    /*7.变量插入*/
    LESS:
    @base_url : 'images';
    background: url("@{base_url}/background.png");
    SaSS:
    $side : left;
    .rounded {
    border-#{$side}-radius: 5px;
    }

    /*8.逻辑语句*/
    LESS：
    /*when*/
    .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
        .box-shadow(@style, rgba(0, 0, 0, @alpha));
    }
    SaSS：
    @if condition {} @else {}
    @for $i from 1 to 10 {}
    @while condition {}
    @each $member in a, b, c, d {}
    @function double($n) {}
    #sidebar {width: double(5px);}

    LESS only
    /*js 赋值*/
    @string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */
    @var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */

    /* 获取文档的信息 */
    @height = `document.body.clientHeight`;

    /*转义*/
    .class {
         filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
    }

    SaSS only
    /*命名空间*/
    #defaults {
        .nav_list () {
            list-style: none;
            margin: 0; padding: 0;
        }
        .button () { … }
        .quote () { … }
    }
    nav ul {
        #defaults > .nav_list;
    }
    /*继承*/
    .parent{}
    .child{
        @extend .class2;    /*继承*/
    }

/*bootstrap*/
.btn
    .btn-default
    .btn-primary
    .btn-success
    .btn-info
    .btn-warning
    .btn-danger
    .btn-link
    .btn-block
    .btn-[xs|sm|lg]  /*as same as .btn in .btn-group-** */
    .btn-group-[xs|sm|lg]

.alert
    .alert-success
    .alert-info
    .alert-warning
    .alert-danger

ul.nav [nav-pills | nav-tabs]

.table-responsive
    table.table [.table-bordered |
        .table-condensed
        .table-striped
        .table-hover   /*highli ght the hovering tr*/
        ]

nav.navbar [navbar-default | navbar-inverse | navbar-static-top | navbar-fixed-top | navbar-fixed-bottom]
    .container [.container-fluid(内层非响应, 对应navbar-default)]
    .navbar-header
        button.navbar-toggle.collapse
        a.navbar-brand
    .navbar-collapse collapse
        ul.nav.navbar-nav
        li.dropdown
            a.dropdown-toggle
            ul.dropedown-menu
        form.navbar-form
        .form-group

form.form-[horizontal|inline]
    .form-group[-sm|lg]
    .form-control [-static|break|feedback]
    .[checkbo|radio][-inline]
    .input-[sm|lg]

.modal
    .modal-dialog
    .modal.content
        .modal-header
        .modal-body
        .modal-footer

.input-group[-sm|lg]
    .form-control
    .input-group-addon
    span
    .input-group-btn
    button

.progress
    .progress-bar.progress-bar-[success|info|wraning|danger|striped]:aria-valuenow:aria-valuemin:aria-valuemax

ul.list-group
    li.list-group-item[.active]
    .list-group-item-[heading|text]

.panel.panel-[default|primary|success|info|warning|danger]
    .panel-heading
    .panel-body
    .panel-footer

.carousel    /*图片展示*/
    .carousel-indicators
    li:data-target:data-slide-to
    .carousel-inner
    .item[.active]
        img:data-src:data-holder-rendered
    .carousel-control [.left | .right]

/*Grid*/
.col-xs-n  /*phone*/
.col-sm-n  /*768  750   pad*/
.col-md-n  /*992  970 PC*/
.col-lg-n  /*1200 1170  big PC*/

.col-**-offset-n
.col-**-push-n
.col-**-pull-n