Локальный справочник CSS

Содержание

Справочник по CSS (в виде удобного файла справки)

Если забыли какой-либо тег css, этот справочник поможет. Нужную информацию можно найти очень быстро, ведь он сделан в виде справки.

CSS – это так называемые каскадные таблицы стилей ( или Cascading Style Sheets), которые стали революцией в мире Интернет-технологий.

С их появлением все веб-программисты заранее могли представить себе, как будет выглядеть та или иная страница в различных браузерах, вплоть до расположения картинок и размера шрифта. Основная задача CSS – это разделение содержимого, написанного на некотором языке, к примеру, html, и более удобного визуального представления документов. Говоря более просто — разделение контента и дизайна сайта (css отвечает за дизайн).

  • Введение
  • Что такое CSS и как его применить
  • Свойства шрифта
  • Цветовая гамма
  • Свойства текста
  • Свойство текста, содержащего иероглифы
  • Расположение элементов
  • Границы элементов
  • Классификации
  • Принтер
  • Псевдостили гиперссылок
  • Псевдостили текста
  • Правила
  • Единицы измерения CSS
  • Фильтры в Internet Explorer

Свойства текста

text-underline-position — задает местонахождение линии подчеркивания: выше или ниже текста. Имеет смысл, если атрибут text-decoration равен underline или overline. text-underline-position: below|above; text-underline-position: below; — помещает линию подчеркивания под текстом (значение по умолчанию); text-underline-position: above; — над текстом («надчеркивание»). Поддерживается IE начиная с 5.5

text-align — определяет горизонтальное выравнивание текста. text-align: left|right|center|justify; text-align: left; — выравнивание текста по левому краю (значение по умолчанию); text-align: right; — выравнивание по правому краю; text-align: center; — выравнивание по центру; text-align: justify; — выравнивание по обоим краям (по ширине). Поддерживается IE начиная с 3.02; значение justify поддерживается начиная с 4.0 Поддерживается NN начиная с 4.0

text-align-last — задает горизонтальное выравнивание последней строки абзаца. text-align-last: auto|inherit|left|right|center|justify; text-align: auto; — выравнивает последнюю строку абзаца так же, как и остальные строки (основываясь на значении атрибута text-align) (значение по умолчанию); text-align: inherit; — так же, как выровнен текст родителя; text-align: left; — выравнивание текста по левому краю; text-align: right; — выравнивание по правому краю; text-align: center; — выравнивание по центру; text-align: justify; — выравнивание по обоим краям (по ширине). Поддерживается IE начиная с 5.5

text-indent — устанавливает отступ красной строки. text-ident: <Отступ>|<Отступ>%; Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0. Поддерживается IE и NN начиная с 4.0

text-height — интервал между строками текста. text-height: <Интервал>|<Интервал>%; Интервал может быть задан как абсолютной величиной, так и процентом от ширины родителя. Поддерживается IE и NN начиная с 4.0

text-transform — Задает преобразование регистра символов текста. text-transform: none|capitalize|uppercase|lowercase; text-transform: none; — отключает любые преобразования регистра символов (значение по умолчанию); text-transform: capitalize; — преобразует первую букву каждого слова текста в верхний регистр; text-transform: uppercase; — преобразует все символы текста в верхний регистр; text-transform: lowercase; — в нижний регистр. Поддерживается IE и NN начиная с 4.0

clear — задает поведение текста при «обтекании» им некоторых элементов страницы, таких как изображения. clear: none|left|right|all; Атрибут задается для текста, а не для элемента страницы, который он будет «обтекать». clear: none; — разрешает тексту «обтекать» элемент страницы (значение по умолчанию); clear: left; — запрещает тексту «обтекать» элемент страницы с левой стороны; clear: right; — с правой стороны; clear: all; — с обеих сторон. Поддерживается IE и NN начиная с 4.0

word-spacing — определяет дополнительное расстояние между словами в тексте. word-spacing: normal| ; Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами. Значение по умолчанию normal. Поддерживается IE начиная с 4.0

word-wrap — устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам. word-wrap: normal|break-word; word-wrap: normal; — запрещает переносить строки по словам (значение по умолчанию); word-wrap: break-word; — разрешает. Поддерживается IE начиная с 5.5

word-mode — задает направление строк текста: горизонтальное или вертикальное. word-mode: lr-tb|tb-rl; word-mode: lr-tb; — задает обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию); word-mode: tb-rl; — поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево. Поддерживается IE начиная с 5.5

leter-spacing — определяет расстояние между символами в тексте. letter-spacing: normal| ; Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами. Значение по умолчанию normal. Поддерживается IE начиная с 4.0

line-height — задает вертикальное расстояние между строками текста. line-height: normal||%; Высота может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение normal задает стандартное расстояние. Значение по умолчанию normal. Поддерживается IE и NN начиная с 4.0

direction — задает порядок чтения текста: слева направо или справа налево. direction: ltr|rtl|inherit; direction: ltr; — задает порядок чтения слева направо (значение по умолчанию); direction: rtl; — справа налево; direction: inherit; — заставляет наследовать порядок чтения у родителя. Для документов, составленных на европейских языках, порядок чтения всегда слева направо (ltr). Поддерживается IE начиная с 5.0

unicode-bidi — задает поведение встроенных элементов при изменении направления письма с помощью атрибута direction. unicode-bidi: normal|embed|bidi-override; unicode-bidi: normal; — меняет направление письма и у родителя (используется по умолчанию); unicode-bidi: embed; — меняет направление письма только у встроенного элемента; unicode-bidi: bidi-override; — аналогично embed за тем исключением, что направление письма меняется согласно значению атрибута direction, независимо от локальных установок Web-обозревателя. Поддерживается IE начиная с 5.0

CSS справочник

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

[ Скачать с сервера (116.8 Kb) — бесплатно] 14.04.2010, 22:54
Свойство Описание Введено в
@font-face Позволяет подключить к веб-страницам произвольные шрифты. CSS3
font Позволяет установить все свойства шрифта (font-family, font-size, font-style, font-variant, font-weight) за одно определение. CSS1
font-family Позволяет установить шрифт текста. CSS1
font-size Позволяет установить размер текста. CSS1
color Позволяет установить цвет текста. CSS1
text-shadow Позволяет привязать тень (или несколько теней) к тексту элемента. CSS3
text-decoration Позволяет оформить текст элемента. CSS1
text-align Позволяет определить горизонтальное выравнивание текста. CSS1
letter-spacing Позволяет определить расстояние между символами текста. CSS1
word-spacing Позволяет определить расстояние между словами текста. CSS1
line-height Позволяет установить высоту строк. CSS1
font-style Позволяет установить стиль шрифта элемента. CSS1
font-variant Позволяет отобразить текст элемента капителью. CSS1
font-weight Позволяет установить толщину шрифта. CSS1
text-overflow Позволяет указать как должен отображаться текст вышедший за пределы границ элемента. CSS3
vertical-align Позволяет установить вертикальное выравнивание текста. CSS1
text-transform Позволяет управлять регистром символов в тексте. CSS1
text-indent Позволяет установить величину отступа первого символа текста. CSS1
text-justify Позволяет установить алгоритм выравнивания для свойства «text-align:justify». CSS3
word-wrap Позволяет указать должны ли длинные слова, выходящие за пределы родительского элемента, разбиваться и переносится на новую строку или нет. CSS3
white-space Позволяет установить как должны оформляться пробелы в тексте элемента. CSS1
quotes Позволяет установить как должны оформляться кавычки вставленные тэгом . CSS1
direction Позволяет установить направление письма текста. CSS1

CSS свойства выравнивания

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

Свойство Описание Введено в
height Позволяет установить высоту элемента. CSS1
width Позволяет установить ширину элемента. CSS1
margin Позволяет установить величину всех внешних отступов за одно определение. CSS1
margin-top Позволяет установить величину внешнего отступа от верхней части элемента. CSS1
margin-right Позволяет установить величину внешнего отступа от правой части элемента. CSS1
margin-bottom Позволяет установить величину внешнего отступа от нижней части элемента. CSS1
margin-left Позволяет установить величину внешнего отступа от левой части элемента. CSS1
padding Позволяет установить величину всех внутреннего отступов за одно определение. CSS1
padding-top Позволяет установить величину внутреннего отступа от верхней части элемента. CSS1
padding-right Позволяет установить величину внутреннего отступа от правой части элемента. CSS1
padding-bottom Позволяет установить величину внутреннего отступа от нижней части элемента. CSS1
padding-left Позволяет установить величину внутреннего отступа от левой части элемента. CSS1
float Прижимает элемент к указанной стороне родительского элемента и заставляет последующие за ним элементы страницы «обтекать» его. CSS1
position Позволяет установить метод размещения элемента. CSS2
top Позволяет установить величину отступа от верхней стороны элемента. CSS2
right Позволяет установить величину отступа от правой стороны элемента. CSS2
bottom Позволяет установить величину отступа от нижней стороны элемента. CSS2
left Позволяет установить величину отступа от левой стороны элемента. CSS2
clear Позволяет «очистить» элемент от действия float. CSS2
max-height Позволяет определить максимальную высоту элемента. CSS2
max-width Позволяет определить максимальную ширину элемента. CSS2
min-height Позволяет определить минимальную высоту элемента. CSS2
min-width Позволяет определить минимальную ширину элемента. CSS2
z-index Позволяет установить порядок отображения элементов в случае их наложения друг на друга. CSS2
clip Позволяет обрезать элемент размещенный абсолютно. CSS2
column-count Позволяет разбить на указанное количество столбцов текст элемента. CSS3
column-gap Позволяет установить величину отступа между столбцами текста. CSS3
column-width Позволяет установить ширину столбцов. CSS3
column-rule Позволяет установить все свойства оформления разделителя для столбцов текста за одно определение. CSS3
column-rule-color Позволяет установить цвет разделителя. CSS3
column-rule-style Позволяет установить стиль разделителя. CSS3
column-rule-width Позволяет установить ширину разделителя. CSS3
column-span Позволяет установить на сколько столбцов должен растягиваться элемент. CSS3
box-align Позволяет установить способ выравнивания элементов потомков. CSS3
box-direction Позволяет установить направление отображения элементов потомков. CSS3
box-flex Позволяет установить должны ли элементы потомки быть гибкими в размерах или нет. CSS3
box-ordinal-group Позволяет установить порядок отображения элементов потомков. CSS3
box-orient Позволяет установить как должен быть ориентирован элемент. CSS3
box-pack Позволяет установить позицию элементов потомков в по горизонтали в горизонтально ориентированных элементах и позицию по вертикали в вертикально ориентированных элементах. CSS3

