Css Intro. Vlad Savitsky

998 views
912 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
998
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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. Вопросы

×