пятница, 2 августа 2013 г.

Введение в CSS (часть 2)

Блочная модель

2.75 КБ

Блочная модель, или поведение и внешний вид блока в зависимости от стилей, является очень важной, если не самой важной, частью CSS. Структуру блока я описывал в лекции по HTML. Ширина контентной части задаётся свойством width, её высота — свойством height:

div {
 width: 123px;
 height: 123px;
}

Отступы от границы до контентной части задаются свойством padding. Можно задавать отдельно отступы с каждой стороны, используя свойства pagging-top, padding-right, padding-bottom и padding-left. То же самое можно сделать, передав четыре значения в свойство padding:

div {
 padding: 12px 20px 7px 25px;
}

Значения перечисляются в следующей последовательности: top, right, bottom left. Отступы блока от окружающего задаются свойством margin, оно задаётся аналогичным образом, как и padding, только означает отступ не внутри, а снаружи блока. Вся ширина, которую занимает блок, складывается из ширины контента, паддинга справа и слева, марджина справа и слева и толщины границы справа и слева. Аналогичным образом вычисляется высота блока. Граница блока задаётся свойством border (также можно использовать border-top, border-right, border-bottom и border-left). Помимо ширины, границе можно задать задаётся цвет и стиль:

div {
 border-bottom-style: dashed;
 border-top-width: 1px;
}

Либо в сокращённом варианте:

div {
 border-top: 1px solid red;
}

Возможные стили границы:

  • dotted — точечками,
  • dashed — чёрточками,
  • solid — сплошной линией,
  • double — двойной сплошной линией,
  • groove — граница в виде канавки,
  • ridge — в виде бугорка,
  • inset — создаёт ощущение того, что блок вдавлен в страницу,
  • outset — создаёт ощущение того, что блок выпирает из страницы,
  • none — никакой границы.

Кроме собственно границы блока, существует так называемое свойство outline. Outline — это ещё одна граница блока, рисуется вокруг его обычный границы и точно таким же образом стилизуется через CSS. Однако, outline не влияет на ширину и высоту блока, в отличие от границы (border).

Для блоков больше значение имеют свойства display и position. Свойство display может обладать следующими значениями:

  • block — элемент превращается в блочный. Если задать элементу <span> свойство display: block;, то он будет выглядеть и вести себя, как <div>
  • inline — элемент превращается в строчный — так можно превратить <div> в <span>
  • inline-block — элемент превращается в блок-в-строке
  • none — элемент исчезает
  • table — элемент ведёт себя как таблица
  • table-row — элемент ведёт себя как ряд таблицы
  • table-cell — элемент ведёт себя как ячейка таблицы

Последние три значения не поддерживаются Internet Explorer и поэтому не рекомендуются к использованию. Кстати, есть свойство visibility, если задать блоку свойство visibility: hidden, то блок будет невидимым, но место под него свободное останется.

Свойство position определяет позиционирование элемента. Может принимать значения:

  • static
  • fixed
  • relative
  • absolute

Статичное (position: static;) позиционирование — это позиционирование элементов по умолчанию, ничего особенного. Позиционирование фиксированное привязывает элемент к определённой области экрана — страницу можно прокручивать вниз и вверх, элемент с position: fixed; будет оставаться на одном и том же месте экрана. При относительном позиционировании элемент остаётся на своём месте, однако, с помощью задания значения свойствам top, right, bottom или left его можно смещать в стороны относительно занимаемого им места. При этом надо иметь в виду, что он будет залезать на другие элементы, а место, которое он занимал ранее, останется свободным. Самое интересное — это абсолютное позиционирование. Под абсолютно спозиционированный элемент не резервируется место на странице, он может отображаться в любом её месте, налезая на другие элементы. Месторасположение такого элемента на странице задаётся свойствами top, right, bottom и left:

div {
 position: absolute;
 top: 30px;
 left: 25%;
 right: 25%;
 height: 100px;
}

Элемент с такими свойствами будет представлять из себя прямоугольник высотой 100 пикселей, размещённый на 30 пикселей ниже верха страницы, причём его ширина будет зависеть от ширины самой страницы. Либо от ширины своего родительского элемента, если элемент со свойством position: absolute; размещён внутри элемента, спозиционированного также абсолютно. Вообще все координаты и размеры абсолютно спозиционированного элемента отсчитываются относительно ближайшего родительского (то есть такого, в который он вложен) элемента, спозиционированного не статично. Либо от размеров страницы. Координата top считается сверху вниз, координата right — справа налево.

