css-rules

Правила CSS: оформление текстовых элементов

Рассмотрим основные правила CSS для оформления текстовых элементов на странице.

Шрифтовые правила CSS

  • font-family: семейство шрифта|тип шрифта. Один нюанс: если название шрифта будет содержать пробел, то это название нужно взять в кавычки.
  • font-size: величина|%. Это размер шрифта. Его можно указать в пикселях, процентах, em. Причем проценты считаются от размера шрифта, который этот элемент получил по наследству.
  • font-weight: normal|bold|bolder|lighter|число от 100 до 900. Это толщина шрифта. 400 = normal, 700 = bold.
  • font-style: normal|italic. Это наклон вашего шрифта. По умолчанию — normal.
  • font-variant: normal|small-caps. Это начертание строчных букв.
  • сборные правила font. Они позволяют указать отдельные правила через пробелы. В большинстве сборных правил порядок не важен, а в правиле font он имеет важное значение.
  • font: font-style font-variant font-weigth font-size font-family. Правила пишем только в таком порядке. Правила font-size и font-family указывать обязательно (т.к. они не имеют значений по умолчанию), остальные правила можно опускать.
font-family:Arial,Geneva,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font:bold 10px Arial;

Правила работы с текстом в CSS

  • text-align: left|right|center|justify. Это замена атрибуту align, это горизонтальное выравнивание строк. Применяется только в блочных элементах.
  • text-decoration: none|overline (|) underline (|) line-through. Это оформление горизонтальной линии (нет линии, линия над строкой текста, под строкой текста, перечеркивание).
  • text-indent: величина|%. Это красная строка. Проценты считаются от размера той области, где стоит тот самый текст. Применяется только для блочных элементов.
  • text-transform: none|capitalize|uppercase|lowercase (символы не меняются, каждое слово с большой буквы, трансформация в строчные или заглавные буквы). Это трансформация символов.
  • letter-spacing: normal|величина. Это расстояние между символами. Нельзя указывать в процентах.
  • word-spacing: normal|величина. Это расстояние между словами. Нельзя указывать в процентах.
  • vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|%. Вертикальное выравнивание. Это выравнивание строчных элементов между собой. Но для элементов таблицы «td» и «th» вертикальное выравнивание выравнивает весь контент, который находится внутри.
  • line-height: normal|величина|%. Высота строки, где находится текст.
  • white-space: normal|pre|nowrap. Как обрабатывать пробельные символы в нашем элементе (normal — они сокращаются и по ним производится автоматический перенос, nowrap — пробельные символы сокращаются, но переноса по ним не производится, pre — пробелы никак не обрабатываются, т.е. не сокращаются и переноса по ним тоже нет).
text-align:right;
text-decoration:underline;
text-indent:10px;
text-transform:uppercase;
letter-spacing:10px;
word-spacing:10px;
vertical-align:top;
line-height:5%;
white-space:pre;

Оформление списков в CSS

Правила оформления списков в css можно применять как для всего списка, так и для отдельных элементов списка.

  • list-style-type: none|circle|disc|square|decimal|lower-alpha|upper-alpha|lower-roman|upper-roman. Это тип маркирации: нет маркера, круг, диск, квадрат, арабские цифры, латинские буквы в разных регистрах, римская нумерация в разных регистрах.
  • list-style-position: outside|inside (за пределами, внутри). Это размещение области с маркером. Для маркера формируется специальная область: за пределами элемента «li» или внутри него (по умолчанию — за пределами элемента).
  • list-style-image: none|url. Картинка для оформления маркера. Можем указать url картинки, чтобы она отображалась вместо маркера.
  • list-style: list-style-type list-style-position list-style-image. Т.е. здесь мы записываем все три правила выше в одно, сборное правило. Здесь порядок не имеет никакого значения.
list-style-type:square;
list-style-position:inside;
list-style-image:url("ball.gif");
list-style:decimal inside;

Свойства цвета и фона в CSS

  • color: цвет.
  • background-color: цвет|transparent. Это цвет фона. По умолчанию он прозрачный.
  • background-image: none|url. Фоновая картинка. Можно поставить картинку, указав ее url.
  • background-position: top|bottom|center|left|right|величина|%. Позиционирование картинки в элементе.
  • background-attachment: fixed|scroll (привязка к элементу, области просмотра). Это вопрос прикрепления картинки, от чего считается координата. Fixed — это считать координаты от области просмотра.
  • background-repeat: repeat|repeat-x|repeat-y|no-repeat. Повторять: по обеим осям, повторять по оси x (по горизонтали), по оси y (по вертикали), не повторять.
  • background: transparent background-color background-image background-repeat background-attachment background-position. Сборное правило, объединяет в себе все правила background.
color:red;
background-color:#330033;
background-image:url("fon.gif");
background-position:top right;
background-attachment:fixed;
background-repeat:repeat-x ;
background:#ffffff no-repeat url(fon.gif);



Добавить комментарий

Ваш e-mail не будет опубликован.