|
1045
|
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 |
|