|
1 .. -*- coding: utf-8; -*- |
|
2 |
|
3 ====== |
|
4 CSS. |
|
5 ====== |
|
6 .. contents:: |
|
7 |
|
8 Adding CSS to HTML. |
|
9 =================== |
|
10 |
|
11 Include in head tag:: |
|
12 |
|
13 <html> |
|
14 <head> |
|
15 <link href="path-to.css" rel="stylesheet" type="text/css"> |
|
16 </head> |
|
17 ... |
|
18 <html> |
|
19 |
|
20 or:: |
|
21 |
|
22 <head> |
|
23 <style type="text/css"> |
|
24 h1 {border-width: 1; border: solid; text-align: center} |
|
25 </style> |
|
26 </head> |
|
27 |
|
28 To change style in specific tag use:: |
|
29 |
|
30 <b style="color: blue; font-family: ariel">Welcome!</b> |
|
31 |
|
32 Selectors. |
|
33 ========== |
|
34 |
|
35 tag {} |
|
36 .class {} |
|
37 #id {} для id разрешены символы |
|
38 * {} - любой элемент |
|
39 |
|
40 tag tag1 {} - выбор tag1, у которых есть предок tag |
|
41 tag > tag {} - выбор дочернего элемента |
|
42 tag + tag {} - выбор соседних элементов |
|
43 tag ~ tag {} - выбор любого соседа |
|
44 |
|
45 [attr] {} |
|
46 [attr="..."] {} |
|
47 [attr~="..."] {} - присутствует слово ... в поле атрибута |
|
48 [attr*="..."] {} - присутствует набор символов ... в поле атрибута |
|
49 [attr^="..."] {} - начинается с ... в поле атрибута |
|
50 [attr$="..."] {} - заканчивается на ... в поле атрибута |
|
51 tag [attr|="..."] {} |
|
52 |
|
53 :link - не посещенные ссылки |
|
54 :visited - посещенные ссылки |
|
55 :active - нажатие на левую клавишу мыши на элементе |
|
56 :hover - назначать при наведении |
|
57 :focus - при фокусировке элемента |
|
58 :first-child - первый подэлемент |
|
59 :last-child - последний подэлемент |
|
60 |
|
61 :first-line |
|
62 :first-letter - выбрать первую букву (не приминимо к inline элементам) |
|
63 :before{content:"..."}, ставит перед контентом элементов строку xxx (можно |
|
64 использовать счетчики) |
|
65 :after{} - тоже, что и before, только ставит текст после контента тега |
|
66 |
|
67 Emacs. |
|
68 ====== |
|
69 :: |
|
70 |
|
71 $ sudo apt-get install css-mode |
|
72 |
|
73 Graphical editor. |
|
74 ================= |
|
75 :: |
|
76 |
|
77 $ sudo apt-get install cssed |
|
78 |
|
79 CSS Browser support. |
|
80 ==================== |
|
81 |
|
82 http://www.css3.info/modules/selector-compat/ |
|
83 Compatibility table: CSS3 Selectors. |
|
84 |