CSS свойства фона

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

Свойство Описание Введено в
background Позволяет установить все свойства фона за одно определение. CSS1
background-size Позволяет установить размер фонового изображения. CSS3
background-attachment Позволяет определить должна ли фоновая картинка быть закреплена или должна прокручиваться с остальным содержимым страницы. CSS1
background-color Позволяет установить цвет фона элемента. CSS1
background-image Позволяет установить фоновую картинку для элемента. CSS1
background-position Позволяет установить координаты местоположения фоновой картинки. CSS1
background-repeat Позволяет установить как должна повторятся фоновая картинка для того, чтобы заполнить фон элемента. CSS1
background-clip Позволяет указывать как должен обрезаться фон элемента. CSS3
background-origin Позволяет задать позицию, от которой будет отсчитываться местоположение фонового изображения. CSS3

CSS свойства границ

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

Свойство Описание Введено в
border Позволяет установить все свойства границ за одно определение. CSS1
border-color Позволяет определить цвет для всех границ элемента за одно определение. CSS1
border-style Позволяет определить стиль для всех границ элемента за одно определение. CSS1
border-width Позволяет установить ширину всех границ элемента за одно определение. CSS1
border-radius Позволяет определить форму всех углов элемента за одно определение. CSS3
border-bottom-left-radius Позволяет определить форму нижнего левого угла элемента. CSS3
border-bottom-right-radius Позволяет определить форму нижнего правого угла элемента. CSS3
border-top-left-radius Позволяет определить форму верхнего левого угла элемента. CSS3
border-top-right-radius Позволяет определить форму верхнего правого угла элемента. CSS3
border-image Позволяет использовать изображение в качестве границы элемента. CSS3
border-top Позволяет установить все свойства для верхней границы элемента за одно определение. CSS1
border-top-color Позволяет определить цвет верхней границы элемента. CSS1
border-top-style Позволяет определить стиль верхней границы элемента. CSS1
border-top-width Позволяет определить ширину верхней границы элемента. CSS1
border-left Позволяет установить все свойства для левой границы элемента за одно определение. CSS1
border-left-color Позволяет определить цвет левой границы элемента. CSS1
border-left-style Позволяет определить стиль левой границы элемента. CSS1
border-left-width Позволяет определить ширину левой границы элемента. CSS1
border-bottom Позволяет установить все свойства нижней границы за одно определение. CSS1
border-bottom-color Позволяет определить цвет нижней границы элемента. CSS1
border-bottom-style Позволяет определить стиль нижней границы элемента.
border-bottom-width Позволяет определить ширину нижней границы элемента. CSS1
border-right Позволяет установить все свойства для правой границы элемента за одно определение. CSS1
border-right-color Позволяет определить цвет правой границы элемента. CSS1
border-right-style Позволяет определить стиль правой границы элемента. CSS1
border-rigth-width Позволяет определить ширину правой границы элемента. CSS1
outline Позволяет установить все свойства внешней границы за одно определение. CSS2
outline-color Позволяет определить цвет внешней границы элемента. CSS2
outline-style Позволяет определить стиль внешней границы элемента. CSS2
outline-width Позволяет определить ширину внешней границы элемента. CSS2
outline-offset Позволяет установить величину смещения внешней границы от границы элемента. CSS3

