Теги и атрибуты оформления

Теги и атрибуты оформления

Куча проблем: захламляется HTML-разметка, многократно дублируется один и

CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы* стилей) — язык описания внешнего вида

Теги и атрибуты оформления CSS

CSS отвечает за такие аспекты

Внешний вид элемента (цвет, шрифт, прозрачность

Синтаксис CSS

div { color: red; font-size: 16pt; }

CSS селектор, говорит к

Как использовать стили?

style=“”

style=“”

mystyle.css

…

CSS. Внешний вид элемента (тега)

???

CSS. Внешний вид элемента (тега)

Консоль разработчика, инспектор объектов

Консоль разработчика, инспектор объектов

CSS. Каскадирование

???

CSS. Каскадирование

CSS. Размеры элемента (тега)

???

CSS. Размеры элемента (тега)

CSS. Размеры элемента (тега)

padding: 10px;

margin: 10px;

body {
padding: 0;
margin: 0;
}

У документа

CSS. Размеры элемента (тега)

CSS box model

CSS. Размеры элемента (тега)

margin: 10px;

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

Отступы

padding: 5px; +
padding: 0px; +
padding: 5; -
padding: 0; +

CSS. Размерности

CSS. Единицы измерения

vw (viewport width) — 1 процент от ширины

CSS. Цвет

http://www.colorpicker.com

CSS. Цвет

CSS. Позиция элемента на странице

???

В принципе, браузер сам занимается определением

CSS. Позиция элемента на странице

CSS. Позиция элемента на странице

position: relative – задаёт расположение элемента

CSS. Позиция элемента на странице

position: absolute – задаёт расположение элемента

CSS. Позиция элемента на странице

position: fixed – также фиксирует элемент

Селекторы CSS

Селекторы CSS

CSS селекторы применяются для того, чтобы была возможность сказать: «к

Селекторы CSS и атрибут class

HTML-атрибут class позволяет выделить один (или несколько)

Использование нескольких классов.
Переопределение.

Элемент может содержать множество классов, стили описанные в

#paragraph1 {
padding-left: 10px;
}

Правило будет применяться ко всем элементам (тегам),

Комбинированный селектор

Селектор может содержать более одного условия, такие селекторы называют «комбинированными».

.name1 {
padding-left: 10px;
}

#btn1 {
color: red;
}

К

#news p {
color: blue;
}

Правило применяется для тегов p, которые

h1 span {
color: blue;
}

Правило применяется для элементов span, которые

ul + p {
  color: red;
}

Это соседний селектор. Он поможет нам выбрать

#container > ul {
border: 1px solid black;
}

Разница между селекторами X Y

a[title] {
  color: green;
}

Это селектор атрибутов. Он выберет только те ссылки, у

a[href="http://itc.ua"] {
color: #1f6053;
}

Указанный выше код выберет все ссылки, указывающие на

[type="button"] {
background-color: green;
}

Седьмое правило применяется для всех элементов, у

div:not(#container) {
  color: blue;
}

Селектор с отрицанием бывает очень полезен. Представьте, что вам

p:nth-child(odd) {
background: #ff0000;
}
p:nth-child(even) {
background: #0000ff;
}

text 1

text 2

text 3

text 4

text

Адаптивный дизайн

Адаптивный дизайн и CSS

Применяются т.н. медиазапросы (media query). Которые позволят указать,

Когда ширина минимум 800 пикселей.

Когда ширина максимум
800пикселей.

Адаптивный дизайн и CSS

Домашнее задание

http://www.w3schools.com/css/default.asp

W3School CSS Tutorial

http://code.tutsplus.com/ru/tutorials/the-30-css-selectors-you-must-memorize--net-16048

30 CSS селекторов, которые точно понадобятся

Узнать о:

Псевдоклассах;

http://caniuse.com/ - сервисе который знает в какому браузере какое css