Основи html і css для новачка, просто і зрозуміло
Підключення таблиці стилів CSS
Тепер давайте розглянемо як можна зробити підключення таблиці стилів до html документу.
Як ми знаємо з минулого уроку. для цього служить спеціальний тег:
який вставляється в розділ
html-файлу і вказує на розташування файлу таблиці стилів.Так само існують ще два способи підключення стилів.
- вбудовані таблиці стилів
- внутрішні стилі для елементів
Вбудовані таблиці стилів
Можуть бути включені прямо в html-документ в розділ
При цьому стилі повинні бути обгорнуті тегом
Це робиться для того щоб браузер зрозумів що це таблиці стилів.
приклад:
Такий підхід застосовується рідко, так як правильніше буде виносити стилі в окремий файл, але все ж іноді може бути корисний.
Внутрішні стилі для html елементів
Таке підключення ми вже торкалися в одному з уроків по HTML.
Це коли для якогось тега відразу вказується стиль.
приклад:
Такий спосіб використовується частіше ніж Попереднє, в основному для виділення частини тексту і т.п.
Кожен спосіб підключення застосовується індивідуально до кожного html документу.
В основному таблиці стилів виносяться в окремий файл.
Вбудовані таблиці можуть використовуватися якщо стилів трохи і виносити їх в окремий файл не має сенсу.
Внутрішні стилі для елементів використовуються коли потрібно виділити конкретну частину тексту, або задати властивості для одиничного елемента. В такому випадку простіше вказати внутрішній стиль для елемента, ніж вказувати його в окремому файлі.
Може бути поки це ще не зовсім зрозуміло, але впевнений через деякий час ви все зрозумієте.
Головне робіть більше практичних прикладів.
Блокова верстка DIV в CSS
Тепер розглянемо таке важливе поняття як блокова верстка DIV, за допомогою якої створюються макети сайтів.
Заодно закріпимо знання по блоках CSS.
Як ви знаєте в HTML документі текст і інший вміст можна розмітити на сторінці двома різними способами.
2. За допомогою блоків, тег
Таблична верстка в основному використовується для відображення табличних даних, і все рідше для макетів сайтів. Так як має громіздкий HTML-код.
Властивість z-index CSS. тривимірні сторінки
Ми звикли ставити координати в двох осях X і Y, але за допомогою CSS можна задати і третю координату, по осі Z. Тому я називаю ці сторінки тривимірні. Це властивість z-index.
За допомогою цієї властивості і задаються шари (координати) на сторінці.
Ось так можна зробити за допомогою z-index:
Ось так буде виглядати CSS файл:
.dama position: absolute;
top: 150px;
left: 150px;
z-index. 1;>
king position: absolute;
top: 200px;
left: 210px;
z-index. 2;>
a position: absolute;
top: 250px;
left: 270px;
z-index. 3;>
А в HTML додамо:
Нічого складного. За допомогою z-index можна накладати текст на картинки або навпаки. Можна робити текст з ефектом тіні, в загальному на скільки вистачить фантазії.
Напевно вистачить. Тренуйтеся, робіть свої сторінки, застосовуйте знання з CSS.
Корисні поради по CSS
У нашому житті практично все люди прагнуть робити якісь речі швидше, або принаймні хотіли б. Ви б, напевно хотіли, щоб ваш улюблений сайт завантажувався в момент.
Тому я Вам раджу скорочувати записи в CSS. Від цього теж залежить швидкість завантаження сайту. Звичайно якщо він не з двох сторінок.
Ось кілька порад:
Кольори в шестнадцатиричном значенні можна скорочувати ось так:
# 000000 # 000
#FFFFFF #FFF
# 333333 # 333
Координати c нулями:
Якщо у класу два або менше властивості:
На цьому уроці розглянемо ще один важливий момент пов'язаний
з блоками. "Поплавки".
Використовується для розміщення блоків в одному рядку. Дуже часто використовується при розробці дизайну сучасних сайтів. Раджу Вам ознайомитись з цим важливою властивістю.
Має значення :
left - блок буде притискатися до лівого краю, а текст і все інше буде його обтікати справа.
right - блок буде притискатися до правого краю, обтікання його буде з лівого боку.
none - властивість float вимкнено.
Спочатку давайте уявимо просте розташування за замовчуванням, коли блоки розташовуються один під одним.
Візьмемо чотири блоки і зробимо для кожного стиль, можна однаковий.
.box1 height: 100px;
width: 100px;
border: 2px solid blue;>
І так далі для .box2. box3, і .box4
LEFT
LEFT
RIGHT
RIGHT
У блоках напишемо значення FLOAT які поставимо пізніше.
Для наочності для перших двох напишемо зліва, а для двох останніх праворуч.
Стрілками вказані місця куди перемістяться блоки, коли буде встановлено значення FLOAT.
У підсумку вийде ось так:
Якщо в HTML-документі після блоків додати параграф з текстом, він займе місце між блоками. приклад:
Що ж робити якщо ми хочемо ще й внизу поставити блоки?
Для цього існує ще одна властивість.
Це хитре властивість дозволяє ставити блоки під блоками.
Має значення:
left - Скасовує обтікання з лівого краю елемента
right - Скасовує обтікання з правого краю елемента
both - розміщує блок нижче всіх спливаючих блоків і повністю скасовує обтікання заданий властивістю float.
Давйте створимо ще два блоки 200х200 пікселів. В CSS додамо стилі:
.bigbox1 height: 200px;
width: 200px;
border: 2px solid blue;
float: right;
clear. right;>
.bigbox2 height: 200px;
width: 200px;
border: 2px solid blue;
float: left;
clear. left;>
Отримаємо ось що:
Структура вже ставати на щось схожа, чи не так?
У блоках може перебувати, що завгодно: текст, списки, картинки, посилання і т.д.
Тренуйтеся, пробуйте, і все у Вас вийде.