Содержание страницы
домикГлавная / Элементы html и css / Как подключить css
подключить cssТеперь, как изучили основы html, поговорим о стилевой разметке css, которая придаёт определённый внешний вид страницам html. Без понимания в этой направление, вам будет сложно сделать поправки по оформлению внешнего вида, и уж тем более, что-то добавить своё в дизайн сайта.

Нет необходимости изучать полностью весь css ( это будет сложновато ), а вот на базовом уровне знать как пользоваться разметкой, нужно каждому вебмастеру.
Раньше, чтобы придать каждому элементу своё оформление и вид, необходимо было прописывать стилевые значения в исходном html коде, от чего он становился громадным и трудно читаемым для вебмастера.
К примеру это было так:
htmlCOPY
<div style="border: 1 px solid #000;"> <p style="margin: 10px 14px; color: red;">Некая текстовая информация в параграфе.</p> </div>
С помощью атрибута style и задавалось определённое визуальное оформление объекта, где в данном примере я придал блоку DIV рамку чёрного цвета, а находящемуся внутри его параграфу задал отступы CSS и окрасил в красный цвет.

С появлением каскадных таблиц CSS такая необходимость исчезла и стилевое оформление для страниц можно подключить 3-мя способами, не загромождая при этом html код.

Способы подключения css к html

Первый вариант "вложение" мы рассмотрели выше, когда непосредственно в исходном коде html для каждого тега прописывается своё визуальное оформление.
И хочу обратить внимание на тот факт, что этот вариант хоть и устарел, но все-равно в некоторых случаях применяется. К примеру, это делается тогда, когда вы хотите придать вид элементу, который присутствует только на одной странице вашего сайта, то есть нет необходимости прописывать это в основном файле css.
Второй вариант подключения css к html осуществляется следующим образом.
В шапке документа html между тегами head прописывается парный тег style ( это уже не атрибут, не путайте ), и между указанными тегами прописываются все правила для внешнего вида ваших страниц.
htmlCOPY
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Заголовок</title> <meta name="description" content="Описание" /> <meta name="keywords" content="Ключевые слова" /> <style> body { margin: 0 auto; padding: 0; color: #000; } </style> </head> <body> <!-- Тело документа --> <body> </html>
В третьем варианте для подключения css к html мы связываем наш html документ с подготовленным файлом для визуального оформления.

Здесь нам необходимо:

  • 1. создать с любым названием текстовый файл и с обязательным расширением .css;
  • 2. в созданном стилевом файле прописать правила, отвечающие за дизайн вашего сайта;
  • 3. подключить файл .css к html документу.
Пояснения.
Допустим вы создали файл style.css ( повторяю, название придумываете сами ) и в нём необходимо сделать записи следующим образом:
style.cssCOPY
body { margin: 0 auto; padding: 0; color: #000; } header { margin: 0; position: relative; }
И теперь остаётся подключить к документу html созданный css файл, и делается это так:
htmlCOPY
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Заголовок</title> <meta name="description" content="Описание" /> <meta name="keywords" content="Ключевые слова" /> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- Тело документа --> <body> </html>
Особое внимание:
в данном примере файл style.css лежит в одной папке ( директории ) вместе с html документом.
Если у вас стилевой файл лежит в другой папке отличной, где находится html документ, то нужно прописывать уже другой путь до этого файла.

К примеру вы создали для удобства папку css и в неё положили стилевой файл style.css, то путь необходимо указывать уже такой:
htmlCOPY
<link rel="stylesheet" href="css/style.css" />
В css существуют простые правила, которые нужно соблюдать, чтобы стилевое оформление вступило в силу, и синтаксис его очень простой.

Правильное прописывание правил в css:

  • 1. указываем элемент, для которого будет осуществляться стилевое оформление;
  • 2. после открываем 2 фигурные скобки;
  • 3. в фигурных скобках прописываем свойство ( параметр по-другому );
  • 4. указываем значения для этого свойства.
правило css
Примите во внимание!
После свойства обязательно ставим двоеточие ":", а после значения прописываем точку с запятой ";", - это обязательно.

Обязательно почитайте статью приоритеты в css, чтобы понимать, почему иногда прописанные вами правила для css игнорируются и не выполняются.
Дата публикации: 19.05.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!