1 / 45

CSS

CSS. Базовые знания. Знания о CSS. Справочные знания CSS работает в соответствии со спецификацией Хаки В разных браузерах (версиях браузеров) необходимо определить одинаковое отображение. button { cursor : pointer ; // cursor : hand ; }. Синтаксис. _ selector _ {

hisoki
Télécharger la présentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Базовые знания

  2. Знания о CSS • Справочные знания CSS работает в соответствии со спецификацией • Хаки В разных браузерах (версиях браузеров) необходимо определить одинаковое отображение button{ cursor:pointer; // cursor:hand; }

  3. Синтаксис _selector_{ _name1_: _value1_; _name2_:_value2_; ... } • _selector_ - описывает набор элементов которым будут назначены свойства • _name_ - название свойства • _value_ - значение свойства

  4. Комментарии в CSS • Многострочный /* */ Работает везде • Однострочный // Работает не везде /* TODO: причесать */ h1{color:red; padding:10px; margin:0;background:blue } button{ cursor:pointer; // cursor:hand; }

  5. Селекторы

  6. Выбор по тегу • Type selector span{ color:red; }

  7. Выбор элемента по id • ID selector #title{ color:red; }

  8. Выбор элемента по атрибуту class • Class selector .title{ color:red; } .link.current{ font-weight:bold; }

  9. Выбор всех элементов • Universal selector • * { • font-size:100%; • }

  10. Выбор по атрибуту • Attribute selector a[href]{ color:red; } input[id][type="button"]{ color:green; }

  11. Группировка селекторов h1, p,span{ color:green; } .kvadratish, .praktish,.gut{ color:green; }

  12. Сложный селектор td.header_search_wrapperform#search a[href]{ border:3pxred; }

  13. Вес селектора • Определяется четырьмя числами – (a, b, c, d) Для сложного селектора числа весов складываются соответственно <spanstyle="color: red"> <!-- 1,0,0,0 --> #foo{}/* 0,1,0,0 */ .bar{}/* 0,0,1,0 */ span[id=foo]{}/* 0,0,1,0 */ span{}/* 0,0,0,1 */ *{}/* 0,0,0,0 */

  14. Вес селектора • Посчитать вес селектора <style> • td.header_search_wrapperform#search a[href]{ border:3pxred; } </style>

  15. Комбинаторы

  16. Выбор по родителю • Descended combinator <style> divspan{ text-decoration:underline } </style> <div> <span>Span 1.</span> <strong> <span>Span 2.</span> </strong> </div> <span>Span 3.</span>

  17. Выбор по прямому родителю • Child combinator <style> div>span{ text-decoration:underline } </style> <div> <span>Span 1.</span> <strong> <span>Span 2.</span> </strong> </div> <span>Span 3.</span>

  18. Выбор по соседу • Ajucted sibling combinator <style> strong+span{ text-decoration:underline } </style> <div> <span>Span 1.</span> <strong> <span>Span 2.</span> </strong> <span>Span 2.5</span> </div> <span>Span 3.</span>

  19. Выбор по предшественнику • General sibling combinator <style> h2 ~ p { text-decoration:underline } </style> <h2>Title</h2> <h3>Subtitle</h3> <p>Para 1.</p> <p>Para 2.</p>

  20. Псевдо-классы

  21. Псевдо-класы • Link & user action pseudo-classes В старых версия IE работает только для элементов <a>, в новых браузерах :hover работает для всех элементов DOM a:link {color:blue;}/*не посещённая ссылка*/ a:visited {color:purple;}/*посещённая*/ a:active {font-weight:bold;}/*При нажатии на ссылку*/ a:hover {color:red;}/*При наведении*/ a:focus {outline:none;}/*При установленном фокусе*/

  22. Псевдо-классы • Structural pseudo-classes Назначение стиля отображения в зависимости от положения элемента в DOM :first-child :last-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) ... http://htmlbook.ru/css

  23. Псевдо-классы • UI element state pseudo-classes Для задания стиля отображение для пользовательских элементов управления :checked :enabled :disabled

  24. Пример • Пример использования :disabled <!DOCTYPE html> <head> <meta charset="utf-8"> <title>disabled</title> <style> textarea:disabled{ background:url(images/dline.png); border:1pxsolid#666; padding:5px; } </style> </head> <body> <form><p><textarea disabled cols="30" rows="5">Это заблокированное поле, в него нельзя ничего писать</textarea></p> </form> </body> </html>

  25. Псевдо элементы

  26. Псевдо-элементы • Создают дополнительные DOM элементы ::after ::before ::first-letter ::first-line ::selection

  27. Псевдо-элементы <a href="//maps.yandex.ru"target="_blank">Карты</a> <style> • a[target="_blank"] ::after{ position:absolute; margin-left: 0.5em; content:' ⇱'; transform:rotate(90deg); } </style>

  28. Свойства

  29. Свойства • Пример /* селектор { свойство1: значение; свойство2: значение; } */ • * { • font-size:100%; • }

  30. Свойства • Свойства могут иметь разную форму записи /* короткая запись */ ul{margin:0} /* 0 0 0 0 */ ul{margin:0 1em } /* 0 1em 0 1em */ ul{margin:0 1em 2em }/* 0 1em 2em 1em */ ul{margin:0 1em 2em 3em } /* полная запись */ ul{ margin-left: 3em; margin-right: 1em; }

  31. Свойства • Форма записи для свойства font /* короткая запись */ body{ font:bold 12px/14px sans-serif } /* полная запись */ body{ font-weight:bold; font-size: 12px; line-height: 14px; font-family:sans-serif; }

  32. Свойства • Форма записи для свойства background /* короткая запись */ background:url(img.png)#888 repeat-y topleftfixed; /* Полная запись */ background-image:url(img.png); background-color:#888; background-repeat:repeat-y; background-position:topleft; background-attachment:fixed;

  33. Свойства • Единицы измерения: относительные (%), абсолютные (px, pt), контекстно зависимые (em) • Значения могут быть заданы через запятую в порядки убывания приоритета width:100%;/* px, pt, em */ font-size:100%;/* px, pt, em */ font-family:Courier, "LucidaConsole", monospace;

  34. Свойства • Задание цвета отображения color:red;/* keyword */ color:#ff0000;/* rgbhex */ color:#f00;/* shortrgbhex */ color:rgb(255,0,0);/* rgbdec */ color:rgba(255,0,0,0.5);/* rgbdecwithalpha */ color:hsl(0,100%,100%);/* hue, saturation, lightness */ color:hsla(0,100%,100%,0.5);/* hslwithalpha */

  35. Свойства • Вендорные префиксы Используются для задания специальных свойств от производителей разных браузеров -webkit-border-radius:10px; -khtml-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px;

  36. Правила

  37. Правила • @import — внешний файл • @media — определенный тип устройств • @charset — кодировка документы • @font-face— описывает шрифт документа • @namespace — пространство имён документа • !important— приоритет стиля в CSS

  38. Правила • @import – правило позволяет вставлять один файл стилей в другой Может использоваться только в начале файла стилей до объявления других правил <styletyle="text/css"> <!- @import "mystyle.css"; или @importurl("mystyle.css"); ....другие правила CSS..... --> </style>

  39. Правила • @media – позволяет завязать отображение на тип устройства или некоторые другие физические параметры отображения /* @mediamedia-typeslist-of-media-queries { ... } */ @mediascreen { body { font-size: 10pt } } @mediascreen, print { body { font-size: 13px } } @mediascreenand (max-width: 960) { ... } @mediaalland (orientation: portrait) { ... }

  40. Правила • @charset – позволяет установить кодировку CSS документа <styletyle="text/css"> <!– @charset "iso-8859-1" ......другие правила CSS..... --> </style>

  41. Правила • !important – позволяет управлять значением перекрывающихся свойств в браузере <styletyle="text/css"> <!– p {color:#ff0000;} p {color:#000000;} --> </style> <styletyle="text/css"> <!– p {color:#ff0000 !important;} p {color:#000000;} --> </style>

  42. Полезные ссылки • http://prefixr.com/index.phpдобавляет венторные префиксы к свойствам css • http://colorzilla.com/gradient-editor/строит градиент для фона • http://gradientfinder.com/ снова градиенты • http://www.fontsquirrel.com содержит большое количество специфических шрифтов • http://webcodertools.com конвертирует картинки в base64

  43. Фреймворки • HTML5 Boilerplate • Twitter Bootstrap • Foundation • 960 Grid System

  44. Ещё Препроцессоры Оптимизаторы CSSO YUI Compressor • LESS • Sass • Stylus • BOSS

  45. Справочники w3.orgсправочник стандартов (must read) developer.mozilla.org msdn.microsoft.com caniuse.com полная информация с какой версии и что можно использовать по CSS HTML и JS html5please.com содержит информацию о поддержке тегов HTML5 и свойств CSS3 в разных браузерах

More Related