| author | Oleksandr Gavenko <gavenkoa@gmail.com> |
| Fri, 02 Nov 2012 09:25:04 +0200 | |
| changeset 1408 | 085cde50fc0c |
| parent 1389 | 4ab574ec7067 |
| child 1433 | 933af00eae13 |
| permissions | -rw-r--r-- |
| 1045 | 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 | 3 |
|
4 |
====== |
|
5 |
CSS. |
|
6 |
====== |
|
7 |
.. contents:: |
|
8 |
||
9 |
Adding CSS to HTML. |
|
10 |
=================== |
|
11 |
||
12 |
Include in head tag:: |
|
13 |
||
14 |
<html> |
|
15 |
<head> |
|
16 |
<link href="path-to.css" rel="stylesheet" type="text/css"> |
|
17 |
</head> |
|
18 |
... |
|
19 |
<html> |
|
20 |
||
21 |
or:: |
|
22 |
||
23 |
<head> |
|
24 |
<style type="text/css"> |
|
25 |
h1 {border-width: 1; border: solid; text-align: center}
|
|
26 |
</style> |
|
27 |
</head> |
|
28 |
||
29 |
To change style in specific tag use:: |
|
30 |
||
31 |
<b style="color: blue; font-family: ariel">Welcome!</b> |
|
32 |
||
33 |
Selectors. |
|
34 |
========== |
|
|
1389
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
35 |
:: |
| 1045 | 36 |
|
37 |
tag {}
|
|
38 |
.class {}
|
|
39 |
#id {} для id разрешены символы
|
|
40 |
* {} - любой элемент
|
|
41 |
||
42 |
tag tag1 {} - выбор tag1, у которых есть предок tag
|
|
43 |
tag > tag {} - выбор дочернего элемента
|
|
44 |
tag + tag {} - выбор соседних элементов
|
|
45 |
tag ~ tag {} - выбор любого соседа
|
|
46 |
||
47 |
[attr] {}
|
|
48 |
[attr="..."] {}
|
|
49 |
[attr~="..."] {} - присутствует слово ... в поле атрибута
|
|
50 |
[attr*="..."] {} - присутствует набор символов ... в поле атрибута
|
|
51 |
[attr^="..."] {} - начинается с ... в поле атрибута
|
|
52 |
[attr$="..."] {} - заканчивается на ... в поле атрибута
|
|
53 |
tag [attr|="..."] {}
|
|
54 |
||
55 |
:link - не посещенные ссылки |
|
56 |
:visited - посещенные ссылки |
|
57 |
:active - нажатие на левую клавишу мыши на элементе |
|
58 |
:hover - назначать при наведении |
|
59 |
:focus - при фокусировке элемента |
|
60 |
:first-child - первый подэлемент |
|
61 |
:last-child - последний подэлемент |
|
62 |
||
63 |
:first-line |
|
64 |
:first-letter - выбрать первую букву (не приминимо к inline элементам) |
|
65 |
:before{content:"..."}, ставит перед контентом элементов строку xxx (можно
|
|
66 |
использовать счетчики) |
|
67 |
:after{} - тоже, что и before, только ставит текст после контента тега
|
|
68 |
||
|
1389
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
69 |
See: |
|
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
70 |
|
|
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
71 |
* http://www.w3.org/TR/CSS2/selector.html |
|
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
72 |
* http://www.w3.org/TR/css3-selectors/#selectors |
|
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
73 |
|
|
1408
085cde50fc0c
CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1389
diff
changeset
|
74 |
CSS include statement. |
|
085cde50fc0c
CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1389
diff
changeset
|
75 |
====================== |
|
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 |
@import url("common.css");
|
|
085cde50fc0c
CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1389
diff
changeset
|
79 |
|
| 1045 | 80 |
Emacs. |
81 |
====== |
|
82 |
:: |
|
83 |
||
84 |
$ sudo apt-get install css-mode |
|
85 |
||
86 |
Graphical editor. |
|
87 |
================= |
|
88 |
:: |
|
89 |
||
90 |
$ sudo apt-get install cssed |
|
91 |
||
|
1048
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
92 |
CSS browser support. |
| 1045 | 93 |
==================== |
94 |
||
|
1048
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
95 |
* http://www.quirksmode.org/css/contents.html |
|
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
96 |
* http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29 |
|
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
97 |
* http://www.css3.info/modules/selector-compat/ |
| 1045 | 98 |