Как подключить html css: Подключение стилей CSS к HTML документу. Как подключить CSS файл
Содержание
Просто о сложном или изучаем CSS3. Часть 1. Понятие CSS. Способы подключения стилей CSS к HTML документу
Здравствуйте, уважаемые читатели сайта remontcompa! Меня зовут Роман Нахват и я представляю вашему вниманию цикл статей по языку стилей CSS3. Аббревиатура CSS произошла от английского Cascading Style Sheets, что в переводе означает каскадные таблицы стилей. Стилем или CSS называется некоторый набор параметров форматирования, применяемый к элементам HTML документа, чтобы изменить их внешний вид. Сам по себе HTML является лишь стандартным языком HTML документов и используется для структурирования содержимого HTML страницы, поэтому язык HTML является лишь первым этапом в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS, чем мы с вами и займёмся. Добавить стили на веб-страницу можно несколькими способами. Каждый способ отличается своими возможностями и назначением. В данной статье мы рассмотрим три способа добавления стилей в HTML документ.
Просто о сложном или изучаем CSS3. Часть 1. Понятие CSS. Способы подключения стилей CSS к HTML документу
Создадим стандартную структуру HTML документа, как показано ниже.
Между тегами <title> и </title> пропишем заголовок HTML документа, например «Способы подключения стилей CSS»
Используя теги <h2> и </h2> добавим на веб-страницу заголовок с текстом «Что представляет из себя CSS»
Ниже заголовка, используя теги <p> и </p> создадим небольшой абзац с текстом, как показано ниже
Сохраним данный документ на флеш-накопителе в папке CSS под именем index с расширением .html
Указываем имя index, тип файла выбираем html
Получаем следующее.
Зайдем в папку CSS, в которой находится наш сохраненный html документ с именем index. Откроем его в веб-браузере
Как видим, в окне веб-браузера отобразилось содержимое созданной нами веб-страницы, а именно заголовок с текстом «Что представляет из себя CSS» и абзац, начинающийся со слов «CSS — это язык стилей, который определяет….»
При помощи атрибута align (присвоив ему значение center) выполним выравнивание заголовка с текстом «Что представляет из себя CSS» по центру веб-страницы
Получаем следующее.
Изменим цвет текста абзаца со стандартного чёрного на другой. Воспользуемся тегом <font>
Существует множество html цветов, например для текста абзаца на созданной нами странице выберем цвет DeepSkyBlue
Присвоим атрибуту color тега <font> значение DeepSkyBlue
Перезагрузим нашу веб-страницу и видим, что текст абзаца поменял свой цвет с чёрного на заданный нами
Таким же образом изменим цвет текста заголовка, например на красный цвет.
Получаем следующее
Вернём текст заголовка и абзаца на нашей веб-странице в первоначальное состояние, а именно удалим атрибут align и теги <font>…</font>
После удаления тегов <font>…</font> и атрибута align получаем первоначальный вид веб-страницы
Если выше мы изменяли цвет и расположение текста заголовка и абзаца на веб-странице при помощи html тегов, то теперь проделаем всё то же самое, но используя язык CSS. Как уже было сказано выше, в данной статье мы рассмотрим три способа добавления стилей на веб-страницу, а именно:
Добавление на веб-страницу внутренних стилей;
Добавление на веб-страницу глобальных стилей;
Добавление на веб-страницу связанных стилей;
Рассмотрим добавление внутреннего стиля на веб-страницу
Внутренний стиль является расширением для одиночного тега, который используется на веб-странице. Для определения стиля используется атрибут style, а его значением является некоторый набор стилевых правил.
Изменим цвет текста заголовка на веб-странице на красный, а также выровняем его по центру, используя внутренний стиль. К тегу добавим атрибут style, далее пропишем стилевые свойства, а именно: text-allign: center, color: red
Получаем следующее.
В итоге, открыв файл index.html в веб-браузере видим, что текст заголовка на веб-странице имеет красный цвет и расположен по центру.
Таким же образом, используя атрибут style, изменим цвет текста абзаца со стандартного чёрного на цвет deepskyblue
Перезагружаем страницу index.html и видим изменение цвета текста абзаца.
Изменим цвет текста заголовка на веб-странице на красный, а также выровняем его по центру, на этот раз используя глобальный стиль.
Если применяется глобальный стиль, то свойства CSS располагаются между тегами <style> и </style>, а они (теги <style> и </style>) в свою очередь располагаются между тегами <head> и </head>.
Между тегами <style> и </style> в фигурных скобках пропишем стилевые свойства для заголовка веб-страницы (тег <h2>), и для абзаца ( тег <p>):
h2 {text-align: center; color: red} — размещаем текст заголовка по центру веб-страницы и изменяем его цвет на красный
p {color: deepskyblue} — изменяем цвет абзаца на deepskyblue
В итоге получаем тот же результат, что и при использовании внутренних стилей.
Рассмотрим последний способ добавления стилей на веб-страницу, а именно использование связанных стилей. Суть связанных стилей заключается в том, что они определяются в отдельном от html документа файле, и имеют расширение .css
Создадим пока ещё пустой документ и сохраним его на флеш накопителе в папке CSS под именем style и расширением .css
Сохранить.
Созданный файл стилей style с расширением .css
Файл style.css оставим пока пустым.
Для связывания html документа (в нашем случае это index.html) с файлом стилей style.css воспользуемся тегом <link>. Тег <link> должен
располагаться внутри тегов <head>…</head>
Пропишем между тегами <head> и </head> следующую строку: <link rel=»stylesheet» type=»text/css» href=»style.css»/>
где: rel=»stylesheet» — атрибут тега <link>, указывающий веб-браузеру на то, что будут подключаться стили; атрибут href=»style.css» указывает путь к файлу стилей style.css
При создании файлов стилей нужно придерживаться определённых правил, приведенных ниже (этих же правил нужно придерживаться и при добавлении глобальных стилей)
Одним из главных элементов файла стилей является селектор. Селектор определяет, к какому элементу в html документе применять те или иные стилевые параметры. В качестве селектора выступают теги, классы и идентификаторы. После указания селектора идут фигурные скобки, в которых прописывается стилевое свойство, далее указывается его значение
Например, ниже на схеме в качестве селектора указан html тег h2, в качестве стилевого свойства указан color:, далее записывается значение стилевого свойства
Так как мы хотим разместить текст заголовка (тег <h2>) по центру веб-страницы, и задать тексту красный цвет, а также текст абзаца (тег <p>) отобразить в цвете deepskyblue, в файле стилей style.css прописываем строки: h2 {text-align: center; color: red} и p {color: deepskyblue}
где: h2 {text-align: center; color: red} — выравниваем текст заголовка («Что представляет из себя CSS») по центру, и задаем тексту красный цвет
p {color: deepskyblue} — задаем тексту абзаца («CSS — это язык стилей, который определяет…») цвет deepskyblue
Основы CSS — подключение style.css. Теги header, h2, идентификатор id и класс class
Стили в верстке сайта подключаются отдельным файлом.
В этой же папке рядом с index.html создайте файл style.css. Создается файл так же, как index.html — щелкните правой кнопкой мыши, создайте текстовый файл и полностью переименуйте его в style.css.
Теперь откройте index.html в Sublime Text, удалите из него весь код и вставьте следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>Мой первый сайт</h2>
</header>
</body>
</html>Файл style.css тоже откройте в Sublime Text, и вставьте следующий код:
body{
background-color: gray;
}
#header{
background-color: #fff;
}
.h2{
font-size: 30px;
color: #000;
text-align: center;
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
}Сохраните оба файла (Ctrl+S) и откройте index.html в браузере. Вы должны увидеть следующее:
Если что-то не получилось, сперва убедитесь, что Вы точно сохранили оба файла. А затем обновите страницу браузера сочетанием клавиш Ctrl+F5.
В будущем всегда обновляйте сайт в браузере сочетанием клавиш Ctrl+F5. Зачем это нужно, объясню позже.
Изменения в файле index.html
Разберемся, что изменилось в index.html. В <head> появилась строка <link rel=»stylesheet» href=»style.css»>. Таким образом подключаются файлы стилей, здесь мы подключили файл style.css.
В теге <body> изменилось все. Появился новый тег <header>, он говорит о том, что здесь будет содержаться вся верхняя часть сайта, так называемая «шапка» сайта. А в теге <header> есть тег <h2>, в который пишется главный заголовок отображаемый на странице. h2 — это очень важный тег для поисковых систем (таких как Яндекс и Google).
h2 должен быть только один на всей странице сайта. Также, есть h3, h4, h5, h5, h6, их может быть сколько угодно на странице, но они должны отображать логику страницы: h3 — это второй заголовок, h4 — третий заголовок и т.д.
У тега header есть id — это идентификатор тега. У тега h2 есть class. Для чего нужны id и class Вы увидите сейчас в style.css. Здесь только сразу скажу, что конкретный id должен быть только один на странице. То есть указывать уже нигде нельзя, можно будет указать, например,.
Значения атрибутов class могут быть одинаковыми у сколь угодно элементов (тегов).
Обратите внимание на полностью бесплатный курс HTML, на котором Вы быстро сможете стать экспертом верстки.
Разбор файла style.css
body обращается к <body> в index.html, и задает ему серый задний фон (background-color: gray;). Здесь background-color называется CSS-свойством, а gray — это значение CSS-свойства.
Аналогично #header обращается к, а .h2 обращается к class=»h2″. То есть через # обращаемся к id, а через точку обращаемся к class.
Здесь body, #header и .h2 называются CSS-селекторами.
Вообще, в id и class можно задавать любые произвольные значения, хоть. Но желательно, чтобы их значения отображали целевое назначение html-элемента (тега).
Свойства CSS пишутся на английском: font-size — размер шрифта, color — цвет, text-align — выровнять текст и т.д.
Описание CSS-свойств в style.css
background-color — цвет заднего фона. Весь элемент будет окрашен в указанный цвет. Некоторые значения цвета можно писать прямо словами (gray, white, black, red и т.д.), но обычно для этого используют HEX-формат. Если не знаете, что это то пока не задумывайтесь об этом.
font-size — размер шрифта. Здесь задан в пикселях (px) — основной единице измерения для числовых значений в CSS
color — цвет шрифта
text-align — расположение текста по горизонтале
margin — внешние отступы элемента. Каждые элемент имеет свои границы, как деталь страницы сайта. И элементу можно задать отступы от соседних элементов. Пока просто запомните это.
padding-top — внутренний отступ от верха элемента. Если внутри элемента находится другой элемент, то можно указать, что внутренний находится на некотором расстоянии от границы внешнего. Тоже пока просто запомните.
Это был достаточно объемный урок, в котором Вы узнали много новой полезной информации. Вы все ближе к тому, чтобы профессионально верстать качественные сайты!
HTML и CSS — тема легкая и интересная, а также достаточно широкая, поэтому поехали дальше!
Использование import для подключения нескольких файлов в CSS
Как уже упоминалась в предыдущих статьях, к одному файлу HTML можно подключать несколько файлов CSS с прописанием стилей. Данная процедура относится к понятию таблицы внешних стилей, а тег, с помощью которого формировалась система взаимосвязи HTML и CSS — link. Для примера рассмотрим следующую запись кода:
<link rel="stylesheet" type="text/css" href="css/stylebasis.css" /> <!--основное базисное оформление --> <link rel="stylesheet" type="text/css" href="css/stylegeneral.css" /> <!--стили внутренних страниц сайта--> <link rel="stylesheet" type="text/css" href="css/stylyid.css" /> <!--специальные стили-->
Данное разделение оформления сайта на несколько файлов приносит выгоду только в частном случае. Это действенно, если для практически идентичных элементов сайта нужно разное оформление.
Самой негативной чертой использования данного подхода является то, что растет количество обращений к серверу из-за наличия нескольких файлов CSS, что приводит к повышению трафика и роста времени обработки информации.
Однако, если все же пришлось использовать данную систему присвоения стилей, то стоит поговорить об операторе @import и его возможностях и функционале.
Объединение нескольких файлов CSS с import
Для опытного веб мастера не секрет, что в CSS-файлах нельзя использовать кодировку HTML. Следовательно пользоваться тегом <link> следует только в рамках файлов с расширением html внутри тега .
В то время как оператор @import осуществляет взаимосвязь файлов стиля и основного контента в файле с расширением css. Указанное содержимое этой директивы связывается с тем css-файлом, в котором сдержится этот самый @import.
Синтаксис
@import url("<адрес файла стилей>") [разновидность устройства];Разберем данную запись. Первым в import указан url (относительный, или абсолютный) требуемого файла, который более удобен для веб-мастера.
Далее следует разновидность устройства. Ее указание не является принципиально обязательным, а соответствует она атрибуту media в случае использования тегов link.
Далее следует более конкретный пример:
@import url(css/ stylebasis.css); @import url(css/ stylegeneral.css); @import url(css/ stylyid.css); /* после данной записи идут операторы оформления */
Некоторые полезные замечания
- Директива @import должна располагаться в самом начале css-файла. Причем принципиально, чтобы команды оформления были строго после директивы. Иначе робот не сможет считать данную команду.
- Также стоит отметить тот факт, что невозможно использовать директиву @import для конструкции встроенных стилей.
Итог
Структура создания CSS по блочной методике может осуществляться двумя путями:
- связь файлов контента и файлов оформления посредством тега
<link> - объединение таблиц внешних стилей в рамках одного файла с расширением css.
Блочную методику целесообразно использовать в том случае, когда с кодом работают несколько специалистов. Объединение стилей в один документ способствует сокращению времени обработки информации роботом.
Поэтому использовать директиву @import следует с умом и пониманием дела.
Оценок: 5 (средняя 4.8 из 5)
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
сделай это красивым · HonKit
Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.
Что такое CSS?
Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉
Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.
Давай использовать Bootstrap!
Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/
Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.
Установка Bootstrap
Для установки Bootstrap тебе нужно добавить следующие строки в <head> твоего .html файла (blog/templates/blog/post_list.html):
blog/templates/blog/post_list.html
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!
Выглядит уже лучше!
Статические файлы в Django
Теперь мы ближе познакомимся с теми таинственными статическими файлами. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей.
Куда поместить статические файлы в Django
Django уже знает, где искать статические файлы для встроенного приложения «admin». Теперь нам нужно добавить статические файлы для своего приложения blog.
Мы сделаем это, создав папку static внутри каталога с нашим приложением:
djangogirls
├── blog
│ ├── migrations
│ ├── static
│ └── templates
└── mysite
Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.
Твой первый CSS файл!
Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static. Затем создай новый файл под названием blog.css внутри папки css. Готово?
djangogirls
└─── blog
└─── static
└─── css
└─── blog.css
Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.
Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения.
Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка?
Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с # и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться предопределенными цветами, такими как red и green.
В файле blog/static/css/blog.css тебе нужно добавить следующий код:
blog/static/css/blog.css
h2 a {
color: #FCA205;
}
h2 a — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h2 (например, когда у нас в коде что-то вроде: <h2><a href="">link</a></h2>). В этом случае мы говорим о том, что нужно изменить цвет элемента на #FCA205, то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет!
В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a, h2, body), атрибутом class или атрибутом id. Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a, класса external_link или идентификатора link_to_wiki_page:
<a href="https://en.wikipedia.org/wiki/Django">
Почитай про CSS селекторы в CSS Selectors на w3schools.
Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:
blog/templates/blog/post_list.html
{% load static %}
Мы просто загружаем здесь статические файлы 🙂
Далее между <head> и </head>, после ссылок на файлы Bootstrap CSS, добавь такую строку:
blog/templates/blog/post_list.html
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap.
Мы только что сказали нашему шаблону, где находится наш CSS файл.
Твой файл должен теперь выглядеть следующим образом:
blog/templates/blog/post_list.html
{% load static %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div>
<h2><a href="/">Django Girls Blog</a></h2>
</div>
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
Ок, сохрани файл и обнови страницу!
Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!
blog/static/css/blog.css
body {
padding-left: 15px;
}
Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!
Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега <head> в файле blog/templates/blog/post_list.html:
blog/templates/blog/post_list.html
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" rel="stylesheet" type="text/css">
Как и ранее, проверь порядок и вставь эту строку перед ссылкой на blog/static/css/blog.css. Эта строка импортирует шрифт под названием Lobster из шрифтов Google (https://www.google.com/fonts).
Теперь добавь строку font-family: 'Lobster'; в CSS файле blog/static/css/blog.css внутри блока определения стиля h2 a (код помещается между скобками { и }) и обнови страницу:
blog/static/css/blog.css
h2 a {
color: #FCA205;
font-family: 'Lobster';
}
Отлично!
Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.
Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div, содержащий наш заголовок, как это сделано здесь:
blog/templates/blog/post_list.html
<div>
<h2><a href="/">Django Girls Blog</a></h2>
</div>
А теперь добавь класс post в твой div, содержащий сообщение в блоге:
blog/templates/blog/post_list.html
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа ., относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css:
blog/static/css/blog.css
.page-header {
background-color: #ff9400;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h2, .page-header h2 a, .page-header h2 a:visited, .page-header h2 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h2, h3, h4, h5 {
font-family: 'Lobster', cursive;
}
.date {
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h2 a, .post h2 a:visited {
color: #000000;
}
Далее переделаем код HTML, отображающий посты, используя классы. Замени:
blog/templates/blog/post_list.html
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
в blog/templates/blog/post_list.html этим кодом:
blog/templates/blog/post_list.html
<div>
<div>
<div>
{% for post in posts %}
<div>
<div>
<p>Опубликовано: {{ post.published_date }}</p>
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
Сохрани эти файлы и обнови свой веб-сайт.
Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.
Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!
В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.
Готова к следующей главе?! 🙂
Подключение файла стилей CSS и знакомство с селекторами.
В этом уроке мы подключим нашу первую таблицу стилей — это файл style.css, который и будет управлять стилями нашей индексной HTML страницей. Для начала мы создадим для стилей отдельную папку, под названием CSS, в которой будет лежать сам файл style.css
Как создать такой файл? Создаем пустой файл, можно в любом текстовом редакторе, но лучше в специальном редакторе. Как выбрать редактор смотрите здесь.
В папку CSS сохраняем файл c именем style и расширением .css.
Файл создали, теперь нам остается его подключить к используемому HTML документу. Для этого в области <head> </head> используем специальный тег, который называется <link>. Этот тег является одинарным и у него есть несколько атрибутов, которые требуется указать.
Первый атрибут – это, уже нам знакомый, href=»», который укажет путь к нашей таблице стилей. В нашем случае это css/style.css.
Второй атрибут — это тип подключаемого документа, и в нашем случае это type=»text/css», и последний атрибут — это rel=»stylesheet», указывающий взаимосвязь между html документом и таблицей стилей, т.е. говорит браузеру, что подключается таблица стилей, которая находится по адресу css/style.css.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
</html>Вот так подключается любая таблица стилей. И сколько бы таких таблиц на сайте не было, при подключении меняется только имя файла в атрибуте href=»» css/имя таблицы стилей.css .
Теперь браузер будет не только загружать html страницу, но и когда дойдет до тега <link> сразу же подгрузит и файл со стилями CSS, тем самым сформировав связь между ними.
Имейте ввиду, что в любом html документе можно подключить сколько угодно таблицей стилей и браузер дойдя до них их всех подгрузит и применит. И точно также наоборот ОДНУ таблицу стилей мы можем применить к любому количеству html страниц.
Итак, с подключением таблиц стилей мы разобрались, а теперь рассмотрим, что же собой представляет этот стиль. А их в таком файле может быть огромное количество. Разберем такую схему, которая выглядит следующим образом:
Каждый стиль состоит из двух элементов – это «Селектор» и пары «Свойство:Значение». «Селектор», что в переводе с английского означает определенный, выбранный, то есть в «Селектор» мы выбираем те html теги с которыми мы хотим работать, то есть те, которым нужно задать определенные стиль. Другими словами мы в «Селекторе» указываем элемент, который мы выбираем из html страницы. Это могут быть абзацы, заголовки, элементы списка, изображения и все другие элементы страницы.
В «Свойство:Значение» мы указываем правило (условие) как выбранному элементу «Селектор» отобразится на странице, например: красный цвет.
И тоже самое более коротко: Сначала выбираем элемент, с которым хотим работать и для него указываем правило (условие), которое к этому элементу будет применяться. Это и есть вся суть оформления всей технологии CSS которую в этом разделе мы и будем рассматривать.
Есть несколько вариантов выбора элементов «Селекторов» с html страницы и существует множество правил«Свойство:Значение», которые можно использовать.
И, давайте разберем самые часто используемые три вида «Селекторов» которые используются при создании стилей.
1. Первый «Селектор» это селектор тегов, который позволяет отобрать с html страницы все теги одного плана. Например, задать всем абзацем зеленый цвет. Тогда мы указывает в качестве селектора название тега (для параграфа) P и в фигурных скобках указываем для него правило.
CSS
p{
color: #00ff00;
}
То есть для всех тегов «Селектор» P указываем правило, что цвет у всех тегов должен быть color:#00ff00; то есть зеленый. Это шестнадцатеричная система цвета, которая используется в CSS.
В этом случае мы задали стиль для всех элементов на странице, но бывают случаи когда нужно задать стиль только для одного элемента на странице. Для этого используется следующий вид селектора «id-селектор».
2. Второй вид — это «id-селектор». Как это используется: для начала, для интересующего нас элемента в html странице задаем идентификатор id=«header» и уже для этого идентификатора задается определенное условие.
HTML
CSS
Заметьте, что в стилях перед именем идентификатора ставится решётка «#», а затем имя самого идентификатора.
#header{
color: #ff0000;
}
Это второй вид селектора, он достаточно распространенный и часто используется.
3. И третий вид селектора — это селектор класса, применяется, когда нужно выбрать группу тегов (абзац, 1й элемент списка, заголовок второго уровня) и для всех этих элементов задать одинаковые условия. Селектор класса используется следующим образом.
В html коде, для всех выбранных элементов, прописываем нужный класс class=«new». Имя класса может быть любым, но оно не может начинается с цифры.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
Заголовок h3
Абзац без класса
Абзац с применением класса
И для всех наших элементов с классом new зададим единое свойство синий цвет. В стилях перед именем класса ставится точка в отличие от идентификатора.
CSS
.new{
color: #0000ff;
}
Мы изучили три типа селекторов. Они используются почти в 100% случаев. Остальные селекторы используются куда реже. Так же работая с CSS стилями, вы будете очень часто использовать цвета или различные оттенки, и вам понадобится помощник, который поможет вам определить цвет в шестнадцатеричной системе. Такая программка для определения цвета есть, лично ею сам пользуюсь уже давно. Она достаточно удобная, и тут рассказывается, как ею пользоваться. Ну а на этом этот урок завершим и приступим к следующему.
Урок 1. Как подключить таблицу стилей CSS?
Как создать таблицу стилей, css?
Создать css-файл так же легко, как и html. Достаточно зайти в любой текстовой редактор, например Блокнот, и там создать файл с расширением css. Дадим ему стандартное название — style.css.
Скрин
Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы — способы подключения css.
Внешние таблица стилей
Пожалуй, внешний CSS — это самое правильно и оптимальное решение для сайта. Достаточно указать на странице всего лишь тег link (создан для подключения других файлов) с ссылкой на таблицу стилей и стили подключены!
<html>
<head>
<title>Внешнее подключение CSS</title><!-- Ниже расположена ссылка на нашу таблицу стилей. -->
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<h2>Внимание</h2>
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и данный файл.</body>
</html>
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и наш файл (например, index.html). Если расположение css-файла изменилось, то в атрибуте href надо внести соответствующие изменения. Например, часто бывает, что под CSS создают отдельную папку (что удобно и логично). Но тогда атрибут href будет выглядеть по-другому:
<link rel="stylesheet" type="text/css" href="css/style.css">
Внутренние таблицы стилей
Иногда можно увидеть и другую конструкцию css, которая вставлена непосредственно в html-тег
<p style="color:blue; font-size:14px;">Текст синего цвета, размер 14 пикселей</p>
Плюс в том, что можно сразу в этом же файле задать стили. Существенный минус — задаваемые свойства будут присвоены только конкретному элементу, в данном случае параграфу. Таким образом, все преимущества удалённого подключения свойств утрачиваются.
Встроенные таблицы стилей
Существует более простой способ вставки CSS. Если Вы не хотите создавать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант. Начнём сразу с примера
<html>
<head>
<title>Внешнее подключение CSS</title><!-- Ниже расположены стили -->
<style>
h3{ color:blue }
</style>
<!-- Только заголовки второго уровня будут синего цвета --></head>
<body>
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня, синий</h3>
<h4>Заголовок третьего уровня</h4></body>
</html>
Из примера видно, что стили мы прописали прямо перед закрывающим тегом head внутри открывающего и закрывающего тегов style. На самом деле тег style можно прописывать и в body, но если Вы хотите, чтобы Ваши записи выглядели структурировано, и чтобы человек, который после Вас увидит этот код не схватился за голову, то лучше писать стили в одном месте.
Недостаток встроенной таблицы стилей тоже очевиден — такие записи надо будет делать для каждой страницы отдельно.
Стилизация приложения и мастер-страницы в ASP.NET MVC 5
Стилизация приложения и мастер-страницы
Последнее обновление: 31.10.2015
Итак, добавим в наше приложение небольшую примитивную стилизацию. Для этого определим файл стилей. По умолчанию Visual Studio уже добавляет
файл стилей Site.css в папку Content:
Кроме файла Site.css, в папке Content находится файл css-фреймворка Bootstrap, но нам он пока не понадобится. Откроем файл Site.css и изменим
его содержание на следующее:
body {
font-size: 13px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
background-color: #f7f7fa;
padding-left:40px;
}
nav{
display: block;
}
.menu {
padding-left:10px;
}
.menu ul {
list-style:none;
}
.menu li {
display:inline;
}
.menu a:hover {
color:red;
}
table {
vertical-align:middle;
text-align:left;
}
.header {
font-weight:bold;
}
td {
padding-right:10px;
}
input {
width: 150px;
}
Класс .menu в данном случае будет служить в качестве класса для навигационного меню на сайте. Хотя наше приложении не очень большое, поэтому
там будет только ссылка на главную страницу. Но при необходимости вы можете добавить в него дополнительные пункты.
Чтобы использовать стили, мы можем их просто подключить в секции head, как в любой обычной html-страницу:
<head>
<meta name="viewport" content="width=device-width" />
<link type="text/css" rel="stylesheet" href="../../Content/Site.css" />
</head>
В нашем случае достаточно вставить данный код на оба наших представления. Однако это не самый лучший подход, так как стили для обоих представлений общие,
кроме того, подобных представлений в проекте может быть не два, а гораздо больше. И если мы вдруг изменим ссылку на файл стилей, то придется менять эту ссылку
на всех представлениях.
И чтобы выйти из этой проблемы фреймворк ASP.NET MVC предоставляет нам такую функциональность, как мастер-страницы. Мастер-страница задает
единый шаблон для других использующих его представлений.
По умолчанию в проекте уже имеется мастер-страница, которая называется _Layout.cshtml. Ее можно найти в папке
Views -> Shared:
Файл _Layout.cshtml уже имеет некоторое содержимое по умолчанию. Изменим его на следующее:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<ul>
<li>@Html.ActionLink("Главная", "Index", "Home")</li>
</ul>
</nav>
@RenderBody()
</body>
</html>
Для подключения стилей здесь использовался другой способ — метод Url.Content, в который передается путь к файлу. Впоследствии мы познакомимся с еще одним
способом — подключение бандлов, который является более предпочтительным.
После секции head на мастер-странице идет создание меню. Так как у нас всего два представления,
то в качестве одного единственного пункта меню указывается ссылка на главную страницу. Для создания ссылки используется метод Html.ActionLink.
Он генерирует элемент-ссылку и принимает название ссылки, метод контроллера и имя контроллера.
И далее идет вызов метода RenderBody() — с помощью этого метода в это место будет подставляться разметка уже конкретных представлений.
Теперь изменим представления так, чтобы они использовали мастер-страницу. Обновленное представление Index.cshtml:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
<h4>Распродажа книг</h4>
<table>
<tr><td><p>Название книги</p></td>
<td><p>Автор</p></td>
<td><p>Цена</p></td><td></td>
</tr>
@foreach (var b in ViewBag.Books)
{
<tr>
<td><p>@b.Name</p></td>
<td><p>@b.Author</p></td>
<td><p>@b.Price</p></td>
<td><p><a href="/Home/Buy/@b.Id">Купить</a></p></td>
</tr>
}
</table>
</div>
Также изменим представление Buy.cshtml:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
<h4>Форма оформления покупки</h4>
<form method="post" action="">
<input type="hidden" value="@ViewBag.BookId" name="BookId" />
<table>
<tr><td><p>Введите свое имя </p></td>
<td><input type="text" name="Person" /> </td></tr>
<tr><td><p>Введите адрес :</p></td><td>
<input type="text" name="Address" /> </td></tr>
<tr><td><input type="submit" value="Отправить" /> </td><td></td></tr>
</table>
</form>
</div>
Чтобы указать используемую мастер-страницу, в начале представления прописывается путь к мастер-странице:
Layout = "~/Views/Shared/_Layout.cshtml"; . И теперь нам больше не нужны секции head и body. Мы их можем удалить.
Запустим на выполнение обновленный проект и убедимся, что к нашему приложению применена стилизация и мастер-страницы:
На этом работа над приложением закончена, и теперь мы можем перейти к более детальному обсуждению основных компонентов приложения MVC.
Дополнительные материалы
Связывание CSS с HTML-страницей
Связывание CSS с HTML-документом
Основная цель CSS — позволить веб-дизайнеру определять объявления стилей, а затем он может применять эти стили к HTML-страницам, применяя их с помощью селекторов.
Связывание таблиц стилей с HTML
Стили могут быть связаны с HTML-документом одним из трех способов:
1. Встроенный тип
2. Встроенный стиль
3.Внешний стиль
Как подключить таблицу стилей CSS к странице HTML?
1. Встроенный стиль
Встроенный стиль — это самый простой метод добавления стилей CSS на ваши HTML-страницы. Встроенный стиль применяется к HTML-документу через его атрибут style для определенных тегов в документе,
Например, если вы хотите добавить стили, вы можете написать такой код:
…
Приведенное выше объявление гарантирует, что текст абзаца будет синим.Этот метод можно применить к любому элементу HTML в пределах …. страницы HTML.
Тестирование абзацев в Instyle
Еще одна проверка абзаца
output
Обратите внимание, что текст, содержащийся в первом абзаце, будет синего цвета. Вы можете видеть только этот абзац, а второй абзац по умолчанию черный.
Основным недостатком Inline Style является невозможность повторного использования.Подумайте о реструктуризации веб-сайта, содержащего сотни страниц, на которых встроенные стили засоряют разметку. Вам придется заходить на каждую страницу и изменять каждое свойство CSS по отдельности — это очень сложная задача.
2. Встроенный стиль
Embedded Styles позволяют реализовать любое количество стилей CSS, помещая их между открывающим и закрывающим тегами стилей.
Вы можете разместить тег стиля в разделе … сразу после тега вашей HTML-страницы.
Вы должны начать с открывающего тега стиля, например, следующего:
Открывающий тег Style всегда должен использовать атрибут «type». Значение атрибута — «text / css» в случае документа CSS.
Образец встроенного стиля
Следующая строка
выход
3. Внешний стиль
Внешняя таблица стилей — это простой текстовый файл, содержащий только форматы стилей CSS. Расширение внешнего файла должно заканчиваться на.css (например, pagestyle.css). Этот внешний файл называется внешней таблицей стилей.
Внешняя таблица стилей (файл .css) всегда отделена от файла HTML. Вы можете связать этот внешний файл (файл .css) с файлом HTML-документа с помощью тега. Вы можете разместить этот тег внутри раздела и после элемента вашего HTML-файла.
Значение атрибута rel должно быть таблицей стилей. Атрибут href указывает расположение и имя файла таблицы стилей.В приведенном выше коде имя внешнего файла — «style.css», и он хранится в той же папке, что и ваш HTML-файл. Если вы хотите сохранить файл .css в другом месте каталога, вам следует указать путь к вашему файлу css в href.
Связывание веб-страницы с таблицей стилей CSS
Для тестирования внешней таблицы стилей необходимо создать один файл CSS и один файл HTML.
Шаги по созданию файла CSS
Откройте простой текстовый файл, скопируйте и вставьте следующие правила CSS.
h2 {
цвет: # 0000FF;
}
h3 {
цвет: # 00CCFF;
}
Сохраните файл как «styles.css»
Шаги по созданию файла HTML
Откройте простой текстовый файл, скопируйте и вставьте следующий HTML-код.
Образец встроенного стиля
Следующая строка
Сохраните файл как «external.html» в той же папке «styles.css». Обратите внимание, что тег соединяет этот HTML-файл с внешним CSS-файлом «styles.css «.
После сохранения обоих файлов (html и css) в одной папке откройте файл «external.html» в своем веб-браузере. При открытии браузера вы можете увидеть стили, примененные к тегам h2 и h3, как на следующем изображении:
Вот и все!
Вы можете связать один файл .css с любым количеством файлов HTML одновременно, и любые изменения, внесенные вами в определения стилей в этом файле (.css), повлияют на все страницы HTML, которые ссылаются на него.
3 способа добавления CSS в HTML.Правила CSS начинают работать после того, как… | Джем Эйги | The Startup
Первый способ добавить CSS в HTML — это использовать метод под названием inline-styling. Встроенный стиль означает добавление правил CSS непосредственно в элементы (теги) HTML с атрибутом стиля .
Например, если я хочу изменить цвет текста элемента:
style = "color: red"> Test Headline
- Сначала мне нужно добавить атрибут стиля к этому конкретный элемент
- Затем внутри кавычек я могу определить одно или несколько правил CSS, как указано выше
Затем будет применено новое правило (цвет текста здесь) для элемента h2:
inline-style way
Однако в повседневном программировании мы не хотим использовать встроенные стили, потому что он нацелен только на один элемент HTML, а не на несколько, его нелегко найти и найти в более крупных проектах, и самая важная причина заключается в том, что мы не можем сохранить наш код CSS отдельно от HTML.
Мы не предпочитаем использовать встроенные стили в повседневном программировании.
Второй способ добавления CSS в HTML — использование внутреннего способа CSS . Чтобы использовать этот способ, нам нужно использовать тег HTML с именем
Test Headline
Internal CSS way
Итак, это второй подход для добавления CSS в наш HTML-файл, но он все еще не идеально, потому что нам нравится хранить HTML и CSS в отдельных файлах, что приводит нас к третьему пути.
Разделение CSS и HTML - это передовой опыт . В реальном программировании нам нужно хранить HTML, CSS и JavaScript в отдельных файлах, а затем при необходимости импортировать их. Такой способ улучшает читаемость и упрощает обслуживание кода.
Чтобы использовать этот способ, нам нужно создать отдельные файлы CSS с расширением .css , а затем связать их с HTML.
Например, мы можем создать такой файл CSS: index.css .Внутри index.css мы пишем наши правила CSS:
h2 {
color: red;
} Затем мы можем импортировать index.css в HTML с тегом , как показано ниже:
Заголовок теста
И правила снова успешно применяются:
Внешний путь CSS
Использование внешнего Файлы CSS и связывание / импорт их в HTML является обычно предпочтительным способом.
Общие сведения о встроенном, внутреннем и внешнем CSS
Если вы создаете веб-сайт, вы начнете с HTML. С помощью этого языка разметки вы можете добавлять заголовки, абзацы, изображения, таблицы, формы, списки и многое другое. Но вы не можете контролировать, как эти элементы представлены или расположены на странице.
Вот где на помощь приходит CSS.
CSS описывает, как страница должна выглядеть в браузере, который соответствующим образом отображает ее. CSS можно использовать для самых разных стилистических целей, включая изменение цвета текста и фона на странице, удаление подчеркивания из ссылок и анимацию изображений, текста и других элементов HTML.
Если вам нужен больший контроль над внешним видом вашего сайта, вам нужно знать, как добавить CSS на свой сайт. Давайте начнем.
Как добавить CSS в HTML
Есть три способа добавить CSS в HTML. Вы можете добавить встроенный CSS в атрибут стиля для стилизации отдельного элемента HTML на странице. Вы можете встроить внутреннюю таблицу стилей, добавив CSS в заголовок вашего HTML-документа. Или вы можете создать ссылку на внешнюю таблицу стилей, которая будет содержать весь ваш CSS отдельно от вашего HTML.
Вот еще один способ резюмировать три способа добавления CSS в HTML:
- Встроенный CSS: требуется, чтобы атрибут стиля помещался внутри элемента HTML.
- Внутренний CSS: требуется, чтобы элемент
и находится в разделе заголовка HTML-файла.
Использование внутреннего CSS считается лучшей практикой, чем использование встроенного CSS.
Internal CSS позволяет вам стилизовать группы элементов одновременно - вместо того, чтобы добавлять одни и те же атрибуты стиля к элементам снова и снова.
Кроме того, поскольку он разделяет CSS и HTML на разные разделы, но сохраняет их в одном документе, внутренний CSS идеально подходит для одностраничных веб-сайтов. Если у вас многостраничный сайт и вы хотите внести изменения на своем сайте, вам придется открыть каждый HTML-файл, представляющий эти страницы, и добавить или изменить внутренний CSS в каждом разделе заголовка.(Или вы можете использовать внешний CSS).
Внутренний пример CSS
Допустим, вы хотите изменить цвет текста каждого элемента абзаца на веб-странице на темно-синий. В этом случае вы должны установить для свойства color шестнадцатеричный цветовой код для оттенка темно-синего (# 33475B), поместить его в набор правил CSS с помощью селектора типа p и поместить все это в заголовок раздела страница в Интернете.
Вот как будет выглядеть HTML-файл:
<стиль>
п {
цвет: # 33475B;
}
Пример внутреннего CSS
Цвет текста по умолчанию для страницы черный.Однако я могу изменить цвет каждого элемента абзаца на странице с помощью внутреннего CSS.
Используя внутренний CSS, мне нужно написать только один набор правил, чтобы изменить цвет каждого элемента абзаца.
При использовании встроенного CSS мне пришлось бы добавить атрибут стиля к каждому абзацу в моем HTML.
Вот результат:
См. Пример внутреннего CSS-кода Pen от Кристины Перриконе (@hubspot) на CodePen.
Как добавить внешний файл CSS в HTML
Внешний CSS отформатирован как внутренний CSS, но не заключен в теги
Пример содержания.