Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Основы CSS (HTML5 тема 02 - основы CSS)

175 views

Published on

Основы CSS
https://university.noveogroup.ru

Published in: Education
  • Be the first to comment

Основы CSS (HTML5 тема 02 - основы CSS)

  1. 1. Основы CSS Стажировка HTML5 Света Шарипова
  2. 2. Способы подключения стилей 1. Подключение стилей в отдельном документе <head> <link rel="stylesheet" href="main.css"> </head> 2. Подключение стилей в <head> <head> <style> ... </style> </head>
  3. 3. Способы подключения стилей 3. Инлайн-стили: <div style="height: 300px;"></div> 4. Импорт стилей внутри документа .css @import "newstyles.css";
  4. 4. Селекторы Селектор тега: p { ... } Селектор класса: .class { ... } Селектор индентификатора: #id { ... } Селектор атрибута: [data-title=”...”] { ... } Селектор псевдокласса: :hover { ... } Селектор псевдоэлемента: ::before { ... } Универсальный селектор: * { ... }
  5. 5. Комбинирование селекторов Все <div class=”wrapper”> div.wrapper { ... } Только <div id=”modal”> div#modal { ... } Все <a>, имеющие атрибут title a[title] { ... } Все <a>, атрибут title которых содержит слово show a[title*=”show”] { ... } Все <a>, title которых содержит show, отделенное пробелом a[title~=”show”] { ... } Все <a>, title которых начинается с show a[title^=”show”] { ... } Все <a>, title которых заканчивается на show a[title$=”show”] { ... } Все <a>, при наведении на них курсора a:hover { ... } Псевдоэлемент, являющийся первым потомком <a> a::before { ... }
  6. 6. Комбинирование селекторов Все <p>, все <div>: div, p { ... } Все <p>, являющиеся потомками <div>: div p { ... } Все <p>, являющиеся прямыми потомками <div>: div > p { ... } Все потомки <div>: div * { ... } Все прямыe потомки <div>: div > * { ... } Каждый <p>, следующий сразу после <div>: div + p { ... } Все <p>, после <div>: div ~ p { ... }
  7. 7. Каскад и специфичность При одинаковой специфичности, правило, которое находится ниже, переопределяет все предыдущие: p { color: red; } p { color: blue; } <link rel="stylesheet" href="main.css"> <style> p {color: red;} </style> <link rel="stylesheet" href="main2.css">
  8. 8. Какого цвета текст в <p>? <html> <head>...</head> <body> <div> <p class="text"> Lorem </p> </div> </body> </html> .text { color: blue;} html body div p { color: red;}
  9. 9. Расчет специфичности
  10. 10. Расчет специфичности Универсальный селектор * 0,0,0,0 Псевдокласс :not 0,0,0,0 Элемент, например p 0,0,0,1 Псевдоэлемент, например ::before 0,0,0,1 Класс, например .wrapper 0,0,1,0 Другой псевдокласс, например :hover 0,0,1,0 Атрибут, например [title] или [title=”show”] или [title*=”show”] или [title~=”show”] или [title^=”show”] или [title$=”show”] 0,0,1,0 ID, например #modal 0,1,0,0 Инлайн-стиль <style></style> 1,0,0,0 !important 1,0,0,0,0
  11. 11. Пример правила CSS Reset html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
  12. 12. Пример правил CSS Normalize html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } body { margin: 0; }
  13. 13. Псевдоэлементы ::after ::before ::first-letter ::first-line - плохая поддержка, много багов ::selection - нет поддержки на iOS ::backdrop - плохая поддержка
  14. 14. Псевдоэлементы ::after и ::before <div class="block__element">Some text</div> .block__element::before { content: “Pseudo “; color: #f1652a; } .block__element::after { content: ””; display: inline-block; width: 20px; height: 20px; background: #f1652a; }
  15. 15. Псевдоэлементы ::after и ::before Отсутствует свойство content Применяется свойство display: none
  16. 16. Псевдоэлемент ::first-letter <div class="block__element">Some text</div> .block__element::first-letter{ color: #f1652a; font-size: 2em; }
  17. 17. Псевдоклассы Плохая поддержка: :default :dir() :fullscreen :indeterminate :left :read-only :read-write :right :scope
  18. 18. Псевдоклассы состояния :active :focus :hover :visited - только для ссылок :link - только для ссылок Порядок, чтобы избежать переопределения: :link — :visited — :hover — :active.
  19. 19. Псевдоклассы для стилизации форм :checked :disabled :enabled :in-range - плохая поддержка :out-of-range - плохая поддержка Псевдоклассы валидации (частичная поддержка, IE10+) :invalid :optional :required :valid
  20. 20. Псевдоклассы порядка элементов :first-child :first-of-type :last-child :last-of-type :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type
  21. 21. Псевдоклассы порядка элементов :first-child и :first-of-type <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__element">Text</span> <a class="block__element">Link</a> </div> .block__element:first-of-type { color: red; }
  22. 22. Псевдоклассы порядка элементов :first-child и :first-of-type <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__element">Text</span> <a class="block__element">Link</a> </div> .block__element:first-child { color: red; }
  23. 23. Псевдоклассы порядка элементов :last-child и :last-of-type <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__element">Text</span> <a class="block__element">Link</a> </div> .block__element:last-of-type { color: red; }
  24. 24. Псевдоклассы порядка элементов :last-child и :last-of-type <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__element">Text</span> <a class="block__element">Link</a> </div> .block__element:last-child { color: red; }
  25. 25. Псевдоклассы порядка элементов :only-child и :only-of-type <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__element">Text</span> <a class="block__element">Link</a> </div> <div class="block"> <a class="block__element">Link</a> </div> .block__element:only-child { color: red; }
  26. 26. Псевдоклассы порядка элементов :only-child и :only-of-type <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> </div> <div class="block"> <span class="block__element">Link</span> <span class="block__other-element">Link</span> </div> .block__other-element:only-of-type { color: red; }
  27. 27. <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> </div> .block__element:nth-child(2) { color: red; } .block__element:nth-child(2n) { color: red; } Из всех потомков выбирает второго. Стили применяются, если у выбранного потомка есть класс block__element Из всех потомков выбирает каждого второго. Стили применяются, если у выбранного потомка есть класс block__element Псевдоклассы :nth-child() и :nth-of-type()
  28. 28. <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> </div> .block__other-element:nth-child(3n) { color: red; } .block__element:nth-child(3n+1) { color: red; } Из всех потомков выбирает каждого третьего. Стили применяются, если у выбранного потомка есть класс block__other-element Начиная с первого потомка, выбирает из всех каждого третьего. Стили применяются, если у выбранного потомка есть класс block__element Псевдоклассы :nth-child() и :nth-of-type()
  29. 29. Из всех потомков выбирает нечетные. Стили применяются, если у выбранного потомка есть класс block__element Из всех потомков выбирает четные. Стили применяются, если у выбранного потомка есть класс block__element <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> </div> .block__element:nth-child(odd) { color: red; } .block__element:nth-child(even) { color: red; } Псевдоклассы :nth-child() и :nth-of-type()
  30. 30. <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> <span class="block__other-element">Text</span> </div> .block__element:nth-child(3) { color: red; } .block__element:nth-of-type(3) { color: red; } Псевдоклассы :nth-child() и :nth-of-type() Из всех потомков выбирает третьего. Стили применяются, если у выбранного потомка есть класс block__element Так как block__element - это тег <a>, выбирает третьего потомка среди потомков с тегом <a>. Стили применяются, если у выбранного потомка есть класс block__element
  31. 31. Псевдоклассы порядка элементов :nth-last-child() и :nth-last-of-type() <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> <a class="block__element">Link</a> </div> .block__element:nth-last-child (3n) { color: red; } Счет начинается с конца. Выбирает каждого третьего потомка. Стили применяются, если у выбранного потомка есть класс block__element. Так как <span> имеет другой класс, его цвет не изменяется
  32. 32. Псевдоклассы порядка элементов :nth-last-child() и :nth-last-of-type() <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> <a class="block__element">Link</a> </div> .block__other-element:nth-last-child (4) { color: red; } Счет начинается с конца. Выбирает четвертого потомка. Стили применяются, если у выбранного потомка есть класс block__other-element.
  33. 33. Псевдоклассы порядка элементов :nth-last-child() и :nth-last-of-type() <div class="block"> <a class="block__element">Link</a> <a class="block__element">Link</a> <a class="block__element">Link</a> <span class="block__other-element">Text</span> <a class="block__element">Link</a> <a class="block__element">Link</a> </div> .block__element:nth-last-of-type(3) { color: red; } Счет начинается с конца. Так как block__element - это тег <a>, выбирает третьего потомка среди потомков с тегом <a>. Стили применяются, если у выбранного потомка есть класс block__element
  34. 34. Другие псевдоклассы :empty - выбирает пустые теги :not() - выбирает теги за исключением тегов с селектором в скобках :lang() - выбирает теги по указанному языку :root = html, но специфичность выше :target - используется для стилизации цели “якоря”
  35. 35. Другие псевдоклассы - :empty <div class="block"> <div class="block__element">This is element</div> </div> <div class="block">This is block</div> <div class="block"></div> .block { width: 100px; height: 50px; } .block:empty { background: orange; }
  36. 36. Другие псевдоклассы - :not() <div class="block"> <div class="block__element">This is element</div> </div> <div class="block">This is block</div> <div class="block"></div> .block { width: 100px; height: 50px; } .block:not(:empty) { background: orange; }
  37. 37. Другие псевдоклассы - :lang() <html lang="ru"> <head></head> <body> <div class="block"> <div class="block__element">Какой-то текст</div> <div lang="en" class="block__element">Other text</div> </div> </body> </html> .block__element:lang(ru) { color: blue; } .block__element:lang(en) { color: green; }
  38. 38. Другие псевдоклассы - :target <a href="#mainInfo">Link to target</a> <div id="mainInfo" class="block">This is target block</div> <div class="block">This is block</div> .block:target{ color: blue; }
  39. 39. BEM
  40. 40. BEM <div class="block"> <div class="block__element"></div> <div class="block__element block__element--modifier"></div> </div>
  41. 41. BEM <div class="block"> <div class="block__element"> <div class="block__element__element"> </div> </div> </div> <div class="block"> <div class="block__element"> <div class="other-block"> </div> </div> </div>
  42. 42. Полезные ссылки Reset: http://meyerweb.com/eric/tools/css/reset/ Normalize: http://necolas.github.io/normalize.css/ BEM: https://ru.bem.info/method/naming-convention/ https://css-tricks.com/bem-101/

×