Добре було б надати сторінкам гідний їх змісту вигляд?
Зрозуміло, але як?
Для цього використовуйте Cascading Style Sheets (CSS) / каскадні таблиці стилів. У цьому уроці ми дамо короткий опис CSS. Пізніше ви можете прочитати наш підручник CSS. Так що прийміть цей урок, так би мовити, для початку.
CSS це краща половина HTML. Але, в плані кодування, їх статус різниться: HTML піклується про загальний виведення інформації (її структурі), у той час як CSS виробляє тонке налаштування зовнішнього вигляду (layout).
Як показано в уроці 7, CSS може додаватися атрибутом style. Наприклад, ви можете встановити тип і розмір шрифту параграфа:
У цьому прикладі ми використовували атрибут style для специфицирования типу шрифту (командою font-family) і розмір шрифту (командою font-size). Зверніть увагу, як в останньому параграфі ми одночасно встановили тип і розмір, розділяючи параметри крапкою з комою.
Обсяг роботи значно зросте?
Однією з привабливих особливостей CSS є можливість керувати зовнішнім виглядом сторінок централізовано. Замість використання style в кожному тезі ви можете вказати браузеру тільки один раз, як повинен виглядати текст на сторінці:
Приклад 2:
<html>
<head>
<title>My first CSS page</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>My first CSS page</h1>
<h2>Welcome to my first CSS page</h2>
<p>Here you can see how CSS works </p>
</body>
У цьому прикладі правила CSS вставлені в розділ head і застосовуються до всієї сторінці. Для цього використовується тег <style type="text/css">, який дає відповідну вказівку браузеру.
У цьому прикладі заголовки на сторінці будуть виведені шрифтом Arial розміром 30px. Всі підзаголовки - Courier розміром 15. А весь текст у звичайних параграфах буде шрифтом Times New Roman розміром 8.
Можна також вказувати правила CSS в окремому документі. Тоді можна застосовувати CSS вже до всіх сторінок. Це дуже важлива якість, якщо вам знадобиться змінити тип або розмір шрифту для великого web-сайту з тисячами сторінок. Зараз ми не будемо в це заглиблюватися, але ви можете вивчити все докладніше в нашому підручнику CSS.
Що ще можна зробити за допомогою CSS?
CSS може набагато більше, ніж просто зміна типу і розміру шрифту. Наприклад, ви можете встановлювати колір і фон. Ось декілька прикладів для експериментування:
Спробуйте вставити ці приклади на ваші сторінки - як показано вище, а також як CSS в розділі head.
CSS це нічого, окрім кольорів і типу шрифту?
Крім зміни виду: кольори, типу шрифту і т. п., CSS можна використовувати також для керування настройками сторінки та поданням (поля, спливання, вирівнювання, ширина, висота і т. д.). Регулюючи різні елементи за допомогою CSS, ви можете відображати ваші сторінки елегантно і точно.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
буде виглядати в браузері:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...
У цьому прикладі один елемент (зображення) спливає ліворуч, а інший елемент (текст) заповнює інше.
За допомогою властивості position ви можете помістити елемент точно в потрібному місці на сторінці:
У цьому прикладі зображення міститься на 50 пікселів знизу і на 10 пікселів справа у вікні браузера. Але ви можете помістити його так само точно в будь-якому іншому місці. Спробуйте. Дуже легко і дуже круто, а?
"Круто", так. Але "легко"?
Ви не вивчите CSS за 10 хвилин. І, як ми говорили, цей урок - лише короткий вступ. Пізніше ви можете прочитати Підручник CSS.
Тепер зосередимося на HTML і перейдемо до наступного уроку, де ви дізнаєтеся, як показати ваш web-сайт в іетернеті, щоб його побачив весь світ!
Меню сайту
