CSS faq - Запитання і відповіді про таблиці стилів CSS

Створення сайту, хостинг та домен, базова оптимізація

FAQ по CSS

Запитання:

Що таке СSS?

Відповідь:
CSS - Cascading Style Sheets - Каскадні таблиці стилів або ж просто таблиці стилів (або ще простіше - стилі) - це мова, що містить набір властивостей для опису зовнішнього вигляду документів в мовах розмітки (наприклад в HTML або XML), але окрім цього в СSS є можливість створювати стилі для друкарської версії документа і для управління звуком.

Запитання:

Як оголосити глобальний стиль?

Відповідь:
Давайте оголосимо стиль тексту для попередження (warning) і колір для нього задамо червоний. В html-файлі між тегами <head> і </head> потрібно прописати наступний рядок:

Зауваження! Текст ".warning { color: red; }" брати в коментар не обов'язково. Але це нас убезпечить від неправильного трактування коду старими браузерами.

Запитання:

Як вставити (імпортувати) стилі з іншого файлу (наприклад, mystyle.css)?

Відповідь:
У html-файлі потрібно прописати в будь-якому місці між тегами <head> і </head> наступний рядок:

В цьому рядку вказується, що зв'язуваний файл є таблицею стилів (rel="stylesheet"), формат цього файлу - .css (type="text/css") і знаходиться він в тій же директорії, що і файл html, або має іншу URL-адресу (href="mystyle.css").
Зауваження! Очевидно, що цей рядок ми можемо прописати в будь-якому з наших html-файлів. Таким чином, єдине стильове оформлення буде прописано для декількох сторінок відразу.

Запитання:

Що таке контекстні селектори?

Відповідь:
Контекстні селектори (Contextual Selectors) - це поєднання декількох звичайних селекторів. Стиль задається тільки елеметнам в заданій послідовності залежно від каскадного порядку. Наприклад,

Запитання:

Як задати колір в CSS?

Відповідь:
Значенням кольору може бути його англійська назва (coral, magenta, lightgreen, red і тощо) або RGB-значення.

Способи виразити колір в RGB (red green blue):

#rrggbb (наприклад, #00cc00)
#rgb - скорочений запис (наприклад, #0c0)
rgb(x,x,x) - де "х" число від 0 до 255 (наприклад, rgb(0,204,0))
rgb (x%,x%,x%) - де "х%" число від 0.0 до 100.0 (наприклад, 0%,80%,0%)

Зауваження! Вказувати кольори ефективніше шляхом видалення кожного другого числа, що повторюється: #369 ідентично #336699.

Зауваження! Не забувайте ставити символ "#" перед кодом кольору.

Запитання:

Яка різниця між класами і ідентифікаторами в CSS?

Відповідь:
По суті між класами і ідентифікаторами в CSS ніякої відмінності немає, хіба що їх вказувати потрібно по різному, але працюють вони обидва абсолютно однаково, єдина відмінність це те, що в HTML, атрибут id має особливе значення. Цей ідентифікатор може мати зв'язок зі скриптами і його назва не повинна повторюватись.

Так створюються класи:

.MyClass { font-weight: bold }

А так ідентифікатори:

#MyId { font-weight: bold }

Запитання:

Що таке псевдостилі тексту?

Відповідь:
Псевдостилі застосовуються деяким елементам текстових абзаців, наприклад, до першого рядка абзацу або першої букви першого рядка.

first-letter - застосовується до першої букви першого рядка абзацу. Може використовуватися для створення буквиці.

Синтаксис:

{ Задання стилю абзацу}:first-letter { Визначення стилю }

Приклад:

.flt:first-letter {font-size: 16pt;}

first-line - застосовується до першого рядка абзацу.
Синтаксис:

{ Задання стилю абзацу}:first-line { Визначення стилю }

Приклад:

.fln:first-line {text-decoration: underline;}

Зауваження! Підтримується IE починаючи з 5.0

Запитання:

Які кольри вважаються безпечними для використання в Internet'і?

Відповідь:
Безпечні для Всесвітньої мережі кольори - це ті, які діляться без остачі на 3 для червоного, зеленого і синього значень: 0, 3, 6, 9, C і F. Наприклад, #39C є безпечним кольором, #26F не є.

Запитання:

Як подавити підкреслення посилань в деяких місцях?

Відповідь:

<head>
...
<style type="text/css">
а.noneline {text-decoration: none;}
</style>
...
</head>

Після чого застосовуємо цей стиль так:

Запитання:

Як зробити непідкреслені посилання скрізь?

Відповідь:

<head>
...
<style type="text/css">
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: none; }
</style>
...
</head>

Запитання:

Як зробити так, щоб при наведенні мишки на текст з посиланням він поміняв колір?

Відповідь:

<head>
...
<style type="text/css">
a:hover { color: #rrggbb }
</style>
...
</head>

де #rrggbb - бажаний колір.

Запитання:

Як вказати колір фону?

Відповідь:
Для вказівки кольору фону використовується селектор background-color. Застосувати цей селектор можна практично до будь-якого елементу.
Наприклад:

body { background-color: #c0c0c0; }

Запитання:

Як за допомогою CSS забрати відступи від краю браузера?

Відповідь:
Слід обнулити властивості margin і padding для всіх елементів. Це можна зробити так:

* {
margin: 0;
padding: 0;
}

Зауваження! Коли значення рівне 0, то можна не задавати одиницю вимірювання, оскільки 0 = 0px = 0pt = 0mm =...

Запитання:

Чи можна записувати декілька імен класів для одного елементу?

Відповідь:
Можна. Імена слід вказувати між лапок через пропуск.
Наприклад:

Запитання:

Як заховати CSS-файли від старих браузерів?

Відповідь:
Використовуйте @import. Хоча тут є певні нюанси для Internet Explorer 4: цей браузер сильно спотворює імпортований CSS, якщо використовувати @import url("style.css");. Тому слід використовувати наступний синтаксис для @import:

<head>
...
<style type="text/css">
...
@import "style.css";
...
</style>
...
</head>

Запитання:

Як заховати деякі стилі від Internet Explorer'а?

Відповідь:
Щоб заховати правило від IE, слід скористатися child selector'ом:

html>body p {
/* тут мають бути декларації */
}

Зірочка і html заховає правило від всіх браузеров, окрім IE:

* html p {
/* тут мають бути декларації */
}

Ще одне рішення - спеціальні коментарі (conditional comments).

Запитання:

Як за допомогою CSS можна зробити кнопку з посилання?

Відповідь:
Як відомо, посиланням може бути не тільки текст, але і графіка. І на графічних посиланнях атрибут "border" теж працює. Таким чином можна зробити майже справжні "програмні" кнопки:
Код:

<html>
<head>
<style type="text/css">
A {
border: 2px outset;
}
A:hover {
border: 2px inset;
}
</style>
</head>
<body>
<a href="about.html">Про нас</a>
</body>
</html>

Запитання:

Як задати колір скролл-бару?

Відповідь:
Для задання оформлення скролл-бару необхідно прописати таблицю стилів, наступного вигляду:

Останні розробки:

Вентиляция
Двері
Устройство полов
Косметика
Надіслати СМС
отмена виз сша
сайт Global Growth Factors (Blood and Tissue) Market to...
сайт viagra online canada
сайт Play the most popular poker tool games and forget about losing streaks!
сайт sony tt1rm