В этом уроке мы подключим нашу первую таблицу стилей - это файл style.css, который и будет управлять стилями нашей индексной HTML страницей. Для начала мы создадим для стилей отдельную папку, под названием CSS, в которой будет лежать сам файл style.css
Как создать такой файл? Создаем пустой файл, можно в любом текстовом редакторе, но лучше в специальном редакторе. Как выбрать редактор смотрите здесь. В папку CSS сохраняем файл c именем style и расширением .css.
Файл создали, теперь нам остается его подключить к используемому HTML документу. Для этого в области <head> </head> используем специальный тег, который называется <link>. Этот тег является одинарным и у него есть несколько атрибутов, которые требуется указать.
Первый атрибут – это, уже нам знакомый, href="", который укажет путь к нашей таблице стилей. В нашем случае это css/style.css.
Второй атрибут - это тип подключаемого документа, и в нашем случае это type="text/css", и последний атрибут - это rel="stylesheet", указывающий взаимосвязь между html документом и таблицей стилей, т.е. говорит браузеру, что подключается таблица стилей, которая находится по адресу css/style.css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
</html>
Вот так подключается любая таблица стилей. И сколько бы таких таблиц на сайте не было, при подключении меняется только имя файла в атрибуте href="" css/имя таблицы стилей.css .
Теперь браузер будет не только загружать html страницу, но и когда дойдет до тега <link> сразу же подгрузит и файл со стилями CSS, тем самым сформировав связь между ними.
Имейте ввиду, что в любом html документе можно подключить сколько угодно таблицей стилей и браузер дойдя до них их всех подгрузит и применит. И точно также наоборот ОДНУ таблицу стилей мы можем применить к любому количеству html страниц.
Итак, с подключением таблиц стилей мы разобрались, а теперь рассмотрим, что же собой представляет этот стиль. А их в таком файле может быть огромное количество. Разберем такую схему, которая выглядит следующим образом:
Каждый стиль состоит из двух элементов – это «Селектор» и пары «Свойство:Значение». «Селектор», что в переводе с английского означает определенный, выбранный, то есть в «Селектор» мы выбираем те html теги с которыми мы хотим работать, то есть те, которым нужно задать определенные стиль. Другими словами мы в «Селекторе» указываем элемент, который мы выбираем из html страницы. Это могут быть абзацы, заголовки, элементы списка, изображения и все другие элементы страницы.
В «Свойство:Значение» мы указываем правило (условие) как выбранному элементу «Селектор» отобразится на странице, например: красный цвет.
И тоже самое более коротко: Сначала выбираем элемент, с которым хотим работать и для него указываем правило (условие), которое к этому элементу будет применяться. Это и есть вся суть оформления всей технологии CSS которую в этом разделе мы и будем рассматривать.
Есть несколько вариантов выбора элементов «Селекторов» с html страницы и существует множество правил«Свойство:Значение», которые можно использовать.
И, давайте разберем самые часто используемые три вида «Селекторов» которые используются при создании стилей.
1. Первый «Селектор» это селектор тегов, который позволяет отобрать с html страницы все теги одного плана. Например, задать всем абзацем зеленый цвет. Тогда мы указывает в качестве селектора название тега (для параграфа) P и в фигурных скобках указываем для него правило.
p{
color: #00ff00;
}
То есть для всех тегов «Селектор» P указываем правило, что цвет у всех тегов должен быть color:#00ff00; то есть зеленый. Это шестнадцатеричная система цвета, которая используется в CSS.
В этом случае мы задали стиль для всех элементов на странице, но бывают случаи когда нужно задать стиль только для одного элемента на странице. Для этого используется следующий вид селектора «id-селектор».
2. Второй вид - это «id-селектор». Как это используется: для начала, для интересующего нас элемента в html странице задаем идентификатор id="header" и уже для этого идентификатора задается определенное условие.
Заголовок H1
Заметьте, что в стилях перед именем идентификатора ставится решётка «#», а затем имя самого идентификатора.
#header{
color: #ff0000;
}
Это второй вид селектора, он достаточно распространенный и часто используется.
3. И третий вид селектора - это селектор класса, применяется, когда нужно выбрать группу тегов (абзац, 1й элемент списка, заголовок второго уровня) и для всех этих элементов задать одинаковые условия. Селектор класса используется следующим образом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Заголовок H1
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
Заголовок H2
Абзац без класса
Абзац с применением класса </body> </html>
И для всех наших элементов с классом new зададим единое свойство синий цвет. В стилях перед именем класса ставится точка в отличие от идентификатора.
.new{
color: #0000ff;
}
Мы изучили три типа селекторов. Они используются почти в 100% случаев. Остальные селекторы используются куда реже. Так же работая с CSS стилями, вы будете очень часто использовать цвета или различные оттенки, и вам понадобится помощник, который поможет вам определить цвет в шестнадцатеричной системе. Такая программка для определения цвета есть, лично ею сам пользуюсь уже давно. Она достаточно удобная, и тут рассказывается, как ею пользоваться. Ну а на этом этот урок завершим и приступим к следующему.
CSS