Нова велика книга CSS

Привіт, Хаброжители! У нас вийшла нова оновлена книга Девіда Макфарланда:

image Технологія CSS3 дозволяє створювати професійно оформлені сайти, але тонкощі цієї мови можуть виявитися досить складними навіть для досвідчених веб-розробників. Повністю перероблене четверте видання цієї книги допоможе вам підняти навички роботи з HTML і CSS на новий рівень; вона містить безліч цінних порад, описів прийомів, а також інструкції, написані в стилі довідкового керівництва. Веб-дизайнери, як початківці, так і досвідчені, за допомогою цієї книги швидко навчаться створювати красиві веб-сторінки, які при цьому блискавично завантажуються як на ПК, так і на мобільних пристроях.


Що необхідно знати

Ця книга припускає, що ви знайомі з мовою HTML. Мається на увазі, що ви створили пару сайтів (або принаймні кілька веб-сторінок) і знайомі з основними елементами, такими як html, p, h1, table, що становлять основу мови гіпертекстової розмітки документів. CSS марний без HTML, тому ви повинні знати, як створити найпростішу веб-сторінки з використанням основних елементів HTML.

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

HTML: структура мови

У мові гіпертекстової розмітки HTML використовуються прості команди, іменовані тегами, для визначення різних частин — фрагментів. Нижче наведено HTML-код простий веб-сторінки:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Це заголовок веб-сторінки < /title>
</head>
<body>
<p>А це абзац цієї веб-сторінки</p>
</body>
</html>


Звичайно, приклад дуже простий, але демонструє всі основні елементи, необхідні звичайної веб-сторінці. В ньому ви помітите те, що називається оголошенням типу документа — doctype, за ним слід відкриваючий тег (з дужками), потім елемент head (голова, розділ заголовка), слідом body (тіло, розділ тіла), а в ньому безпосередньо вміст веб-сторінки. Все це завершується закриваючим тегом. Відкриваючий і закриваючий теги утворюють HTML-елемент.

Типи документів

Всі веб-сторінки починаються з оголошення типу документа — рядки коду, що визначає різновид HTML, якою ви користувалися при написанні сторінки. Протягом багатьох років використовувалися два типи документів — HTML 4.01 і XHTML 1.0, і кожен з них має два стилі: строгий і перехідний. Наприклад, оголошення перехідного типу документа HTML 4.01 має наступний вигляд (інші оголошення типу документа HTML 4.01 і XHTML 1.0 виглядають приблизно так само):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>


Якщо подивитися на код приклад HTML-сторінки, показаний у цьому розділі, то ви побачите, що в ньому використовується коротка форма оголошення типу документа:
<!doctype html>

Оголошення типу документа з'явилося в мові HTML5. Порівняно з попередниками, в HTML5 закладена простота і раціональність використання. У цій книзі застосовується оголошення типу документа з HTML5, підтримуване будь популярним браузером (навіть старим Internet Explorer 6). Застосовувати інші оголошення, відмінні від простого doctype з HTML5, не має сенсу.

Незалежно від бажаного типу документа, объявляемого з допомогою doctype, важливо, щоб використовувалося оголошення хоча б одного з них. Без цього ваші сторінки будуть виглядати по-різному в залежності від браузера вашого відвідувача, оскільки браузери, що не мають в якості керівництва оголошення типу документа, що по-різному відображають інформацію, форматовану з допомогою CSS.

Кожне оголошення типу документа вимагає від вас написання HTML-коду певним чином. Наприклад, елемент для розбиття рядків має в HTML 4.01 наступний вигляд:
<br>

Але в XHTML у цього елемента такий вигляд:
<br />

І тут проявляється ще одна перевага HTML5: він допускає застосування будь-якого з цих варіантів.

Як працюють HTML-елементи

HTML-елементи складаються з тегів. У наведеному вище прикладі, як і в HTML-коді будь-якої веб-сторінки, більшість елементів використовують пари тегів, починаючи і закінчуючи якийсь фрагмент — блок тексту або інші команди. Будучи взятими в дужки, ці теги являють собою команди, які говорять браузеру, яким чином відображати веб-сторінку. Теги «розмічувальної» (markup) частиною гіпертекстового мови розмітки — Hypertext Markup Language.

Відкриваючий тег кожного елемента показує браузеру, де команда починається, а закінчує — де закінчується. Закриваючий тег завжди передує прямим слешем (/) після першого символу дужки (<).

На будь-який веб-сторінці зазвичай є як мінімум наступні чотири елемента HTML.

— Найперша рядок прикладу містить оголошення типу документа — елемент doctype, розглянутий у попередньому розділі.

