Внешний файл css примеры. Добавление стилей на веб-страницу
Многие темы блогов требуют от нас публикации информации, сведенной в таблицы. И, поверьте мне, что нет ничего ужаснее уродливой таблицы, которая своим отвратительным внешним видом затмевает все то важное и полезное, чем вы ее наполнили. Я сам некоторое время страдал от этого, пока, наконец, не открыл учебники 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, если не вдаваться в нюансы, то для этого есть несколько простых способов. Расскажу о самом легком. Это самый простой и способ. Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее. Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри Пример 1. Подключение внешних стилей
Значение атрибута rel
у
всегда будет stylesheet
и остаётся неизменным. В качестве значения href
указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts. Содержимое файла style.css показано в примере 2. Пример 2. Содержимое файла style.css H1 {
font-family: "Lobster", cursive;
color: green;
}
Как видно из данного примера, файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей - наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS. Стили пишутся в самом 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"
>
...
Внешняя таблица стилей
Заголовок
Внутренняя таблица стилей
Заголовок