css.rst
author Oleksandr Gavenko <gavenkoa@gmail.com>
Mon, 22 Feb 2016 12:41:52 +0200
changeset 1903 901e7394849f
parent 1789 5be99e065b56
child 1905 fba288d59662
permissions -rw-r--r--
Decrease intent to increase space usage on mobile.

.. -*- coding: utf-8; -*-
.. include:: HEADER.rst

======
 CSS.
======
.. contents::

Adding CSS to HTML.
===================

Include in head tag::

  <html>
    <head>
      <link href="path-to.css" rel="stylesheet" type="text/css">
    </head>
    ...
  <html>

or::

  <head>
   <style type="text/css">
     h1 {border-width: 1; border: solid; text-align: center}
   </style>
  </head>

To change style in specific tag use::

  <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");

Default style for HTML elements.
================================

 * http://www.w3.org/TR/CSS2/sample.html

Emacs.
======
::

  $ sudo apt-get install css-mode

Graphical editor.
=================
::

  $ sudo apt-get install cssed

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/

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