css.rst
author Oleksandr Gavenko <gavenkoa@gmail.com>
Fri, 13 Jul 2012 22:32:19 +0300
changeset 1334 9bf0d5a1f0cf
parent 1048 409aab81f818
child 1389 4ab574ec7067
permissions -rw-r--r--
Include common header with quick links.
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
==========
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    35
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    36
  tag {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    37
  .class {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    38
  #id {} для id разрешены символы
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    39
  * {} - любой элемент
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
  tag tag1 {} - выбор tag1, у которых есть предок tag
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    42
  tag > 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
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    46
  [attr] {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    47
  [attr="..."] {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    48
  [attr~="..."] {} - присутствует слово ... в поле атрибута
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
  tag [attr|="..."] {}
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    53
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    54
  :link - не посещенные ссылки
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    55
  :visited - посещенные ссылки
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    56
  :active - нажатие на левую клавишу мыши на элементе
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    57
  :hover - назначать при наведении
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    58
  :focus - при фокусировке элемента
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    59
  :first-child - первый подэлемент
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    60
  :last-child - последний подэлемент
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    61
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    62
  :first-line
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    63
  :first-letter - выбрать первую букву (не приминимо к inline элементам)
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    64
  :before{content:"..."}, ставит перед контентом элементов строку xxx (можно
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    65
  использовать счетчики)
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    66
  :after{} - тоже, что и before, только ставит текст после контента тега
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
Emacs.
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    69
======
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    70
::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    71
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    72
  $ sudo apt-get install css-mode
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    73
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    74
Graphical editor.
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    75
=================
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    76
::
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    77
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    78
  $ sudo apt-get install cssed
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    79
1048
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
    80
CSS browser support.
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    81
====================
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    82
1048
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
    83
  * http://www.quirksmode.org/css/contents.html
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
    84
  * http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
409aab81f818 CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents: 1046
diff changeset
    85
  * http://www.css3.info/modules/selector-compat/
1045
d69b7a836498 CSS Browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
diff changeset
    86