CSS приклади
- Емуляція псевдокласу first-child в IE6
- IE6-7 і ширина картинки в% всередині таблиці (img width 100%)
- Колір фону виділеного тексту
- кросбраузерності прозорість
- Як зробити текст посилання одного кольору, а підкреслення іншого кольору?
- Посилання, відразливі дужки: [Link]
- Як прибрати відступ під картинкою в комірці таблиці?
- Як прибрати рамку навколо посилання?
- Вертикальне вирівнювання картинки по центру в Троки тексту. Як зробити в CSS?
- Як за допомогою CSS зробити так, щоб відображались усі рамки таблиці, тобто рамки і самої таблиці...
- Як правильно поставити колір hr через CSS?
- Як заборонити розмноження / повторення фонового зображення (background-image)?
- Як збільшити відстань між елементами списку?
- Як зробити текст нижнім або верхнім індексом (верхній індекс нижній індекс тексту)
- Як змінити зовнішній вигляд курсору (CSS cursor)?
- Як зробити вирівнювання картинки в CSS (аналог HTML-вирівнювання картинки <IMG align = "right" ...> в CSS)?
- Як припинити обтікання картинки текстом?
- Картинка залазить на рамку батьківського елемента, якщо до IMG застосувати float (IMG float border)....
- Висота div в internet explorer - IE розтягує порожній DIV по висоті. Як бути?
- Аналоги HTML атрибутів таблиці cellspacing і cellpadding в CSS (<table cellspacing = "0" cellpadding = "0"> засобами CSS)
- Створення буквиці за допомогою CSS (псевдоелемент first-letter)
- Як встановити font-weight: bold в випадаючому списку (select option font-weight: bold)?
- Як зробити підкреслений пунктиром (пунктирною лінією) текст?
- Як змінити стилі смуг прокрутки (CSS scrollbar)?
- Колір фону і тексту
Емуляція псевдокласу first-child в IE6
Для того щоб задати стиль першому дочірньому елементу, наприклад, списку, рядки таблиці, і т.п. використовується псевдоклас: first-child:
UL LI: first-child {background: blue; };Таким чином ми встановимо колір фону синім і тільки першого елемента ненумерованого списку. Чудово, однак в IE6 first-child не працює, тому доведеться йти в обхід:
* HTML UL LI {background-color: expression (this.previousSibling == null? 'Blue': ''); }IE6-7 і ширина картинки в% всередині таблиці (img width 100%)
В IE версій 6 і 7 зображення всередині комірки таблиці добре масштабується відсотками в бік збільшення зображення, наприклад, невелику картинку можна розтягнути на всю ширину великий осередки, вказавши для тега IMG атрибут width рівним 100%, але от якщо осередок менше картинки, то велика картинка не зменшується, а навпаки розтягує таблицю під себе. Як же це обійти? Запам'ятайте, якщо маєте справу з таблицями, які можуть вмістом розтягуватися ширше заданого розміру, то встановіть для таблиці, тега TABLE стиль table-layout: fixed; і проблема буде вирішена. Нижче приклад:
<Html> <head> <style type = "text / css"> TABLE {table-layout: fixed;} </ style> </ head> <body> <table width = "100%"> <tr> <td > <img src = "image.jpg" width = "100%" /> </ td> </ tr> </ table> </ body> </ html>Колір фону виділеного тексту
CSS3 поступово реалізується в сучасних браузерах і може радувати різними смаколиками. Одна з них, може і не особливо важлива, але все ж приємна, це псевдо-селектор :: selection, за допомогою якого можна задати колір фону при виділенні тексту на сторінці:
:: selection {background: # FF9E6F;} :: - moz-selection {background: # FF9E6F;}* IE аж до IE8 RC1 не підтримують дане властивість.
кросбраузерності прозорість
Нижче два малюнки, до другого малюнку застосована прозорість в 50%
filter: alpha (opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;* Internet explorer вимагає щоб у елемента до якого застосовується прозорість були задані властивості height і width.
Як зробити текст посилання одного кольору, а підкреслення іншого кольору?
приклад посилання
Почну з сухої констатації специфікації CSS, згідно з якою вкладені елементи успадковують властивість color і не успадковують властивість text-decoration.
У наступному прикладі:
- встановлюється властивість color: red для посилання;
- встановлюється властивість color: blue для елемента "<span>" вкладеного в посилання.
Таким чином, текст посилання укладений в тег span має свою властивість color: blue, яке перекриває батьківське властивість color: red, але так як у елемента span немає за замовчуванням підкреслення, то і його колір не переопределяется і підкреслення залишається таким же як і визначено для батька (для посилання, тобто червоним).
<Html> <head> <style type = "text / css"> A {color: red;} A SPAN {color: blue;} </ style> </ head> <body> <a href="#"> <span> Приклад посилання </ span> </a> </ body> </ html>Посилання, відразливі дужки: [Link]
цікаві [CSS лінки] можна отримати так:
<Html> <head> <style type = "text / css"> A.pushLink {padding: 0 3px; font-weight: bold; text-decoration: none; } A: hover.pushLink {padding: 0; } A: hover.pushLink span {margin: 0 3px; color: red; } </ Style> </ head> <body> <a class="pushLink" href=""> [<span> CSS лінки </ span>] </a> </ body> </ html>Як прибрати відступ під картинкою в комірці таблиці?
TD> IMG {display: block; }Як прибрати зайвий простір навколо форми?
FORM {margin: 0; }Як прибрати рамку навколо картинки-посилання?
Коли картинка розміщується всередині посилання (<A> <IMG src = "..."> </A>), то браузер може малювати рамку навколо цієї картинки (IE саме так і поступає). Для того, щоб прибрати рамку навколо картинки слід застосувати наступний CSS:
A IMG {border: none; }Як прибрати рамку навколо посилання?
Рамка навколо посилання, яка з'являється при кліці на неї, буває дуже недоречно. Щоб прибрати рамку навколо посилання необхідно визначити стиль CSS властивості outline наступним чином:
A {outline: none; }Можна використовувати і трохи коротший варіант запису, встановивши ширину рамки в нуль:
A {outline: 0; }Властивість outline не підтримуються в IE нижче 8 версії.
Вертикальне вирівнювання картинки по центру в Троки тексту. Як зробити в CSS?
Вертикальне вирівнювання картинки 
по центру рядка виконується за допомогою значення middle властивості vertical-align.
Як за допомогою CSS зробити так, щоб відображались усі рамки таблиці, тобто рамки і самої таблиці і осередків і щоб рамки не подвоювали один одного (CSS таблиці комірки рамки подвоєння рамок)?
Для цього необхідно застосувати правила CSS як table так і до td і th. Але, крім цього необхідно встановити властивість border-collapse: collapse, для того, щоб уникнути подвоєння рамок.
table.bt1, table.bt1 td {border: 1px solid blue; border-collapse: collapse; }Детальніше дивіться в специфікації
Як правильно поставити колір hr через CSS?
Колір hr елемента для IE встановлюється через властивість color, а для Opera Mozilla / Gecko властивість background-color. При цьому слід врахувати, що за замовчуванням рамки навколо елемента hr в IE немає, а в Opera Mozilla / Gecko вона є (тому для однакового відображення встановлюйте і властивості рамок). Причому якщо не вказувати висоту hr в Opera, то показуються тільки рамки притиснуті один до одного впритул без внутрішньої області (колір якої і задається властивістю background-color). Тому для Opera слід вказувати і властивість height крім background-color.
hr {color: red; background-color: red; height: 1px; border-width: 0px; / * Прибрати рамки навколо елемента * /} hr {color: red; background-color: red; height: 10px; border: 3px solid blue; }Як заборонити розмноження / повторення фонового зображення (background-image)?
У цьому вам допоможе властивість background-repeat.
Властивість background-repeat визначає, як буде повторюватися фонове зображення, встановлене за допомогою параметра background-image, і по якій осі. Можна встановити повторення малюнка тільки по горизонталі, по вертикалі або в обидві сторони.
синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y
Значення no-repeat встановлює одне фонове зображення в елементі без його повторень, положення якого визначається атрибутом background-position (за замовчуванням в лівому верхньому куті). Іншими допустимими значеннями є repeat (повторюваність по вертикалі і горизонталі), repeat-x (по горизонталі), repeat-y (по вертикалі).
<P style = "background-image: url (bg_ex_rpt.gif); background-repeat: repeat-x;">
</ P>
Як збільшити відстань між елементами списку?
li {margin-top: 1em; }Як зробити відступ / виступ першого рядка блоку тексту (абзацу)
Властивість text-indent встановлює величину відступу першого рядка блоку тексту. Впливу на всі інші рядки не виявляється. Допускається від'ємне значення для створення виступу першого рядка, але слід перевірити, щоб текст не виходив за межі вікна браузера.
синтаксис
text-indent: значення | відсотки
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При завданні значення у відсотках, відступ першого рядка обчислюється в залежності від ширини блоку. Допустимо використовувати негативні значення, але при цьому в різних браузерах можливе виникнення помилок. Значення за замовчуванням 0. Значення, присвоєні даному параметру, успадковуються.
Як зробити текст нижнім або верхнім індексом (верхній індекс нижній індекс тексту)
CSS властивість vertical-align (auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom), що задає вертикальне вирівнювання елемента всередині батьківського блоку. В даному випадку нас цікавлять значення sub і super:
vertical-align: sub; / * Перетворює текст в нижній індекс; * / Vertical-align: super; / * Перетворює текст в верхній індекс; * /Як змінити зовнішній вигляд курсору (CSS cursor)?
Вид курсору визначається за допомогою CSS властивості cursor. Подробиці дивіться в статті: " CSS cursor - курсори різні потрібні ".
Як зробити вирівнювання картинки в CSS (аналог HTML-вирівнювання картинки <IMG align = "right" ...> в CSS)?
Для цього в CSS передбачено властивість float, яке визначає по якій стороні буде вирівнюватися елемент, і як інші елементи будуть обтікати його з інших сторін.
синтаксис:
float: left | right | noneleft - вирівняти елемент по лівому краю, при цьому інші елементи (наприклад, текст) огинають його по правій стороні.
right - вирівняти елемент по правому краю, при цьому інші елементи огинають його по лівій стороні.
none - вирівнювання і обтікання не ставить.
Як припинити обтікання картинки текстом?
Вставте в текст в тому місці де слід припинити обтікання наступне:
<br style="clear: both">Властивість clear встановлює, з якого боку елемента заборонено його обтікання іншими елементами.
синтаксис:
clear: both | left | none | rightКартинка залазить на рамку батьківського елемента, якщо до IMG застосувати float (IMG float border). Як запобігти цьому?
Тут допоможе вставка елемента <div style = "clear: both;"> </ div>
<Div style = "border: 1px solid black"> <img style = "float: left" src = "..." /> <p> Текст який обтікає картинку </ p> <div style = "clear: both; "> </ div> </ div>Хочу зауважити, що вставка <BR style="clear: both;"> в даному випадку не допоможе браузеру IE.
Висота div в internet explorer - IE розтягує порожній DIV по висоті. Як бути?
Якщо створити порожній DIV і задати йому висоту, наприклад в 1px, то Internet Explorer не відображається елемент з потрібною висотою, висота буде більше, хоча і в Mozilla і в Opera все впорядке. Як же виправити становище в IE?
Установка властивості font-size в 0 виправить становище.
DIV # line {font-size: 0;}Аналоги HTML атрибутів таблиці cellspacing і cellpadding в CSS (<table cellspacing = "0" cellpadding = "0"> засобами CSS)
<Style type = "text / css"> / * cellspacing = 0 * / TABLE {border-collapse: collapse;} / * cellpadding = 0 * / TABLE TD {padding: 0px} / * cellspacing = 5 * / TABLE {border -collapse: separate; border-spacing: 5px} / * cellpadding = 3 * / TABLE TD {padding: 3px} </ style> Властивість border-spacingВластивість border-collapse
Примітка: Властивість border-spacing не підтримує Internet Explorer аж до версії 6.0
Створення буквиці за допомогою CSS (псевдоелемент first-letter)
<Style type = "text / css"> P: first-letter {color: red; font-size: 200%; float: left} </ style>Досить просто створити буквицю за допомогою псевдоелемента: first-letter в CSS, який задає стиль першої букви в текстовому елементі. Зверніть увагу, що для створення "натуральної" літери обтічної текстом слід вказати також властивість float.
Примітка: псевдоелемент: first-letter підтримується Internet Explorer 5.5 і вище, Netscape Navigator 6.0 і вище, Opera 4+.
Як встановити font-weight: bold в випадаючому списку (select option font-weight: bold)?
Зазначу відразу, що встановити даний стиль для окремого елемента списку через тег OPTION в IE включаючи версію 6 - НЕ МОЖНА, але в Gecko можна. Однак якщо потрібно застосувати даний стиль до всього списку, то потрібно прив'язати стиль до тегу SELECT, а не до OPTION.
<Select style = "font-weight: bold">Як зробити підкреслений пунктиром (пунктирною лінією) текст?
Рядок підкреслена пунктиром. <Style type = "text / css"> .dashedtext {border-bottom: 1px dashed red; } </ Style> <span class = "dashedtext"> Рядок підкреслена пунктиром. </ Span>Як підкреслити текст червоною хвилястою лінією?
Ми звикли до підкреслення ошімбок в Word-e у вигляді хвилястих ліній і хотілося б такий же вид підкреслюючи реалізувати на своїх сторінках. <Style type = "text / css"> .wavyline {background: url (wavyline.gif) repeat-x 100% 100%; padding-bottom: 2px; text-decoration: none; white-space: nowrap; } </ Style> <span class = "wavyline"> ошімбок </ span>Як зробити так, щоб текст відображався без переносів (альтернатива NOBR в CSS)?
.nobr {white-space: nowrap; }Як вирівняти маркери по вертикалі по центру?
При використанні властивості list-style-image для завдання графічного маркера списку виникає проблема його кросбраузерності вирівнювання по вертикалі. Щоб її вирішити можна відмовитися від list-style-image на користь фону:
ul {list-style: none; } Li {padding-left: 15px; background: url (bullet.gif) no-repeat left center; }- рядок 1
- рядок 2
- рядок 3
Як змінити стилі смуг прокрутки (CSS scrollbar)?
Змінювати зовнішній вигляд смуг прокрутки не можна (не потрібно порушувати звичні для користувача речі)! Але якщо дуже хочеться - то можна. Як сказано в статті: "Оздоблюються скролінг за допомогою CSS" .
Колір фону і тексту
Хоча у більшості користувачів в браузері, за замовчуванням колір фону білий, а тексту чорний, є і неприємні ;-) випадки. Тому, додавання двох найпростіших правил CSS має бути присутнім в ваших листах стилів. наприклад:
body {color: # 000; background: #fff; }Як прибрати рамку навколо посилання?
Як зробити в CSS?
Як правильно поставити колір hr через CSS?
Як заборонити розмноження / повторення фонового зображення (background-image)?
Як збільшити відстань між елементами списку?
Як зробити вирівнювання картинки в CSS (аналог HTML-вирівнювання картинки <IMG align = "right" ...> в CSS)?
Як припинити обтікання картинки текстом?
Як бути?
Як зробити підкреслений пунктиром (пунктирною лінією) текст?
Як змінити стилі смуг прокрутки (CSS scrollbar)?