Как и в языке html, так и в CSS есть свои особенности, правила и структура. В этом уроке я расскажу вам об основных понятиях языка CSS, о его структуре, устройстве и мы сделаем с вами первую CSS таблицу стилей и узнаете, как подключить таблицу стилей к html документу.
Оформляем CSS таблицу
Язык CSS достаточно простой и главное понять принцип его работы и основные правила, тогда разобраться во всем вам, не составит ни какого труда. В данном языке присутствуют свои правила, которые достаточно просты, и при этом очень эффективны и легко применимы.
Как я уже говорил, в первом уроке язык CSS не является самостоятельным и без html страницы он бесполезен, поэтому для начала нам необходимо разобраться, как связать нашу страницу с CSS таблицей.
Как подключить таблицу стилей CSS
Здесь существуют три варианта, мы можем оформлять css таблицу непосредственно в документе или же мы будем выносить её в отдельный файл, или прописывать стили непосредственно в тэгах. Давайте рассмотри все варианты.
Первый вариант CSS таблица в самом документе, я это сделаю на примере самой простой страницы:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css"”>
Здесь мы будем оформлять CSS таблицу
</style>
</head>
<body>
<p>Проба</p>
</body>
</html>
Как видите, все реализуется просто по средствам добавления простого тега <style>, который вставляется между тегами <head>, так же к нему приписывается атрибут type указывающий на тип содержания тега. А внутри самого тега уже и будет сам CSS код.
Второй способ подключения таблицы стилей на CSS, это создание отдельного файла с разрешением .css назвать вы его можете, как хотите, но обычно делают название типа style.css и меняем код следующим образом:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Проба</p>
</body>
</html>
Как видите буквально одной строчкой с помощью тега <link>, здесь так же прописываем атрибуты, rel – говорит браузеру что это таблица стилей, type как и в предыдущем случае и href здесь мы прописываем путь к файлу с таблицей, в данной ситуации она находится в той же директории, что и html файл к которому мы её подключаем, если же она будет скажем в папке root, то запись будет root/style.css
И последний третий способ подключения это стили непосредственно в тегах прописывается как атрибут, следующим образом:
<p style=””>Проба</p>
Как вы видите, мы просто добавили атрибут style, в который в последствии, мы и будем прописывать CSS код.
Из всех вышеперечисленных вариантов подключения таблицы стилей самым оптимальным является второй, и на самом деле чаще всего и используется на практике, так же можно одновременно использовать с третьим, но об этом позднее не буду вам забивать голову.
Теперь давайте перейдем непосредственно к оформлению CSS таблицы. В CSS все основано на селекторах, что это такое? Давайте посмотрим на рисунке его структуру:
С виду, кому-то может показаться достаточно сложно, но все достаточно просто и сейчас вы сами на практике в этом убедитесь. Селекторы бывают трех видов и первый с которым мы познакомимся в этом уроке это селектор тэгов давайте посмотрим наглядно как это выглядит:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css"”>
p {
color: #ff0000;
}
</style>
</head>
Теперь давайте разберемся, что у нас изменится, а изменится у нас только цвет текста в теге абзаца <p>, и станет он красным, и что самое интересное если у нас в документе будут еще абзацы с этим тегом, то текст во всех абзацах станет красным. Такова особенность селектора тэгов, а добились мы этого простым правилом, которое вам уже пора запоминать, а именно color: #ff0000; цвет вы естественно можете указать любой вам понравившийся я лично, беру код понравившегося цвета в фотошопе:
Именно таким образом оформление CSS таблицы и происходит, вы наполняете её различными селекторами, в которых прописываете определенные правила. В этом уроке я думаю вы получили общее представление о том как подключить таблицу стилей, как оформлять таблицу стилей, узнали первый вид селекторов и одно правило изменения цвета текста. В следующих уроках мы углубимся и будем поэтапно расширять вашу базу знаний.
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