— Тег потрібно в початок веб-сторінки (з доданим слешем) в кінці:. Елемент html повідомляє браузеру, що документ є програмним кодом на мові HTML. Весь вміст сторінки, включаючи інші елементи, знаходиться між відкриваючим і закриваючим тегами елемента html.
Якщо уявити веб-сторінку у вигляді дерева, то елемент html буде його стовбуром. Дві основні частини будь-якої веб-сторінки — розділ заголовка і тіло — являють собою гілки.

— Розділ заголовка веб-сторінки (head) містить її назва. Тут також може міститися інша інформація, не відображена при перегляді веб-сторінки, наприклад опис сторінки, яка призначена для браузерів і пошукових машин. Розділ заголовка полягає в відкриваючий і закриваючий теги елемента head.
Крім того, розділ заголовка може містити інформацію, яка використовується браузером для оформлення HTML, що є на сторінці, і для додання сторінці інтерактивності. Ви побачите, що розділ заголовка може містити код CSS (на кшталт того, який ви будете вчитися створювати) або посилання на інший файл, що містить таблицю стилів.

— Тіло веб-сторінки, наступний безпосередньо за розділом заголовка і укладена в теги елемента body, містить все, що повинно відображатися у вікні браузера: заголовки, текст, зображення і т. д.
Всередині тіла сторінки, як правило, можна знайти наступні елементи:
елемент p — відкриваючий тег починає абзац, а закриває завершує;
елемент strong — виділяє текст як важливий; наприклад, код
<strong>Увага!</strong>
повідомить браузеру про те, що слово «Увага!» повинно бути виділено;
елемент a, або елемент прив'язки, — створює посилання, при натисканні на яку можна переміститися в іншу позицію веб-сторінки або на іншу сторінку (потрібно вказати браузеру цю посилання шляхом розміщення її всередині відкриваючого тега
<a>, наприклад <a href="http://www.piter.com/">Клацніть тут!</a>)