CSS свойства переходов и анимации

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

Свойство Описание Введено в
@keyframes Блок для определения анимации. CSS3
animation Позволяет установить все свойства анимации (кроме animation-play-state) за одно определение. CSS3
animation-name Позволяет установить имя анимации. CSS3
animation-duration Позволяет указать время выполнения анимации в секундах. CSS3
animation-timing-function Позволяет указать функцию смягчения отвечающую за плавность выполнения анимации. CSS3
animation-delay Позволяет установить величину задержки перед началом выполнения анимации. CSS3
animation-iteration-count Позволяет установить количество повторов анимации. CSS3
animation-direction Позволяет указать должна ли анимация выполняться в обратном порядке или нет. CSS3
animation-play-state Позволяет указать должна ли анимация выполняться или быть остановлена. CSS3
transition Позволяет задать все свойства переходов за одно определение. CSS3
transition-property Позволяет указать CSS свойства, которые будут задействованы для создания перехода. CSS3
transition-duration Позволяет указать время, в течении которого будет совершен переход. CSS3
transition-timing-function Позволяет указать функцию смягчения отвечающую за плавность выполнения перехода. CSS3
transition-delay Позволяет установить величину задержки перед началом выполнения перехода. CSS3

CSS свойства таблиц и списков

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

Свойство Описание Введено в
list-style Позволяет определить все свойства списков за одно определение. CSS1
list-style-image Позволяет установить произвольную картинку вместо маркера списка. CSS1
list-style-position Позволяет определить где должен отображаться маркер списка. CSS1
list-style-type Позволяет определить вид маркера списка. CSS1
border-collapse Позволяет установить должны ли границы таблицы и ячеек соединится. CSS2
border-spacing Позволяет установить расстояние между границами смежных ячеек. CSS2
caption-side Позволяет установить место расположения табличного заголовка. CSS2
empty-cells Позволяет установить как должны отображаться пустые табличные ячейки. CSS2

CSS остальные свойства

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

Справочник CSS

Свойства CSS Описание свойств CSS
background Определяет стиль фона. (базовый атрибут).

Используется когда стилю фона необходимо одновременно присвоить несколько значений. Может иметь от одного до пяти значений из атрибутов применяемых к стилю фона.

Атрибуты стиля фона и их возможные значения:

background-attachment — прокрутка фонового изображения.

  • fixed — фиксированный фон.
  • scroll — подвижный фон (по умолчанию).

background-color — определяет цвет фона элемента.

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255, 0, 0) — значение цвета RGB.
  • transparent — прозрачный фон.

background-image — фоновое изображение элемента.

  • url — путь к файлу с изображением.
  • none — изображение отсутствует.

background-position — позиция фонового изображения элемента.

    по горизонтали:
  • left — расположить слева.
  • center — расположить по центру.
  • right — расположить справа.

    по вертикали:

  • top — расположить сверху.
  • center — расположить по центру.
  • bottom — расположить снизу.

background-repeat — регулирует повторение фонового изображения.

  • no-repeat — не повторять, показать только одно изображение.
  • repeat — повторять (по умолчанию).
  • repeat-x — повторять только по горизонтали.
  • repeat-y — повторять только по вертикали.

Для более детального ознакомления смотрите каждый атрибут отдельно.

Синтаксис:
Допустимые значения указываются через пробел в любой последовательности.

body <
background: url(fon.jpg) fixed repeat-y
>

background-attachment Определяет будет ли прокручиваться фоновое изображение элемента.

Если в том или ином элементе страницы присутствует полоса прокрутки то по умолчанию фоновое изображение прукручивается вместе с остальным содержанием данного элемента. Атрибут background-attachment может принять одно из двух значений: запретить прокрутку фонового изображения или же разрешить прокрутку.

Возможные значения:

  • fixed — фиксированный фон.
  • scroll — подвижный фон (по умолчанию).

Синтаксис:

body <
background-image: url(fon.jpg);
background-attachment: fixed
>

background-color Определят цвет фона элемента.

Цвет может быть задан следующими методами:

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255, 0, 0) — значение цвета RGB.
  • transparent — прозрачный фон.

Синтаксис:

h1 < background-color: red >
h2 < background-color: #ff0000 >
h3 < background-color: RGB(255, 0, 0) >

background-image Делает графическое изображение фоном элемента.

К фоновому изображению указывается путь, либо устанавливается отсутствие фонового рисунка.

Значения:

  • url() — путь к файлу с изображением.
  • none — изображение отсутствует (по умолчанию).

Синтаксис:

body <
background-image: url(fon.jpg)
>

background-position Определяет положение левого верхнего угла фонового изображения.

