Fix headers.
.. -*- coding: utf-8; -*-
=====
CSS
=====
.. contents::
:local:
Adding CSS to HTML
==================
Include to CSS file in ``head`` tag::
<html>
<head>
<link href="path-to.css" rel="stylesheet" type="text/css">
</head>
...
<html>
or embed style into ``style`` tag (that tag valid only in ``head`` tag)::
<head>
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
</head>
HTML 5 standard doesn't require ``type`` attribute, above example may be
rewritten into::
<head>
<style>
h1 {border-width: 1; border: solid; text-align: center}
</style>
</head>
To change style of specific tag embedding into ``style`` attribute (style syntax
doesn't use selectors!)::
<b style="color: blue; font-family: ariel">Welcome!</b>
Selectors
=========
::
tag {}
.class {}
#id {} для id разрешены символы
* {} - любой элемент
tag tag1 {} - выбор tag1, у которых есть предок tag
tag > tag {} - выбор дочернего элемента
tag + tag {} - выбор соседних элементов
tag ~ tag {} - выбор любого соседа
[attr] {}
[attr1][attr2] {}
[attr="..."] {}
[attr~="..."] {} - присутствует слово ... в поле атрибута
[attr*="..."] {} - присутствует набор символов ... в поле атрибута
[attr^="..."] {} - начинается с ... в поле атрибута
[attr$="..."] {} - заканчивается на ... в поле атрибута
tag [attr|="..."] {}
:link - не посещенные ссылки
:visited - посещенные ссылки
:active - нажатие на левую клавишу мыши на элементе
:hover - назначать при наведении
:focus - при фокусировке элемента
:first-child - первый подэлемент
:last-child - последний подэлемент
:first-line
:first-letter - выбрать первую букву (не приминимо к inline элементам)
:before{content:"..."}, ставит перед контентом элементов строку xxx (можно
использовать счетчики)
:after{} - тоже, что и before, только ставит текст после контента тега
See:
* http://www.w3.org/TR/CSS2/selector.html
* http://www.w3.org/TR/css3-selectors/#selectors
CSS include statement
=====================
::
@import url("common.css");
Include statment supports media query syntax::
@import url(print.css) print;
Default style for HTML elements
===============================
* http://www.w3.org/TR/CSS2/sample.html
Media queries
=============
CSS compilers
=============
http://lesscss.org/
LESS extends CSS with dynamic behavior such as variables,
mixins, operations and functions.
http://sass-lang.com/
Sass is the most mature, stable, and powerful professional grade
CSS extension language in the world.
CSS browser support
===================
* http://www.quirksmode.org/css/contents.html
* http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
* http://www.css3.info/modules/selector-compat/
Editor support
==============
Emacs
-----
::
$ sudo apt-get install css-mode
Graphical editor
----------------
::
$ sudo apt-get install cssed
CSS frameworks
==============
http://usablica.github.io/front-end-frameworks/
Front-end Frameworks v2.5 (comparing).
http://usablica.github.io/front-end-frameworks/compare.html
A Collection of best front End frameworks.
http://960.gs/
Grid framework.
Bootstrap
---------
From `Twitter <https://twitter.com/getbootstrap>`_.
License: MIT.
http://getbootstrap.com/
Home page.
https://github.com/twbs/bootstrap/
GitHub page.
http://bootswatch.com/
Free themes for Bootstrap.
http://lipis.github.io/bootstrap-social/
Social icons.
Semantic UI
-----------
License: MIT.
http://semantic-ui.com/
Home page.
https://github.com/Semantic-Org/Semantic-UI
GitHub page.
Pure
----
From `Yahoo <https://www.yahoo.com/>`_.
License: `Yahoo BSD License <https://github.com/yahoo/pure/blob/master/LICENSE.md>`_.
http://purecss.io/
Home page.
https://github.com/yahoo/pure/
GitHub page.
Foundation
----------
From Zurb.
License: MIT
http://foundation.zurb.com/
Home page.
https://github.com/zurb/foundation-sites
GitHub page.
UIkit
-----
From `yootheme <http://yootheme.com/>`_.
License: MIT.
http://getuikit.com/
Home page.
https://github.com/uikit/uikit
GitHub page.
Font-Awesome
------------
https://github.com/FortAwesome/Font-Awesome
GitHub page.