Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы - способы подключения css.
Внешние таблица стилей
Пожалуй, внешний CSS - это самое правильно и оптимальное решение для сайта. Достаточно указать на странице всего лишь тег link (создан для подключения других файлов) с ссылкой на таблицу стилей и стили подключены!
Внимание
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и данный файл.
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и наш файл (например, index.html). Если расположение css-файла изменилось, то в атрибуте href надо внести соответствующие изменения. Например, часто бывает, что под CSS создают отдельную папку (что удобно и логично). Но тогда атрибут href будет выглядеть по-другому:
Внутренние таблицы стилей
Иногда можно увидеть и другую конструкцию css, которая вставлена непосредственно в html-тег
Текст синего цвета, размер 14 пикселей
Плюс в том, что можно сразу в этом же файле задать стили. Существенный минус - задаваемые свойства будут присвоены только конкретному элементу, в данном случае параграфу. Таким образом, все преимущества удалённого подключения свойств утрачиваются.
Встроенные таблицы стилей
Существует более простой способ вставки CSS . Если Вы не хотите создавать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант. Начнём сразу с примера
Заголовок первого уровня
Заголовок второго уровня, синий
Заголовок третьего уровня
Из примера видно, что стили мы прописали прямо перед закрывающим тегом head внутри открывающего и закрывающего тегов style . На самом деле тег style можно прописывать и в body , но если Вы хотите, чтобы Ваши записи выглядели структурировано, и чтобы человек, который после Вас увидит этот код не схватился за голову, то лучше писать стили в одном месте.
Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.
Многие темы блогов требуют от нас публикации информации, сведенной в таблицы. И, поверьте мне, что нет ничего ужаснее уродливой таблицы, которая своим отвратительным внешним видом затмевает все то важное и полезное, чем вы ее наполнили. Я сам некоторое время страдал от этого, пока, наконец, не открыл учебники html и css, чтобы раз и навсегда создать шаблон своей таблицы, которая будет украшать, а не уродовать блог. И я расскажу вам, как это сделать.
Стиль таблицы в css и в html?
Ну а зачем, - спросите вы, - ты полез в учебники CSS и HTML? В чем разница? Почему нельзя обратиться только к одной форме записи?
Отвечаю. Сначала мы запишем общие параметры нашей таблицы в CSS. Они будут распространяться на все таблицы, которым мы присвоим определенный класс (об этом позже). Почему необходимо прописывать общие стили в отдельном файле? – это облегчает код отдельной записи, поста – ведь в него не приходится пихать все описание стиля каждого элемента. Если мы можем вывести какие-то правила, например, общие правила отображения таблиц – мы выносим их в таблицу стилей (style.php).
Но в каждой конкретной ситуации, для каждой конкретной таблицы нам может понадобиться дополнительное форматирование, которое происходит уже в html-редакторе. В результате я расскажу, как реально создать такую таблицу в HTML в конкретной публикации.
Шаблон таблицы в CSS
Итак, вот какие параметры мы отобразим в нашей таблице стилей (style.php) для блога на Вордпресс:
таблица №1
В принципе, у нас уже должна получиться нормальная таблица и можно на этом остановиться. Но мы допишем и дополнительные параметры, чтобы выделить верхнюю строчку таблицы. За нее отвечает тег , то есть, «заглавие таблицы»: И вот так это выглядит в целом. Mytable {
border: 3px ridge #666600;
border-collapse: collapse;
}
.mytable thead {
background: #ffffcc;
text-align: center;
border: 3px ridge #666600;
border-collapse: collapse;
}
.mytable td, tr {
text-align:left;
vertical-align: text-top;
padding:10px;
border: 1px solid #666600;
border-collapse: collapse;
}
Обратите внимание, что вы можете записывать код CSS, как вам больше нравится - в столбик или в строчку (см. ниже). Количество пробелов и переносов между элементами кода ничего не меняет, главное, записать все правильно по сути: Mytable {border: 3px ridge #666600; border-collapse: collapse;}
.mytable thead {background: #ffffcc; text-align: center; border: 3px ridge #666600; border-collapse: collapse;}
.mytable td, tr {text-align:left;vertical-align: text-top;padding:10px;border: 1px solid #666600;border-collapse: collapse;}
Пропишите эти стили (строчный вариант или вариант столбиком - выбирайте один из них!) в самом конце своей таблицы стилей (style.php) А в следующей публикации я расскажу, как непосредственно создать и подкорректировать таблицу в публикации при помощи html-тегов. Это небольшое дополнение к статье. Когда уже стиль создан возникает необходимость связать его непосредственно со страницей html, если не вдаваться в нюансы, то для этого есть несколько простых способов. Расскажу о самом легком. Это самый простой и способ. Когда браузер читает таблицу стилей, он форматирует документ в соответствии с ней. Существует три способа вставки таблицы стилей: Внешняя таблица стилей идеально подходит, когда стили должны применяться ко многим страницам. С помощью внешней таблицы стилей, вы можете изменить вид целого Веб сайта путем редактирования одного файла.
Каждая страница должна ссылаться на таблицу стилей, используя тег . Тег находится в head-секции: Не оставляйте пробелов между значением свойства и его единицами измерения! "margin-left:20 px"
(вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera. Внутренняя таблица стилей используется когда отдельный документ имеет уникальный стиль.
Вы определяете внутренние стили в head-секции страницы HTML, используя тег
…
таблица №2
таблица №3
Параметр
Что это
Разъяснение
.mytable td, tr
Название дочерних классов
см. таблицу №2
{text-align:left;
Выравнивание текста
здесь он выравнивается по левому краю
vertical-align: text-top;
Вертикальное выравнивание текста в ячейке
у меня оно строится по самому верхнему элементу текста. Есть и другие возможности выравнивания
padding:10px;
Отступ текста от границ ячейки
Плохо, если текст «приклеен к рамкам таблицы. Я думаю, что отступа в 10 пикселей, как правило, хватает
border: 1px solid #666600;
Стиль границ
Снова описано сразу несколько свойств: толщина границы (1px), вид границы (отличается от границ, очерчивающих всю таблицу и ее заглавную строку – выглядит проще), цвет границы
border-collapse: collapse;}
см. в таблице №1
и их «склеивание»
Как связать свой стиль CSS и HTML
...
"путь к файлу/style.css"
>
...
Три Способа Вставить CSS
Внешняя Таблица Стилей
Внутренняя Таблица Стилей