Для блока, спозиционированного не абсолютно, можно задать обтекание его текстом при помощи свойства float.

801 байт

На рисунке приведены примеры жёлтого блока со свойством float: none; слева, со свойством float: left; в средней колонке, и со свойством float: right; в правой. Так как блок со свойством float: left; пропускает текст справа от себя, то если будут идти подряд несколько блоков со свойством float: left;, то они встанут рядомс друг с другом, а текст будет обтекать их справа. Аналогично и блоки ссо свойством float: right;, только они будут прижаты к правой стороне, а текст будет обтекать их слева. Таким образом блоки можно размещать рядом друг с другом. Этот способ несколько сложнее, чем указывать блокам display: inline-block;, но все старые браузеры отрисовывают его без проблем, а вот с display: inline-block; в старых браузерах могут быть проблемы.

Для того, чтоб вынести элемент ниже элементов с float, используется свойство clear. Например, надо, чтоб от элемента справа не было плавающих блоков (или картинок), тогда для него в CSS задаётся clear: right; Аналогично clear: left;, и для обеих сторон clear: both;

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

color — цвет текста. Задаётся в виде значения #RRGGBB, где RR, GG, BB — значения цветов в системе RGB в шестнадцатеричной системе. Максимальное значение каждого компонента — 255 (ff). Белый цвет, соответственно, #ffffff, жёлтый — #ffff00, и так далее. Некоторые цвета можно задавать английскими названиями (black, red, white и так далее);

font — основное свойство для задания шрифта. Существует несколько «подсвойств», которые меняют только одно свойство шрифта. Их все разом можно задать в свойстве font, перечислив через пробел, но рекомендуется выносить отдельно свойство font-family, так как там тоже задаются свойства через пробел;

font-size — размер шрифта;

font-style — стиль шрифта, бывает normal, italic и oblique. Всё, что не normal, выглядит, как курсив, но рекомендуется пользоваться italic;

font-family — устанавливается шрифт. Название шрифта, если содержит больше одного слова, заключается в кавычки. И строго рекомендуется, помимо указания шрифта, указывать ещё семейство шрифтов и начертание, чтоб браузер попытался найти более подходящий шрифт для отображения, если на компьютере пользователя не найдётся требуемого. Например:

div {
 font-family: "Times New Roman", Times, serif;
}

Здесь «Times New Roman» — название шрифта. Если такого шрифта нет на компьютере, браузер попытается найти шрифты, которые похожи на гарнитуру Times. Если ничего похожего нет, браузер возьмёт шрифт, соответствующий начертанию sans-serif. Названий шрифтов и гарнитур можно указывать несколько, браузер будет проверять наличие шрифтов в системе слева направо. Начертаний бывает всего три:

  • serif — шрифты с засечками,
  • sans-serif — шрифты без засечек,
  • monospace — моноширинные шрифты (все символы имеют одну ширину)

font-variant — бывает normal или small-caps, что означает превращение всех маленьких букв в заглавные, но по размеру немного меньшие ЗАГЛАВНЫХ.

font-weight — толщина шрифта. Бывает normal, lighter (чаще всего выглядит как обычный шрифт), bold (полужирный), bolder (обычно выглядит так же, как bold), или задать толщину шрифта от 100 до 700 с шагом в 100 (обычно никто этим не пользуется);

text-align — выравнивание текста, бывает left, center, right или justify;

text-decoration — украшение текста. Может принимать значения none (никаких украшений, убирает даже подчёркивание у ссылок), underline (подчёркнутый текст), line-throught (перечёркнутый текст), overline (текст с линией сверху), blink (мигающий текст, не работает практически ни в одном браузере. Кстати, делать текст мигающим — признак дурного вкуса);

text-transformation — трансформация текста, может принимать значения uppercase (ВСЕ БУКВЫ ЗАГЛАВНЫЕ), lowercase (все буквы строчные), capitalize (Первая Буква Каждого Слова Становится Заглавной);

text-indentation — отступ первой строки текста («красная строка»).

Прочие свойства CSS

