Fixed example.
.. -*- coding: utf-8; -*-
=====
CSS
=====
.. contents::
:local:
CSS specification
=================
Starting from CSS level 2 specification splited into individual modules. Each
module have own levels.
CSS level 3 means CSS level 2 plus modules that refine and extend CSS 2.
https://www.w3.org/TR/CSS/
Definition of CSS standards.
https://www.w3.org/Style/CSS/
Home page for CSS specification umbrella.
https://www.w3.org/Style/CSS/current-work
Status of all modules.
https://www.w3.org/TR/CSS2/
CSS level 2 at latest rev.
https://www.w3.org/TR/CSS21/
CSS level 2 rev 1.
Default style for HTML elements
===============================
* http://www.w3.org/TR/CSS2/sample.html
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>
CSS encoding
============
``@charset`` rule should be the first sequence in CSS document without preceding
white spaces, should use double quotes and exactly one space between keyword and
charset::
@charset "UTF-8";
UTF BOM have precedence over ``@charset``.
Another source of encoding is HTTP header ``Content-Type`` that have highest
precedence::
Content-Type: text/css; charset=utf-8
Using ``charset`` attribute on the ``link`` element is deprecated by HTML5.
https://www.w3.org/International/questions/qa-css-charset.en
Declaring character encodings in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
*@charset CSS at-rule* at MDN.
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:
* https://www.w3.org/TR/CSS2/selector.html
* https://www.w3.org/TR/css3-selectors/#selectors
* https://www.w3.org/TR/CSS/#selectors
CSS import statement
====================
Any ``@import`` rules must precede all other at-rules and style rules in a style
sheet (besides ``@charset``)::
@import "common.css";
@import url("common.css");
Import statment supports media query syntax::
@import url("print.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
https://www.w3.org/TR/css-cascade-3/#at-import
Importing Style Sheets: the @import rule.
Including font
==============
::
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
https://www.w3.org/TR/css-fonts-3/
CSS Fonts Module Level 3.
Media queries
=============
Syntax for media queries inside CSS file is::
@media print { ... }
@media (min-width: 400px) and (max-width: 600px) { ... }
@import url(print.css) print;
It is possible to link to CSS file with media queries with ``media`` attribute::
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
Possible predicates:
``(min-width: VAL)``
Rules applied for any browser width over the value defined in the query.
``(max-width: VAL)``
Rules applied for any browser width below the value defined in the query.
``(min-height: VAL)``
Rules applied for any browser height over the value defined in the query.
``(max-height: VAL)``
Rules applied for any browser height below the value defined in the query.
``(orientation=portrait)``
Rules applied for any browser where the height is greater than or equal to the width.
``(orientation=landscape)``
Rules for any browser where the width is greater than the height.
See:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries
Use CSS media queries for responsiveness
Viewport
========
Specs:
https://www.w3.org/TR/css-device-adapt/
Unpublished: CSS Device Adaptation Module Level 1
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
``viewport`` attribute in ``meta`` tag.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Firefox mobile support for viewport.
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Original viewport specs.
Compatibility:
http://www.quirksmode.org/mobile/tableViewport.html
Compatibility table.
http://viewportsizes.com/
Device table with viewport width.
Articles:
http://www.quirksmode.org/mobile/viewports.html
How viewports and the widths of various important elements work, such as the
``<html>`` element, as well as the window and the screen.
http://www.quirksmode.org/mobile/viewports2.html
How viewports and the widths of various important elements work, such as the
``<html>`` element, as well as the window and the screen.
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
* https://www.css3.info/modules/selector-compat/
Editor support
==============
Emacs::
$ sudo apt-get install css-mode
Graphical editor::
$ sudo apt-get install cssed