DVKuklin.ru

Учебник по программированию.

Создание сайтов. Первые шаги.

 

 

Учебник по программированию. Первые шаги. Язык программирования PascalABC.NET.
Предыдущий параграф Назад в содержание Следующий параграф

§8. Основные сведения о языке стилей CSS.

Язык стилей css – язык, с помощью которого задаются свойства элементов. Css – это аббревиатура от Cascading Style Sheets (дословно – каскадная таблица стилей).

Изучая язык html, мы научились изменять вид элементов с помощью атрибутов. Это же самое можно делать, изменяя свойства языка css. Различием является то, что с помощью атрибута мы можем изменить вид только того элемента, который находится в одном определённом тэге. С помощью свойств css, помимо одного элемента, мы можем изменить вид всех элементов, находящихся в одинаковых тэгах.

Не будем сейчас говорить о достоинствах и преимуществах этого языка. Они и так станут вам очевидны при его изучении. Стоит отметить только то, что сейчас, как правило, предпочтение отдаётся использованию css, а не использованию атрибутов. Поэтому появились некоторые возможности, которые можно настроить только с помощью css.

Изменение свойства одного элемента.

У любого тэга помимо своих атрибутов может быть атрибут style. Этот атрибут относится уже к языку css, поэтому и значение ему необходимо присвоить исходя из правил css. Пример:

<h1 style = "color:green">Голубой заголовок.</h1>
Пример зелёный заголовок.

В данном примере color – это свойство green – это значение свойства, которое присвоено с помощью двоеточия. Таким образом, в языке css есть множество свойств, значения которым присваиваются через двоеточие, а не через знак равно как мы привыкли.

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

<h1 style = "color:green; font-style:italic;"> Голубой заголовок.</h1>
Пример зелёный, курсивный заголовок.

В этом примере font-style – свойство, которое отвечает за наклонность шрифта. italic – значение, при котором шрифт становится наклонным.

Изменение свойств нескольких элементов.

Для изменения свойств нескольких элементов, необходимо создать отдельную таблицу стилей. Располагаться она должна в голове документа, т.е. в тэге head, и должна она быть заключена в тэг style. Пример:

<!DOCTYPE HTML> <head> <style> h1 {color:green} p {color:green} </style> </head> <body> <h1>Первый зелёный заголовок.</h1> <h1>Второй зелёный заголовок.</h1> <p>А это зелёный абзац.</p> <p>А это второй зелёный абзац.</p> </body>
Пример изменение свойств нескольких элементов.

Как видно из примера таблица стилей заполняется следующим образом: в начале пишется название тэга, у которого необходимо изменить свойство, затем в фигурных скобках пишется свойство и через двоеточие присваивается ему значение. Затем после пробела точно так же пишется следующий тэг и свойства, которые должны быть у него изменены.

Если нескольким тэгам необходимо изменить одно и то же свойство, как в предыдущем примере, то можно перечислить эти тэги через запятую и в одних фигурных скобках указать это свойство:

............................ h1, p {color:green} ............................

Результат будет тот же самый.

Так же в фигурных скобках можно указывать несколько свойств через точку с запятой:

............................ h1, p {color:green; font-style:italic;} ............................
Пример изменение свойств нескольких элементов.

Примечание: как правило, точка с запятой ставится после каждого свойства, даже после последнего.

Изменение свойств элементов в различных документах.

Самое замечательное достоинство языка css заключается как раз в том, что с его помощью можно менять вид элементов во множестве документов одновременно. Для этого необходимо создать таблицу стилей в отдельном текстовом файле с расширением css. Создаётся она точно так же, как и в предыдущих примерах только без тэга style. Затем этот файл можно подключать к различным html документам.

Подключается файл с помощью тэга link, который должен быть расположен так же в голове документа (в тэге head). У него необходимо настроить два атрибута. Атрибуту rel необходимо присвоить значение StyleSheet, а атрибуту href адрес файла с таблицей стилей.

