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