ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Властивості елементів, керованих за допомогою CSS
Колір і фон
Властивості CSS дозволяють розроблювачам керувати кольорами переднього плану і фоном елемента. Оформлення фону може здійснюватися з використанням кольорової палітри або графічних об'єктів. З використанням властивостей фону розроблювані можуть розміщувати, дублювати фонове зображення, а також визначати, чи буде воно фіксованим відносно вікна перегляду або буде переміщуватися разом з документом в процесі його прокручування.
Колір переднього плану: властивість 'color'.
Ця властивість описує колір переднього плану текстового вмісту
елемента.
Значення:
<колір>. •
Наприклад, існує кілька способів задавання червоного кольору:
Приклад:
EM { color: red } /* стандартна назва кольору */
EM {color: rgb(255,0,0) } /* значення системи RGB з
діапазону 0-255 */ •,—
Список ключових слів, що використовуються для назви кольорів: aqua (колір морської хвилі), black (чорний), blue (синій), fuchsia (фуксія), gray (сірий), green (зелений), lime (жовто-зелений), maroon (темно-бордовий), navy (темно-синій), olive (маслиновий), purple (пурпурний), red (червоний), silver (срібний), teal (темно-бірюзовий), white (білий) і yellow (жовтий). Ці 16 кольорів визначені в HTML 4.0 ([HTML40]). Крім того, користувачі можуть створювати власні ключові слова для позначення кольорів.
Фон. Властивості фону: 'beckground-color', 'beckgro_nd-image', 'beckground-repeat', 'background-attachment', 'beckground-position' і 'beckground'.
Розглянемо роботу з фоновими засобами HTML. Для роботи з фоном є два атрибути:
[) BGCOLOR - задає фоновий колір елемента та присутній в елементах BODY, TABLE, TR, ТН і TD. В специфікації HTML 4.01 позначений як небажаний для використання;
І) BACKGROUND - задає фонове зображення для елемента. Відповідно ДО специфікації HTML 4.01 присутній тільки в елементі BODY і Позначений як небажаний для використання, однаж браузери підтримують даний атрибут для елементів TABLE і TD. У специфікації CSS (CSS-1) є п'ять властивостей для роботи з -фигом.
'background-color' — задає колір фону елемента. Головна іідмінність цієї властивості від атрибута BGCOLOR в тому, що з його допомогою можна задати фоновий колір для будь-якого елемента. Допустимо, потрібно зробити блок, в якому буде сірий фон. За допомогою HTML в такому випадку потрібна таблиця, а за допомогою CSS можна
задати стиль на елемент Р.
HTML
CSS
p {
background-color,: #666; color: #FFF}
<Р>Білий текст на сірому тлі</Р>
<TABLEXTRXTD _GCOLOR=#666666>
<FONT- COLOR=#FFFFFF>Білий текст на сірому TJii</FONT>
</TDX/TR></TABLE>
' background-image' - задає графічне фонове зображення елемента. Якщо вказується фонове зображення, то рекомендується вказувати і фоновий колір, тому що малюнок може не завантажитися або користувач відключить завантаження зображень. В цьому випадку текст може погано читатися на фоні за замовчуванням. Якщо встановлювати ■ фонове зображення для таблиці, то CSS не дає ніяких переваг, однак за допомогою CSS можна задати його для будь-якого елемента. HTML
CSS
Р {
background-image: url(img/bg.gif); color: #FFF}
<P>Білий текст на фоновому малюнку</?>
<TABLEXTRXTD BACKGROUND=img/bg.gif>
<FONT COLOR=#FFFFFF>BMMM текст на фоновому малюнку</РО_Т>
< /TDX /TRX /TABLE>
'background-repeat' - якщо задано фонове зображення, визначає, чи буде повторюватися це фонове зображення і, якщо буде, то яким чином. Значення:
• repeat: зображення повторюється по горизонталі і по вертикалі;
• repeat-x: зображення повторюється тільки по горизонталі;
• repeat-y: зображення повторюється тільки по вертикалі;
• no-repeat: зображення не повторюється.
Приклад використання background-repeat:
BODY { backgruund-image: url(img/bg.gif); background-repeat: no-repeat}
<BODY>BM1CT сторінки на фоновому малюнку, що не повторюється</ВООУ>
В HTML подібного атрибуту немає, а за замовчуванням зображення повторюється і по горизонталі, і по вертикалі, тому працювати з фоном тільки засобами HTML дуже складно.
'background-attachment' - задає, чи буде перемішуватися фон разом із у сім вмістом сторінки при скролінгуванні чи ні.,*:.,
Значення:
• fixed: фон буде залишатися нерухомим, а вміст сторінки буде
перемішуватися щодо нього;
• scroll: фон буде переміщуватися разом з іншим вмістом. Значення за
замовчуванням.
Приклад використання background-attachment:
р t
background-image: url(img/bg.gif);
background-repeat: no-repeat; background-attachment: fixed} <Р>Текст на фоновому малюнку, що не повторюється і не рухаеться</Р>.
У HTML немає атрибуту, який рівнозначний даній властивості, а за замовчуванням будь-який фон переміщується при скролінгуванні, тобто має значення scroll.
'background-position' — задає позиціювання фонового зображення. За допомогою цього атрибуту можна зміщувати фонове зображення щодо лівого верхнього кута елементу. Властивість має два параметри: перший визначає зміщення по вертикалі, другий - зміщення по горизонталі.
Значення довжини може бути як додатнім, так і від'ємним. Наприклад, правило: Р {background-image: url(img/bg.gif);
background-position: -12px 50px} зміщує фонове зображення на 12 пікселів вліво і на 50 пікселів вниз від лівого верхнього кута елементу Р. Крім того, можна вказувати відсоткові співвідношення. Відсотки обчислюються щодо ширини і висоти'блоку елемента. Наприклад, правило:
І background-position: 20% 40%} ■■«..'- ■
ШІІНУС фонове зображення на 20% вправо і на 40% вниз від лівого Іірхіїього кута блоку елемента Р. Значенням за замовчуванням є 0%, що відповідає верхньому лівому куту. Крім того, можна замість числових «МН'їсіи. вказувати- вирівнювання відносно елемента- Так для Вирівнювання по вертикалі можна використовувати три ключових слова:
• top: вирівнювання по верхньому краю;
• center: вирівнювання по центру;
V bottom: вирівнювання по нижньому краю.,.
Для вирівнювання по горизонталі можна використовувати ключові
слова:;*
• left: вирівнювання по лівому краю;
• center: вирівнювання по центру; ^ ч»» t right: вирівнювання по правому краю.
Таким чином, правило: t і
bickground-position: 0% 0%} еквівалентне правилу:
т-ч
background-position: top left}
В HTML немає атрибута, який би відповідав даній властивості, а Значення за замовчуванням для фону, заданого засобами HTML, збігається ЗІ значенням за замовчуванням для фону, заданого за допомогою CSS і складає 0% 0%. Р {
•background-image: url(img/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center}
<Т>Текст на фоновому нерухомому малюнку,що не повторюється і відцентрований по горизонталі</Р>
Текст
Властивості тексту впливають на візуальне представлення символів, пропусків, слів і абзаців.
Відступи: властивість 'text-indent'. ^\
Дана властивість визначає відступ першого рядка тесту в блоці. Блок змішується відносно лівого (або правого при розташуванні тексту справа наліво) краю лінійного блоку.
Значення: length: відступ є фіксованою величиною.
percentage: відступ задається у відсотках відносно ширини блоку.
Значення властивості "text-indent" може бути від'ємним, але в конкретних версіях можуть бути встановлені обмеження на використання значень.
В наступному прикладі задається відступ тексту, що дорівнює
'ІОет'.
Р { text-indent: ІОет }
Езарівяювання: властив1сть4ех^а%п\
Цд властивість визначає спосіб вирівнювання послідовного вмісту блоку. Значення:
left: вирівнювання тексту по лівому краю; right: вирівнювання тексту по правому краю; center: вирівнювання тексту по центру; justify: вирівнювання тексту по обох краях.
Блок тексту - це сукупність лінійних блокж При значеннях 'left', 'right' і 'center' ця властивість вказує спосіб вирівнювання послідовних блЙків у кожному лінійному блоці відносно лівої та правої сторони лінійного блоку. При значенні4*justify', крім налагодження положення лінійних блоків, агент користувача може також збільшити послідовні блоки. DIV.center { text-align: center }
В цьому прикладі значення "text-align* успадковується, тому в усіх елементах рівня блоку, що знаходяться в елементі DIV і мають значення "class=center", послідовний вміст буде вирівняно по центру. DIV.center { text-align: Center }
Елементи декорування: підкреслення, надрядкове підкреслення,
підкреслення і мерехкотіння. • j і -:
Властивість 'text-decoration'. *;- -З
Даною властивістю описуються елементи декорування тексту елементів. Якщо властивість задана для елемента рівня блоку, вона впливає на всі наступні'елементи послідовного рівня. Якщо властивість задана для елемента послідовного рівня (або впливає на нього), вона впливає і на всі блоки, що генеруються цим елементом. Якщо в елемента немає вмісту або тексту (наприклад, елемент IMG у HTML), агенти користувачів ігнорують цю властивість.
Значення:
• попе: текст не декорується; '
• underline: усі рядки тексту підкреслюються;
• overline: над кожним рядком тексту розташовується риска;
• line-ithrough: усі рядки тексту перекреслені;
• blink: текст мерехтить.
Потрібний колір(а) для елемента декорування тексту визначається ІИвченням властивості 'color'.
У наступному прикладі для HTML текстовий уміст всіх елементів А,
ЩО діють як гіперпосилання, буде підкреслено:
АІ href] { text-decoration: underline } j'Jsи
Тінь тексту: властивість 'text-shadow'.
Цією властивістю описуються тіні тексту.
Значення: попе: текст немає елементів тіні; 'color': колір затінення;
'length': зсув затінення. Вказує горизонтальну відстань до правої частини тексту. При від'ємному значенні довжини затінення міститься ліворуч лід тексту; 'length': визначає вертикальну відстань знизу від тексту. При від'ємному
значенні вертикальної відстані затінення розташовується над текстом; 'Inherit': радіус розмиття.
Зсув затінення вказується за допомогою двох значень 'length'.
Значенням цієї властивості може бути список ефектів затінення, що будуть застосовані до тексту елемента. Ефекти затінення застосовуються в зазначеному порядку і тому можуть накладатися один на одного, але ніколи не перекриють сам текст. Ці ефекти не змінюють розмір блоку, але можуть виходити за границі блоку. Вони знаходяться на одному рівні положення із самим елементом.
Для кожного ефекту затінення зазначається зсув затінення, а також може вказуватися радіус розмиття і колір затінення.
В представленому нижче прикладі тінь1, буде розташовуватися Праворуч і нижче тексту елемента. Так як колір не зазначений, затінення буде мати той же колір, що й елемент, а оскільки не зазначений радіус розмиття, затінення не буде розмите: НІ { text-shadow: 0.2em 0.2em }
В наступному прикладі тінь розташовується праворуч і нижче тексту елемента. Тінь буде червоного кольору з радіусом розмиття 5рх. Н2 { text-shadow: Зрх Зрх 5рх red }
В наступному прикладі представлений список ефектів затінення. Перша тінь розташовується праворуч і нижче тексту елемента, вона буде червоного кольору без розмиття. Друга тінь перекриє першу; вона буде жовтого кольору, розмита і буде знаходитися ліворуч і нижче тексту. Третя тінь буде знаходитися праворуч і над текстом. Так як колір цієї тіні не зазначений, буде використовуватися значення вл&ййвості елемента 'color"
Н2 { text-shadow: Зрх Зрх red, yellow -Зрх Зрх 2рх, Зрх -Зрх }
Відстань між буквами і словами: властивість 'Istfter-spacing' і 'word-spacing'.
'letter-spacing' - це значення дозволяє задати додатково міжсимвольну відстань, що додається до стандартної. Значення можуть бути від'ємними, їх застосування залежить від реалізації. На відстань між символами також може вплинути вирівнювання з обох країв. В даному прикладі відстань між символами в елементах BLOCKQUOTE збільшена на'О.Іет'. BLOCKQUOTE { letter-spacing: O.lem }
'word-spacing' - ця властивість визначає відстань між словами.
В даному прикладі відстань між усіма словами в елементі НІ збільшується на Tern1. НІ { word-spacing: lem }
Виділення великими буквами: властивість 'text-transform'. Ця властивість керує великими буквами в тексті елемента. Значення: capitalize: кожне слово починається з великої букви; nppercase: усі букви кожного слова будуть великими; lowercase: усі букви кожного слова будуть рядковими; попе: не впливає на букви.
В даному прикладі весь текст в елементі НІ буде виділений великими буквами. НІ { text-transform:' uppercase }
Шрифти
При описанні шрифту використовуються наступні його
характеристики: - -
Стиль шрифту визначає, який тип накреслення 6yjK використовуватися для представлення тексту: звичайний, курсив або похилий. Курсив - це щось середнє між нормальним і рукописним стилем накреслення. Похилий тип відрізняється від нормального тільки тим, що має деякий постійний нахил, що не змінює накреслення нормальної форми шрифту. Такий стиль найчастіше використовується в сполученні з шрифтами без засічок (sans-serif).
Варіант шрифту вказує, Щ будуть рядкові символи тексту відображатися з використанням звичайних гліфів або гліфів капітелі. Кожен конкретний шрифт може містити або тільки звичайні гліфи, або тільки гліфи капітелі, або і ті й інші. Ця властивість використовується для запиту необхідного шрифту і необхідного типу гліфів, якщо шрифт містить обидва варіанти гліфів.
Вага шрифту визначає, наскільки гліфи, що використовуються для відображення тексту, темніші або світліші інших шрифтів тієї ж гарнітури.
Масштабування шрифту визначає, наскільки гліф, що іикорстовується для відображення тексту, стиснутий або розтягнутий щодо інших шрифтів тієї ж гарнітури.
Розмір шрифту визначає величину шрифту від однієїбазової лінії до іншої при наборі без шпонів (у термінах CSS це має місце, якщо Властивості 'font-size' і 'line-height' приймають однакові значення).
Для усіх властивостей, крім 'font-size', масштаб одиниць нимірювання довжини 'em' і 'ех' визначається щодо розміру шрифту поточного елемента. Для властивості 'font-size' масштаб цих одиниць вимірювання визначається щодо розміру шрифту батьківського елемента.
Гарнітура шрифту: властивість 'font-family' ■- ця властивість задає список імен гарнітур шрифтів і/або імен загальнодоступних гарнітур у порядку їхнього пріоритету.
Стиль шрифту: властивості 'font-style, 'font-variant, 'font- weight, Tont-strech.
Властивість 'font-style' надає можливість вибору нормального (прямого ("roman" або "upright")), курсивного або похилого типу накреслення в рамках однієї гарнітури шрифтів.
Значення: normal: задає шрифт, що у базі даних шрифтів агента користувача
описується як нормальний ('normal'); oblique: задає шрифт, що описується як похилий ('oblique'); Italic: задає шрифт, що описується як курсивний ('italic') або похилий ('oblique'), якщо курсивний тип накреслення недоступний.
Властивість 'font-variant' визначає вибір варіанта шрифту, що Володіє двома наборами знаків (тобто двома регістрами).
Значення: ПОгтаІ: задає шрифт, що не містить капітелі;
small-caps: задає шрифт, що містить капітель. В наступному прикладі слсментНІ відображається капітеллю, а виділені (за допомогою елемента ЕМ) слова відображаються похилою капітеллю: НІ { font-variant: small-caps } KM { font-style: oblique }
Властивість 'font-weight' задає вагу шрифту. Значення: від 100 до 900: ці значення представляють впорядковану послідовність,
кожне число в якій позначає вагу в порядку її зростання; normal: аналогічно '400'; bold: аналогічно 700';
Алфавітні:
lower-greek: класичні рядкові грецьких букв: альфа, бета гама,... (а, р, у,
lower-alpha: малі літери в коді ascii (а, Ь, с,... z); lower-latin: малі літери в коді ascii (а, Ь, с,... щ upper-alpha: великі букви в коді ascii (А, В, С,... Z);
upper-latin: великі букви в коді ascii (А, В, С,... Z).
Для великих списків рекомендується використовувати числа. Приклад. В результаті виконання наступного коду HTML <HTML> <HEAD>
<ТІТЬЕ>Нумерація з використанням прописних римських цифр</ТІТЬЕ>
<STYLE type="text/css">;:;%;;.
OL { list-style-type: upper-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Перший елемент.
<LI> Другий елемент.
<LI> Третій елемент. *
</OL>
</BODY> </HTML> отримаємо:
I Перший елемент. *...__.
II Другий елемент. ' -'".З
III Третій елемент.
Властивість 'Iist-style-image' - визначає графічний об'єкт, що використовується як маркер елемента списку. Якщо графічний об'єкт доступний, то він замінює маркер, встановлюваний властивістю 'list-style-type'.
Наприклад, перед кожним елементом списку як маркер використовується графічний об'єкт "marker.jpg". OL { list-style-image: url("http://marker.jpg") }
Властивість 'list-style-position' і визначає положення блоку маркера в головному структурному блоці.
Значення: outside: блок маркера знаходиться за межами головного структурного блоку.
inside: блок маркера знаходиться в першому рядковому блоці головного структурного блоку, після якого виводиться вміст елемента;
Властивість 'list-style' - є скороченою формою завдавання трьох їластивостей 'list-style-type', 'list-style-image^ і 'list-style-position1 в одному МІСЦІ таблиці стилів..
UL { list-style: upper-roman inside } /* Любою влемент UL */
Ші > UL { list-style: circle outside } /* Любою дочірній елемент UL елемента UL */
Іншим способом вирішення може стати задавання інформації 'list-Ityle' про стиль списку винятково в елементах списку: OL.alpha { list-style: lower-alpha } UL { list-style: disc }
Завдяки успадковуванню значення властивості 'list-style' елементів OL і UL будуть передаватися відповідним властивостям елементів LI. Саме цей спосіб рекомендується використовувати для визначення Інформації про стиль списку.
Значення URL може комбінуватися з будь-яким іншим значенням, як це зроблено в наступному прикладі: UL {list-style: url(("http://marker.jpg") disc }
Якщо не вдається одержати доступ до графічного об'єкта, то замість нього тут буде використовуватися маркер типу 'disc'. '
Якщо для властивості list-style' встановлюється значення 'попе', то Властивостям 'list-style-type' і 'list-style-image' також привласнюється Значення 'попе': UL { list-style: попе }
В результаті маркер елемента списку не відображається.
Контрольні питання
1. Призначення каскадних таблиць стилів. Переваги використання.
2. Поясніть різницю між способами підтримки стилів документа. Створення таблиць зв'язаних стилів (linked style sheet), глобальних стилів (global style sheet), внутрішні стилів (inline style).
3. Які основні параметри кольору, фону доступні у стилях HTML?
4. Які основні параметри шрифтів доступні у стилях HTML?
5. Які основні параметри тексту доступні у стилях HTML?
6. Які основні параметри абзацу, як блокового елементу, доступні у стилях HTML?
7. Які основні параметри списків доступні у стилях HTML?
Не нашли, что искали? Воспользуйтесь поиском: