2

CSS Учебник

Что такое CSS?

CSS расшифровывается Cascading Style Sheets (Каскадные Документы Стилей).
С помощью CSS Вы можете оформлять HTML документы.

Пример оформленной с помощью CSS таблицы.
СтранаНаселение (млн.)
Россия143
США313
Китай1347
Франция65

Эта же таблица без оформления.
СтранаНаселение (млн.)
Россия143
США313
Китай1347
Франция65

#css table
{
border-collapse:collapse;
font-family:'arial';
}
#css th
{
background-color:#DC63C2;
padding:7px;
font-size:1.1em;
border:1px black solid;
color:white;
}
#css td
{
padding:7px;
border:1px solid;
}

CSS синтаксис

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

 Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5) отделенное двоеточием (:).

CSS синтаксис

Строковое объявление стилей


Строковое объявление стилей используется в случаях, когда необходимо оформить только один определенный элемент в HTML документе.
Для того, чтобы оформить элементы этим способом Вы должны воспользоваться атрибутом style соответствующего элемента.
Атрибут style может содержать любые CSS свойства.

Пример:
<p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</p>


Цвет текста

С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.

Цвет может быть задан следующими способами:
1. С помощью названия цвета (например 'red' задаст красный цвет);
2. С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
3. С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пояснения: 

Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например red определит красный, blue - синий, white - белый.
Второй способ может использоваться для задания любых цветов и оттенков.

Синтаксис:
rgb(красный,зеленый,голубой)

красный число от 0 до 255 указывающее как много красного будет в итоговом оттенке.
зеленый число от 0 до 255 указывающее как много зеленого будет в итоговом оттенке.
голубой число от 0 до 255 указывающее как много голубого будет в итоговом оттенке.

Например rgb(255,0,0) задаст красный цвет, а rgb(0,255,0) зеленый. Смешивая красный с зеленым rgb(255,255,0) мы получим желтый.

Замечательную подборка цветов тут: http://colorscheme.ru/

Третий способ по функциональности эквивалентен второму, но более компактен. На практике в основном используют именно этот способ.
#красныйзеленыйголубой

красный шестнадцатеричное число от 0 до ff указывающее как много красного будет в итоговом оттенке.
зеленый шестнадцатеричное число от 0 до ff указывающее как много зеленого будет в итоговом оттенке.
голубой шестнадцатеричное число от 0 до ff указывающее как много голубого будет в итоговом оттенке.

Например #ff0000 задаст красный цвет, а #00ff00 зеленый. Смешивая красный с зеленым #ffff00 мы получим желтый.

Теперь попробуем перекрасить абзацы в зеленый цвет всеми перечисленными выше способами:
p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}

Выравнивание текста

С помощью CSS свойства text-align Вы можете выровнять текст элемента по горизонтали.
Текст может быть выровнен:

  • По центру (значение center); 
  • По левому краю (left); 
  • По правому краю (right); 
  • По ширине (justify). 

Обратите внимание: по ширине (justify) текст выравнивается путем растягивания всех строчек до одинаковой длины. Этот метод выравнивания часто используется в газетах и журналах.

Пример:
Текст данного элемента выравнен по центру.
Текст данного элемента выравнен по левому краю.
Текст данного элемента выравнен по правому краю.
Текст данного элемента выравнен с помощью значения justified. Как Вы можете видеть, браузер автоматически растягивает строчки до одинаковой длинны путем изменения величины отступов между словами. Попробуйте убрать выравнивание или измените ширину окна браузера, чтобы лучше понять принцип действия.
Текст данного элемента выравнен с помощью значения justified. Как Вы можете видеть, браузер автоматически растягивает строчки до одинаковой длинны путем изменения величины отступов между словами. Попробуйте убрать выравнивание или измените ширину окна браузера, чтобы лучше понять принцип действия.
p.ta1 {text-align:center;}
p.ta2 {text-align:left;}
p.ta3 {text-align:right;}
p.ta4 {text-align:justify;}

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

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