Каскадні таблиці стилів. Позиціонування блоків на WEB сторінці.

Опис документу:
Каскадні таблиці стилів. Будова таблиці стилів. Підключення таблиці стилів на сторінку. Позиціонування блоків на сторінці за допомогою властивостей CSS - position, розмітка сторінки, заснована на плаваючих елементах float.

Відображення документу є орієнтовним і призначене для ознайомлення із змістом, та може відрізнятися від вигляду завантаженого документу. Щоб завантажити документ, прогорніть сторінку до кінця

Перегляд
матеріалу
Отримати код Поділитися

ПРАКТИЧНА РОБОТА.

ТЕМА: Позиціонування блоків на WEB сторінці. Розмітка, заснована на плаваючих елементах.

МЕТА: Опанувати методи розмітки блоків на сторінці та отримати практичні навички позиціонування блоків або об’єктів, використовуючи каскадні таблиці стилів.

Для успішного виконання практичної роботи потрібно згадати:

  • Яким чином таблиці стилів підключаються до сторінки.

  • Яким чином будуються таблиці стилів.

Каскадні таблиці стилів CSS - технологія, яка дозволяє значно розширити можливості HTML.

CSS (Cascading Style Sheets – каскадні таблиці стилів) це технологія, що розширює можливості стильового оформлення Web-сторінок, в порівнянні зі стандартними засобами HTML. Атрибути дескрипторів HTML замінюються властивостями CSS, які дозволяють встановити колір фону і тексту, бордюру, шрифт і інші параметри практично для будь-якого дескриптора CSS.

Підключення стилів на сторінці.

Існує чотири способи підключення CSS до документа:

1. Зв'язування - таблиця стилів розташовується в окремому файлі, який можна підключити до будь-якої кількості HTML сторінок.

<LINK REL = STYLESHEET TYPE = "text / css" HREF = "URL">

2. Впровадження - таблиця стилів розташовується безпосередньо всередині HTML документа.

Якщо Вам потрібно задати стиль тільки для однієї сторінки, то опис стилю Ви можете впровадити в тіло документа, в заголовку HEAD, між тегами

<STYLE TYPE = "text / css"> і </ STYLE>.

3. Вбудовування в теги документа - дозволяє визначити оформлення окремих елементів сторінки.

Ви можете задати стиль окремо обраного елемента в властивості STYLE тега цього елемента, наприклад: <SPAN STYLE = "color: red; background-color: yellow; font-variant: small-caps">

4. Імпорт - дозволяє вбудовувати в документ таблицю стилів, розташовану на сервері.

У тезі <STYLE> можна імпортувати зовнішню таблицю стилів за допомогою властивості @import таблиці стилів:

@import: url (styles.css);

Його слід задавати на початку стильового блоку або яку пов'язують таблиці стилів перед завданням інших правил. Значення властивості @import є URL файлу таблиці стилів.

Будова таблиці стилів.

Таблиці стилів будуються відповідно до визначеного порядку (синтаксису), в іншому випадку вони не можуть нормально працювати. Таблиці стилів складаються з певних частин:

СЕЛЕКТОР {ВЛАСТИВІСТЬ:ЗНАЧЕННЯ}

опис

правило

Селектор (Selector). Селектор – це елемент, до якого будуть застосовуватися призначувані стилі. Це може бути тег, клас або ідентифікатор об'єкта гіпертекстового документа.

Властивість (Property). Властивість визначає одну або декілька характеристик селектора. Властивості задають формат відображення селектора: відступи, шрифти, вирівнювання, розміри і т.д.

Значення (Value). Значення – це фактичні числові або строкові константи, що визначають властивість селектора.

Опис (Declaration). Сукупність властивостей і їх значень.

Правило (Rule). Повний опис стилю (селектор + опис).

В таблиці поданий формат запису та приклади встановлення стилів на сторінці.

Створення стилів на тег

Встановлення стилю на тег

Формат запису

Приклад

Застосування на тег html

тег {стилі}

h1 {color:green; font-style:italic;}

Створення нового стилю

.назва{стилі}

або

#назва{стилі}

.s{font-style:bold;color:red;text-decoration:none}

В html файлі підключити стиль за допомогою параметру class: <p class="s">WEB<br>

