Первые шаги в верстке #3

HTML Урок #3 стили

28 июн

Камкин Алексей

HTML

Начало

Продолжаем знакомство с HTML и созданием сайта. Сегодня мы узнаем что такое стили CSS как они подключаются и для чего они нужны.

стили CSS

- это средство оформления WEB – страниц, написанных с помощью языков разметки HTML, XHTML и XML. Их можно указать, как и в самом документе HTML , так и подключить в отдельном файле.

Первый способ

CSS – внутри HTML если стили не указаны в отдельном файле, то указывать их нужно в самом документе внутри тега <style> </style>
Пример подключения css-стилей внутри документа:

Пример

<style>
p
{color:#000000;}
</style>

Подключенные таким способом стилей будут действуют по всему документу, но что делать, если нужно указать их только для одного блока? Описать стили внутри определённого блока (тега) можно с помощью атрибута данного тега – style выглядит это так

<p style="color: #000000;">Текст черного цвета</p>

Стили, описанные таким способом, не влияют на другие теги документа.

Второй способ

позволяет подключить стили из другого файла или подключение внешних стилей оформления.

Если у Вас стили в отдельном файле, то их нужно подключить специальной строкой. Для того, чтобы указать стили для всего HTML – документа, мы воспользуемся тегом , который должен быть расположен внутри тега <head>

<link rel="stylesheet" href="css/style.css" type="text/css">

Путь к файлу, содержащему стили, указывается в этой части тега: href="style.css" в кавычках. В примере подключен файл стилей который лежит в одной папке с HTML документом. Если наш файл будет лежать в другой папке путь будет таким href="css/style.css" ,где css это наша папка.

Создание классов

Для того что бы не указывать все стили в нутри тега мы будем использовать css и прописывать все стили там ,для этого пропишем нашему тегу класс и имя класса.

<p class="headline">Заголовок<p>

headline - это наше имя ,вместо него мы можем написать что угодно ,но лучше всего что бы оно отражала суть того что находиться внутри тега имя класса не может начинаться с точки.

В HTML странице мы прописываем <p class="headline">Заголовок<p> ,а дальше переходим в CSS и задаем все стили уже там. Перед назаванием нашего класса ставим точку ,если мы прописываем стили тегу <p> то перед ним точку савить не нужно ,в таком случае эти стили будут применятся ко всем тегом <p> на вашем сайте, так же стили от <p> будут применяться к headline

Пример

p
{color:#dcdcdc;font-size: 21px;}
.headline
{color:#000000;}

В таком случае наш класс headline будет иметь color:#000000 и font-size: 21px
font-size - определяет размер нашего шрифта.

HTML не является языком программирования, он предназначен только для разметки текстовых документов.

©  2020 PG-studio
Все права защищены