Не нашли нужного примера CSS? Задайте свой вопрос в форуме.

CSS примеры

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

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

www.tigir.com www.tigir.com
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.

В нижеследующем примере:

Таким образом, текст ссылки заключенный в тег 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 { border: none; }

Вертикальное выравнивание картинки по центру в троке текста. Как сделать в CSS?

Вертикальное выравнивание картинкиvertical-align: middle по центру строки выполняется с помощью значения 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;
}
CSS
рамки

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

Как задать цвет hr через CSS, чтобы работало в IE, Opera и Mozilla/Gecko?

Для IE следует установить свойство color, а для Opera Mozilla/Gecko свойство background-color. При этом следует учесть, что по умолчанию рамки вокруг элемента в 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: значение | проценты 

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

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

В качестве значений принимаются любые единицы длины, принятые в 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.

В спецификации CSS2 определены следующие значения свойства cursor:

Значения, определяющие стандартные курсоры:

auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help

Пример: SPAN.help { cursor : help; }

Курсор определенный пользователем:

url('путь к курсору'), стандартный курсор

Примеры:

P { cursor : url("my.cur"), text; }
P { cursor : url("my.svg"), url("my.cur"), auto; }

Когда браузер встречает определение пользовательского курсора, он пытается обработать первый курсор из списка. Если первый курсор не может быть загружен, то браузер пытается задействовать следующий по списку курсор. Обратите внимание, что всегда в конце списка пользовательских курсоров указывается какой-то стандартный курсор, на тот случай, если ни один из пользовательских курсоров не может быть загружен.

Пользовательские курсоры поддерживаются начиная с IE6+, Firefox 1.5.

В качестве пользовательского курсора можно использовать файлы в формате CUR, ANI (только IE) или SVG курсоры (только Firefox 1.5+).

Значение inherit. Это значение говорит о том, что свойство наследуется от элемента-родителя.

Значение курсора по умолчанию: auto

Проветиде курсором над строками ниже, чтобы увидеть какую форму принимает курсор для каждого значения свойства 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; /* задаем фон */
}

Как изменить стили полос прокрутки (CSS scrollbar)?

/* CSS правила для полос прокрутки окна браузера */
html, body {
	scrollbar-3dlight-color:red; /* цвет верхней и левой границ полосы прокрутки, бегунка, стрелок */
	scrollbar-arrow-color:yellow; /* цвет стрелок на кнопках */
	scrollbar-highlight-color: aqua; /* цвет "освещенной" части бегунка и кнопок(цвет левых и верхних их граней) */
	scrollbar-face-color:green; /* основной цвет бегунка и кнопок */
	scrollbar-shadow-color:fuchsia; /* цвет "неосвещенной" части бегунка и кнопок (цвет правых и нижних их граней) */
	scrollbar-darkshadow-color:blue; /* цвет "тени" бегунка и кнопок (цвет правых и нижних гранией) */
	scrollbar-track-color: maroon; /* цвет рабочей части полосы прокрутки (фон) */
}

/* CSS правила для полос прокрутки элементов TEXTAREA */

textarea {
	scrollbar-base-color:lime; 
	
	/* scrollbar-base-color задаёт основной цвет полосы прокрутки. 
	Если не определены другие свойства полосы прокрутки, 
	то бегунок и фон кнопки прокрутки будут отображаться определенным 
	вами цветом с применением трехмерных эффектов. 
	Фон полосы прокрутки будет отображаться тоже этим цветом, 
	но только осветленным. */
}

Смотрите также статью "Разукрашиваем скроллинг с помощью CSS".

Цвет фона и текста

Хотя у большинства пользователей в браузере, по умолчанию цвет фона белый, а текста черный, есть и противные ;-) случаи. Поэтому, добавление двух простейших правил CSS должно присутствовать в ваших листах стилей. Например:

body { color:#000; background:#fff; }