Подключение css к html

как подключить css к html

В этой статье, я вам расскажу о том, как подключить css к html странице. Если вы не знаете как создать html страницу то для начало прочитайте эту статью Как создать HTML страницу после этого возвращайтесь к этой статьи. Итак начнем с того что существуют 3 разных способов для решения этой задачи.

Способы подключения CSS к HTML странице

1 способ: Стили в отдельном файле.

Заключается в том что, все стили пишутся в отдельный файл, который имеет расширение .css. Этот файл подключается к html странице через тег <link>, он служит для подключения внешних фалов. Строка с тегом <link> всегда пишется в области тега head. Сейчас я вам покажу, как это делается на примере.

Допустим, у нас есть html страница с таким кодом:

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>Файл html</title>
    </head>
    <body>
        <h1 align="center" > Красный заголовок </h1>
        <div> Этому блоку задаём желтую рамку. </div>
    </body>
</html>

Мы хотим сделать заголовок красным и задать желтую рамку для блока div. Для этого делаем следующие шаги:

  1. Открываем редактор кода notepad++
  2. Создаем новый файл и сохраняем его как style.css . Для этого идем в меню файл и выбираем пункт новый, или нажимаем горячие клавиши Ctrl+N, у нас создался новый файл. Далее, опять идем в меню файл и выбираем пункт сохранить как…или нажимаем горячие клавиши Ctrl+Alt+S. Откроется окно для сохранения файла, выбираем папку, где находится наша html страница, задаем имя файла style.css и нажимаем сохранить. Файл таблиц стилей создан.
  3. Пишем стили для элементов. Начнем с заголовка. Мы хотим, чтобы он был красного цвета, для этого в файле со стилями, пишем следующие строки:
h1{
    color: #FF0011;
}

Через эти строки указываем браузеру, что бы все заголовки первого уровня которые есть на странице, отобразить красным цветом. Цвет можно задать тремя способами:

В шестнадцатеричном коде, английское название цвета или в формате RGB.

  • #FF0011 – шестнадцатеричный код красного цвета.
  • red – Английское название красного цвета.
  • rgb(255,0,17) - красный цвет в формате RGB ( Red, Green, Blue )

Для того чтобы задать рамку для блока div, пишем следующие строки:

div{
    border-width: 2px; /* Задаем толщину рамки */
    border-style: solid; /* Задаем стиль рамки */
    border-color: #FFDD00; /* Задаем цвет рамки */
}

В CSS, комментарий пишутся между символами слеш и звездочка. Пример: /* это комментарий */

В итоге, файл со стилями состоит из следующих строк:

h1{
    color: #FF0011;
}

div{
    border-width: 2px; /* Задаем толщину рамки */
    border-style: solid; /* Задаем стиль рамки */
    border-color: #FFDD00; /* Задаем цвет рамки */
}

Обязательно сохраняем изменения.

  1. Соединяем файл style.css с html страницей.

Для этого в html странице ( index.html ), между тегами <head> и </head> пишем следующую строку:

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

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

Cохраняем изменения, открываем html файл в браузере и смотрим что получилось:

Полученный результат

Основной плюс у этого способа состоится в том, что файл со стилями можно подключить ко многим html страницам, в этот случаи стили применяются сразу ко всем страницам. Например, у нас есть сайт, который состоит из 10 html страниц. В каждой странице есть заголовки первого уровня, и мы хотим, что бы все заголовки были синего цвета. Для этого в файле со стилями задаем синий цвет, для всех заголовков первого уровня. Потом этот файл, через тег <link>, подключаем ко всем страницам. В случае если мы хотим поменять цвет заголовков на зеленый, то мы открываем файл со стилями и у тега h1, меняем цвет и цвет изменится автоматически ко всем заголовкам первого уровня. Через этот способ, можно легко управлять стилями, поэтому рекомендуется его и использовать.

2 Способ: Внутренние таблицы стилей

Во втором способе стили пишутся между тегами <style></style> в области тега head. Это выглядит следующим образом:

<!DOCTYPE html >
<html>
    <head>
        <title>Файл html</title>
        <meta charset="utf-8" />
        <style type ="text/css">
            p{
                color: #550030;
            }

            a{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Ссылка на источник: <a href="http://www.lipsum.com/"> Lipsum </a> </p>
    </body>
</html>

Через стили мы задали фиолетовый цвет для текста и убрали подчеркивание у ссылки. Получилась такая картинка:

убрать подчеркивание ссылки

В этом способе стили применяются только к той html странице, где они заданы. Они не влияют на остальные страницы.

3 Способ: встроенные стили

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

<!DOCTYPE html >
<html>
    <head>
        <title>Файл html</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <p style="color: #FF0800">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>

        <p>
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </body>
</html>

Сохраняем изменения и смотрим на результат:

внутренные стили css

Не рекомендуется применить этот способ для подключения стилей к html странице, потому что если у вас будут много страниц и соответственно на каждой странице будут параграфы, ссылки ит. д. то вам будет очень трудно управлять стилями. В случае если вы захотите поменять дизайн сайта, то вам придется потратить много времени чтобы сделать это. Вам придется в каждой странице, изменить стиль для каждого элемента. Поэтому постарайтесь избежать этого метода или используйте его только в самых крайних случаях.

Вот и все о чем я хотел вам рассказать в этой статье. Теперь вы знаете, какими способами можно подключить стили к html странице и какой из этих способов лучше использовать.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%