От автора: приветствую вас. В css есть достаточно много свойств, если так подумать, но действительно важных и наиболее употребляемых не так уж и много. В этой статье я хотел бы кратко описать самые используемые css свойства.
Что нужно знать для начала
Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:
body{ background: #fff; color: #ccc; ... }
body { background : #fff; color : #ccc; . . . |
Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.
Сначала пишется имя свойства, а потом через двоеточие его значение. Желательно каждый новый стиль писать с новой строки, ах да, еще нужно обязательно ставить точку с запятой в конце, иначе ничего не заработает.
Стили для текстового содержимого
Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: , .
С помощью свойств, описанных там, вы сможете сделать с текстом все, что угодно: изменить его размер, начертание, сам шрифт и многое другое.
Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.
Отображение на экране
По умолчанию элементы делятся на строчные и блочные и разница в них только в том, что блочные не могут стоять в одной строке друг с другом. Зато строчным нельзя задать размер, он зависит от того, сколько в них содержимого.
Итак, иногда такое поведение нужно изменить и для этого используется display и множество его значений, но я расскажу лишь о самых основных:
Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)
Inline- преобразование в строчный элемент.
Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).
Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)
None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.
Опять же, это не все значения, только самые основные.
Свойства размера
Блоки играют основную роль в создании сайта. Им нужно прописывать определенные размеры, это указывается с помощью таких свойств:
Width – ширина
Height – высота
Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.
Также на размеры блочных элементов могут повлиять дополнительные параметры. Например, внутренние отступы. Они задаются с помощью слова padding и значения в пикселях (но можно и в другой величине). Если нужно задать отступ только для одной стороны, можно указать это, дописав к padding- через дефис нужную сторону (left, right и т.д.)
Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:
*{ box-sizing: border-box; }
К блокам добавляется синяя рамка со всех сторон толщиной 3 пикселя с каждой. Суммарно ширина увеличивается на 6 пикселей, а если вы не хотите этого, нужно использовать то самое box-sizing.
Цвет и фон
Это основные параметры, которые отвечают за восприятие нами информации. В значении в этим свойствам записывается одно и то же – цвет, который можно определить с помощью ключевых слов, в шестнадцатеричном коде или каком-то цветовом формате (чаще всего rgb). Единственное отличие – цвет определяется с помощью свойства color, а фон – с помощью background.
Я всегда мечтал о том, чтобы моим компьютером можно было пользоваться так же легко, как телефоном;
моя мечта сбылась: я уже не могу разобраться, как пользоваться моим телефоном.
Bjarne Stroustrup
Д ля включения стилей в html-документ применяются - каскадные таблицы стилей CSS (Cascading Style Sheet) , с их возможностями значительно упрощается разработка web-страниц и управление полученным сайтом. В этом разделе кратко описаны некоторые частоприменяемые свойства стилевых таблиц.
Как и все компьютерные языки, CSS имеет свой синтаксис, по которым создаются таблицы стилей. CSS отличается от HTML тем, что у первого нет элементов, атрибутов и тегов, а только строго определенный синтаксис или правило, которое и описывает внешний вид одного или группы элементов . Иными словами правило определяет (задает) , как будет выглядеть определенный элемент.
Правило, обязательно, состоит из селектора (в примере ниже это - H1) и блока объявления стилей, заключенного в фигурные скобки. Объявление так же состоит из свойства (COLOR) и его значения (Limegreen) .
h1 {color : Limegreen }
Правило может содержать несколько объявлений, разделенных точкой с запятой. Для удобства чтения и редактирования правила записывают так, чтобы каждое объявление начиналось с отдельной строки.
h1 {
color
: Limegreen
;
font-family
: Verdana
;
font-size
: 16pх
}
Но и записанное в одну строку, будет воспринято точно так же.
h1 {color : Limegreen ; font-family : Verdana ; font-size : 16pх }
Данное правило определяет для заголовка H1 цвет - color:Limegreen, наименование шрифта - font-family:Verdana и размер шрифта - font-size:16pх.
Это правило можно записать и так:
h1 {color : #32CD32 ; font : normal 16pх Verdana }
Включение CSS в HTML
Для включения CSS в html-документ используется , который задает служебную информацию и располагается внутри .
http-equiv="Content-Style-Type"
content
="text/css"
>
В примере, атрибут http-equiv="Content-Style-Type" указывает, что элемент META относится к таблице стилей, а атрибут content="text/css" задает, что таблицы стилей написаны на языке CSS. Таблицы стилей могут быть внутренними, встроенными и внешними.
- Внутренняя таблица стилей задается внутри при помощи атрибута STYLE. Ее недостаток в том, что она придает определенное значение только для одного элемента, для остальных придется задавать атрибут STYLE каждый раз.
style="color : red " >Свойства CSS
Браузер покажет:
Свойства CSS
- Встроенные таблицы стилей добавляются с помощью тегов STYLE и располагаются внутри элементов HEAD. При таком включении, всем заголовкам первого уровня, которые находятся на данной странице, будет применен красный цвет. И если сейчас необходимо будет изменить цвет заголовков, то сделать это достаточно будет только один раз.
type="text/css"
>
H1 {color
: red
}
- Внешними таблицами стилей являются те, которые помещены в отдельный файл с расширением .css и прикреплены к web-странице при помощи элемента LINK, который так же располагается внутри элемента HEAD.
href="css/style.css" rel ="stylesheet" type ="text/css" >
Задает URL таблицы, а REL указывает отношение подключаемого файла к документу. При добавлении основной таблицы стилей используется значение STYLESHEET.
Думаю теперь можно перейти к самому интересному - к изучению свойств CSS и их применению.
Свойства CSS
Все свойства CSS можно разделить на несколько групп.
CSS (Cascading Style Sheets ) – широко распространённый метод форматирования веб-страниц. Суть данного метода заключается в создании и регистрации своеобразных стилей оформления CSS . Как правило, определение подобных стилей происходит во внешнем CSS-документе. Но также возможна регистрация стилей оформления и непосредственно в коде самой веб-страницы (см. CSS).
Для определения стилей используются специальные служебные CSS-селекторы (свойства стилей), которым присваиваются соответствующие значения. Описание служебных слов происходит после наименования стиля-селектора и заключается в фигурные скобки "{" и "}", которые символизируют начало и конец определения конкретного стиля. Причём, в отличие от атрибутов , значения селекторам стиля присваиваются при помощи двоеточия ":", а не через знак равенства "=", и разделяются точкой с запятой ";". Таким образом, для регистрации стилей применяется конструкция вида ИмяСтиля {свойство1: значение1; свойство2: значение2;} .
width / height
Ширина / высота элемента .
Значения :
1920px | 55cm | 100%
Задаётся положительным числом. В качестве единицы измерения можно использовать проценты (% ), пиксели (px ), точки (pt ), сантиметры (cm ), дюймы (in )
margin / padding
Внешнее поле / внутренний отступ (границы) .
Значения :
5px |
5px 3px |
2px 5px 3px |
2px 3px 5px 7px
Top=Right=Bottom=Left
Top=Bottom Left=Right
Top Left=Right Bottom
Top Right Bottom Left
Поля элементов определяются для верхней (top ), правой (right ), нижней (bottom ) и левой (left ) сторон. Например, p{margin:auto; padding:5px 15px;}
color / background-color
Цвет шрифта / цвет заднего фона .
Значения :
#808 | #800080 | rgb(128,0,128) | pink | transparent | ...
Цвет элемента определяется при помощи метода RGB: насыщенностью красного (Red), зелёного (Green) и синего (Blue) оттенков. Например, rgb(50%,0%,50%)
background-image
Фоновый рисунок .
Значения :
url(/i/bg.gif) | none | linear-gradient(...)
В качестве фонового рисунка часто используется автоматически создаваемый браузером градиент. Например, body {background-image: -webkit-linear-gradient(left, #fff, transparent); linear-gradient(to right, #fff, transparent);}
Границы элемента .
Значения :
2px solid #c0c0c0 | double #ccc | none
Определяются толщиной (border-width ), стилем (border-style ) и цветом (border-color ) рамки.
border-style
Варианты стиля для внешней рамки границ элемента .
Значения :
solid | double | dashed | dotted | inset | outset | groove | ridge | none
При использовании стиля двойной границы double толщину рамки можно не указывать
border-radius
Закругление углов границы .
Значения :
Может использоваться для ячеек таблицы (поддерживается не во всех версиях браузеров)
font-family
Семейство шрифтов (гарнитура) .
Значения :
Verdana, Times, ...
Как правило, для лучшей совместимости указываются несколько шрифтов
font-size
Размер шрифта .
Значения :
15px | 12pt | 1em | smaller | larger
Как правило, измеряется в точках (pt ) или пикселях (px ). Для удобочитаемости на мобильных устройствах рекомендуется устанавливать размер не менее 12px
font-weight
Свойство управления полужирным начертанием шрифта .
Значения :
bold | lighter | normal
text-decoration
Свойство оформления текста .
Значения :
none | blink | overline | underline | line-through
text-transform
Трансформирование текста .
Значения :
capitalize | lowercase | uppercase | none
text-shadow
Тень .
Значения :
1px -1px 2px #aaa | none
Поддерживается не во всех версиях браузеров. Для определения тени указываются смещение в горизонтальной и вертикальной плоскостях, размер тени и цвет. Причём, смещение тени возможно и с отрицательным значением
text-align
Выравнивание текста в горизонтальной плоскости .
Значения :
left | center | right | justify
Выравнивание может осуществляться по левому краю (left ), по центру (center ), по правому краю (right ) либо по ширине содержимого (justify )
vertical-align
Выравнивание содержимого по вертикали .
Значения :
top | middle | bottom
text-indent
Уровень отступа .
Значения :
Служит для создания отступа "с красной строки" в начале абзаца
line-height
Межстрочный интервал .
Значения :
letter-spacing
Свойство разрежённости интервала между знаками .
Значения :
Используется при необходимости искусственного расширения текста по горизонтали, например, при определении заголовков
position
Позиционирование элемента .
Значения :
absolute | relative | ...
Свойство отображения элемента .
Значения :
inline-block | inline | block | table | none | ...
none элемент не отображается на экране и не занимает место, создавая впечатление абсолютного отсутствия элемента
visibility
Свойство видимости элемента .
Значения :
hidden | visible
В случае использования значения hidden элемент не отображается на экране. Тем не менее, на экране остаётся пустая зона, в которой должен был бы отображаться элемент
Свойство полупрозрачности элемента .
Значения :
Определяется дробным положительным числом от 0 до 1. Например, a{opacity:.5;} a:hover{opacity:1;}
transition / transition-delay
Плавный переход к стилю элемента / задержка перед переходом .
Значения :
0.1s | 0.2s | ... | 1s | ...
Применяется для искусственного замедления применения правил стилей оформления на заданное число секунд (s ). Например, a{-webkit-transition:2s; transition:2s; opacity:.5;} a:hover {-webkit-transition-delay:3s; transition-delay:3s; opacity:1.0; color:#ccc}
transform
Трансформация элемента .
Значения :
Используется для создания интерактивных визуальных эффектов. Например, a{-webkit-transition:1s; transition:1s;} a:hover {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
Существуют некоторые особенности форматирования веб-страниц посредством каскадных стилей CSS, о которых следует упомянуть отдельно. К примеру, в случае необходимости создать масштабированный элемент, т.е. "растянутый" во весь экран, следует указать значение в 100% для свойств ширины width или высоты height соответственно.
При определении числовых значений CSS-свойств единицей измерения могут служить проценты (% ), пиксели (px ), точки (pt ), сантиметры (cm ), дюймы (in ) и т.д... Например, чтобы задать для всех абзацев двойную серую границу, 10%-ный внешний отступ слева и справа, а также внутренний отступ в 5px для всех четырех сторон, можно использовать следующую конструкцию: p {margin: 0 10%; padding: 5px; border: #c0c0c0 double;} .
Кроме того, для свойств margin , padding и border можно указать значение лишь одной из сторон. Так, например, конструкция img {margin-bottom: 15px;} задаёт для всех изображений отступ снизу в 15px. А конструкция .b-TL {border-top: 3px #ccc solid; border-left: 3px #ccc solid;} может установить для элемента, использующего класс .b-TL , сплошные верхнюю и левую границу серого цвета и толщиной в 3px.
Для управления свойствами цвета широко используется шестнадцатеричное представление чисел. К примеру, число FF в шестнадцатеричной системе счисления (СС) представляет привычное арабское число 255 в десятичной СС. И, разумеется, было бы полезным знать принципы СС, а также способы перевода чисел из одной системы в другую. Но подобный перевод можно осуществить и воспользовавшись многофункциональным калькулятором. Либо определить значение нужного цвета при помощи графического редактора, в котором цвета могут отображаться как раз в шестнадцатеричном представлении.
Если же поиск 16-ричных значений будет отнимать слишком много времени и сил, для определения цвета можно использовать привычные целые числа от 0 до 255. Также существует возможность указать процентное соотношение используемого цвета. Например, конструкция a {color: rgb(0,0,255);} a:hover {color: rgb(100%,0%,0%);} указывает синий цвет шрифта для всех неактивных гиперссылок веб-страницы. А при наведении мыши на ссылку задаёт для нее красный цвет шрифта.
В случае необходимости изменения свойств элемента при наведении курсора мыши можно использовать служебное слово hover . Данная команда указывает браузеру на то, что для используемого элемента зарегистрированы разные стили. Причём, один из стилей применяется для оформления элемента в его статичном неактивном состоянии. А второй стиль (с указанием служебного слова через двоеточие после наименования стиля) изменяет указанные в описании CSS-селектора для активного состояния элемента при наведении мыши.