Css Intro. Vlad Savitsky

Влад Савицкий
Работаю в

Skype: vlad_savitsky
vlad.savitsky@gmail.com
+38096 530 27 12

CSS
быстрое погружение

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

Что такое CSS?
● CSS (cascading style sheet)
● Позволяет отделить контент от
представления.

selector { property: value }

Почему каскадные?

Каскад в CSS
● Найти все правила, селектор которых подходит для выбора
данного элемента.
● Разделить все объявления из найденных правил на группы
согласно важности и источника:
● важные объявления читателя;
● важные объявления автора;
● обычные объявления автора;
● обычные объявления читателя;
● объявления агента пользователя.
● В пределах групп провести сортировку объявлений по весу.
● При равном весе сортировать по очередности расположения.

Способы
подключения

Внутренние таблицы стилей
<head>
<title><title>
<style type="text/css">
CSS
</style>
</head>
<body>

Внешние таблицы стилей
<head>
<title><title>
<link rel="stylesheet"
type="text/css"href="style.css" />
</head>
<body>

Inline стили
<h1 style="color:red">Это заголовок красного
цвета</h1>

Правила блочной модели
● Элементы обычно прямоугольные.
● Размеры блока определяются:
width, height, padding, borders, and margins.
● Выстота блока равна высоте контейнера,
если она не задана, плюс padding (кроме
случая, если задано свойство float)
● Не плавающие блоки (non-floated)
расширяются до размеров родителя, если
ширина не задана, минус padding.

Что нужно помнить о блоках?
● Если ширина блока “100%”, то он не должен
иметь margin, padding или borders. Иначе
он выйдет за границы родителя (overflow).
● Вертикальные margin схлопываются
(дальше).
● Относительно или абсолютно
спозицированные элементы ведут себя по
разному.

Правила и селекторы

Привязка к id элемента
<p id="pink">Текст параграфа с
идентификатором (id).</p>

p#pink {
сolor: pink;
}

Привязка к классу
<p class="pink">Абзац с классом (class)
pink</p>
<p class="pink">Абзац с классом (class)
pink</p>

p.pink {
сolor: pink;
}

Группировка селекторов
h1, h2, h3 {
сolor: green;
}

Наследование в CSS
<div class="green">Этот <span>текст</span>
будет зеленым</div>

.green {
color: green;
}

Наследование и стили браузера
<div class="green">Тут идет текст и <a
href="#">ссылка</a></div>

.green a,
.green {
color: green;
}

Вес правил (специфичность)
<div class="green"><span>Текст
черный</span> Этот текст будет зеленым</div>

* {color: #000;}
.green {color: green;}

Как подсчитать вес?
● каждый присутствующий в селекторе id: +4
● класс, псевдокласс или атрибут: +2
● элемент или псевдоэлемент: +1
● универсальный селектор и комбинаторы не
учитываются.

Пример правил и их вес
● p {/* 1 */}
● div p {/* 2 */}
● p.note {/* 3 */}
● form.feedbackForm input[type="text"] {/* 4 */}
● #conten a:hover {/* 7 */}

Объявление !important
div {
color: #00f !important; /* важное объявление -
сразу победа! */
}

Кроссбраузерность

Кроссбраузерность
● Свойство сайта отображаться и работать во
всех популярных браузерах идентично.

Reset CSS
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blo
ckquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,str
ong,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;}

Условные комментарии IE

Хаки для Internet Explorer
.class {
width:200px; /* All browsers */
*width:250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}

Только Опера
@media all and (min-width: 0px){
.classname {}
}

Только Сафари
html:lang(en)>body .classname {}

Только Google Chrome
body:nth-of-type(1) p{
color: #333333;
}

Определение браузера из PHP
● Browser Detect class
http://www.phpclasses.org/browse/package/2827.html

Определиние бразуера
из JQuery
● browserdetect.js Jquery plugin.

<body class="browserFirefox3">

Полезные ссылки
● 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/

Css Intro. Vlad Savitsky

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Css Intro. Vlad Savitsky

Similar to Css Intro. Vlad Savitsky (20)

More from Vlad Savitsky

More from Vlad Savitsky (17)

Css Intro. Vlad Savitsky