або

class: <p id="s">WEB<br>

Застосування стилів на два або більше тегів

Запис тегів через кому{}

h2,p{text-decoration:line-through;}

Застосування нового стилю на тег

Тег.назва{}

p.new2{

font-family:Verdana;

font-size:16 px;

color:black;

font-weight: bold;

font-variant:small-caps;

text-decoration:none;

font-style:italic;

}

В html файлі підключити стиль за допомогою параметру class

<p class="new2">Оформлюємо текст3</p>

Приклади

Стиль на тег input де type="radio"

Не відображати значок radio

input[type="radio"] {

display:none;}

Стиль на список ul в блоку - s

.s ul {

height:100%;

list-style:none;

position:relative;

top:5;

z-index: 6;}

Подія checked При натисненні на радіокнопку

Змінюємо стиль блоку first натиснувши на радіокнопку

.s1:checked ~ .sloi #first

{}

<input type="radio" name="l" class="s1">

Подія checked

.s1:checked ~ . sloi ul li:first-child div,

.s2:checked ~ . sloi ul li:nth-child(2) div,

<input type="radio" name="l" class="s1">

Стиль на список

.sloi ul li{

left:100%;

position:relative;

}

Стиль на label для кнопки id="button1

label[for=button1]{

display: inline-block;

font-size: 20px;

color: #FFE4B5;

text-decoration: none;

padding: .2em .8em;

border-right: 1px solid rgba(13,20,27,.5);

}

<input type="radio" name="v" class="s1" id="button1" value="dkhgdjkfhgjfdhg" />

<label for="button29">Дисципліни</label>

Приклад 1

h1 {color:green; font-style:italic;}

p{font-style:bold;color:red;}

h2,p{text-decoration:line-through;}

Приклад 2

css

.s{font-style:bold;color:red;text-decoration:none}

html

<p class="s">Червоний колір<br>

Приклад 3.

Файл 1.css

a:link{color:green;}

a:visited{color:blue;}

a:active{color:yelloy;}

a:hover{color:red;}

Файл index.html

<a href="index.html">INDEX</a>

Приклад 4

Оформлення тексту

Файл 1.css

p.new{

font-family:Verdana;

font-size:12 px;

color:red;

text-decoration:none;

font-weight: bold;

}

p.new2{

font-family:Verdana;

font-size:16 px;

color:black;

font-weight: bold;

font-variant:small-caps;

text-decoration:none;

font-style:italic;

}

p.new3{font:italic 18 px Verdana; text-decoration:none;}

Файл index.html

<p class="new">Оформлюємо текст1</p>

<p class="new2">Оформлюємо текст2</p>

<p class="new3">Оформлюємо текст3</p>

Приклад 5

Файл index.html

body{

background-color:#F8F8FF;

background-image:url(1.jpg);}

Файл 1.css

p{background-color:blue;color:green;}

КОРОТКІ ТЕОРЕТИЧНІ ВІДОМОСТІ МАТЕРІАЛУ ПРАКТИЧНОЇ РОБОТИ.

Позиціонування блоків на сторінці засобами css.

Позиціонування - це управління місцем і способом відображення елементу на веб-сторінці, воно здійснюється за допомогою властивості position.

Для вказівки точного місця розташування елементів, що позиціонуються, використовуйте властивості: top, right, bottom, left. Вони працюють з усіма елементами, що позиціонуються, окрім статичних.

Статичні

Статичним називають позиціонування, задане за умовчанням усім елементам на сторінці. Браузер відображує такі елементи в низхідному порядку(зверху вниз один за одним).

<style type="text/css">

p{position: static;}

</style>

Фіксоване

Елементи з фіксованим позиціонуванням розташовуються на сторінці відносно вікна браузеру. Такі елементи не входять в загальний порядок розташування на сторінці і можуть накладатися на інші елементи, при прокрутці довгих сторінок, вони створюють ефект нерухомих об'єктів.

<style type="text/css">

img{

position: fixed;

top: 5%;

left: 40%

} </style>

Відносне

Відносне позиціонування розміщує елемент відносно того місця, на якому він повинен був з'явитися на сторінці, і залишає порожній простір там, де цей елемент знаходився б без позиціонування.

