Лекція #04. Основи блочної верстки
TRANSCRIPT
ОСНОВИ БЛОЧНОЇ ВЕРСТКИ. СТИЛІЛекція # 04
БЛОЧНІ ТА РЯДКОВІ ЕЛЕМЕНТИБлочний елемент
<div> (division) До і після себя генерує розрив потоку
(рядка) Є основним будівельним елементом
блочного макету
Рядковий елемент (інлайн)<span> Знаходиться всередині рядка Переноситься на наступний рядок,
якщо в поточному немає вільного місця Відсутні розриви
БЛОЧНІ ТА РЯДКОВІ ЕЛЕМЕНТИКрім <div> та <span> існують наступні блочні та рядкові елементи:
Блочні <html>, <body>, <p>, <hr>, <pre>, <blockquote>
Рядкові <a>, <em>, <br>, <del>, <ins>, <i>
Блочні елементи можуть містити рядкові але не навпаки!
БЛОЧНИЙ МАКЕТ Використовуються вкладені блоки із вказанням для кожного унікального
селектора ідентифікатора ID.
<div id="page">
<div id="header">Заголовок</div>
<div id="sidebar">Сайдбар</div>
<div id="content">
<div id="post">Допис 1</div>
<div id="post">Допис 2</div>
</div>
<div id="footer">@copy; Webmaster, 2016</div>
</div>
СЕМАНТИЧНИЙ РОЗПОДІЛ ВМІСТУ
СЕМАНТИЧНІ ЕЛЕМЕНТИ HTML5<header> - шапка документу або його розділу<footer> - підвал документу або його розділу<nav> - основні елементи навігації<aside> - сайдбар, другорядний контент<section> - розділ або параграф документу<article> - незалежна самодостатня частина контенту<address> - інформація про авторів документу<summary>, <details> - розкриваюче роз'яснення
ФІГУРИ - : , , Фігура самодостатній елемент контенту ілюстрація графік фрагмент
. .коду і т д
<figure>
<img src="/mona-lisa.jpg" alt=" "/>Мона Ліза <figcaption> 1. </Рисунок Мона Ліза figcaption>
<figure>
<figure>
<сode><?php echo “Hello World!”; ?></сode>
<figcaption> Перша веб сторінка на PHP</figcaption>
<figure>
СТИЛІ HTML Головне призначення -
-структурування інформації на веб. сторінках Спочатку ця мова була придуманий
.саме для цих цілей Для тогощоб відокремити дизайн
, сторінки від її вмісту а також прискорити процес її створення і в
HTML-рази скоротити розмір документа використовується CSS .
КАСКАДНІ ТАБЛИЦІ СТИЛІВ ( . Каскадні таблиці стилів англ Cascading Style Sheets або скорочено CSS) —
, , спеціальна мова що використовується для опису сторінок написаних .мовами розмітки даних
ПРОСТА ТАБЛИЦЯ СТИЛІВ<head><title>Title</title>
</head><body><div id="page">
<div id="content"> <div id="post"><p>Допис 1</p></div> <div id="post"><p>Допис 2</p></div> </div>
<div id="footer">@copy; Webmaster, 2016</div></div></body>
<head><title>Title</title>
<style> p { font-weight: bold; color: #1E824C; font-size: 2em; } </style></head><body><div id="page"><div id="content"><div id="post"><p>Допис 1</p></div> <div id="post"><p>Допис 2</p></div></div> <div id="footer">@copy; Webmaster, 2016</div></div></body>
1 2
ПРОСТА ТАБЛИЦЯ СТИЛІВ1 2
СИНТАКСИС CSS_ {Селектор елементу
: ;Властивість значення}
p {
height: 100px;
width: 250px;
font-weight: bold;
background-color: #FF0000;
}
Селектор
Властивість
Блок оголошень
Значення
СИНТАКСИС CSSСелекторВказуючи його, ми говоримо браузеру, до чого саме хочемо застосувати стиль. У нашому випадку селектором є р.
Блок оголошеньТак називається всю інформацію, що знаходиться між дужками {} після селектора.
ВластивістьЦе команда, за допомогою якої вказується бажаний варіант форматування. Наприклад, ви хочете змінити написання шрифту (накреслення шрифту), колір, розмір шрифту і т. д. Після імені властивості необхідно ставити двокрапку.
Значення властивостіПісля двокрапки записується саме значення властивості, яке ви визначаєте самостійно, створюючи таким чином власний стиль. Залежно від властивості необхідно вказувати відповідне йому значення.
СЕЛЕКТОРИ ЕЛЕМЕНТІВ Пряма вибірка
div - за іменем тегу #main - за ідентифікатором .big - за іменем класу div#content - за сукупністю
імені тегу та id
span.black - за сукупністю імені тегу та класу
input[type="text"] - за
атрибутом Контекстна вибірка
div p strong - ланцюжоквкладеності
a + span - сусідні елементи form > fieldset - прямі потомки
ВНУТРІШНІ І ЗОВНІШНІ ТАБЛИЦІ СТИЛІВІснує два варіанти таблиць - внутрішні, які додаються прямо на сторінку, і зовнішні, які знаходяться в окремому файлі з розширенням .css і підключаються до сторінки з допомогою посилання:<link rel="stylesheet" href="css/style.css">Внутрішні таблиці стилів записуються в HTML-документі між тегами <style></style>.
ВЛАСТИВОСТІ ТЕКСТУ Властивостішрифту
fontfont-familyfont-sizefont-stretchfont-stylefont-variantfont-weight
Властивості рядківletter-spacingline-height
Колір текстуcolor
Властивості списківlist-stylelist-style-imagelist-style-positionlist-style-type
Поділ на колонкиcolumn-countcolumn-gapcolumn-rule
column-widthcolumnsВластивості текстуtext-aligntext-align-lasttext-decorationtext-decorationcolortext-decoration-linetext-decorationstyletext-indenttext-overflowtext-shadowtext-transform
БЛОЧНА МОДЕЛЬВнутрішній відступpaddingpadding-bottompadding-leftpadding-rightpadding-top
Зовнішній відступmarginmargin-bottommargin-leftmargin-rightmargin-top
Спосіб відображення
displayРозміри блокуheightwidthmax-heightmax-widthmin-heightmin-width
Переповненняoverflowoverflow-xoverflow-y
Обтікання
floatclearПозиціонуванняpositiontoprightleftBottom
Накладанняz-index
Видимістьvisibility
СТИЛІ ФОНУ ТА ГРАНИЦЬВластивості фонуbackgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-size
Властивості границьborderborder-collapseborder-colorborder-imageborder-radiusborder-spacingborder-styleborder-widthborder-leftborder-left-colorborder-left-styleborder-left-width