Примечание: тэг link предназначен для подключения различных файлов к документу. Значение StyleSheet атрибута rel как раз говорит о том, что подключается таблица стилей.

Пример:

Таблица стилей.css ------------------------------------------- h1, p {color:green; font-style:italic;} ___________________________________________ Color 2.html ----------------------------------------- <!DOCTYPE HTML> <head> <link rel = "StyleSheet" href = "Таблица стилей.css"> </head> <body> <h1>Первый зелёный заголовок.</h1> <h1>Второй зелёный заголовок.</h1> <p>А это зелёный абзац.</p> <p>А это второй зелёный абзац.</p> </body>
Пример таблица стилей в отдельном файле.

Как видите результат тот же самый. Только теперь мы можем эту таблицу подключить к нескольким документам, в которых все заголовки h1 и абзацы будут зелёными, и шрифт в них будет наклонным.

Таким образом, при использовании css вначале создаётся сайт целиком со множеством страниц. А потом с помощью одного файла содержащего таблицу стилей меняется оформление всего сайта.

Классы.

Есть ещё одна замечательная возможность у языка css – это создавать элементы из одного и того же тэга но с различным внешним видом. Для этого необходимо создать различные классы одного тэга. Для примера создадим два различных абзаца из тэга p:

<!DOCTYPE HTML> <head> <style> p.class_1 {color:blue; font-style:italic;} p.class_2 {color:red;} </style> </head> <body> <p class = "class_1">Абзац класса 1</p> <p class = "class_2">Абзац класса 2</p> </body>
Пример использование классов.

Как видно из примера в таблице стилей было дано два различных описания тэга p. Причём после точки были присвоены два различных имени класса. В теле документа эти имена классов были присвоены атрибуту class.

Т.е. у каждого тэга может быть атрибут class, которому может быть присвоено имя, которое есть в таблице стилей у подобного тэга.

Применение одного описания свойств к различным тэгам.

Так же можно создать определённое описание свойств, а затем использовать это описание к различным тэгам. Пример:

<head> <style> #MyText {color:red; font-style:italic} </style> </head> <body> <h1 id = "MyText">Заголовок.</h1> <p id = "MyText">Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. </p> </body>
Пример Применение одного описания свойств к различным тэгам.

Как видно из примера, для того, что бы одно описание свойств использовать к различным тэгам, необходимо этому описанию присвоить уникальное имя, которое пишется после символа «#». Затем атрибуту id любого тэга присвоить это имя. Т.е. у каждого тэга может быть атрибут id, которому можно присвоить имя описания свойств.

Правила оформления таблицы стилей.

Как и в любом языке, компьютеру абсолютно без разницы каким образом оформлен код. Лишь бы не было синтаксических ошибок. Однако для того, что бы лучше понимать код и легче находить ошибки, при оформлении таблиц стилей рекомендуется придерживаться некоторым правилам. На данном этапе рассмотрим только одно, самое основное. Остальные при необходимости можете изучить самостоятельно в Интернете.

Для того, что бы таблица стилей была более «читабельна» все тэги и свойства необходимо писать в отдельной строке. Например, оформить файл «Таблица стилей.css» из предыдущего примера правильней будет следующим образом:

h1, p { color:blue; font-style:italic;}

Комментарии.

Так же как и в любом другом компьютерном языке, в языке css есть возможность вставлять в текст комментарии, которые ни как не будут влиять на документ.

Делается это следующим образом:

/* Это комментарий */

Всё, что находится в таких скобках (косая черта и звёздочка) будет считаться комментарием.

Тэги span и div.

Прежде чем двигаться дальше есть смысл рассмотреть ещё два тэга языка html span и div.

span – тэг (открывающий и закрывающий), который объединяет в блок строку.

div – тэг (открывающий и закрывающий), который объединяет в блок абзац.

Пример их использования и разница между ними будет показана в примере после изучения следующего подпункта.

