Урок 3 - Презентация

class

.is_border {

border: 1px solid #000;

}

<h1 class=“is_border”>

Заголовок с рамкой </h1>

<p class=“is_border”> параграф с рамкой

</p>

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

img[title]{

width: 200px;

}

input[type=“text”]{ font-size: 18px;

}

<img src=“picture.png” title=“картинка” /> <input type=“text” />

Основные свойства стилей

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

Относительные

•px - пиксел

•% - процент

•em – высота текущего шрифта

•ex – высота буквы х

Абсолютные

•cm - сантиметр

•mm – миллиметр

•in - дюйм

•pt - пункт

•pc - пика

Цвета в CSS

• Именованные

red, green, blue, black, yellow, white …

• Функциональные RGB

• Шестнадцатиричные RGB

background – фон элемента

•background-color: #ff0;

•background-image: url(img/foto.jpg);

•background-position: top; (bottom | left | right)

•background-repeat: repeat-x; (repeat-y | no-repeat)

•background-attachment: fixed;

background: #ff0 url(img/foto.jpg) top repeat-x;

border - рамка

•border-color: red; (#f00 | RGB(255, 0, 0))

•border-style: solid; (dotted | solid | double | inset | outset)

•border-width: 2px;

(1px 2px 3px 4px) - 1px: верхняя, 2px: правая, 3px: нижняя, 4px: левая

border: 1px solid black;

border-top: 2px dotted green; border-bottom: 3px double blue; border-left: 1px solid red; border-right: 4px inset #000;