author | Oleksandr Gavenko <gavenkoa@gmail.com> |
Mon, 22 Feb 2016 13:31:27 +0200 | |
changeset 1909 | 6b76120bd2d3 |
parent 1905 | fba288d59662 |
child 1912 | 8b81a8f0f692 |
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:: |
|
1905
fba288d59662
Include only local subsections into TOC. This prevent duplication of
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1789
diff
changeset
|
8 |
:local: |
1045 | 9 |
|
10 |
Adding CSS to HTML. |
|
11 |
=================== |
|
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 |
========== |
|
1389
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
36 |
:: |
1045 | 37 |
|
38 |
tag {} |
|
39 |
.class {} |
|
40 |
#id {} для id разрешены символы |
|
41 |
* {} - любой элемент |
|
42 |
||
43 |
tag tag1 {} - выбор tag1, у которых есть предок tag |
|
44 |
tag > tag {} - выбор дочернего элемента |
|
45 |
tag + tag {} - выбор соседних элементов |
|
46 |
tag ~ tag {} - выбор любого соседа |
|
47 |
||
48 |
[attr] {} |
|
1433
933af00eae13
Selector by several attributes.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1408
diff
changeset
|
49 |
[attr1][attr2] {} |
1045 | 50 |
[attr="..."] {} |
51 |
[attr~="..."] {} - присутствует слово ... в поле атрибута |
|
52 |
[attr*="..."] {} - присутствует набор символов ... в поле атрибута |
|
53 |
[attr^="..."] {} - начинается с ... в поле атрибута |
|
54 |
[attr$="..."] {} - заканчивается на ... в поле атрибута |
|
55 |
tag [attr|="..."] {} |
|
56 |
||
57 |
:link - не посещенные ссылки |
|
58 |
:visited - посещенные ссылки |
|
59 |
:active - нажатие на левую клавишу мыши на элементе |
|
60 |
:hover - назначать при наведении |
|
61 |
:focus - при фокусировке элемента |
|
62 |
:first-child - первый подэлемент |
|
63 |
:last-child - последний подэлемент |
|
64 |
||
65 |
:first-line |
|
66 |
:first-letter - выбрать первую букву (не приминимо к inline элементам) |
|
67 |
:before{content:"..."}, ставит перед контентом элементов строку xxx (можно |
|
68 |
использовать счетчики) |
|
69 |
:after{} - тоже, что и before, только ставит текст после контента тега |
|
70 |
||
1389
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
71 |
See: |
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
72 |
|
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
73 |
* http://www.w3.org/TR/CSS2/selector.html |
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
74 |
* http://www.w3.org/TR/css3-selectors/#selectors |
4ab574ec7067
Add links to standard.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1334
diff
changeset
|
75 |
|
1408
085cde50fc0c
CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1389
diff
changeset
|
76 |
CSS include statement. |
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 |
|
085cde50fc0c
CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1389
diff
changeset
|
80 |
@import url("common.css"); |
085cde50fc0c
CSS include statement.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1389
diff
changeset
|
81 |
|
1461
f030b717a402
Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1433
diff
changeset
|
82 |
Default style for HTML elements. |
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 |
|
f030b717a402
Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1433
diff
changeset
|
85 |
* http://www.w3.org/TR/CSS2/sample.html |
f030b717a402
Default style for HTML elements.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1433
diff
changeset
|
86 |
|
1045 | 87 |
Emacs. |
88 |
====== |
|
89 |
:: |
|
90 |
||
91 |
$ sudo apt-get install css-mode |
|
92 |
||
93 |
Graphical editor. |
|
94 |
================= |
|
95 |
:: |
|
96 |
||
97 |
$ sudo apt-get install cssed |
|
98 |
||
1048
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
99 |
CSS browser support. |
1045 | 100 |
==================== |
101 |
||
1048
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
102 |
* http://www.quirksmode.org/css/contents.html |
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
103 |
* http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29 |
409aab81f818
CSS browser support.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1046
diff
changeset
|
104 |
* http://www.css3.info/modules/selector-compat/ |
1045 | 105 |
|
1535
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
106 |
CSS compilers. |
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 |
|
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
109 |
http://lesscss.org/ |
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
110 |
LESS extends CSS with dynamic behavior such as variables, |
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
111 |
mixins, operations and functions. |
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
112 |
http://sass-lang.com/ |
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
113 |
Sass is the most mature, stable, and powerful professional grade |
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
114 |
CSS extension language in the world. |
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
115 |
|
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
116 |
CSS frameworks. |
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 |
|
1788 | 119 |
http://usablica.github.io/front-end-frameworks/ |
120 |
Front-end Frameworks v2.5 (comparing). |
|
121 |
http://usablica.github.io/front-end-frameworks/compare.html |
|
122 |
A Collection of best front End frameworks. |
|
1535
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
123 |
http://960.gs/ |
1788 | 124 |
Grid framework. |
125 |
||
126 |
Bootstrap. |
|
127 |
---------- |
|
128 |
||
129 |
From `Twitter <https://twitter.com/getbootstrap>`_. |
|
130 |
||
131 |
License: MIT. |
|
132 |
||
133 |
http://getbootstrap.com/ |
|
134 |
Home page. |
|
135 |
https://github.com/twbs/bootstrap/ |
|
136 |
GitHub page. |
|
137 |
http://bootswatch.com/ |
|
138 |
Free themes for Bootstrap. |
|
1789
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
139 |
http://lipis.github.io/bootstrap-social/ |
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
140 |
Social icons. |
1788 | 141 |
|
142 |
Semantic UI. |
|
143 |
------------ |
|
144 |
||
145 |
License: MIT. |
|
146 |
||
147 |
http://semantic-ui.com/ |
|
148 |
Home page. |
|
149 |
https://github.com/Semantic-Org/Semantic-UI |
|
150 |
GitHub page. |
|
151 |
||
152 |
Pure. |
|
153 |
----- |
|
154 |
||
155 |
From `Yahoo <https://www.yahoo.com/>`_. |
|
156 |
||
157 |
License: `Yahoo BSD License <https://github.com/yahoo/pure/blob/master/LICENSE.md>`_. |
|
158 |
||
1535
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
159 |
http://purecss.io/ |
1788 | 160 |
Home page. |
161 |
https://github.com/yahoo/pure/ |
|
162 |
GitHub page. |
|
163 |
||
164 |
Foundation. |
|
165 |
----------- |
|
166 |
||
167 |
From Zurb. |
|
168 |
||
169 |
License: MIT |
|
170 |
||
1535
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
171 |
http://foundation.zurb.com/ |
1788 | 172 |
Home page. |
173 |
https://github.com/zurb/foundation-sites |
|
174 |
GitHub page. |
|
175 |
||
176 |
UIkit. |
|
177 |
------ |
|
1535
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
178 |
|
1788 | 179 |
From `yootheme <http://yootheme.com/>`_. |
1535
e499cb39b573
CSS frameworks. CSS compilers.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1461
diff
changeset
|
180 |
|
1788 | 181 |
License: MIT. |
182 |
||
183 |
http://getuikit.com/ |
|
184 |
Home page. |
|
185 |
https://github.com/uikit/uikit |
|
186 |
GitHub page. |
|
1789
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
187 |
|
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
188 |
Font-Awesome. |
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
189 |
------------- |
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
190 |
|
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
191 |
https://github.com/FortAwesome/Font-Awesome |
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
192 |
GitHub page. |
5be99e065b56
bootstrap-social, Font-Awesome.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1788
diff
changeset
|
193 |