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 Intro. Vlad Savitsky

1,164 views

Published on

Что такое CSS?
Что такое каскадность?
Как подключаются стили?
Блочная модель.
Правила и селекторы.
Наследование правил CSS.
Как вычисляется вес правил?
Кроссбраузерность.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Css Intro. Vlad Savitsky

  1. 1. Влад Савицкий Работаю в Skype: vlad_savitsky vlad.savitsky@gmail.com +38096 530 27 12
  2. 2. CSSбыстрое погружение
  3. 3. План● Что такое CSS?● Каскадность.● Подключение.● Блочная модель.● Правила и селекторы.● Наследование.● Вес правил.● Кроссбраузерность.
  4. 4. Что такое CSS?● CSS (cascading style sheet)● Позволяет отделить контент от представления. selector { property: value }
  5. 5. HTML, CSS, JavaScript
  6. 6. Каскадность
  7. 7. Почему каскадные?
  8. 8. Каскад в CSS● Найти все правила, селектор которых подходит для выбора данного элемента.● Разделить все объявления из найденных правил на группы согласно важности и источника: ● важные объявления читателя; ● важные объявления автора; ● обычные объявления автора; ● обычные объявления читателя; ● объявления агента пользователя.● В пределах групп провести сортировку объявлений по весу.● При равном весе сортировать по очередности расположения.
  9. 9. Способыподключения
  10. 10. Внутренние таблицы стилей<head> <title><title> <style type="text/css"> CSS </style></head><body>
  11. 11. Внешние таблицы стилей<head> <title><title> <link rel="stylesheet" type="text/css"href="style.css" /></head><body>
  12. 12. Inline стили<h1 style="color:red">Это заголовок красногоцвета</h1>
  13. 13. Блочная модель
  14. 14. Правила блочной модели● Элементы обычно прямоугольные.● Размеры блока определяются: width, height, padding, borders, and margins.● Выстота блока равна высоте контейнера, если она не задана, плюс padding (кроме случая, если задано свойство float)● Не плавающие блоки (non-floated) расширяются до размеров родителя, если ширина не задана, минус padding.
  15. 15. Что нужно помнить о блоках?● Если ширина блока “100%”, то он не должен иметь margin, padding или borders. Иначе он выйдет за границы родителя (overflow).● Вертикальные margin схлопываются (дальше).● Относительно или абсолютно спозицированные элементы ведут себя по разному.
  16. 16. Правила и селекторы
  17. 17. Привязка к id элемента<p id="pink">Текст параграфа сидентификатором (id).</p>p#pink { сolor: pink;}
  18. 18. Привязка к классу<p class="pink">Абзац с классом (class)pink</p><p class="pink">Абзац с классом (class)pink</p>p.pink { сolor: pink;}
  19. 19. Группировка селекторовh1, h2, h3 { сolor: green;}
  20. 20. Наследование в CSS<div class="green">Этот <span>текст</span>будет зеленым</div>.green { color: green;}
  21. 21. Наследование и стили браузера<div class="green">Тут идет текст и <ahref="#">ссылка</a></div>.green a,.green { color: green;}
  22. 22. Вес правил (специфичность)<div class="green"><span>Текстчерный</span> Этот текст будет зеленым</div>* {color: #000;}.green {color: green;}
  23. 23. Вес правил
  24. 24. Как подсчитать вес?● каждый присутствующий в селекторе id: +4● класс, псевдокласс или атрибут: +2● элемент или псевдоэлемент: +1● универсальный селектор и комбинаторы не учитываются.
  25. 25. Пример правил и их вес● p {/* 1 */}● div p {/* 2 */}● p.note {/* 3 */}● form.feedbackForm input[type="text"] {/* 4 */}● #conten a:hover {/* 7 */}
  26. 26. Объявление !importantdiv {color: #00f !important; /* важное объявление -сразу победа! */}
  27. 27. Кроссбраузерность
  28. 28. Кроссбраузерность● Свойство сайта отображаться и работать во всех популярных браузерах идентично.
  29. 29. Reset CSShtml,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}ul,ol {list-style:none;}fieldset,img,hr {border:none;}caption,th {text-align:left;}table {border-collapse:collapse; border-spacing:0;}td {vertical-align:top;}
  30. 30. Условные комментарии IE<!--[if IE6]> <link href="ie.css" rel="stylesheet"type="text/css" /><![endif]-->
  31. 31. Хаки для Internet Explorer.class { width:200px; /* All browsers */ *width:250px; /* IE */ _width:300px; /* IE6 */ .width:200px; /* IE7 */}
  32. 32. Только Опера@media all and (min-width: 0px){ .classname {}}
  33. 33. Только Сафариhtml:lang(en)>body .classname {}
  34. 34. Только Google Chromebody:nth-of-type(1) p{ color: #333333;}
  35. 35. Определение браузера из PHP● Browser Detect class http://www.phpclasses.org/browse/package/2827.html
  36. 36. Определиние бразуера из JQuery● browserdetect.js Jquery plugin.<body class="browserFirefox3">
  37. 37. Полезные ссылки● http://www.xiper.net/learn/css/● http://www.w3.org/Style/CSS/● http://htmlbook.ru/css/● http://www.w3schools.com/css/● http://www.alistapart.com/articles● http://css-tricks.com/
  38. 38. Вопросы

×