Ну вот, друзья, мы и добрались до основных свойств CSS. Это те самые элементы, которые и помогут нам преобразить внешний вид своего шаблона на сайте. Их достаточно много и смысла просто их перечислять нет. Я же коснусь самых основных, без которых не обходится почти не один стиль. А также о их форме записи: общей и сокращенной, и том какую использовать предпочтительней.
Мы уже знаем чем нам можно пользоваться при работе со стилями:
А также уже начали первое редактирование:
Глава первая — Начинаем редактирование
И изучили основы построения стилей в CSS:
Глава вторая — Основы работы со стилями
И теперь, когда мы знаем как выглядит селектор в общем виде, нам нужно, так сказать, расширить лексикон, то есть хотя бы знать как называются и что делают те или иные свойства. Я решил разбить их на блоки по значимости и функционалу. Но давайте сначала разберем некоторые понятия, такие как сокращенная и общая форма записи и используемые единицы измерения.
Сокращенная и общая форма записи свойств в CSS
Для удобства использования, сокращения писанины и снижения нагрузки на сервак некоторые свойства были объедены в одно общее. Естественно, что общее свойство объединяет только схожие, так сказать, по смыслу и значению свойства. Это удобно для задания сразу нескольких однотипных свойств к одному и тому же элементу в компактной форме записи. То есть в качестве атрибутов записывается не одно значение, а сразу несколько разных значений, каждое из которых браузер различает в соответствии со их значениями. Если я изъяснился не очень понятно, то пример будет более нагляден:
|
1 2 3 4 5 |
border: 5px solid #000; /* Черная сплошная рамка, шириной в 5 пикс. */ font: lighter 20px sans-serif; /* Светлый рубленый шрифт, высотой в 20 пикс. */ margin: 20px 10px 5px 30px; /* Разные внешние отступы для каждой из сторон */ background: url('/pic.png') no-repeat black; /* Задание фоновой картинки на черном фоне без повторения */ padding: 10px 5px 15px 20px; /* Задает различные отступы внутри элемента */ |
Единицы измерения в CSS
Во многих свойствах CSS значения можно задать цифрами с различными единицами измерения, а также без них или в процентах. Вот какие значения CSS воспринимает:
| Вид | ед.изм. | значение | примечание |
| Число | — | 1.5 | 0.5 = .5 |
| Процент | % | 40% | Допустимы дробные 43.4% |
| Пиксели | px | 20px | — |
| Размер текущего элемента | em | 2em | 1em = 100% |
| Высота символа x | ex | 3ex | 1ex = высоте строчной буквы «x» |
| Дюйм | in | 4in | Соответствет реальному дюйму |
| Сантиметр | cm | 5cm | Соответствет реальному сантиметру |
| Милиметр | mm | 5mm | Соответствет реальному милиметру |
| Пункт | pt | 4pt | 1pt = 1/72 дюйма |
| Пик | pc | 1pc | 1pc = 12pt |
По поводу размеров текущего элемента (em) и высоты символа x (ex) хотелось бы сказать, что эти значения напрямую зависят от текущего размера текста и соотносятся в процентном соотношении и за 100% берется значения 1em и 1ex.
Размеры, сдвиги и поля в CSS
Одним из самых важных моментов является смещение того или иного блока на странице относительно других элементов, а также его размер.
margin — задает размеры отступов от одного блока до другого, а также отступ внутреннего блока от края внешнего блока (когда один вложен в другой). Данная запись является сокращенной формой и подходит для задания отступов со всех сторон для объекта. Если после свойства через тире будет задана сторона, то свойство будет применяться только к ней. Например:
|
1 2 3 |
margin-top: 10px; /* отступ сверху на 10 пикселей */ margin-left: 20px; /*отступ слева на 20 пикселей */ margin: 20px 10px 5px 30px; /* Разные отступы для каждой из сторон */ |
padding — задает поля от границы самого блока (она может быть видимой или невидимой) до содержимого внутри. То есть размер контейнера Див остается неизменным, а сдвигаются только внутренности. Здесь точно также можно задать только отдельную сторону или применить сокращенную запись.
|
1 2 |
padding-bottom: 20px; /* Поля снизу на 20 пикс */ padding: 20px 10px; /* Поля снизу и сверху на 20 пикс и слева и справа на 10 пикс*/ |
height — высота блока. Не учитывает размер внешних границ объекта, а также отступов и полей. По умолчанию (если не указанно это свойство) высота задается по размеру содержимого. Пример:
|
1 |
height: 100px; /* Высота объекта 100 пикс */ |
width — задает ширину блока. То же самое, что и в предыдущем примере, но только применительно к ширине.
|
1 |
width: 50px; /* Ширина объекта 50 пикс */ |
Внешний вид блока в CSS
Тут речь пойдет уже о дизайне вашего объекта, к которому применен стиль. А если быть точнее, то вот что мы затронем: внешние границы, заливка фона и цвет.
border — задает границу. Если использовать в таком сокращенном варианте, то позволяет задать общую границу к объекту с уточнением толщины линии (-width), ее типа (-style) и цвета(-color). Можно задавать границу для каждой из сторон в отдельности, а также можно задать радиус скругления углов (-radius), что весьма эффектно выглядит в некоторых случаях.
|
1 2 3 |
border: 2px ridge black; /* Черная рамка с тиснением шириной в 2 пикс */ border-radius: 20px; /* Закругление углов */ border-color: red; /* Цвет рамки будет красный */ |
background — сложное свойство задающее фон. Позволяет определить фоновый цвет (-color), фоновую картинку для объекта (-image), а также ее начальное положение и положение относительно прокрутки, а также повторяемость изображения.
|
1 |
background: url("/images/pic.png") 10px 10px no-repeat black; /* Вставка картинки без повторения на черном фоне и сдвигом на 10пикс. сверху и слева */ |
color — определяет цвет текста внутри блока. Тут все просто, задаете цвет и вуаля — текст приобретает желаемый оттенок. Другой вопрос как именно задать цвет. Сделать это можно следующими способами:
- названием цвета — основные цвета в css различаются по названию на английском языке. Так black — будет черным, red — красным, yellow — соответственно желтым. Основных цветов не так много и вот вам таблица с их значениями.
- кодом — который имеет вид #FFCC33, то есть состоит из значка решетки # вначале и шестизначного буквеноцифрового значения. Имеется также сокращенная запись цветов, если в коде имеются парные значения. Таким образом #FFCC33 = #FC3.
- RGB — (red-green-blue) через цветовую модель трех основополагающих цветов (красного, зеленого и синего). Запись значения выглядит так rgb(x1,x2,x3), где x1, x2, x3 — насыщенность каждого из трех цветов.
|
1 |
color: #dfc; /* Бледно-зеленый цвет текста */ |
Вот табличка цветов с именами:
| Black | Navy | ||
| Gray | Blue | ||
| Silver | Aqua | ||
| White | Green | ||
| Red | Lime | ||
| Fuchsia | Teal | ||
| Maroon | Yellow | ||
| Purple | Olive |
Обработка текста в css
Текст css оформляется также как и в привычном Ворде. То есть ему можно задать типы шрифта, размер, начертание (жирный, курсив) и много всего остального. CSS также позволяет изгаляться над словами, создавая из них художественные надписи, добавляя тени, свечение, тиснение и все в таком духе. Но это уже для тех, кто разобрался с основами. А пока вот, что вам нужно знать.
font — общее свойство объединяющее в себе несколько свойств, таких как семейство шрифта, размер, задание капители, толщину шрифта, межстрочный интервал, задание курсива. Причем задание семейства, а также размера шрифта, это обязательные свойства при описании их стилей. То есть других пунктов может и не быть, но эти два должны быть заданы изначально.
Как видите, довольно много всего, поэтому давайте распишем каждый из них подробнее, так как работа с текстом чуть ли не самая важная часть в оформлении контента.
|
1 |
font: italic 20px sans-serif; /* Курсив, размер 20 пикс, рубленный шрифт*/ |
font-family — определяет шрифт отображаемого текста и его семейство. Имеет два свойства: название шрифта и его название семейства, причем, если название состоит из нескольких слов, то его целиком нужно заключить в кавычки. Название шрифта вы можете посмотреть хотя бы через Word, а вот значения семейств я вам приведу ниже:
- serif — с засечками. Задает семейство шрифтов, которые имеют засечки.
- sans-serif — рубленный или без засечек. Задает семейство шрифтов, которые не имеют засечек.
- monospace — моноширный, т.е. непропорциональные шрифты у которых ширина каждой ячейки для буквы одинакова. То есть ширина области вокруг буквы I будет такой же как и вокруг W.
- fantasy — декоративный. Это шрифты, которые в основном содержат художественные декоротивные буквы, которые не предназначаются непосредственно для чтения.
- cursive — курсивный. Те шрифты, которые изначально курсивные.
|
1 |
font-family: "Times New Roman" serif; /* Определенный шрифт и семейство*/ |
Смысл задания семейства в том, что браузер, основываясь на этом правиле и если не задан определенный шрифт (или он его не нашел на стороне клиента), сам подбирает другой шрифт, но из заданного семейства.
font-style — задание наклона для текста (курсива). Выполняет функцию, сходную Вордовской, то есть при задании этого свойства добавляет наклон. Имеет следующие значения:
- italic — курсив.
- oblique — наклон. В отличие от курсива наклон не такой сильный. Что-то среднее между курсивом и обычным прямым начертанием.
- normal — обычное прямое начертание.
|
1 |
font-style: italic; /* Задает курсив для шрифта*/ |
font-variant — задание капители. Вот тут нужно пояснить, что такое капитель. Капитель это написание строчных букв в виде уменьшенных прописных. Смысл тут таков, что заглавная идет также как и в обычном написании, а следующие за ней строчные буквы выглядят как маленькие прописные. Для чего это может быть нужно? Ну, например, оформления заголовков H1 и H2. Имеет значения:
- normal — оставляет размер букв по умолчанию
- small-caps — задает капитель
|
1 |
font-variant: small-caps; /* Задает капитель*/ |
font-size — задает размер. Можно задавать в пикселях, пунктах, процентах и прочих. Не буду тут особо зацикливаться.
font-weight — толщина шрифта или насыщенность. Опять-таки, в свойствах указываются определенные значения:
- normal — обычная толщина шрифта
- bold — обычное полужирное начертание
- bolder — самое жирное начертание
- lighter — светлый (тонкий) шрифт
- 100-900 — значение жирноты шрифта в числовом диапазоне, с шагов в сотню, т.е. после 100 следующим значением будет 200, потом 300 и так далее до 900. Причем, 100 — соответсвует значению lighter, 400 — normal, 700 — bold, а 900 — bolder. Как писать вам, выбирайте сами, ошибки здесь не будет.
line-height — межстрочный интервал. Это свойство также, как и вышеперечисленные, может быть описано внутри общего свойства font, даже не смотря на то, что в его названии не содержится этого слова font. Имеет значения:
- число-множитель — задается любой цифрой выше 0. Если вы хотите задать например двойной интервал, то просто ставите цифру 2. Заметьте, что при этом возле значения не должны стоять уточняющие единицы (px, %, in и т.д.)
- процент — устанавливаем расстояние между строками в процентах от размера шрифта.
- конкретное значение — точная цифра с указанными единицами измерения (px, in, pt и т.д.)
- normal — по умолчанию. Браузер высчитает расстояние сам.
Я думаю, что этого объема вам на первое время хватит с головой.
