css.rst
author Oleksandr Gavenko <gavenkoa@gmail.com>
Wed, 20 Jul 2011 10:54:41 +0300
changeset 899 7b4265c8d324
parent 888 4c1e80956723
permissions -rw-r--r--
Set fill-column as directory local var.

-*- mode: outline; coding: utf-8; -*-

* Emacs.

  $ sudo apt-get install css-mode

* Graphical editor.

  $ sudo apt-get install cssed

* 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] {}
  [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, только ставит текст после контента тега