Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:36
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

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

Урок №2: подключение CSS к HTML

Подключение CSS к HTML

Подключить таблицы стилей можно двумя способами. На предыдущем уроке мы рассмотрели типы таблицей стилей, а сейчас мы научимся создавать вложенную таблицу стилей и внешнюю таблицу стилей, а также подключать их к HTML-коду.


Вложенная таблица стилей

Такая таблица встраивается в HTML-код в контейнере Head с помощью парного тега <style> и параметром type. За тем необходимо задавать значения тегов. Допустим нам необходимо задать красный цвет всех заголовков <h1>, и отформатировать весь текст в абзацах <p> страницы в зеленый цвет и установить размер шрифта 16 пикселей в них. Пишем HTML-код:


<html>
  <head>
    <title>Подключение CSS к HTML</title>
    <style type="text/css">
       h1{ color:red }
        p{ color:green; font-size:16px}     
    </style>
  </head>
  <body>
    <h1>Заголовки первого уровня будут красными</h1>
    <p>Весь текст абзацев  будет зеленого цвета с размером в 16 пикселей</p>   
  </body>
</html>

Вставив этот код в блокнот и сохранив код с расширением html, вы увидите что все получилось: заголовок красного цвета, текст в абзацах зеленого цвета с размером в 16 пикселей. Также стоит знать, что текстовые таблицы стилей по приоритетам стоят выше, чем вложенные и внешние таблицы стилей. Именно поэтому если в тег <p> данного примера вставить такое значение: <p style="color:blue"> Весь текст абзацев будет зеленого цвета с размером в 16 пикселей</p>, то независимо от вложенного в контейнер head стиля, текст данного абзаца будет синим, а остальные по прежнему останутся зелеными.


Внешняя таблица стилей

Внешняя таблица стилей - это текстовый файл, в котором содержаться определенные стили. Такой файл имеет расширение css ( например mystyles.css). Внешние таблицы стилей, как правило, хранятся в той же папке, что и веб-страницы сайта, однако можно создать и отдельную папку, если используются несколько внешних таблиц стилей. В контейнер Head каждой страницы, к которой необходимо подключить внешнюю таблицу стилей, необходимо включить тег <link>, который подключает внешние файлы, в нашем случае он будет выглядеть так:

<link rel="StyleSheet" href="mystyles.css" type="text/css">

Где href="путь к вашему файлу таблицы стилей.css". Внешние таблицы стилей являются самыми удобными, ведь управляя одним файлом, можно изменить внешний вид всех страниц, к которым подключена такая таблица.

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

Следующий урок: Селекторы и их свойства


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru