FAQ по CSS - що таке стилі 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>

Запитання:

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

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

	FAQ по CSS Запитання: Що таке СSS? Відповідь: CSS - Cascading Style Sheets - Каскадні таблиці стилів або ж просто таблиці стилів (або ще простіше - стилі) - це мова, що містить набір властивостей для опису зовнішнього вигляду документів в мовах розмітки (наприклад в HTML або XML), але окрім цього в СSS є можливість створювати стилі для друкарської версії документа і для управління звуком. Запитання: Як оголосити глобальний стиль? Відповідь: Давайте оголосимо стиль тексту для попередження (warning) і колір для нього задамо червоний. В html-файлі між тегами <head> і </head> потрібно прописати наступний рядок: <style type="text/css"> <!-- .warning { color: red; } --> </style> Зауваження! Текст ".warning { color: red; }" брати в коментар не обов'язково. Але це нас убезпечить від неправильного трактування коду старими браузерами. Запитання: Як вставити (імпортувати) стилі з іншого файлу (наприклад, mystyle.css)? Відповідь: У html-файлі потрібно прописати в будь-якому місці між тегами <head> і </head> наступний рядок: <link href="mystyle.css" rel="stylesheet" type="text/css"> В цьому рядку вказується, що зв'язуваний файл є таблицею стилів (rel="stylesheet"), формат цього файлу - .css (type="text/css") і знаходиться він в тій же директорії, що і файл html, або має іншу URL-адресу (href="mystyle.css"). Зауваження! Очевидно, що цей рядок ми можемо прописати в будь-якому з наших html-файлів. Таким чином, єдине стильове оформлення буде прописано для декількох сторінок відразу. Запитання: Що таке контекстні селектори? Відповідь: Контекстні селектори (Contextual Selectors) - це поєднання декількох звичайних селекторів. Стиль задається тільки елеметнам в заданій послідовності залежно від каскадного порядку. Наприклад, <style type="text/css"> <!-- P EM {color: #333333;} --> </style> Запитання: Як задати колір в 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> Після чого застосовуємо цей стиль так: <a href="посилання" class="noneline"> Запитання: Як зробити непідкреслені посилання скрізь? Відповідь: <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 =... Запитання: Чи можна записувати декілька імен класів для одного елементу? Відповідь: Можна. Імена слід вказувати між лапок через пропуск. Наприклад: <p class="title blue"> ... </p> Запитання: Як заховати 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). <!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> Запитання:* Як за допомогою 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> Запитання: Як задати колір скролл-бару? Відповідь: Для задання оформлення скролл-бару необхідно прописати таблицю стилів, наступного вигляду: <style type="text/css"> <!-- body { scrollbar-face-color: #006000; scrollbar-highlight-color: #9999999; scrollbar-shadow-color: #666666; scrollbar-3dlight-color: #666666; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #e0efe0; scrollbar-darkshadow-color: #666666; } //--> </style>		Наші клієнти Український хостинг компьютерная помощь театральная сайт восстановление данных в лефортово сайт rolex watches
	Copyright © 2006-2007 488.com.ua