<style type="text/css">

h2{

position: relative;

top: 30px;

}

</style>

Абсолютне

Абсолютне позиціонування видаляє елемент із загального потоку сторінки, визначаючи його на самий верх сторінки, іноді перекриваючи інші елементи. Так само він може бути розміщений відносно свого батька(окрім статичних), що позиціонується.

<style type="text/css">

img{

position: absolute;

right :0 px;

top :0 px;

}

</style>

Коли елементи знаходяться поза загальним потоком сторінки, вони можуть перекривати один одного. Зазвичай порядок розташування елементів відповідає їх порядку в HTML - коді сторінки, проте є можливість управляти порядком перекриття за допомогою CSS властивості z - index, чим більше його значення, тим вище буде елемент.

Розмітка, заснована на плаваючих елементах.

Розмітка, заснована на плаваючих елементах, використовує переваги властивості float для організації елементів, створюючи на веб-сторінці стовпці.

Властивість float переміщує елемент в один бік сторінки (чи іншого блоку з вмістом).

Будь-який HTML - об'єкт, який з'являється нижче плаваючого елементу, змінює своє положення на сторінці і обтікає його.

Мета властивості float полягає в тому, щоб, виштовхнути блоковий елемент вліво або управо.

Властивість float приймає одне з трьох значень : left, right або none.

Значення none відміняє будь-яке переміщення і визначає елемент як звичайний (не плаваючий).

left - float блок буде зміщений вліво до його лівого краю (чи межі краю, якщо край відсутній) торкається або краї змісту блоку, або краї іншого float блоку

Якщо розмір float блоку перевищує доступний горизонтальний простір, то float блок буде зсунутий вниз.

Кореневий елемент(<html>) не може бути float. Властивість clear дозволяє вам видалити float елементи з лівого або правого або з обох боків.

В сучасному дизайні сторінки для розмітки використовується flex або grid розмітка, які будуть розглянуті в наступних практичних роботах.

ПРИКЛАДИ ДО ПРАКТИЧНОЇ РОБОТИ.

Приклад 1. Види позиціонування блоків на сторінці. Стилі визначені для кожного тегу HTML.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<div style="position:absolute; left:20%; top:20%; background:blue; width:100%; height:100% ">

absolute blok

</div>

<div style="position:relative; left:20%; top:70%; background:red; width:200px; height:100px">

relative blok

</div>

<div style="position:fixed; left:10%; top:0%; background:green; width:200px; height:100px; z-index:9;">

fixed blok

</div>

<div style="position:relative; left:20%; top:0%; background:yellow; width:600px; height:100px ">

<div style="position:absolute; left:3%; top:5%; background:red; width:20%; height:50%; z-index:12; ">

absolute blok

<img src="1.jpg">

</div>

</div>

<div style="float:left; left:0%; top:0%; background:gray; width:10%; height:10% ">

я float слой

<img src="1.jpg" width=160 height=120 float:left>

</div>

</body></html>

Результат роботи:

Приклад 2. Стилі визначені для кожного тегу HTML.

<DIV STYLE="border-width:2px; border-style:solid;absolute;top:0px; left:2%;right:2%">

<center> НАЗВА САЙТУ

<DIV STYLE="position:relative;z-index:1">

<center><img src="6.jpeg">

<DIV STYLE="border-width:2px; border-style:solid;position:relative;top:30px;z-index:1">

MENU

</DIV>

</DIV>

</DIV>

<DIV STYLE="border-width:3px; border-style:solid;position:absolute;top:20px; left:10;z-index:1">

logotip

<img src="2.jpeg">

</DIV>

<DIV STYLE="border-width:2px; border-style:solid;position:absolute;bottom:0%; left:2%;right:2%">

<center> I цей блок має абсолютні координати відносно екрану

</DIV>

Результат роботи

Приклад 3. Використовується різний параметр z-index, що дозволяє оперувати видимістю блоків.

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; ">

</head>

<body>

<div style="position:absolute; left:16%; top:14%; width:124px; height:158px; z-index:5; ">

<font size=+3 color="#33FF00"><b> СЛОЙ1</b></font>

