Theme18_css

Можна призначити стиль заданому тегу з заданим класом.
Приклад:
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Стиль не діє</h1>
<p class="center">Стиль діє</p>
<p>Стиль не діє<p>
</body>

Елемент (тег) може мати кілька класів.
Приклад:
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Заголовок без стилю</h1>
<p class="center">Червоний відцентрований абзац</p>
<p class="center large">Червоний відцентрований абзац з
великим шрифтом</p>
</body>

Групування селекторів
Приклад:
h1, h2, p {
text-align: center;
color: red;
}
Основні одиниці:
Відносні: %, px, em, ex
Абсолютні: in, cm, mm, pt (=1/12in).

CSS кольори
Способи призначення кольорів:
• Валідне ім’я кольору: red, purple, olive…
• RGB-величина: rgb(255, 0, 0), rgb(100%,
20%, 20%).
• Шістнадцяткове значення: #ff0000,
#fe0(=#ffee00)

Задача 73.0
Встановіть для усіх абзаців червоний колір тексту.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Перший абзац.</p>
<p>Другий абзац.</p>
</body>
</html>

Розв’язок
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Перший абзац.</p>
<p>Другий абзац.</p>
</body>
</html>

Задача 73.1
У попередній задачі призначте першому абзацу
id="par1" і зробіть його синім.
Додайте
<p>Третій абзац.</p>
Призначте клас greentext для 2-го й 3-го абзаців
і зробіть їх зеленими.
Додайте
<h2>Підзаголовок</h2>
Зробіть заголовок і підзаголовок жовтими.
Використайте групування для мінімізації коду.

Розв’язок
<style>
h1, h2 {
color: yellow;
}
p {
color: red;
}
#par1 {
color: blue;
}
.greentext {
color: green;
}
</style>
</head>
<body>
<h2>Підзаголовок</h2>
<p id="par1" >Перший абзац.</p>
<p class="greentext">Другий абзац.</p>
<p class="greentext">Третій абзац.</p>
</body>

Задача 73.2
Додайте до попереднього завдання
зовнішній стильовий файл
mystyle.css.
У ньому зробіть розмір тексту (font-
size) усіх абзаців на 50% більшим.

Розв’язок
У html-файлі:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
У mystyle.css:
p {
font-size: 150%;
}

Адреси у CSS
Приклад:
<style>
body {
background:
url('http://somesite.com/images/bg1.png');
}
div {
background: url(images/bg2.png) no-repeat;
}
</style>
Можна використовувати одинарні чи подвійні лапки,
можна й без лапок.

Контекстні селектори
Можна призначити стиль для <tag2>, якщо він є
вкладеним у <tag1>. Синтаксис:
tag1 tag2 { ... }
Приклад:
<head>
<style>
P B {
font-family: Times, serif; /* Сімейство шрифта */
color: navy; /* Синій колір тексту */
}
</style>
</head>
<body>
<div><b>Жирний текст</b></div>
<p><b>Жирний і кольоровий текст</b></p>
</body>

Дочірні селектори
Дочірнім є елемент, який безпосередньо міститься
всередині батьківського елемента.
Синтаксис для стилю:
selector1 > selector2 { … }
Приклад:
<style>
DIV > B {
color: navy; /* Синій колір тексту */
}
</style>
</head>
<body>
<div>
<b>Жирний і кольоровий текст</b>
<p><b>Жирний текст</b></p>
</div>
</body>

Фон
Колір фону. Приклади:
div {
background-color: lightblue;
}
h1 {
background-color: #FF6600;
}
p {
background-color: rgb(255,0,0);
}

Фонове зображення:
body {
background-image: url("tile.gif");
}
Параметри фонового зображення:
background-repeat: repeat-x; -
повторювання по горизонталі;
background-repeat: repeat-y; -
повторювання по вертикалі;
background-repeat: no-repeat; - без
повторювання;
background-position: right top; -
положення фону;
background-attachment: fixed; - фон не
прокручується.

Короткий спосіб призначення фону:
body {
background: #ffffff
url("img_tree.png") no-repeat right
top;
}
Порядок значень:
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
Будь-яке зі значень можна опустити.

Задача 74.0
Відкрийте будь-яку свою html-сторінку і
призначте:
фоновий колір lightblue;
будь-яке фонове зображення розміром
100х100px;
повторення – по горизонталі.

Задача 74.1
Змініть параметри фону так, щоб фонова
картинка була у правому верхньому кутку,
фіксована.
Перепишіть призначення стилю у стислу
форму.

Границі
border-style:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid
double;}

Ширина границі:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-width: 2px 10px 4px 20px;
}

Колір границі:
border-color – так само як для фону.
Стилі для окремих сторін границі:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Скорочений стиль:
p {
border: 5px solid red;
}

Заокруглені кути:
p {
border: 2px solid red;
border-radius: 5px;
}
Задача 75
Створіть на сторінці DIV з синьою
пунктирною границею товщиною 5px.

margin
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
або
margin: 100px 150px 100px 80px;
або
margin: 100px 150px; (верх-низ по 100px,
боки по 150px)
або
margin: 100px; (всі по 100px)
margin: auto; - центрування по горизонталі

padding
Аналогічно до margin, крім відсутнього auto.
Задача 76
Створіть на сторінці абзац з полями по 20px,
відступом зліва – 30px, решта відступів по
15px.

Ширина і висота
Приклад:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
max-width – максимальна ширина
елемента.
min-width – мінімальна ширина.
Аналогічно – height.

Блочна модель у CSS
HTML-елементи можна розглядати як
блоки (бокси). Це виглядає приблизно
так:

Приклад:
div {
width: 300px;
border: 20px solid green;
padding: 25px;
margin: 10px;
background-color: #F0F;
}
Загальна ширина = width + padding-left
+ padding- right + border-left +
border-right + margin-left + margin-
right
Аналогічно – висота.
У прикладі загальна ширина =
300+25+25+20+20+10+10 = 410px.

Задача 77
Створіть сторінку block.html. У ній в блоці
DIV розмістіть абзац тексту (можна взяти
з uk.lorem-ipsum.info/).
Задайте:
ширину блоку 200px;
підкладку (padding) 25px;
рамку 20px solid navy;
поля (margin) 15px.

Theme18_css

Recommended

Recommended

More Related Content

More from Олег Вілігурський

More from Олег Вілігурський (20)

Recently uploaded

Recently uploaded (10)

Theme18_css