Свойств CSS очень много разных, все я их приводить не буду, только наиболее часть используемые, про которые ещё не писал:

  • background — большое свойство для задания фоня элемента. Можно задавать все свойства фона в этом свойстве, перечисляя через пробел, а можно разделить по отдельным подсвойствам:
  • background-color — основной цвет фона;
  • background-image — загрузить картинку на фон элемента. Обычно пишут background-image: url("path/to/image"); — картинка, разумеется, должна быть доступна через веб-сервер;
  • backhround-repeat — если картинка на фон меньше по размеру, чем элемент, то можно задать правила повторения картинки, чтоб она заполнила весь элемент. Может принимать значения repeat-x (повторить картинку по оси x), repeat-y (повторить картинку по оси y), repeat (повторять картинки по осям) и no-repeat (не повторять);
  • background-position — картинку на фоне можно прижать к какому-либо краю либо к углу элемента, задав это свойство — может принимать значения right, top, bottom, left или комбинации этих свойств, записанные, через пробел, для указания угла;
  • background-attachment — если указать fixed, то картинка на фоне не будет прокручивается вместе с остальной страницей (по умолчанию это свойство имеет значение scroll и фон прокручивается вместе со страницей);

И ещё четыре свойства, которые актуальны только для списков (<ul>, <ol>) и их элементов (<li>):

  • list-style — задаёт стиль списка. Можно задать весь стиль сразу, записывая значения через пробел, а можно вынести отдельные значения в «подсвойства»;
  • list-style-image — картинка, которая отображается в списке напротив каждого пункта, задаётся как url("path/to/image");
  • list-style-position — определяет, входит ли буллет (или картинка, заданная в свойстве выше), в ширину <li> или торчит снаружи (по умолчанию торчит снаружи, и ширина <li> определяет ширину его текста), может принимать значения, соответственно, inside или outside;
  • list-style-type — определяет тип списка. Может принимать почти два десятка различных значений, по умолчанию для <ol> — decimal, для <ul> — disk. Меняя их, можно превратить <ul> в <ol> и наоборот.

CSS 3

Со времён выпуска CSS2 прошло достаточно много лет (стандарт CSS2 был принят в 1998 году), и консорциум W3C выпустил стандарт CSS2.1 в середине 2011 года. Однако, в CSS2.1 нет ни скруглённых уголков, ни всяческих трансформаций элементов (поворотов, наклонов, искажений), а технические возможности и, главное, требования дизайнеров и верстальщиков уже распространяются и на эти всякие искажения, и, главное, на скруглённые уголки. Все эти нововведения входят в разрабатываемый сейчас стандарт CSS3. Большую его часть (наиболее стабильную) поддерживают все последние версии браузеров. Старые браузеры, разумеется, CSS3 не поддерживают или поддерживают крайне ограниченно.

Наиболее часто употребимым свойством, относящимся к CSS3, является скругление уголков. Оно задаётся свойством border-radius. Это свойство скругляет уголки блока вместе с границей и фоном.

  • border-radius: 50px; — задаст всем 4 уголкам блока радиус скругления 50px
  • border-radius: 5pt 10pt; — верхний левый и правый нижний уголки будут скруглены с радиусом 5pt, верхний правый и нижний левый с радиусом 10pt
  • border-radius: 1px 2px 3px 4px; — всем четырём углам по порядку задаётся свой радиус скругления (начиная с верхнего левого и далее по часовой стрелке)
Также можно указывать радиусы скругления для каждого угла по отдельности с помощью свойств:
  • border-top-left-radius,
  • border-top-right-radius,
  • border-bottom-left-radius,
  • border-bottom-right-radius.

Можно задавать эллиптические скругления уголка, указывая два радиуса скругления для одного угла, например:

bottom-top-left-radius: 20px 10px;

Некоторые браузеры в предыдущих версиях использовали свои собственные свойства, аналогичные border-radius:

браузеры, основанные на движке WebKit (Google Chrome, Safari) использовали и до сих пор поддерживают аналогичное свойство «-webkit-border-radius»;

FireFox и все браузеры, построенные на движке Gecko, использовали и до сих пор поддерживают «-moz-border-radius»;

Opera использовала и поддерживает «-o-border-radius».

Поэтому если хочется поддерживать на только новые версии браузеров, а ещё и некоторые более старые (кроме IE), то следует писать так:

div {
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -o-border-radius: 10px;
}

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

Ссылки

  1. http://www.w3.org/Style/Examples/011/firstcss — туториал по CSS
  2. http://www.w3.org/TR/CSS2 — спецификация CSS 2.1
  3. http://www.w3.org/TR/CSS — текущая спецификация CSS3
  4. http://www.w3schools.com/css/ — туториал по CSS
  5. http://www.w3.org/TR/css3-background/#the-border-radius — скругление уголков с border-radius

Комментариев нет:

Отправить комментарий

Ублюдочный Гугл поломал форму комментариев. Извините.