<div style="position:absolute; left:56px; top:14px; width:54px; height:69px; z-index:10; ">

<font size=+1 color="#6600FF"><b> СЛОЙ2</b></font>

</div>

</div>

<div id="Parent" style="position:absolute; left:76px; top:74px; width:124px; height:158px; z-index:1;">

<img src="1.jpg" width=160 height=120>

</div>

</body>

</html>

Результат роботи:

Якщо змінити параметр малюнка на z-index:11, він перекриє всі інші блоки так як має значення найвище.

Приклад 4. Розмітка сторінки за допомогою float елементу.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<div style="background:green; width:100%; top:0%">

top

</div>

<div style="float:left; background:blue;top:100px;height:200px;width:50% ">

float:left

</div>

<div style="float:right; background:red;top:40%; height:200px; width:50%">

float:right

</div>

<div style="background:green; width:100%; top:90%">

footer

</div>

</body></html>

Результат роботи:

ПРИКЛАД 5. Використовуємо елементи розмітки header, section, footer. Позиціонування відбувається за допомгою float.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<header style=" margin: 0 1.5% 24px 1.5%;display: block; border-radius: 6px; background:#F0E68C;height:200px">header

<img src="5.jpg" width="100%" height="100%" alt="это ежик четверо ножек">

</header>

<section style=" display: block; border-radius: 6px; float:left; background:#EEE8AA; width: 70%;height:100%">

section<br />

<img src="2.jpg" width="100%" height="100%" alt="это ежик четверо ножек">

</section>

<section style=" display: block; border-radius: 6px; float:right; background:#EEE8AA; width: 30%;height:100%">section<br />

<blockquote style="font-size: 20.5px; ">

<span style="vertical-align: middle">

<ul style="list-style-type:none">

<li>Чи вгадаєте малята

<li>Хто на грядці біля хати

<li>Сіру свитку одягнув,

<li>Ніби в попелі побув.

<p>

<li>Приспів:

<li>Ой-ой-ой, ой-ой-ой,

<li>Ніби в попелі побув. - двічі.

<p>

<li>Ростом хоч він невеличкий,

<li>Та боятися не звиклий.

<li>Від змії не побіжить,

<li>Ну а мишку з’їсть у мить.

<p>

<li>Приспів:

<li>Ой-ой-ой, ой-ой-ой,

<li>Ніби в попелі побув. - двічі.

<p>

<li>Їжачок, або вухатий їжак <li>(Hemiechinus Fitzinger, 1866)<li> — рід ссавців з родини їжакових) <li>.

</ul>

</span>

</blockquote>

</section>

<footer style="background: #2db34a; border-radius: 6px; display: block;padding: 24px 15px;margin: 50% 5% 70% 5%;margin-bottom: 0;bottom:0%;">

footer</footer>

</body>

</html

Результат роботи:

Контрольні запитання і завдання:

  1. З яких частин складаються таблиці стилів.

  2. Перелічіть методи впровадження стилів до сторінки.

  3. Яким чином здійснюється позиціонування блоків на web сторінці.

  4. Яким чином здійснюється розмітка за допомогою float елементів.

  5. Елементи в якій позиції повністю виключаються з потоку документа.

  6. Яким чином створити ефект нерухомого об'єкту на сторінці.

ЗАВДАННЯ. Виконайте декілька прикладів з практичної роботи.

Винесіть стилі в окремий файл або вбудуйте стилі на сторінку.

Побудуйте сторінку за прикладом на малюнку, використовуючи методи позиціонування елементів розглянутих на практичній роботі. Кожен блок замалюйте будь – яким кольором.

Зверніть увагу, свідоцтва знаходяться в Вашому особистому кабінеті в розділі «Досягнення»

Всеосвіта є суб’єктом підвищення кваліфікації.

Всі сертифікати за наші курси та вебінари можуть бути зараховані у підвищення кваліфікації.

Співпраця із закладами освіти.

Дізнатись більше про сертифікати.

Приклад завдання з олімпіади Українська мова. Спробуйте!
До ЗНО з ІСТОРІЇ УКРАЇНИ залишилося:
0
3
міс.
1
8
дн.
0
6
год.
Готуйся до ЗНО разом із «Всеосвітою»!