CSS примеры

Эмуляция псевдокласса 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;} //Opera, Safari, Google Chrome
::-moz-selection {background: #FF9E6F;} //FireFox

* IE вплоть до IE8 RC1 не поддерживают данное свойство.

Кроссбраузерная прозрачность

Ниже два рисунка, ко второму рисунку применена прозрачность в 50%

filter: alpha(opacity=50); /* IE 5.5+*/
   -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
   -khtml-opacity: 0.5; /* Konqueror 3.1+, Safari 1.1 */
   opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

* Internet explorer требует чтобы у элемента к которому применяется прозрачность были заданы свойства height и width.

Читайте так же статью "CSS прозрачность (css opacity, javascript opacity)"

Как сделать текст ссылки одного цвета, а подчеркивание другого цвета?

Пример ссылки

Начну с сухой констатации спецификации 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 cсылки ] можно получить так:

<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 cсылки</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.

IMG.middle { vertical-align: middle }

Как с помощью CSS сделать так, чтобы отображались все рамки таблицы, т.е. рамки и самой таблицы и ячеек и чтобы рамки не удваивали друг друга(CSS таблицы ячейки рамки удваивание рамок)?

Для этого необходимо применить правила CSS как table так и к td и th. Но, помимо этого необходимо установить свойство border-collapse: collapse, для того, чтобы избежать удваивания рамок.

table.bt1, table.bt1 td {
  border: 1px solid blue;
  border-collapse: collapse;
}

C	S	S
ра	м	ки

Подробнее смотрите в спецификации

Как правильно задать цвет hr через CSS?

Цвет hr элемента для IE устанавливается через свойство color, а для Opera Mozilla/Gecko свойство background-color. При этом следует учесть, что по умолчанию рамки вокруг элемента hr в IE нет, а в Opera Mozilla/Gecko она есть (поэтому для одинакового отображения устанавливайте и свойства рамок). Причем если не указывать высоту hr в Opera, то показываются только рамки прижатые друг к другу вплотную без внутренней области (цвет которой и задается свойством background-color). Поэтому для Opera следует указывать и свойство height помимо background-color.

//Цвет hr элемента
hr {
	color:red;
	background-color:red;
	height: 1px;
	border-width:0px; /* убрать рамки вокруг элемента */
}

//Цвет hr элемента с рамкой
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 (по вертикали).

Пример:

Как увеличить расстояние между элементами списка?

li { margin-top: 1em; }

Как сделать отступ/выступ первой строки блока текста (абзаца)

Свойство text-indent устанавливает величину отступа первой строки блока текста. Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Синтаксис
text-indent: значение | проценты

Стиль примененный к верхнему абзацу
<p style="text-indent:40px;">

Стиль примененный к нижнему абзацу
<p style="padding-left:50px; text-indent:-40px;">

В качестве значений принимаются любые единицы длины, принятые в CSS - например, пиксели (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок. Значение по умолчанию 0. Значения, присвоенные данному параметру, наследуются.

Как сделать текст нижним или верхним индексом (верхний индекс нижний индекс текста)

vertical-align: sub; /* превращает текст в нижний индекс; */
vertical-align: super; /* превращает текст в верхний индекс; */

Как изменить внешний вид курсора (CSS cursor)?

Вид курсора определяется с помощью CSS свойства cursor. Подробности смотрите в статье: "CSS cursor - курсоры разные нужны".

Как сделать выравнивание картинки в CSS (аналог HTML-выравнивания картинки <IMG align="right" ...> в CSS)?

Для этого в CSS предусмотрено свойство float, которое определяет по какой стороне будет выравниваться элемент, и как другие элементы будут обтекать его с других сторон.

Синтаксис:

float: left | right | none

left — выровнять элемент по левому краю, при этом другие элементы (например, текст) огибают его по правой стороне.

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; }