css.rst
author Oleksandr Gavenko <gavenkoa@gmail.com>
Wed, 05 Aug 2015 23:55:34 +0300
changeset 1729 22ffd80639c0
parent 1535 e499cb39b573
child 1788 d00684d41301
permissions -rw-r--r--
Make centered content design with adoption for mobile devices. Highlight TOC.
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     1
.. -*- coding: utf-8; -*-
1334
9bf0d5a1f0cf Include common header with quick links.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1048
diff changeset
     2
.. include:: HEADER.rst
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     3
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     4
======
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     5
 CSS.
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     6
======
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     7
.. contents::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     8
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
     9
Adding CSS to HTML.
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    10
===================
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    11
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    12
Include in head tag::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    13
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    14
  <html>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    15
    <head>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    16
      <link href="path-to.css" rel="stylesheet" type="text/css">
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    17
    </head>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    18
    ...
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    19
  <html>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    20
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    21
or::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    22
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    23
  <head>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    24
   <style type="text/css">
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    25
     h1 {border-width: 1; border: solid; text-align: center}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    26
   </style>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    27
  </head>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    28
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    29
To change style in specific tag use::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    30
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    31
  <b style="color: blue; font-family: ariel">Welcome!</b>
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    32
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    33
Selectors.
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    34
==========
1389
4ab574ec7067 Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1334
diff changeset
    35
::
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    36
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    37
  tag {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    38
  .class {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    39
  #id {} для id разрешены символы
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    40
  * {} - любой элемент
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    41
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    42
  tag tag1 {} - выбор tag1, у которых есть предок tag
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    43
  tag > tag {} - выбор дочернего элемента
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    44
  tag + tag {} - выбор соседних элементов
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    45
  tag ~ tag {} - выбор любого соседа
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    46
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    47
  [attr] {}
1433
933af00eae13 Selector by several attributes.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1408
diff changeset
    48
  [attr1][attr2] {}
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    49
  [attr="..."] {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    50
  [attr~="..."] {} - присутствует слово ... в поле атрибута
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    51
  [attr*="..."] {} - присутствует набор символов ... в поле атрибута
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    52
  [attr^="..."] {} - начинается с ... в поле атрибута
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    53
  [attr$="..."] {} - заканчивается на ... в поле атрибута
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    54
  tag [attr|="..."] {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    55
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    56
  :link - не посещенные ссылки
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    57
  :visited - посещенные ссылки
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    58
  :active - нажатие на левую клавишу мыши на элементе
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    59
  :hover - назначать при наведении
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    60
  :focus - при фокусировке элемента
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    61
  :first-child - первый подэлемент
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    62
  :last-child - последний подэлемент
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    63
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    64
  :first-line
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    65
  :first-letter - выбрать первую букву (не приминимо к inline элементам)
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    66
  :before{content:"..."}, ставит перед контентом элементов строку xxx (можно
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    67
  использовать счетчики)
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    68
  :after{} - тоже, что и before, только ставит текст после контента тега
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    69
1389
4ab574ec7067 Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1334
diff changeset
    70
See:
4ab574ec7067 Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1334
diff changeset
    71
4ab574ec7067 Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1334
diff changeset
    72
 * http://www.w3.org/TR/CSS2/selector.html
4ab574ec7067 Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1334
diff changeset
    73
 * http://www.w3.org/TR/css3-selectors/#selectors
4ab574ec7067 Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1334
diff changeset
    74
1408
085cde50fc0c CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1389
diff changeset
    75
CSS include statement.
085cde50fc0c CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1389
diff changeset
    76
======================
085cde50fc0c CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1389
diff changeset
    77
::
085cde50fc0c CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1389
diff changeset
    78
085cde50fc0c CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1389
diff changeset
    79
  @import url("common.css");
085cde50fc0c CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1389
diff changeset
    80
1461
f030b717a402 Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1433
diff changeset
    81
Default style for HTML elements.
f030b717a402 Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1433
diff changeset
    82
================================
f030b717a402 Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1433
diff changeset
    83
f030b717a402 Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1433
diff changeset
    84
 * http://www.w3.org/TR/CSS2/sample.html
f030b717a402 Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1433
diff changeset
    85
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    86
Emacs.
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    87
======
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    88
::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    89
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    90
  $ sudo apt-get install css-mode
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    91
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    92
Graphical editor.
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    93
=================
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    94
::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    95
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    96
  $ sudo apt-get install cssed
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    97
1048
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
    98
CSS browser support.
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    99
====================
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
   100
1048
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
   101
  * http://www.quirksmode.org/css/contents.html
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
   102
  * http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
   103
  * http://www.css3.info/modules/selector-compat/
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
   104
1535
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   105
CSS compilers.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   106
==============
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   107
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   108
  http://lesscss.org/
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   109
                LESS extends CSS with dynamic behavior such as variables,
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   110
                mixins, operations and functions.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   111
  http://sass-lang.com/
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   112
                Sass is the most mature, stable, and powerful professional grade
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   113
                CSS extension language in the world.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   114
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   115
CSS frameworks.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   116
===============
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   117
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   118
  http://getbootstrap.com/
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   119
                Sleek, intuitive, and powerful mobile first front-end framework
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   120
                for faster and easier web development.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   121
  http://bootswatch.com/
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   122
                Free themes for Bootstrap.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   123
  http://960.gs/
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   124
                Grid framework.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   125
  http://purecss.io/
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   126
                A set of small, responsive CSS modules that you can use in every
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   127
                web project.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   128
  http://foundation.zurb.com/
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   129
                The most advanced responsive front-end framework in the world.
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   130
e499cb39b573 CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1461
diff changeset
   131