alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Подключение файла стилей CSS и знакомство с селекторами.

Категория: Уроки CSS Просмотров: 563 Коментариев: 0 Дата: 2017-08-23 Добавил: admin

 Подключение файла стилей CSS и знакомство с селекторами

В этом уроке мы подключим нашу первую таблицу стилей - это файл style.css, который и будет управлять стилями нашей индексной HTML страницей. Для начала мы создадим для стилей отдельную папку, под названием CSS, в которой будет лежать сам файл style.css

Как создать такой файл? Создаем пустой файл, можно в любом текстовом редакторе, но лучше в специальном редакторе. Как выбрать редактор смотрите здесь. В папку CSS сохраняем файл c именем style и расширением .css.

Создание файла CSS

Файл создали, теперь нам остается его подключить к используемому HTML документу. Для этого в области <head> </head> используем специальный тег, который называется <link>. Этот тег является одинарным и у него есть несколько атрибутов, которые требуется указать.

Первый атрибут – это, уже нам знакомый, href="", который укажет путь к нашей таблице стилей. В нашем случае это css/style.css.

Второй атрибут - это тип подключаемого документа, и в нашем случае это type="text/css", и последний атрибут - это rel="stylesheet", указывающий взаимосвязь между html документом и таблицей стилей, т.е. говорит браузеру, что подключается таблица стилей, которая находится по адресу css/style.css.

HTML
<!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 и в фигурных скобках указываем для него правило.

Селектор тега
CSS
p{
    color: #00ff00;
 }  


То есть для всех тегов «Селектор» P указываем правило, что цвет у всех тегов должен быть color:#00ff00; то есть зеленый. Это шестнадцатеричная система цвета, которая используется в CSS.

В этом случае мы задали стиль для всех элементов на странице, но бывают случаи когда нужно задать стиль только для одного элемента на странице. Для этого используется следующий вид селектора «id-селектор».

2. Второй вид - это «id-селектор». Как это используется: для начала, для интересующего нас элемента в html странице задаем идентификатор id="header" и уже для этого идентификатора задается определенное условие.

Селектор идентификатора
HTML

Заголовок H1

CSS

Заметьте, что в стилях перед именем идентификатора ставится решётка «#», а затем имя самого идентификатора.

#header{
    color: #ff0000;
 }  

Это второй вид селектора, он достаточно распространенный и часто используется.

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

Селектор идентификатора
В html коде, для всех выбранных элементов, прописываем нужный класс class="new". Имя класса может быть любым, но оно не может начинается с цифры.

HTML
<!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 зададим единое свойство синий цвет. В стилях перед именем класса ставится точка в отличие от идентификатора.

CSS
.new{
    color: #0000ff;
 }  

Мы изучили три типа селекторов. Они используются почти в 100% случаев. Остальные селекторы используются куда реже. Так же работая с CSS стилями, вы будете очень часто использовать цвета или различные оттенки, и вам понадобится помощник, который поможет вам определить цвет в шестнадцатеричной системе. Такая программка для определения цвета есть, лично ею сам пользуюсь уже давно. Она достаточно удобная, и тут рассказывается, как ею пользоваться. Ну а на этом этот урок завершим и приступим к следующему.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов