Как создать стиль в css

Как создать свой стиль таблицы в CSS

Многие темы блогов требуют от нас публикации информации, сведенной в таблицы. И, поверьте мне, что нет ничего ужаснее уродливой таблицы, которая своим отвратительным внешним видом затмевает все то важное и полезное, чем вы ее наполнили. Я сам некоторое время страдал от этого, пока, наконец, не открыл учебники html и css, чтобы раз и навсегда создать шаблон своей таблицы, которая будет украшать, а не уродовать блог. И я расскажу вам, как это сделать.

Стиль таблицы в css и в html?

Ну а зачем, — спросите вы, — ты полез в учебники CSS и HTML? В чем разница? Почему нельзя обратиться только к одной форме записи?

Отвечаю. Сначала мы запишем общие параметры нашей таблицы в CSS. Они будут распространяться на все таблицы, которым мы присвоим определенный класс (об этом позже). Почему необходимо прописывать общие стили в отдельном файле? – это облегчает код отдельной записи, поста – ведь в него не приходится пихать все описание стиля каждого элемента. Если мы можем вывести какие-то правила, например, общие правила отображения таблиц – мы выносим их в таблицу стилей (style.php).

Но в каждой конкретной ситуации, для каждой конкретной таблицы нам может понадобиться дополнительное форматирование, которое происходит уже в html-редакторе. В результате я расскажу, как реально создать такую таблицу в HTML в конкретной публикации.

Шаблон таблицы в CSS

Итак, вот какие параметры мы отобразим в нашей таблице стилей (style.php) для блога на Вордпресс:

таблица №1

Параметр Что это Разъяснение
.mytable Название класса можете назвать как хотите, только латиницей и лучше прописными буквами
Вид рамки указываем сразу три параметра: толщину (3px), стиль (ridge) – такой чуть выпуклый, есть и другие (можно погуглить); цвет – подходящий к моему оформлению.
border-collapse: collapse;> Слияние рамок каждая ячейка таблицы обводится своей рамкой, поэтому получается, что таблица должна состоять из множества прямоугольников-ячеек. Чтобы слить эти отдельные прямоугольнички в единую сетку существует данный тег

В принципе, у нас уже должна получиться нормальная таблица и можно на этом остановиться. Но мы допишем и дополнительные параметры, чтобы выделить верхнюю строчку таблицы. За нее отвечает тег <thead>, то есть, «заглавие таблицы»:

таблица №2

Параметр Что это Разъяснение
.mytable thead Название дочернего класса здесь пишите сначала свое название класса (если придумывали что-то более оригинальное, чем у меня) и потом thead
Цвет фона у меня фон заглавной строки таблицы отличает ее от остальных. Подберите для себя удачное сочетание
text-align: center; Выравнивание текста у меня по центру
border: 3px ridge #666600; см. в таблице №1 Далее снова описывается размер, вид, цвет рамок и их «склеивание»
border-collapse: collapse;> см. в таблице №1 и их «склеивание»

И далее прописываем стиль тела таблицы. Тег, который отвечает за строку выглядит так <tr>. А тег, который отвечает за отдельную ячейку – так <td>. Вот и получается:

таблица №3

Параметр Что это Разъяснение
.mytable td, tr Название дочерних классов см. таблицу №2
Выравнивание текста здесь он выравнивается по левому краю
vertical-align: text-top; Вертикальное выравнивание текста в ячейке у меня оно строится по самому верхнему элементу текста. Есть и другие возможности выравнивания
padding:10px; Отступ текста от границ ячейки Плохо, если текст «приклеен к рамкам таблицы. Я думаю, что отступа в 10 пикселей, как правило, хватает
border: 1px solid #666600; Стиль границ Снова описано сразу несколько свойств: толщина границы (1px), вид границы (отличается от границ, очерчивающих всю таблицу и ее заглавную строку – выглядит проще), цвет границы
border-collapse: collapse;> см. в таблице №1 и их «склеивание»

И вот так это выглядит в целом.

Обратите внимание, что вы можете записывать код CSS, как вам больше нравится — в столбик или в строчку (см. ниже). Количество пробелов и переносов между элементами кода ничего не меняет, главное, записать все правильно по сути:

