.. -*- coding: utf-8; -*-===== CSS=====.. contents:: :local:CSS specification=================Starting from CSS level 2 specification splited into individual modules. Eachmodule 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.htmlAdding 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 berewritten 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 syntaxdoesn'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 precedingwhite spaces, should use double quotes and exactly one space between keyword andcharset:: @charset "UTF-8";UTF BOM have precedence over ``@charset``.Another source of encoding is HTTP header ``Content-Type`` that have highestprecedence:: Content-Type: text/css; charset=utf-8Using ``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/#selectorsCSS import statement====================Any ``@import`` rules must precede all other at-rules and style rules in a stylesheet (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 responsivenessViewport========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-modeGraphical editor:: $ sudo apt-get install cssed