Примечание: эти тэги не были рассмотрены при изучении языка html потому, что смысл их заключается в том, чтобы объединять какие либо части документа в блоки, стиль которых можно настроить с помощью css. Так же возможно создать блоки различных классов с различными настройками свойств.

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

Для более осознанного понимания некоторых свойств css необходимо разобрать вопрос, который во всей литературе называется «Блочная модель».

Любой элемент html документа воспринимается браузером, как блок прямоугольной формы. Отсюда и название – блочная модель. У каждого блока есть определённые составные части. Далее на рисунке они схематически показаны:

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

Содержанием элемента может быть всё, что угодно: символ, строка, абзац, картинка или целый текст с несколькими абзацами и картинками.

border – рамка вокруг элемента.

padding – область между рамкой и содержанием элемента.

margin – внешняя невидимая область элемента.

Для изменения цвета и размеров этих составных частей существуют соответствующие свойства. Сейчас для примера рассмотрим некоторые из них (все остальные свойства и значения, которые они могут принимать, будут рассмотрены в следующем параграфе):

border-style – вид рамки. Одно из возможных значений – solid (рамка в виде сплошной линии). Примечание: если это свойство не установлено, то рамка отображаться не будет;

border-color – цвет рамки;

background-color – цвет фона элемента. Примечание: фон элемента распространяется до рамки, т.е. в области содержания элемента и в области padding. В области margin цвет фона будет соответствовать фону родительского элемента.

В следующем примере с помощью настройки этих свойств показана разница между тэгами div и span:

<!DOCTYPE HTML> <head> <style> #NewStyle { border-style:solid; border-color:red; background-color:green;} </style> </head> <body style = "background-color:yellow;"> Обычный текст. <div id = "NewStyle">Это элемент заключённый в div. <br>В блоке div перешли на наовую строку.</div> Обычный текст. <span id = "NewStyle">Это элемент заключённый в span. <br>В блоке span перешли на новую строку.</span> Обычный текст. </body>
Разница между элементами div и span.

Как видно из результата, блок div воспринимается браузером как абзац и распространяется по всей ширине родительского элемента (в данном примере родительским элементом является окно браузера). Блок span занимает только то пространство, в котором находится содержание элемента.


Задание размеров.

В отличии от html в css единицы, в которых выражены размеры нужно задавать явно. Другими словами если вы указываете размер в пикселях, то необходимо поставить после числа сочетание букв px. Если размер указываете в процентах, то – символ %.

Далее в таблице приведены все единицы для задания размеров, которые существуют в css:

Единицы Описание
em Ширина одной буквы в текущем месте документа
ex Высота одной буквы в текущем месте документа
px Размер в пикселях
in Размер в дюймах
cm Размер в сантиметрах
mm Размер в миллиметрах
pt Размер в пунктах (1 пункт примерно равен 0.353 мм)
pc Размер в пиках (1 пик = 12 пунктов)

Для примера воспользуемся свойством font-size, которое устанавливает размер шрифта:

<!DOCTYPE HTML> <head> </head> <body> <span>Обычный размер шрифта.</span><br> <span style = "font-size:3em"> Размер шрифта в 3em</span><br> <span style = "font-size:4ex"> Размер шрифта в 4ex</span><br> <span style = "font-size:20px"> Размер шрифта в 20px</span><br> <span style = "font-size:0.5in"> Размер шрифта в 0.5in</span><br> <span style = "font-size:1cm"> Размер шрифта в 1cm</span><br> <span style = "font-size:5mm"> Размер шрифта в 5mm</span><br> <span style = "font-size:20pt"> Размер шрифта в 20pt</span><br> <span style = "font-size:1pc"> Размер шрифта в 1pc</span><br> </body>
Пример задания размеров различными способами.

Задачи.

Создать документ с несколькими различными по оформлению абзацами. Свойства каждого настроить по разному: с помощью атрибута style; с помощью таблиц стилей как в самом документе, так и в отдельном файле. В один из абзацев вставить блок span с уникальными свойствами.


Предыдущий параграф Назад в содержание Следующий параграф