Браузер знає, що якщо клацнути кнопкою миші на посиланні зі словами Клацніть тут! відвідувач вашої сторінки повинен перейти на сайт з адресою www.piter.com. Частина тега a — слово href називають атрибутом, а URL (уніфікований покажчик ресурсу (URL-адресу) є його значенням. У цьому прикладі
http://www.piter.com — значення атрибута href.

HTML5: більше елементів

HTML5, актуальна версія мови HTML, існує вже кілька років. Іноді ви будете чути назви, не відносяться до HTML-елементів, наприклад локальні сховища (спосіб зберігання даних з сайту на комп'ютері відвідувача), геолокація (спосіб визначення координат комп'ютера відвідувача) і малювання на веб-сторінці за допомогою бібліотеки WebGL. Строго кажучи, ці технології не є частиною HTML, але вони відносяться до нових можливостей браузера, що з'явилися разом з HTML5.

У цій книзі термін HTML5 завжди відноситься до типу документа HTML5, а також до нових елементів, що є частиною нового стандарту HTML5. HTML5 не несе якихось кардинальних відмінностей від своїх попередників — його метою є турбота про те, щоб Всесвітня павутина продовжувала працювати так само, як і раніше, підтримуючи нові потреби дизайнерів. У версії HTML5 були додані нові елементи. Наприклад, елемент header може включати в себе вміст, яке зазвичай зустрічається у верхній частині сторінки, логотип і загальні для всього сайту навігаційні посилання. Новий елемент nav містить в собі набір посилань, що використовуються для навігації по сайту, а елемент footer розміщує в собі все, що зазвичай розміщується в нижній частині сторінки, наприклад юридичну інформацію, контакти по електронній пошті і т. д.

Крім того, в HTML5 додані нові елементи, що дозволяють впроваджувати на сторінку відео — та аудіоконтенту, і нові елементи форми, додають такі складні компоненти, як ползунковые регулятори, спливаючі панелі вибору дати, а також вбудовану браузерну підтримку перевірки допустимості даних, введених у форму (яка гарантує правильне заповнення ваших форм відвідувачами). Протягом всієї книги, особливо в наступній главі, ви будете зустрічати приклади використання мови HTML5.

Про цю книгу

Ця книга написана так, щоб допомогти читачам будь-якого рівня. Для отримання максимальної користі з матеріалу ви обов'язково повинні вчитися на наведених прикладах HTML і CSS. Якщо ж ви ніколи раніше не створювали веб-сторінки, то зверніться до практикуму в кінці розділу 2. Матеріал, що міститься в цих розділах, написаний для тих, хто вже трохи освоївся в даній області і має середній рівень знань. Якщо ж ви погано знаєте принципи створення веб-сторінок, то для кращого розуміння освітлюваної теми повинні ознайомитися з текстом врізок «В курс справи!». З іншого боку, якщо у вас є великий досвід створення веб-сторінок, зверніть увагу на врізки «Для досвідчених користувачів». Вони містять підказки, прийоми і методи для досвідчених програмістів.

Основні розділи книги. Книга розділена на п'ять частин. Перші чотири частини містять по кілька глав, а остання частина складається з додатків.

Частина I. Основи CSS. Тут описано створення каскадних таблиць стилів в цілому і дано короткий огляд ключових понять, таких як спадкування, селектори і каскадность таблиць стилів. Попутно з вивченням CSS ви отримаєте основні навички написання HTML-коду. Практикуми закріплять вводяться в главах основні поняття і дозволять вам відчути ефективність використання CSS.

Частина II. Застосування CSS. Перенесе вас в реальний світ веб-дизайну. Ви вивчіть найбільш важливі властивості CSS і їх використання для форматування тексту, попрактикуєтесь у створенні корисних інструментів навігації та зможете поліпшити зовнішній вигляд своїх експериментальних веб-сторінок, додавши графіком. Ви також дізнаєтеся про те, як за допомогою CSS створювати просту анімацію. Ця частина також містить рекомендації про те, як створювати гарні таблиці та форми.

Частина III. Верстка сторінок за допомогою CSS. Допоможе вам розібратися з найбільш заплутаною, але дуже корисною функцією CSS: з керуванням розміщенням елементів на вашій сторінці. Ви познайомитеся зі схемами дизайну (розміщення контенту у дві і три колонки) і дізнаєтеся, як додати бічні панелі. Буде розказано про два основних методи позиціонування елементів на сторінку:
абсолютному і відносному. Ви також навчитеся створювати сайти, що адаптуються для кращого сприйняття в браузерах настільних систем, планшетних комп'ютерів і мобільних пристроїв, і застосовувати flexbox — новий потужний інструмент для створення макету веб-сторінок.

Частина IV. Професійні прийоми CSS верстки. Містить поради від професіоналів з поліпшення ваших каскадних таблиць стилів, а також розповість про Sass — потужний і ефективний спосіб верстки таблиць стилів.

Частина V. Додатки, включаючи два довідника. Довідник властивостей CSS описує кожну властивість окремо в простій і доступній формі, щоб ви могли швидко дізнатися про корисні властивості CSS, які раніше вам могли не попадатися, або швидко освіжити в пам'яті вже знайомі властивості. У другому додатку наводиться опис інструментів і засобів для створення та застосування каскадних таблиць стилів.

Про автора

Девід Макфарланд (David McFarland) — веб-розробник, викладач і автор. Створює сайти з 1995 року: саме тоді він розробив свій перший проект — онлайн-журнал для фахівців у галузі комунікацій.

Девід викладав веб-дизайн у Вищій школі журналістики в Берклі, Центрі електронного мистецтва (Electronic Art) і Державному університеті Портленда. Зараз він головний викладач на сайті онлайн-освіти Treehouse.

Про творчій команді

Нен Барбер (Nan Barber) — редактор серії книг Missing Manuals («Вичерпне керівництво»). Живе в Массачусетсі разом зі своїм чоловіком. Її електронну адресу: nanbarber@oreilly.com.

Мелані Ярброух (Melanie Yarbrough) — літературний редактор і композитор. Проживає і працює в Кембриджі, штат Массачусетс. Захоплюється випічкою і любить здійснювати прогулянки на велосипеді навколо міста. Її електронну адресу: myarbrough@oreilly.com.

Моллі Ітт Бровер (Molly Ives Brower) — позаштатний редактор і коректор. Любить Інтернет з тих пір, як в 1990 році отримала адресу BITNET. У наш час її можна знайти на сайті mjibrower.com або в соціальній мережі Twitter, де вона відома під ніком @vintagereader. Її електронну адресу: molly@mjibrower.com.

Рон Штраус (Ron Strauss) — упорядник алфавітного покажчика. Спеціалізується на складанні покажчиків для різних книг, присвячених інформаційним технологіям. Рон також талановитий скрипаль. Він живе в Північній Каліфорнії зі своєю дружиною і за сумісництвом колегою Енні і карликовим пинчером Кенгой. Адреса електронної пошти: rstrauss@mchsi.com.

Річ Багаття (Rich Koster) — бета-рідер. Купив свій перший комп'ютер Mac (17-дюймовий MacBook Pro) в 2009 році і більше ніколи не переходив на бік користувачів Windows. У третьому виданні книги «iPhone. Вичерпне керівництво» Річ виступив технічним редактором. Він одружений, виховує дітей і у вільний час підтримує власноруч створений сайт Disney Echo.

Більш докладно з книгою можна ознайомитися на сайті видавництва
Зміст
Уривок

Для Хаброжителей знижка 25% по купону — CSS
За фактом оплати паперової книги відправляємо на e-mail електронні версії книг, при покупці електронної книги — всі доступні версії відправляються користувачам.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.