Основним поняттям CSS є стиль - т. Е. Набір правил оформлення та форматування, який може бути застосований до різних елементів сторінки. У стандартному HTML для присвоєння якому-небудь елементу певних властивостей (таких, як колір, розмір, положення на сторінці і т. П.) Доводилося щоразу описувати ці властивості, навіть якщо на одній сторінці повинні розташовуватися 10 або 110 таких елементів, нітрохи не відрізняються один від іншого. Ви повинні були десять або сто десять разів вставити той же шматок HTML-коду в сторінку, збільшуючи розмір файлу і час завантаження на комп'ютер переглядає її користувача.
CSS діє іншим, більш зручним і економічним способом. Для присвоєння якому-небудь елементу певних характеристик ви повинні один раз описати цей елемент і визначити цей опис як стиль, а в подальшому просто вказувати, що елемент, який ви хочете оформити відповідним чином, повинен прийняти властивості стилю, описаного вами. Зручно, чи не так?
Більш того, ви можете зберегти опис стилю не в тексті вашої сторінки, а в окремому файлі - це дозволить використовувати опис стилю на будь-якій кількості Web-сторінок. Приголомшливо зручно! І ще одне, пов'язане з цим, перевага - можливість змінити оформлення будь-якої кількості сторінок, виправивши лише опис стилю в одному (окремому) файлі.
Крім того, CSS дозволяє працювати зі шрифтовим оформленням сторінок на набагато вищому рівні, ніж стандартний HTML, уникаючи зайвого обважнення сторінок графікою.
Давайте розглянемо, як ми можемо втілити настільки чудові можливості в життя.
Практичне освоєння CSS
Як вам уже відомо, інформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді Web-сторінки. Розташування опису стилів в окремому файлі має сенс у випадку, якщо ви плануєте застосовувати ці стилі до більшого, ніж одна, кількості сторінок. Для цього потрібно створити звичайний текстовий файл, описати за допомогою мови CSS необхідні стилі, розмістити цей файл на Web-сервері, а в коді Web-сторінок, які будуть використовувати стилі з цього файлу, потрібно буде зробити посилання на нього. Робиться це за допомогою тега , розташованого усередині тега
ваших сторінок:Перші два параметри цього тегу є зарезервованими іменами, що вимагаються для того, щоб повідомити броузеру, що на цій сторінці буде використовуватися CSS. Третій параметр - HREF = - вказує на файл, який містить опису стилів. Цей параметр повинен містити або відносний шлях до файлу - в разі, якщо він знаходиться на тому ж сервері, що і документ, з якого до нього звертаються - або повний URL () в разі, якщо файл стилів знаходиться на іншому сервері.
Другий варіант, при якому опис стилів розташовується в коді Web-сторінки, всередині тега
, в тезі . В цьому випадку ви можете використовувати ці стилі для елементів, розташованих в межах сторінки. Параметр type = "text / css" є обов'язковим і служить для вказівки браузеру використовувати CSS.І третій варіант, коли опис стилю розташовується безпосередньо всередині тега елемента, який ви описуєте. Це робиться за допомогою параметра STYLE, використовуваного при застосуванні CSS з більшістю стандартних тегів HTML. Цей метод небажаний, і зрозуміло чому: він приводить до втрати одного з основних переваг CSS - можливості відділення інформації від опису оформлення інформації. Втім, якщо необхідно описати лише один елемент, цей варіант розташування опису стилів також цілком можна застосувати.
Давайте розглянемо механізм, за допомогою якого стилі привласнюються елементам Web-сторінок. Найпростіший випадок присвоєння якому-небудь елементу певного стилю виглядає так:
Де НАЗВАНІЕ_ЕЛЕМЕНТА - ім'я HTML-тега (H1, P, TD, A і т. Д.), А параметри у фігурних дужках - список властивостей елемента і привласнених їм значень. Більш докладно команди мови CSS ми розглянемо трохи пізніше.
У цьому прикладі всім заголовкам на сторінці, оформленим тегом Н1, привласнюється розмір шрифту 30 пунктів і синій колір.
Також елементи сторінок, створені з використанням CSS, використовують механізм успадкування: т. Е. Якщо ви маєте в своєму розпорядженні зображення всередині тега
.
, оформленого за допомогою CSS, з відступами, так, щоб параграф займав тільки певну частину ширини сторінки, зображення також успадкує значення відступів, зазначені для цього параграфа.CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу" або ідентифікатор ID =<имя элемента>, присвоюється будь-якого елементу сторінки. Розглянемо ці можливості докладніше.
Параметр CLASS застосовується у разі, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних).
Всі елементи класу b-с будуть відображатися жирним шрифтом з вирівнюванням по центру сторінки (або осередку таблиці).
текст параграфа
- параграфу присвоєно стиль класу b-с.Що міститься в осередку текст буде відображатися відповідно до опису класу.
Таким чином, ви можете привласнити описаний стиль будь-яким текстовим елементам сторінок. Зверніть увагу, що при написанні назви класів необхідно дотримуватися регістр символів, згідно з тим, як ви назвали клас в описі стилю!
Присвоєння стилів за допомогою ідентифікаторів застосовується в разі, якщо цим ідентифікатором відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно присвоїти такий стиль, кілька - це вже клас.
Властивості елементів, керованих за допомогою CSS
Отже, перейдемо до вивчення безпечних елементів CSS. Опис властивостей елементів в CSS складається з назви властивості з наступним присвоєнням йому певного значення. Назва властивості і його значення розділені двокрапкою.
Вказуючи абсолютні, а не відносні розміри шрифтів, ви позбавляєте людей, які переглядають ваші сторінки, можливості збільшувати або зменшувати розмір шрифтів за допомогою спеціальної кнопочки в броузері відповідно до дозволу їх дисплея і зором. Шрифти будуть відображатися тільки такого розміру, який ви вказали при написанні сторінки.
Тому, якщо використання абсолютних розмірів шрифту не обумовлено художнім задумом або підступним наміром, рекомендую вам використовувати для цих цілей вказівка розмірів у відсотках. У цьому випадку розмір шрифту буде менше (більше) на вказане вами кількість відсотків, ніж при оформленні його за допомогою стандартного HTML-тега.
Ще один з цікавих варіантів застосування CSS ховається за, здавалося б, простий можливістю: ви можете вказувати значення відступів навколо об'єктів, як негативні величини! Це дозволяє накладати один шар тексту на інший і отримувати вельми цікаві і привабливі результати.
Домогтися такого ефекту не дуже складно, давайте спробуємо створити сторінку з заголовком, який буде виглядати тривимірним, але не буде використовувати графіку.
Створимо новий html-файл і складемо опис стилів для трьох об'єктів:
У цьому описі ми привласнили
(Втім, це міг бути практично будь-який інший тег) розмір, шрифт і накреслення - в такому стилі будуть відображатися всі елементи сторінки. Це було зроблено лише заради прагнення зменшити розмір файлу сторінки, замість цього можна було описати ці параметри двічі: для кожного з класів z. Далі ми описуємо два стилі, які відрізняються кольором і розміром відступів навколо них: нижній шар описується стилем z1, а верхній - z2. Використовуючи негативні значення відступів і підбираючи потрібне значення, ми добиваємося того, що верхній шар як би наповзає на попередній.P font-family: Times New Roman, serif;
color: # 000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify;
>
Усередині опису стилю для зручності форматування ви можете використовувати будь-яку кількість прогалин і переносів рядків - при читанні стилю броузер просто відкине всі зайві пробіли.
У цьому стилі ми задали, що параграфи
на всіх сторінках, які використовують цей опис, будуть відображатися шрифтом Times New Roman або в разі, якщо цей шрифт на машині не встановлено, іншим шрифтом, але з цього сімейства (serif). Колір шрифту ми встановили чорний, вирівнювання - повне (по обидва боки).
Давайте так само створимо стиль для заголовків статей:
H2 font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
color: black;
margin-left: 20%;
margin-top: 1cm;
text-align: left;
>
Всі заголовки наших сторінок, оформлені тегом
, будуть відображатися жирним шрифтом Verdana або, якщо цей шрифт не встановлено, шрифтом Arial. Розмір заголовка ми встановимо рівним 14 пунктам, колір чорний, відступ зліва дорівнює 20% ширини сторінки, а відступ зверху - 1 см. Тема буде вирівнюватися щодо лівого краю сторінки.
Для того щоб <привязать> створені нами стилі до наших сторінках, в усі html-файли в розділі
ми повинні помістити рядок з посиланням на файл стилів і з зазначенням про використання CSS:Оскільки файл зі стилями буде перебувати в тому ж каталозі сервера, що і інші сторінки, параметр HREF = "URL" в нашому випадку буде просто ім'ям нашого файлу стилів (styles.css).