Рубрика: Свойства CSS / Каскадные таблицы стилей css

Руководство о том, каким образом при помощи языка CSS можно добавлять полезные и привлекательные эффекты к структурным элементам языка HTML, дано краткое описание некоторых наиболее часто применяемых свойств стилевых таблиц.

Я всегда мечтал о том, чтобы моим компьютером можно было пользоваться так же легко, как телефоном;
моя мечта сбылась: я уже не могу разобраться, как пользоваться моим телефоном.
Bjarne Stroustrup

 


CSSДля включения стилей в html-документ применяются – каскадные таблицы стилей CSS (Cascading Style Sheet), с их возможностями значительно упрощается разработка web-страниц и управление полученным сайтом. В этом разделе кратко описаны некоторые часто применяемые свойства стилевых таблиц.

Как и все компьютерные языки, CSS имеет свой синтаксис, по которым создаются таблицы стилей. CSS отличается от HTML тем, что у первого нет элементов, атрибутов и тегов, а только строго определенный синтаксис или правило, которое и описывает внешний вид одного или группы элементов 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-документ используется элемент META, который задает служебную информацию и располагается внутри элемента HEAD.

<head>
 <meta http-equiv="Content-Style-Type" content="text/css">
</head>

В примере, атрибут http-equiv=”Content-Style-Type” указывает, что элемент META относится к таблице стилей, а атрибут content=”text/css” задает, что таблицы стилей написаны на языке CSS. Таблицы стилей могут быть внутренними, встроенными и внешними.

  • Внутренняя таблица стилей задается внутри элемента HTML при помощи атрибута STYLE. Ее недостаток в том, что она придает определенное значение только для одного элемента, для остальных придется задавать атрибут STYLE каждый раз.

 

<H1 style="color: red">Свойства CSS</H1>

Браузер покажет:

Свойства CSS

 

  • Встроенные таблицы стилей добавляются с помощью тегов STYLE и располагаются внутри элементов HEAD. При таком включении, всем заголовкам первого уровня, которые находятся на данной странице, будет применен красный цвет. И если сейчас необходимо будет изменить цвет заголовков, то сделать это достаточно будет только один раз.
<style type="text/css">
H1 {color: red}
</style>

 

  • Внешними таблицами стилей являются те, которые помещены в отдельный файл с расширением .css и прикреплены к web-странице при помощи элемента LINK, который так же располагается внутри элемента HEAD.

 

<link href="css/style.css" rel="stylesheet" type="text/css">

Атрибут HREF задает URL таблицы, а REL указывает отношение подключаемого файла к документу. При добавлении основной таблицы стилей используется значение STYLESHEET.

Думаю теперь можно перейти к самому интересному – к изучению свойств CSS и их применению.

Все свойства CSS можно разделить на несколько групп:

 

 

 

 

 

 

 

 

 

 

 

Текст в CSS 0

Текст в CSS

Свойства текста в CSS предназначены для оформления и форматирования, не букв как у свойств шрифта, а слов, предложений и абзацев. Чтобы было яснее перейдем к делу. Содержание: Свойство TEXT-DECORATION Свойство TEXT-ALIGN Свойство TEXT-INDENT...

Интервалы в CSS 0

Интервалы в CSS

Интервалы в CSS задают расстояния между словами в тексте, между буквами внутри слова (межбуквенный интервал css), а так же управляют высотой строки (межстрочный интервал css). Интервалы можно задавать только...

Списки в CSS 0

Списки в CSS

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

Шрифт в CSS 0

Шрифт в CSS

Управление шрифтами в CSS не сильно отличается от HTML, однако использование CSS дает свои преимущества. Во-первых пользоваться CSS намного удобнее, а во-вторых правила CSS для текстовых блоков гораздо экономят объем HTML...

Блоки в CSS 0

Блоки в CSS

Блоки в CSS представляют собой самостоятельный объект, имеющий форму прямоугольника. Все элементы HTML – документа представляют собой самостоятельные блоки, которые содержат любого рода информацию, будь-то текст или изображение (контент)....

Цвет текста и цвет фона в CSS 0

Цвет текста и цвет фона в CSS

При помощи CSS цвет и фон можно задавать практически любым элементам web-страницы, свободно управлять фоновым изображением, его повторением по горизонтали и вертикали. Кроме этого, средствами CSS можно поместить фоновое изображение...