Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Январь, 2017

Колонки таблицы

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

Поскольку формирование таблицы происходит по строкам, а не по колонкам, то для изменения вида колонок приходится задавать стиль практически для каждой ячейки. В этом случае удобно использовать разные классы — один для ячеек четных колонок, а второй — для нечетных. На рис. 1 показана таблица, которая формируется именно таким способом.

Рис. 1. Таблица с выделенными колонками

Цвет нечетных колонок можно задать путем добавления стилевых параметров к селектору TABLE, а для четных колонок введем новый класс, назовем его even. Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1). Остается для ячеек первой колонки добавить к тегу

параметр class=»lc», а для ячеек четных колонок class=»even».

Пример 1. Колонки разного цвета

TABLE {  width: 300;  border: 2px solid black;  background: lightslategray;  color: white } TD, TH {  text-align: center;  padding: 3px } TH {  color: white;  border-bottom: 4px double black } .even {  background: moccasin;  color: black } .lc {  text-align: left;  color: lemonchiffon }                                         

  2004 2005 2006
Рубины 43 51 79
Изумруды 28 34 48
Сапфиры 29 57 36

Чтобы отделить первую строку с заголовком от данных таблицы в примере используется двойная линия. Она получается за счет добавления параметра border-bottom к селектору TH.

Рассмотрим еще один способ формирования вида колонок — не только за счет разного цвета фона, но и применением линий между колонками (рис. 2).

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

Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even, а для первой колонки — класс lc. Чтобы установить линию между колонками, к селектору TD добавляем параметр border-left, он создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none, этот атрибут уберет лишние границы (пример 2).

Пример 2. Линии между колонками

TABLE {  width: 300px;  border: 1px solid black } TD, TH {  text-align: center;  padding: 3px } TH {  color: white;  background: goldenrod } TD {  border-left: 1px dashed black } .even {  background: gainsboro } .lc {  text-align: left;  border: none }                                         

  2004 2005 2006
Рубины 43 51 79
Изумруды 28 34 48
Сапфиры 29 57 36

К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги и призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.

Posted by admin | Under CSS Вторник Мар 24, 2015

 Конечный результат шрифта любого размера ВМЕСТО фонт указываем в  STYLE в примере прямо в диве...
- font size 1
- font size: 0.63em
- font size 2
- font size: 0.82em
- font size 3
- font size: 1.0em
- font size 4
- font size: 1.13em
- font size 5
- font size: 1.5em
- font size 6
- font size: 2em
- font size 7
- font size: 3em

Как известно, основной вид работы с готовым сайтом информативного вида – это добавление новых текстов, статей, новостей и прочего контента текстового характера. Но как сделать текст действительно привлекательным читателю и уместным для дизайна вашего сайта? Именно для такой задачи и существуют теги форматирования текстов, которых существует сотни, основные из них вам удастся запомнить, а другие никогда и не пригодятся.

Виды тегов

Теги

  позволяют создать на вашем сайте заголовок, который будет размещаться непосредственно внутри этой рамки без дополнительного пробела. Каждый заголовок будет начинаться с новой строки, а также иметь свой собственный шрифт, который по умолчанию стоит жирным и имеет свою высоту (от первого до шестого значения шрифты идут на уменьшение). Зачастую эти теги подразумевают и выравнивание текста относительно горизонтального  расположения, для которого предназначается специальный тег выравнивания align с возможными значениями .

Теги переноса строки и разделения на абзацы

Существует специальный тег
, который используется для формирования абзаца, он принудительно переносит текст на новую строку и делает отступ. Разделять каждый абзац надо вспомогательными тегами

и

, которые ставятся вначале и в конце абзаца. Выравнивание текста происходит тегом align.

Выделение курсивом

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

Параметры текста, цвет

Теги – это основные  индикаторы параметров текста, которые имеют несколько значений, среди которых: size (размер) и color (цвет). К определению цвета надо добавлять его название, чтобы преобразить текст в нужный цвет, например: color=»blue».

Cоздание пораграфа (абзац) тег —

.

БЫЧОК.

Идет бычок, качается,

Вздыхает на ходу:

-Ох, доска кончается,

Сейчас я упаду!

Cтихи Агния Бартою

Наберите или скопируйте HTML код в блокнот, или другой редактор, посмотрите результат.

Теги форматирования.

и , задают тексту курсивный шрифт.

и , задают тексту жирный шрифт.

, подчеркивает текст.

делает перечеркнутым текст.

 этот тег выводит нижний индекс, например: Н2O

выводит верхний индекс, X2

Выравнивание текста.

У тега 

есть необязательный атрибут align с значениями center, left, right и justify.

выравнивание текста по центру

выравнивание текста по левому краю

выравнивание текста по правому краю

выравнивание текста абзаца с обоих сторон. выравнивание текста абзаца с обоих сторон.выравнивание текста абзаца с обоих сторон.выравнивание текста абзаца с обоих сторон. 

Создание заголовка

;……..

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

текст

,

текст

и т.д.

текст 

. Заголовок, окружённый тегами

текст

, является заголовком 1-го уровня, имеет самое крупное начертание. Соответственно

текст

— это заголовок 6-го уровня и будет иметь самое мелкое начертание.

Тег имеет атрибут align, значением этого атрибута Вы уже знакомы; «center»; «left»; «right»

Пример:

Заголовки

…….

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня
Заголовок шестого уровня

Набираем код HTML получаем результат:

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня
Заголовок шестого уровня

Горизонтальная линия в HTML.

Разделение текста можно при помощи тега — задает горизонтальную линию, и имеет атрибуты:
size=» » — определяет толщину в пикселях, и записывается  
width=» » —
определяет длину линии в пикселях и процентах, записывается