| Kosten | Вторник, 12 Марта 2019, 01:13 | Сообщение 1 |
| Каскадные таблицы стилей CSS, это файлы с правилами стилевого оформления, которые определяют способ представления вашего сайта на экране. Правила CSS могут применяться к файлам HTML вашего сайта различными способами, где можете использовать внешнюю таблицу стилей, внутреннюю или встроенный стиль. Каждый метод имеет преимущества, которые подходят для конкретного использования.
Внешняя таблица стилей представляет собой автономный .css файл, который связан с веб страницей. Преимущество внешних таблиц стилей заключается в том, что они могут быть созданы один раз, а правила применяются к нескольким страницам. Если вам необходимо внести широко распространенные изменения в дизайн вашего сайта, вы можете внести одно изменение в таблицу стилей, и оно будет применено ко всем связанным страницам, экономя время и усилия.
Внутренняя таблица стилей имеет правила CSS для страницы в головной части HTML - файла. Правила применяются только к этой странице, но вы можете настроить CSS классы и идентификаторы, которые можно использовать для стилизации нескольких элементов в коде страницы. Есть одно изменение правила CSS будет применено ко всем теговым элементам на странице.
Встроенные стили относятся к определенному тегу HTML, используя атрибут стиля с правилом CSS для стилизации определенного элемента страницы. Они полезны для быстрых, постоянных изменений, но менее гибки, чем внешние и внутренние таблицы стилей, поскольку каждый встроенный стиль, который вы создаете, то должен редактироваться отдельно, если вы решите внести изменения в дизайн.
1. Использование внешних таблиц стилей CSS
Страница HTML, которая стилизованная с помощью внешней таблицы стилей CSS, должна ссылаться на файл .css в заголовке документа. После создания CSS-файл должен быть загружен на ваш сервер и связан с HTML-файлом следующим кодом:
Код <link href="style.css" rel="stylesheet" type="text/css">
Вы можете назвать свою таблицу стилей как угодно, но она должна иметь расширение .css.
2. Использование внутренних таблиц стилей CSS
Вместо создания ссылок на внешний файл .css файлы, здесь используют внутреннюю таблицу стилей включают в себя набор правил в их головной части, где правила CSS заключены в теги style, например так:
Код <head>
<style type="text/css">
h1 {
color:#dbdbe2;
margin-left: 18px;
}
p {
font-family: Arial, Helvetica, Sans Serif;
}
</style>
</head>
3. Использование встроенных стилей
Встроенные стили применяются непосредственно к элементу в вашем HTML-коде, где они используют атрибут style, которым следуют обычные свойства CSS.
Например:
Код <h1 style="color: #dc1111;margin-left:17px;">ZorNet - портал для вебмастера</h1>
Поскольку CSS достигает своего полного потенциала, только если вы связываете его с файлом HTML, изучение того, как это сделать, должно стать вашим приоритетом.
Если таблица стилей определена, браузер форматирует документ HTML с информацией, предоставленной в таблице стилей, а затем отображает веб-страницу.
| | Страна: (RU) |
| |
| Kosten | Вторник, 12 Марта 2019, 01:25 | Сообщение 2 |
|
| Существует три способа применения CSS к HTML: это встроенный, внутренний и внешний. Встроенные стили вставляются прямо в теги HTML с помощью style атрибута.
Они выглядят примерно так:
Код <p style="color: #b71717;">text</p>
Здесь задали красный оттенок пункту.
Если вы помните, то наилучший подход заключается в том, что HTML должен быть отдельным документом, где не требующим презентации и поэтому следует избегать использования встроенных стилей.
Внутренний
Встроенные или внутренние стили используются для всей страницы, где внутри head элемента style теги окружают все стили страницы.
Код <style>
p {
color: #981313;
}
a {
color: #1111dc;
}
</style>
Это сделает все параграфы на странице красным и все ссылки синим.
Хотя предпочтительнее загрязнять наш HTML встроенным представлением, также, как правило, предпочтительнее хранить HTML и CSS-файлы отдельно.
Внешний
Внешние стили используются для всего многостраничного сайта, где существует отдельный файл CSS, который будет выглядеть примерно так:
Код p {
color: #e42727;
}
a {
color: #2626e0;
}
Если этот файл сохранен в таком варианте style.css в том же каталоге, что и ваша HTML-страница, то он может быть связан с HTML-кодом следующим образом:
Код <link rel="stylesheet" href="style.css">
Чтобы извлечь максимальную пользу из этого руководства, было бы неплохо попробовать код по ходу дела, поэтому запустите новый текстовый файл в текстовом редакторе и сохраните пустой документ как «style.css» в том же каталоге, как ваш HTML-файл.
Теперь измените ваш HTML-файл так, чтобы он запускался примерно так:
Код <!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" href="style.css">
</head>
...
Сохраните файл HTML, где теперь это ссылка на CSS-файл, который сейчас по умолчанию идет пустым, поэтому ничего не изменится. Прорабатывая руководство по CSS для начинающих, вы сможете добавлять и изменять CSS-файл и просматривать результаты, просто обновляя окно браузера.
| | Страна: (RU) |
| |
