Урок: как создать таблицу стилей, css

AriCosmo

Участник
Сообщения
518
Реакции
115
PSC
0,00
Skype
 Diknoa
Статус скайп
Все привет! Каждый день(постараюсь) я буду публиковать уроки css и html, которые на мой взгляд будут полезными каждому WEB-МАСТЕРУ.

Как создать таблицу стилей, 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>
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и наш файл (например, index.html). Если расположение css-файла изменилось, то в атрибуте href надо внести соответствующие изменения. Например, часто бывает, что под CSS создают отдельную папку (что удобно и логично). Но тогда атрибут href будет выглядеть по-другому:
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>
Из примера видно, что стили мы прописали прямо перед закрывающим тегом head внутри открывающего и закрывающего тегов style. На самом деле тег style можно прописывать и в body, но если Вы хотите, чтобы Ваши записи выглядели структурировано, и чтобы человек, который после Вас увидит этот код не схватился за голову, то лучше писать стили в одном месте.

Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.

Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
 
Последнее редактирование:

MegaGoblin

PHP, JS, AJAX, CSS, HTML
Участник
Сообщения
323
Реакции
73
PSC
0,00
Пробелы потерялись в коде)

<link rel="stylesheet"type="text/css"href="css/style.css">
<p style="color:blue; font:14px;">Текст синего цвета, размер 14 пикселей</p>
 
Сверху