Все привет! Каждый день(постараюсь) я буду публиковать уроки css и html, которые на мой взгляд будут полезными каждому WEB-МАСТЕРУ.
Как создать таблицу стилей, css?
Создать css-файл так же легко, как и html. Достаточно зайти в любой текстовой редактор, например Блокнот, и там создать файл с расширением css. Дадим ему стандартное название - style.css.
Скрин
Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы - способы подключения css.
Внешние таблица стилей
Пожалуй, внешний CSS - это самое правильно и оптимальное решение для сайта. Достаточно указать на странице всего лишь тег link (создан для подключения других файлов) с ссылкой на таблицу стилей и стили подключены!
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и наш файл (например, index.html). Если расположение css-файла изменилось, то в атрибуте href надо внести соответствующие изменения. Например, часто бывает, что под CSS создают отдельную папку (что удобно и логично). Но тогда атрибут href будет выглядеть по-другому:
Внутренние таблицы стилей
Иногда можно увидеть и другую конструкцию css, которая вставлена непосредственно в html-тег
Плюс в том, что можно сразу в этом же файле задать стили. Существенный минус - задаваемые свойства будут присвоены только конкретному элементу, в данном случае параграфу. Таким образом, все преимущества удалённого подключения свойств утрачиваются.
Встроенные таблицы стилей
Существует более простой способ вставки CSS. Если Вы не хотите создавать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант. Начнём сразу с примера
Из примера видно, что стили мы прописали прямо перед закрывающим тегом head внутри открывающего и закрывающего тегов style. На самом деле тег style можно прописывать и в body, но если Вы хотите, чтобы Ваши записи выглядели структурировано, и чтобы человек, который после Вас увидит этот код не схватился за голову, то лучше писать стили в одном месте.
Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
Как создать таблицу стилей, css?
Создать css-файл так же легко, как и html. Достаточно зайти в любой текстовой редактор, например Блокнот, и там создать файл с расширением css. Дадим ему стандартное название - style.css.
Скрин
Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы - способы подключения css.
Внешние таблица стилей
Пожалуй, внешний CSS - это самое правильно и оптимальное решение для сайта. Достаточно указать на странице всего лишь тег link (создан для подключения других файлов) с ссылкой на таблицу стилей и стили подключены!
HTML:
<html>
<head>
<title>Внешнее подключение CSS</title>
<!-- Ниже расположена ссылка на нашу таблицу стилей. -->
<linkrel="stylesheet"type="text/css"href="style.css">
</head>
<body>
<h1>Внимание</h1>
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и данный файл.
</body>
</html>
HTML:
<linkrel="stylesheet"type="text/css"href="css/style.css">
Иногда можно увидеть и другую конструкцию css, которая вставлена непосредственно в html-тег
HTML:
<pstyle="color:blue; font:14px;">Текст синего цвета, размер 14 пикселей</p>
Встроенные таблицы стилей
Существует более простой способ вставки CSS. Если Вы не хотите создавать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант. Начнём сразу с примера
HTML:
<html>
<head>
<title>Внешнее подключение CSS</title>
<!-- Ниже расположены стили -->
<style>
h2{ color:blue }
</style>
<!-- Только заголовки второго уровня будут синего цвета -->
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня, синий</h2>
<h3>Заголовок третьего уровня</h3>
</body>
</html>
Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
Последнее редактирование:
The Doshs
Участник
- Сообщения
- 383
- Реакции
- 63
- Сообщения
- 322
- Реакции
- 72