2018-01-21
343
Как и любой другой язык программирования, CSS имеет строго определенный синтаксис, т.е. правила по которым создаются таблицы стилей.
В CSS, в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Схематично правило описания параметров таблицы стилей можно описать следующим образом.
Как видно из схемы выше, сначала записывается так называемый селектор, показывающий к какому html тегу(тегам) применяется то или иное свойство.
Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки, т.е. должен однозначно закрываться, иначе, стиль применим не будет.
Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой, причем после последнего объявления точку с запятой можно не ставить.
Показанное выше правило указывает на то, что все заголовки первого уровня в документе будут голубого цвета с размером шрифта 14 пикселей.
Способы подключения CSS таблиц к HTML документу
Как говорилось ранее, CSS можем управлять дизайном сколь угодно большого количества страниц, при этом его изменение приводит к изменению оформления во всех документах, к которым он был подключен.
Внешняя таблица стилей это обычный текстовый файл с расширением * .CSS. Допустим, у нас есть таблица стилей style.css и несколько страниц HTML. Тогда в каждом документе, который мы хотим подключить, между тегами <head> и </head> необходимо прописать строчку:
<link rel="stylesheet" type="text/css" href="style.css">
Эта строка указывает программе, что он должен использовать правила отображения HTML-файла из CSS-файла.
Файлы примерно следующего содержания:
Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Работаем со стилями </title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<h1> Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета </h1>
</body>
</html>
Style.css
h1{color:blue;font-size:14px}
При этом информация должна отобразиться в следующем виде:
Существует еще ряд способов подключения стилей в тело документа
Можно располагать правила стилей непосредственно в главной части документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Работаем со стилями </title>
<style type="text/css">
h1{color:blue;font-size:14px}
</style>
</head>
<body>
<h1> Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета </h1>
</body>
</html>
Также, можно задавать стиль с помощью атрибута STYLE внутри какого-либо из элементов внутри самого документа. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head >
<title> Работаем со стилями </title>
</head>
<body>
<h1 style="color:blue;font-size:14px" > Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета </h1>
</body>
</html>
В последнем примере стоит обратить внимание на то, что свойства отделяются «;», однако, пробелов между ними не должно быть, тогда как в стилевом файле, они могут быть, для удобства даже написаны построчно.
