Здрастуйте, шановні передплатники.
З Вами я, Андрій!
У цьому випуску ми поговоримо про CSS (каскадних таблиць стилів).
Про те, як і для чого їх застосовують, як підключати таблицю стилів до HTML-файлу, що таке класи, для чого вони створюються і якими вони бувають.
І так почнемо!
За допомогою таблиць стилів можна вказати правило відображення тега HTML в браузері.
Таблиця стилів — це фактично набір правил, які застосовуються до HTML-тегами. Кожне правило складається із селектора і визначення.
Селектор — це тег HTML.
Визначення — це властивість тега і значення. Визначення вказується в фігурних дужках, властивість і значення відокремлюються двокрапкою(:). В кінці кожного визначення ставиться крапка з комою (;).
Приклад:
p {color: #FF0000;}
Тут:
P — це селектор.
color: #FF0000; – це визначення. Визначення завжди полягає у фігурні дужки, після кожного визначення ставиться крапка з комою.
сolor – це назва властивості (у даному випадку колір).
#FF0000 – це значення властивості.
Властивостей таблиць стилів дуже багато, з ними ми познайомимося в наступних випусках.
А поки, для того щоб зрозуміти в роботі того, про що піде мова в цьому випуску, скористаємося двома властивостями:
color – задає колір тексту.
background-color – задає фоновий колір елемента.
Отже, розглянемо яким чином можна вбудовувати таблиці стилів в документ.
1 Спосіб:
Можна задати властивість для будь-якого тега за допомогою параметра style. У цьому випадку селектор не потрібен.
Приклад:
Ми змінили колір тла абзацу
2 Спосіб:
Вказати властивість в заголовку документа між тегами ….
Приклад:
Untitled Document
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}
Ці властивості застосовуються до всього документа.
Значить, у нас все абзаци будуть мати сіруватий колір тла, і червоний колір шрифту, а всі заголовки другого рівня будуть на чорному тлі з жовтим кольором шрифту.
Всі інші теги відображаються без застосування стилів.
Якщо однаковими властивостями володіють кілька тегів, їх можна вказати через кому у якості селектора.(H1, H2, p, li{ color:blue;}).
3 Спосіб:
Спосіб дозволяє використовувати одну таблицю для форматування декількох документів.
Сенс полягає в тому, що всі властивості записуються в окремому файлі з розширенням CSS, а потім підключаються в HTML документ.
Untitled Document
href=»mystyle.css» — шлях до файлу CSS.
А вміст файлу будується за тими ж правилами (селектор та визначення).
Код файлу mystyle.css:
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}
4 Спосіб:
Спосіб дозволяє використовувати каскадну таблицю стилів (css), що лежить на якому-небудь сервері.
Щоб підключити CSS файл з будь-якого сервера потрібно в заголовку документа, між тегами …. прописати наступне:
@import:url(http://www.mysite.ru/style/mystyle.css);
Приклад:
Untitled Document
@import:url(http://www.mysite.ru/style/mystyle.css);
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}
Ви помітили, що в 4-му способі реалізовано два способи включення таблиці стилів до документа.
Таке допустимо, але при цьому треба враховувати пріоритет кожного із способів.
Отже, розташування способів в порядку убування їх пріоритетів:
1 Спосіб;
2 Спосіб;
4 Спосіб;
3 Спосіб;
Тобто, якщо в 3-му або 4-му способі зазначено p {color: red;}, а у 2-му або в 1-му p {color: blue;} застосується до параграфів властивість p {color: blue;}, тому що пріоритет 1-ого та 2-ого способу вище, ніж 3-го і 4-го.
Пару слів про спадкування і перейдемо до класів.
Часто зустрічається ситуація, коли вміст одного тега знаходиться цілком всередині іншого.
Приклад:
Текст абзацу текст абзацу, виділений жирним продовження тексту абзацу.
Тобто у нас тег лежить повністю всередині тега
.
І якщо ми тепер задамо стиль параграфа, він застосовуватиметься і до тегу .
Текст абзацу червоними буквамитекст абзацу червоними літерами, виділений жирним продовження тексту абзацу червоними.
Класи.
Класи використовуються для того, щоб одного і того ж тегу можна було б задавати різні правила.
Описуються класи в контейнері …., а застосовуються до тегам допомогою параметра CLASS.
Давайте подивимося на приклад:
p.red {color:#FF0000; background-color:#000099;}
p.yellow{color:yellow; background-color:#000000;}
Описали клас red і yellow для тега
Параграф класу red з червоним кольором шрифту і синім фоном.
Параграф класу yellow з жовтим кольором шрифту і чорним фоном.
……
Існують, також і універсальні класи.
Це класи, які можна використовувати не тільки для певного, а для будь-якого тега.
Синтаксис таких класів досить простий: спочатку йде крапка, потім ім’я класу, і в фігурних дужках визначення.
Приклад:
.red {color:#FF0000;}
…
Заголовок 1-го рівня, класу red
Заголовок 2-го рівня, класу red
Текст параграфа класу red
…
Таким чином, ми застосували клас red до трьох різних тегам.
На цьому пропоную цей випуск, присвячений CSS — каскадними таблицями стилів, завершити.
Рекомендую застосувати стилі, наприклад, до нашого другого випуску з казками. Зробити там різнокольорові абзаци, заголовки з допомогою стилів.
Якщо виникнуть питання, задавайте, я поясню детальніше. Якщо щось не буде виходити, задавайте питання і надсилайте лістинг коду з тим, що у вас не вийшло.
Пишіть на E-mail: [email protected]
Проект webformyself.com — основи самостійного сайтобудування
Успіхів у навчанні!
З Вами був Андрій Бернацький