Пропишите эти стили (строчный вариант или вариант столбиком — выбирайте один из них!) в самом конце своей таблицы стилей (style.php)

А в следующей публикации я расскажу, как непосредственно создать и подкорректировать таблицу в публикации при помощи html-тегов.

Как связать свой стиль CSS и HTML

Это небольшое дополнение к статье. Когда уже стиль создан возникает необходимость связать его непосредственно со страницей html, если не вдаваться в нюансы, то для этого есть несколько простых способов. Расскажу о самом легком.

Стили CSS

Основные элементы HTML. Улучшенное управление стилями с помощью классов.

Оформление

Заголовки

Доступны все HTML заголовки, от <h1> до <h6> .

h1. Заголовок 1

h2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4
h5. Заголовок 5
h6. Заголовок 6

Размеры Body

В Bootstrap основной размер шрифта font-size по умолчанию 14px, с высотой строки line-height в 20px. Это применимо к <body> и всем остальным абзацам. Дополнительно <p> (абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Класс Lead body

Выделяйте абзац путем добавления .lead .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Форматирование Less

Все шрифты и размеры основаны на двух переменных LESS в variables.less: @baseFontSize и @baseLineHeight . Первая &#8212; это основной размер шрифта, используемый во всем документе, вторая &#8212; это основная высота строки. Мы используем эти переменные и немного вычислений, чтобы создать отступы, поля, высоту строк разного типа и многое другое. Настраивайте Bootstrap для себя.

Выделение

Используя простые стили Bootstrap, применяйте HTML теги для выделения.

<small>

Для выделения блоков текста мелким шрифтом используйте тег small.

Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт

Полужирный

Выделение фрагмента текста с помощью important

Следующий фрагмент текста набран полужирным шрифтом.

Курсив

Выделение фрагмента текста с помощью stress

Следующий фрагмент текста выделен курсивом.

Внимание! Смело используйте <b> и <i> в HTML5. Но <b> предназначен для выделения слова или фразы, которое не выражает особой важности, в то время как <i> используется для выделения разговорной речи, технических терминов и т.д.

Классы выделения

Выделение цветом с помощью нескольких вспомогательных классов.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Аббревиатуры

Используйте элемент HTML <abbr> для аббревиатур. При этом наведите курсор на аббревиатуру, чтобы увидеть ее расшифровку. Аббревиатуры с атрибутом title выделены полупрозрачным подчеркиванием точками, а при длительном наведении курсора вы увидите знак вопроса и расшифровку аббревиатуры.

Чтобы показать расшифровку аббревиатуры при длительном наведении курсора, добавьте атрибут title .

Добавьте .initialism , чтобы немного уменьшить размер шрифта.

Адреса

Представьте или только основную или полную контактную информацию.

<address>

Сохраните форматирование, ставя в конце всех строк тег <br> .

Цитаты

Цитирование фрагментов текста из других источников.

Цитаты по умолчанию

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Опции цитирования

Простые изменения стиля и содержания в стандартных цитатах.

Указание источника

Добавьте тег <small> для указания на источник. Поместите название источника внутрь тега <cite> .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

Альтернативное отображение

Используйте .pull-right для выравнивания текста по правую сторону.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

Списки

Неупорядоченный

Список, в котором порядок явно не обозначен.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at

Упорядоченный

Список, в котором порядок четко определен.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Не стилизованный

Список без стиля или без дополнительного левого поля.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at

Описание

Список терминов с их сопутствующими описаниями.

Горизонтальный список описания

Выстраивает термины и описания <dl> в одну линию.

Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow . На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.

Строковое выделение кода

Поместите строковый код внутрь тега <code> .

Блочное выделение

Используйте <pre> для выделения многих строк кода. Избегайте угловых скобок в коде для его корректного отображения.

Внимание! Всегда используйте теги <pre> как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable , который имеет максимальную высоту в 350px и добавляет вертикальную прокрутку.

Таблицы

Стили по умолчанию

Для основного форматирования и только горизонтальной разметки добавьте класс .table в любой тег <table> .

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Дополнительные классы

Добавьте любой из следующих классов к основному классу .table .

.table-striped

Добавить светло-серый фон к нечетным строкам внутри <tbody> можно посредством CSS селектора :nth-child (в IE7-IE8 не поддерживается).

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

.table-bordered

Добавляет рамки и закругляет углы таблицы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

.table-hover

Делает активным наведение курсора внутри.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

.table-condensed

Делает таблицы более компактными, наполовину сокращая отступы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Дополнительные классы строк

Используйте контекстные классы, чтобы выделить цветом строки таблицы.

Класс Описание
.success Указывает на успешно выполненное действие.
.error Указывает на опасное или негативное действие..
.warning Указывает на предупреждение, на которое следует обратить внимание.
.info Используется как альтернатива стилям по умолчанию.
# Продукт Платеж Статус
1 TB &#8212; Ежемесячно 01/04/2012 Подтвержден
2 TB &#8212; Ежемесячно 02/04/2012 Отклонен
3 TB &#8212; Ежемесячно 03/04/2012 Задержка
4 TB &#8212; Ежемесячно 04/04/2012 Позвонить для подтверждения

Поддерживаемая разметка таблиц

Список поддерживаемых элементов HTML и указания для их использования.

Тег Описание
<table> Вставляет элемент для отображения данных в табличной форме.
<thead> Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. ( <tr> ) Озаглавливает колонки таблицы.
<tbody> Элемент контейнера для создания строк в теле таблицы ( <tr> )
<tr> Элемент контейнера для настройки ячеек таблицы. ( <td> or <th> ) Создает отдельную строку.
<td> Ячейка таблицы по умолчанию
<th> Специальная ячейка для названий столбцов таблицы (или строк &#8212; зависит от расположения).
Следует использовать с кодом <thead>
<caption> Краткое описание в таблице, которое очень удобно для мобильных устройств.

Формы

Стили по умолчанию

Отдельные элементы формы имеют свой стиль, но без обязательного класса <form> или каких-либо особых изменений в разметке. В результате получаются упорядоченный, выровненный по левому краю текст в элементах формы.

Дополнительные шаблоны

В Bootstrap есть три дополнительных шаблона форм для общего пользования.

Форма поиска

Добавьте .form-search в форму и .search-query в элемент <input> для построения закругленной рамки.

Линейная форма

Добавьте класс .form-inline для компактного расположения выровненного по левому краю текста и строк.

Горизонтальная форма

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

  • Добавьте .form-horizontal в форму
  • Добавьте текст и элементы управления внутрь .control-group
  • Добавьте .control-label в текст
  • Добавьте любой подходящий элемент управления .controls для точной настройки

Поддерживаемые элементы формы

Примеры стандартных поддерживаемых элементов формы.

Поле ввода

Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type .

Многострочный текст

Для элементов формы, которые позволяют использовать многострочный текст. Измените атрибут rows в случае необходимости.

Флажки и радио-кнопки

Элементы &#171;флажки&#187; (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.

По умолчанию (вертикально)
Флажки в одной строке

Добавьте класс .inline к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.

Список выбора

Используйте опцию по умолчанию или укажите multiple="multiple" , чтобы отобразить сразу несколько опций.

Дополнения к формам

В Bootstrap имеются также другие полезные компоненты формы, которые могут встраиваться в панель браузера.

Пред-идущие и Пост-идущие элементы

Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select при этом не поддерживаются.

Настройки по умолчанию

Добавьте один или два класса внутрь тегов .add-on и input , чтобы отобразить текст до или после поля ввода.

Комбинирование

Используйте оба класса и дважды &#8212; .add-on , чтобы отобразить текст впереди или позади.

Кнопки вместо текста

Используйте с текстом вместо <span> класс .btn , чтобы к вводу подключить кнопку.

Форма поиска

Настройка размеров

Используйте соответствующие классы, такие как .input-large или согласуйте ваше поле ввода с сеткой размеров, используя классы .span* .

Взаимосвязанные размеры

Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large будет увеличивать отступ и размер шрифта в поле ввода.

Сетка размеров

Используйте от .span1 до .span12 , чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.

Для множественного ввода используйте класс модификатора .controls-row для корректного отображения пробелов. Это позволяет убрать лишние пробелы при обтекании, настраивает соответствующие поля и прозрачность обтекания.

Неформатируемые поля

Представьте данные в форме, которая не редактируется без использования фактической разметки.

Формы для действий

Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal , кнопки автоматически получат отступ, соответствующий форме.

Вспомогательный текст

Поддержка строчного и блокового текста, который отображается около управления формы.

Строчный вспомогательный текст
Блоковый вспомогательный текст

Настройки состояния элементов формы

Обеспечивают обратную связь с пользователями или посетителями.

Фокус ввода

Мы удалили стили по умолчанию outline в настройках некоторых форм и поставили на их место box-shadow для фокуса :focus .

Отключенное состояние

Добавьте атрибут disabled в поле ввода для того, чтобы предотвратить ввод. Внешний вид поля при этом немного изменится.

Состояния валидации

В Bootstrap имеются стили валидации для ошибок, предупреждений, информации и успешных действий. Для использования добавьте подходящий класс к ближайшему классу .control-group .

Кнопки

Кнопки по умолчанию

Стили кнопок могут применяться к любым элементам посредством класса .btn . Однако, обычно применяйте их только к элементам <a> and <button> для лучшего отображения.

Кнопка class=&#187;&#187; Описание
Default btn Стандартная серая кнопка с градиентом
Главная кнопка btn btn-primary Обеспечивает дополнительную визуальную ширину и указывает на первичное действие в наборе кнопок
Информация btn btn-info Используется как альтернатива стилям по умолчанию
Успешное действие btn btn-success Указывает на успешное или положительное действие
Предупреждение btn btn-warning Указывает на то, что действие должно совершаться с предусмотрительностью
Опасность btn btn-danger Указывает на опасное или потенциально негативное действие
Инверсия btn btn-inverse Чередующиеся темно-серые кнопки, не связанные с определенным действием
Ссылка btn btn-link Отмена выделения кнопки. Кнопка получает вид ссылки, сохраняя при этом свои функции
Кросс-браузерная совместимость

Поскольку IE9 не подгоняет градиент заднего плана к закругленным углам, мы его удалили. Кроме того, IE9 искажает элементы кнопки отключения button отображая текст в сером цвете с ужасной тенью, которую мы не можем исправить.

Размеры кнопок

Желаете кнопки побольше или поменьше? Добавьте класс .btn-large , .btn-small , или .btn-mini для установки дополнительных размеров.

Большая кнопка Большая кнопка

Кнопка по умолчанию Кнопка по умолчанию

Маленькая кнопка Маленькая кнопка

Создайте вложенный блок кнопок, который размещается по всей ширине родительских кнопок. Для этого добавьте класс .btn-block .

Отключенное состояние

Отмените нажатие кнопок, уменьшив их четкость на 50%.

Анкерный элемент

Добавьте класс .disabled к кнопкам <a> .

Внимание!
Мы используем класс .disabled как дополнение к классу, подобно общему классу .active , так что никакой префикс не требуется. Также этот класс по сути только для внешнего вида &#8212; для того, чтобы сделать ссылку неактивной, используйте JavaScript.

Элемент кнопки

Добавьте атрибут disabled к кнопкам <button> .

Главная кнопка Кнопка

Один класс, множественные теги

Используйте класс .btn в элементах <a> , <button> или <input> .

Для наилучшей совместимости с браузерами, используйте элементы, подходящие для всех браузеров. Используйте input как кнопку <input type="submit"> .

Изображения

Добавьте классы к элементу <img> , чтобы легко настроить стили изображений.

Внимание! .img-rounded и .img-circle не работают в IE7-8 из-за недостаточной поддержки border-radius .

Иконки от Glyphicons

Иконки glyphs

140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Авторство Glyphicons

Набор иконок Glyphicons Halflings не является бесплатным, но по соглашению между Bootstrap и Glyphicons разработчики имеют возможность использовать его без дополнительной платы. В знак благодарности мы просим вас разместить ссылку на оригинал проекта Glyphicons.

Как использовать

Все иконки требуют использования тега <i> с уникальным классом и префиксом icon- . Для использования поместите код с примера ниже в нужное место:

Также иконки могут использоваться в белом цвете (в виде инверсии), и доступны при дополнительном классе. Этот класс применяется при наведении курсора, активных состояний, навигации и раскрывающихся ссылок.

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.

Примеры иконок

Используйте иконки для кнопок, пунктов меню, навигации или присоедините к формам ввода.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *