css.rst
changeset 1920 3f7837be0d17
parent 1919 83069b397c1f
child 1921 e3b62a595ca8
equal deleted inserted replaced
1919:83069b397c1f 1920:3f7837be0d17
     1 .. -*- coding: utf-8; -*-
     1 .. -*- coding: utf-8; -*-
     2 
     2 
     3 ======
     3 =====
     4  CSS.
     4  CSS
     5 ======
     5 =====
     6 .. contents::
     6 .. contents::
     7    :local:
     7    :local:
     8 
     8 
     9 Adding CSS to HTML.
     9 Adding CSS to HTML
    10 ===================
    10 ==================
    11 
    11 
    12 Include to CSS file in ``head`` tag::
    12 Include to CSS file in ``head`` tag::
    13 
    13 
    14   <html>
    14   <html>
    15     <head>
    15     <head>
    38 To change style of specific tag embedding into ``style`` attribute (style syntax
    38 To change style of specific tag embedding into ``style`` attribute (style syntax
    39 doesn't use selectors!)::
    39 doesn't use selectors!)::
    40 
    40 
    41   <b style="color: blue; font-family: ariel">Welcome!</b>
    41   <b style="color: blue; font-family: ariel">Welcome!</b>
    42 
    42 
    43 Selectors.
    43 Selectors
    44 ==========
    44 =========
    45 ::
    45 ::
    46 
    46 
    47   tag {}
    47   tag {}
    48   .class {}
    48   .class {}
    49   #id {} для id разрешены символы
    49   #id {} для id разрешены символы
    80 See:
    80 See:
    81 
    81 
    82  * http://www.w3.org/TR/CSS2/selector.html
    82  * http://www.w3.org/TR/CSS2/selector.html
    83  * http://www.w3.org/TR/css3-selectors/#selectors
    83  * http://www.w3.org/TR/css3-selectors/#selectors
    84 
    84 
    85 CSS include statement.
    85 CSS include statement
    86 ======================
    86 =====================
    87 ::
    87 ::
    88 
    88 
    89   @import url("common.css");
    89   @import url("common.css");
    90 
    90 
    91 Include statment supports media query syntax::
    91 Include statment supports media query syntax::
    92 
    92 
    93   @import url(print.css) print;
    93   @import url(print.css) print;
    94 
    94 
    95 Default style for HTML elements.
    95 Default style for HTML elements
    96 ================================
    96 ===============================
    97 
    97 
    98  * http://www.w3.org/TR/CSS2/sample.html
    98  * http://www.w3.org/TR/CSS2/sample.html
    99 
    99 
   100 Emacs.
   100 Media queries
   101 ======
   101 =============
   102 ::
   102 
   103 
   103 CSS compilers
   104   $ sudo apt-get install css-mode
   104 =============
   105 
       
   106 Graphical editor.
       
   107 =================
       
   108 ::
       
   109 
       
   110   $ sudo apt-get install cssed
       
   111 
       
   112 CSS browser support.
       
   113 ====================
       
   114 
       
   115   * http://www.quirksmode.org/css/contents.html
       
   116   * http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
       
   117   * http://www.css3.info/modules/selector-compat/
       
   118 
       
   119 CSS compilers.
       
   120 ==============
       
   121 
   105 
   122   http://lesscss.org/
   106   http://lesscss.org/
   123                 LESS extends CSS with dynamic behavior such as variables,
   107                 LESS extends CSS with dynamic behavior such as variables,
   124                 mixins, operations and functions.
   108                 mixins, operations and functions.
   125   http://sass-lang.com/
   109   http://sass-lang.com/
   126                 Sass is the most mature, stable, and powerful professional grade
   110                 Sass is the most mature, stable, and powerful professional grade
   127                 CSS extension language in the world.
   111                 CSS extension language in the world.
   128 
   112 
   129 CSS frameworks.
   113 CSS browser support
   130 ===============
   114 ===================
       
   115 
       
   116   * http://www.quirksmode.org/css/contents.html
       
   117   * http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
       
   118   * http://www.css3.info/modules/selector-compat/
       
   119 
       
   120 Editor support
       
   121 ==============
       
   122 
       
   123 Emacs
       
   124 -----
       
   125 ::
       
   126 
       
   127   $ sudo apt-get install css-mode
       
   128 
       
   129 Graphical editor
       
   130 ----------------
       
   131 ::
       
   132 
       
   133   $ sudo apt-get install cssed
       
   134 
       
   135 CSS frameworks
       
   136 ==============
   131 
   137 
   132   http://usablica.github.io/front-end-frameworks/
   138   http://usablica.github.io/front-end-frameworks/
   133     Front-end Frameworks v2.5 (comparing).
   139     Front-end Frameworks v2.5 (comparing).
   134   http://usablica.github.io/front-end-frameworks/compare.html
   140   http://usablica.github.io/front-end-frameworks/compare.html
   135     A Collection of best front End frameworks.
   141     A Collection of best front End frameworks.
   136   http://960.gs/
   142   http://960.gs/
   137     Grid framework.
   143     Grid framework.
   138 
   144 
   139 Bootstrap.
   145 Bootstrap
   140 ----------
   146 ---------
   141 
   147 
   142 From `Twitter <https://twitter.com/getbootstrap>`_.
   148 From `Twitter <https://twitter.com/getbootstrap>`_.
   143 
   149 
   144 License: MIT.
   150 License: MIT.
   145 
   151 
   150   http://bootswatch.com/
   156   http://bootswatch.com/
   151     Free themes for Bootstrap.
   157     Free themes for Bootstrap.
   152   http://lipis.github.io/bootstrap-social/
   158   http://lipis.github.io/bootstrap-social/
   153     Social icons.
   159     Social icons.
   154 
   160 
   155 Semantic UI.
   161 Semantic UI
       
   162 -----------
       
   163 
       
   164 License: MIT.
       
   165 
       
   166   http://semantic-ui.com/
       
   167     Home page.
       
   168   https://github.com/Semantic-Org/Semantic-UI
       
   169     GitHub page.
       
   170 
       
   171 Pure
       
   172 ----
       
   173 
       
   174 From `Yahoo <https://www.yahoo.com/>`_.
       
   175 
       
   176 License: `Yahoo BSD License <https://github.com/yahoo/pure/blob/master/LICENSE.md>`_.
       
   177 
       
   178   http://purecss.io/
       
   179     Home page.
       
   180   https://github.com/yahoo/pure/
       
   181     GitHub page.
       
   182 
       
   183 Foundation
       
   184 ----------
       
   185 
       
   186 From Zurb.
       
   187 
       
   188 License: MIT
       
   189 
       
   190   http://foundation.zurb.com/
       
   191     Home page.
       
   192   https://github.com/zurb/foundation-sites
       
   193     GitHub page.
       
   194 
       
   195 UIkit
       
   196 -----
       
   197 
       
   198 From `yootheme <http://yootheme.com/>`_.
       
   199 
       
   200 License: MIT.
       
   201 
       
   202   http://getuikit.com/
       
   203     Home page.
       
   204   https://github.com/uikit/uikit
       
   205     GitHub page.
       
   206 
       
   207 Font-Awesome
   156 ------------
   208 ------------
   157 
   209 
   158 License: MIT.
       
   159 
       
   160   http://semantic-ui.com/
       
   161     Home page.
       
   162   https://github.com/Semantic-Org/Semantic-UI
       
   163     GitHub page.
       
   164 
       
   165 Pure.
       
   166 -----
       
   167 
       
   168 From `Yahoo <https://www.yahoo.com/>`_.
       
   169 
       
   170 License: `Yahoo BSD License <https://github.com/yahoo/pure/blob/master/LICENSE.md>`_.
       
   171 
       
   172   http://purecss.io/
       
   173     Home page.
       
   174   https://github.com/yahoo/pure/
       
   175     GitHub page.
       
   176 
       
   177 Foundation.
       
   178 -----------
       
   179 
       
   180 From Zurb.
       
   181 
       
   182 License: MIT
       
   183 
       
   184   http://foundation.zurb.com/
       
   185     Home page.
       
   186   https://github.com/zurb/foundation-sites
       
   187     GitHub page.
       
   188 
       
   189 UIkit.
       
   190 ------
       
   191 
       
   192 From `yootheme <http://yootheme.com/>`_.
       
   193 
       
   194 License: MIT.
       
   195 
       
   196   http://getuikit.com/
       
   197     Home page.
       
   198   https://github.com/uikit/uikit
       
   199     GitHub page.
       
   200 
       
   201 Font-Awesome.
       
   202 -------------
       
   203 
       
   204   https://github.com/FortAwesome/Font-Awesome
   210   https://github.com/FortAwesome/Font-Awesome
   205     GitHub page.
   211     GitHub page.
   206 
   212