Положение рисунка по осям х и у от краёв элемента может задаваться в процентах, пикселях а так же двумя (по вертикали и горизонтали)логическими значениями.

Значения:

    по горизонтали:
  • left — расположить слева.
  • center — расположить по центру.
  • right — расположить справа.

по вертикали:

  • top — расположить сверху.
  • center — расположить по центру.
  • bottom — расположить снизу.
  • Синтаксис:

    body <
    background-image: url(fon.jpg);
    background-repeat: no-repeat;
    background-position: center top
    >

    background-repeat Управляет повторением фонового рисунка.

    Фоновое изображение заданное background-image по умолчанию заполняет весь элемент «плиткой», однако, присвоив background-repeat значения изложенные ниже можно задать несколько вариантов «выкладывания» этой «плитки»

    Значения:

    • no-repeat — не повторять, показать только одно изображение.
    • repeat — повторять (по умолчанию).
    • repeat-x — повторять только по горизонтали.
    • repeat-y — повторять только по вертикали.

    Синтаксис:

    body <
    background-image: url(fon.jpg);
    background-repeat: repeat-x
    >

    border Может одновременно определять стиль, цвет и толщину границы элемента. (базовый атрибут).

    Атрибуты управляющие бордюром и их возможные значения:

    border-style

    • none — граница отсутствует (по умолчанию).
    • dotted — граница из ряда точек.
    • dashed — пунктирная граница.
    • solid — сплошная граница
    • double — двойная граница
    • groove — граница «бороздка»
    • ridge — граница «гребень»
    • inset — вдавленная граница
    • outset — выдавленная граница

    border-width — устанавливает ширину границы. border-color — цвет бордюра, может быть задан одним из четырёх вариантов:

    • #ff0000 — шестнадцатеричное значение цвета RGB.
    • red — именное значение цвета.
    • RGB(255, 0, 0) — значение цвета RGB.
    • transparent — прозрачный бордюр.

    Синтаксис:
    Так как атрибут border является базовым то указываются только значения родственных атрибутов, в любом порядке через пробел.

    div <
    border: RGB(255, 0, 0) 6px double
    >

    border-bottom Определяет стиль, цвет и ширину нижней границы элемента.

    Атрибуты управляющие бордюром и их возможные значения:
    border-style

    • none — граница отсутствует (по умолчанию).
    • dotted — граница из ряда точек.
    • dashed — пунктирная граница.
    • solid — сплошная граница
    • double — двойная граница
    • groove — граница «бороздка»
    • ridge — граница «гребень»
    • inset — вдавленная граница
    • outset — выдавленная граница

    border-width — устанавливает ширину границы. border-color — цвет бордюра, может быть задан одним из четырёх вариантов:

    • #ff0000 — шестнадцатеричное значение цвета RGB.
    • red — именное значение цвета.
    • RGB(255, 0, 0) — значение цвета RGB.
    • transparent — прозрачный бордюр.

    Синтаксис:
    Указываются значения родственных атрибутов, в любом порядке через пробел.

    div <
    border-bottom: red 6px dashed
    >

    border-bottom-color Устанавливает цвет нижней границы элемента.

    border-bottom-colorr — цвет бордюра, может быть задан одним из четырёх вариантов:

    • #ff0000 — шестнадцатеричное значение цвета RGB.
    • red — именное значение цвета.
    • RGB(255, 0, 0) — значение цвета RGB.
    • transparent — прозрачный бордюр.

    Синтаксис:

    div <
    border: red 5px solid;
    border-bottom-color: #0000ff
    >

    border-bottom-style Определяет стиль нижней границы элемента.

    border-bottom-style может иметь следующие значения:

    • none — граница отсутствует (по умолчанию).
    • dotted — граница из ряда точек.
    • dashed — пунктирная граница.
    • solid — сплошная граница
    • double — двойная граница
    • groove — граница «бороздка»
    • ridge — граница «гребень»
    • inset — вдавленная граница
    • outset — выдавленная граница

    Синтаксис:

    p <
    border: red 5px dotted;
    border-bottom-style: solid
    >

    border-bottom-width Определяет ширину нижней границы элемента.

    Ширина границы может быть задана значением в пикселях, а так же с помощью зарезервированных слов:

    • thin — тонкая граница
    • medium — средняя толщина границы
    • thick — толстая граница

    Синтаксис:

    div <
    border: #00ff00 solid;
    border-bottom-width: thin;
    border-left-width: medium;
    border-right-width: thick;
    border-top-width: 12px
    >

    border-collapse Задает стиль рисования границ таблицы.

    Внешний вид границ таблицы может принимать следующий вид:

    • separate — ячейки таблицы отделены друг от друга (по умолчанию).
    • collapse — ячейки таблицы не имеют промежутков между собой.
    • inherit — свойства наследуются у родителя элемента.

    Синтаксис:

    Бравый справочник css-свойств для новичка

    Как новички изучают css-свойства? Они читают про все свойства, которые только есть, что-то запоминают, в основном только width, height и background, а потом постоянно рыщут по своим конспектам и гуглу, пытаются вспомнить какое свойство за что отвечает, как оно пишется и какие у него есть значения.

    И тут мне пришла в голову идея. А что если сделать такую штуку, которая наглядно показывает как пишутся и работают все css-свойства? Причем, все это на одной странице.

    Таким образом, за два вечера создался вот такой css-помощник: lesson-web.ru/modules/css_helper

    В левой части мы видим результат работы css-свойств, а справа, собственно, список css-свойств, которые мы можем увидеть в действии.

    В окне результата у нас есть один, как будто бы, div с классом .box. Если установить свойство float, то в окне появится три одинаковых блока.

    Также можно задать текстовое содержимое этого блока. Есть пять вариантов:

    В блоке с css-свойствами мы можем:

    • активировать или деактивировать свойство, кликнув по checkbox;
    • задать значение свойства;
    • понять свойство на простом русском языке
    • если на сайте есть описание по данному свойству, то можно перейти по ссылке и более подробно изучить его.

    Значение можно задать тремя способами:

    1. Просто ввести значение в input
    2. Если это цвет, то указать его на палитре
    3. Если у свойства если стандартный набор значений, то можно выбрать его из списка

    Собственно, вот такая приятная мелочь получилась) Если у вас есть какие-то идеи как можно улучшить этот помощник, то с радостью почитаю их в комментариях!

    Руководство по CSS

    На этой странице

    Данный справочник по CSS перечисляет все стандартные свойства, псевдоклассы и псевдоэлементы, @-правила, единицы измерения и селекторы CSS в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства CSS3. Также включает в себя краткое руководство DOM-CSS / CSSOM.

    Заметьте, что определения CSS-правил полностью (ASCII) тексто-ориентированы, в то время как определения правил DOM-CSS / CSSOM объектно-ориентированы.

    Смотрите также Mozilla CSS Extensions для Gecko-специфичных свойств с префиксом -moz ; и WebKit CSS Extensions для WebKit-специфичных свойств. Смотрите Обзор CSS-префиксов для разных браузеров от Peter Beverloo для всех свойств с префиксами.

    Базовый синтаксис правил

    Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.

    Стили

    Примеры

    Больше о примерах: #1, #2

    @-правила

    Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.

    Справочник CSS

    Наш справочник по каскадным таблицам стилей CSS содержит свойства, которые по возможности являются стандартными в CSS3 . Свойства отсортированы по алфавиту и по категориям. После перехода на страницу справочника с описанием требуемого свойства, вы сможете посмотреть его синтаксис, описание, список допустимых значений, а также ряд примеров использования данного css -свойства. Кроме того, внизу страницы обычно располагаются ссылки на документацию по данному свойству на официальном сайте W3C и страницу справочника CSS на официальном сайте Mozilla Firefox .

    Чтобы посмотреть результат выполнения исходного кода примера во фрейме кодового блока, используйте кнопку ‘Результат’ .

    Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный ‘Чат с автором’ (по возможности стараюсь отвечать всем).

    Основы CSS — Руководство для самых маленьких

    Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

    Часть 1. Основы CSS

    Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

    Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

    Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

    1.1 Использование CSS в HTML документах

    CSS довольно просто использовать в HTML документах. Его можно:

    Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег
    в теге . Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

    Прописать стили в самом документе, используя тег

    Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

    Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

    Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

    Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

    1.2 CSS синтаксис

    Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

    Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор, который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой. Это всё.

    Просто, не правда ли?

    Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

    Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

    Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

    1.3 Каскадирование, наследование и приоритет

    Понять принцип каскадирования несложно. Давайте взглянем на пример:

    Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

    Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

    Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

    1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
      Пример использования !important:
    2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
    3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
    4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
    5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
      В результате тег

    , находящийся в теге с классом .my-class получит значение свойства margin: 15px.

    Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:

    И т.д. по логической цепочке.

    И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

    В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

    Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

    Часть 2. CSS свойства

    Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.

    Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

    CSS Свойство

    Частота использования

    Описание

    color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

    Часть 3. Медиа-запросы

    Медиа-запросы в CSS — это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос — это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.

    В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.

    Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

    Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

    Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

    Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

    Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

    Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.

    Часть 4. Рекомендации

    Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

    1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
    2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

    Премиум уроки от WebDesign Master

    Создание контентного сайта на Jekyll от А до Я

    Создание современного интернет-магазина от А до Я

    Я — фрилансер! — Руководство успешного фрилансера

    CSS/Справочник

    Справочник по каскадным таблицам стилей.

    Содержание

    Введение [ править ]

    CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

    Цель создания CSS [ править ]

    CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

    Обзорная история CSS [ править ]

    CSS1 [ править ]

    Первая версия CSS1 была принята как рекомендация W3C 17 декабря 1996 года. Она предоставляет пользователю следующие возможности:

    • управление способом отображения элемента на странице;
    • возможность для элемента задать и запретить обтекание текстом;
    • управление размерами элемента;
    • управление внешними и внутренними отступами элемента;
    • управление вертикальным выравниванием в табличных блоках;
    • управление границами элемента: задавать стиль границы, цвет границы и ее ширину;
    • управление форматированием нумерованных и ненумерованных списков: можно задать тип маркера, возможность обтекания маркера текстом, а также применить в качестве маркера ненумерованного списка изображение;
    • возможность задавать цвет текста и цвет фона элемента;
    • возможность задавать в качестве фона элемента изображения, а также позиционирование и повторение этого изображения в фоне;
    • управление параметрами шрифта: название шрифта, размер, курсив и жирность;
    • управление свойствами текста: выравнивание, отступ первой строки, оформление (подчеркивание, курсив и т. д.). Также предусмотрена возможность изменения регистра текста;
    • управление междустрочным интервалом, а также расстоянием между словами и между буквами.

    CSS2 [ править ]

    12 мая 1998 года была принята как рекомендация W3C вторая версия CSS2. В CSS2 дополнительно предоставляются следующие возможности:

    • задавать направление текста в элементе (слева направо или справа налево);
    • управлять позиционированием элемента на странице;
    • задавать видимую область элемента и обрезать все остальное;
    • управлять отображением контента, который выходит за пределы размеров элемента;
    • генерировать контент до и после элемента, в том числе и автоматическая нумерация;
    • управлять внешним видом курсора;
    • управлять положением элементов по оси z (то есть возможность располагать один элемент поверх другого);
    • показывать вместо элемента пустое место;
    • задавать минимально возможные и максимально возможные размеры элемента;
    • указывать расстояние между ячейками таблицы, либо схлопывать их;
    • управлять обводкой элемента: задавать ее толщину, тип и цвет;
    • указать тип и цвет для каждой границы элемента отдельно;
    • задавать фиксированные размеры элементам таблицы;
    • управлять внешним видом кавычек, в которые оборачиваются цитаты;
    • задавать таблицы стилей для не визуальных носителей: управлять контентом при печати, а также задавать звуковое оформление контента (силу, громкость голоса, длину пауз и т. д.) для голосовых браузеров.

    CSS2.1 [ править ]

    8 сентября 2009 года была утверждена CSS2.1. Эта версия формировалась в течение более 10-ти лет. Создание CSS2.1 — это попытка привести спецификацию в соответствие со сложившимися реалиями:

    • исправлен ряд ошибок CSS2;
    • изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2;
    • убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом;
    • удалили фрагменты CSS2, которые будут устаревшими в CSS3;
    • добавили некоторые новые значения свойств.

    CSS3 [ править ]

    Будущее, которое стало реальностью.

    На момент написания статьи активно разрабатывается спецификация CSS3. Возможности, которые сулит нам CSS3 значительно превосходят предыдущие версии. Это и анимация, которая ранее ложилась на плечи скриптов, и различные скругления, тени, множественные фоны и прочие вещи, для реализации которых в CSS2 приходилось прилагать значительные усилия.

    Преимущества CSS [ править ]

    1. управление отображением множества документов с помощью одной таблицы стилей;
    2. более точный контроль над внешним видом страниц;
    3. различные представления для разных носителей информации (экран, печать, и т. д.);
    4. сложная и проработанная техника дизайна.

    Кроссбраузерность [ править ]

    Программное обеспечение для создания CSS [ править ]

    Способы подключения CSS к документу [ править ]

    Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)

    То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:

    • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега
    • , располагающегося в этом документе между тегами и . (Тег
    • будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
    • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ) сразу после тега
    • когда таблица стилей описана в самом документе, она может располагаться в нём между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;
    • когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

    В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.

    Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например:

    Справочник HTML5/CSS3

    Предлагаю справочник по HTML5 и CSS3 в формате .CHM

    49 комментариев: Справочник HTML5/CSS3

    Справочники то, что надо!

    -) сам одно время долго искал подобные справочники.

    Вай красава а то эти учебники с 500 страницами листать ппц не удобно)

    Премного благодарен! Очень удобно и полезно!

    Качайте отличная вещь.

    Огромное вам спасибо! Очень нужный справочник в работе.

    Спасибо.То что надо.

    Отличные справочники!! Спасибо большое! )

    Спасибо, очень полезная вещь, главное — ничего лишнего.

    Все прекрасно работает, возможно вы запускали файл из архива? Если да, то попробуйте его разархивировать на рабочий стол.

    Все прекрасно работает, просто вытащи файл из архива, а только потом открывай.

    Вытащил файл из архива на рабочий стол, открывается только меню, правая часть пустая.

    Как вариант могу предложить зайти в свойства файла и нажать «Разблокировать».

    Нужно зайти в свойство файла, снять атрибут: «Только чтение» и нажать кнопку «Разблокировать». У меня так заработало (Windows 7)

    Да … дружище … благодарю тебя …. действительно нужные вещи !!

    Залейте заново буду благодарен, а то выдает
    Ошибка
    Возможно, указан неправильный адрес страницы.
    Попробуйте вернуться обратно в Облако.

    Ребят! Проблема! Файл скачен и открывается,но никакого текста! Никаких глав! Помогите!

    Попробуйте снять галку «Только чтение».

    Проблема такая же! Справа написано:
    Переход на веб-страницу отменен
    Попробуйте сделать следующее: Повторите ввод адреса.
    А куда вводить адрес? С уважением к Вам Ахмад.

    Никакой адрес вводить не нужно, чуть выше в комментариях писали:
    Нужно зайти в свойство файла, снять атрибут: «Только чтение» и нажать кнопку «Разблокировать». У меня так заработало (Windows 7)

    очень понятные и толковые справочники…Огромное спасибо..

    спасибо просто капец спас время

    огромное спасибо администратор и авторам

    Решил проблему с открытием очень просто — переименовал файл так, чтобы в нем была только латиница.

    Спасибо ОГРОМНОЕ.
    Всё скачалось и открывается (7zip) и читабельно!

    не работает не врите

    извиняюсь всё работает

    Для просмотра .CHM-файлов обычно используется стандартное средство просмотра Windows — Microsoft HTML Help Executable, находящееся в каталоге C:WINDOWS под именем hh.exe

    Кликните по файлу правой кнопкой мыши, выберите пункт «Открыть с помощью…». Из списка предлагаемых программ выберите программу «Исполняемая справка в формате HTML Microsoft®» («Microsoft® HTML Help Executable»).

    Если в списке такой программы нет, то нажмите «Обзор» и найдите в папке Windows исполняемый файл hh.exe.

    Нажмите правой кнопкой на файле — свойства — разблокировать. И все будет открываться нормально!

    sitesa >

    Создание сайта

    Справочник CSS

    Примеры сайтов
    Управление сайтом
    Анимация на сайте
    Программирование

    Описание

    Языком первого в мире сайта созданного в 1991 году был язык гипертекстовой разметки HTML. При помощи тегов HTML предписывалось как и куда разместить контент страницы.Впоследствии с развитием интернета сайты стали состоять из нескольких десятков и сотен страниц.

    Встал вопрос об упрощении создания страниц и расширении функциональных возможностей инструментов для создания сайтов,так как HTML имел ограниченные функции.Так был создан язык CSS — Cascading Style Sheets , в переводе Каскадные таблицы стилей.

    CSS имеет свой синтаксис ,или правило описания стилей для элементов HTML.Эти стили CSS могут записываться прямо на странице, но в большинстве случаев они записываются в отдельном документе, а на странице дается ссылка на этот документ.

    Это одно из основных преимуществ CSS перед HTML ,так как изменив какой нибудь параметр в стиле CSS ,этот параметр сразу изменится на всех страницах сайта.В большинстве случаев на сайте используется и CSS и HTML.

    Правило использования CSS.

    1.Составляется текстовый файл с расширением .css с таблицей стилей. 2.На странице HTML между тегами и прописывается строка:

    для подключения таблицы стилей.

    Для выбора элементов на странице существуют селекторы:
    CLASS — выбирает для оформления группу элементов.
    Пример

    ID — выбирает один элемент на странице.
    Пример

    Также в качестве селекторов могут быть некоторые теги HTML:
    P,H1-H6,UL,TD и другие.
    Пример — Оформляемые элементы страницы

    Версии CSS: CSS 1 / CSS 2 / CSS 2.1 / CSS 3

    Следует обратить внимание что некоторые браузеры не поддерживают отдельные свойства CSS3 ,поэтому отображение CSS3 надо проверить в основных браузерах. Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera)[9]. Internet Explorer 6 поддерживает CSS далеко не полностью. Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит ошибки.

    Илон Маск рекомендует:  Развевающийся флаг
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL