Простая вёрстка в HTML + CSS. Урок №11.

* 28-02-2014, 10:49 * A_Protasov * Комментариев: 0

Рейтинг:

Простая вёрстка в HTML + CSS. Урок №11.

На прошлом занятие мы, ознакомились с тем как переносить стили, с HTML в CSS. Сегодня нам необходимо перенести всё остальное. Мы помним, что для тега  <body> нами был создан «селектор тегов», куда мы и поместили его правила, а вот для переноса правил таблиц и колонок мы воспользуемся «селектором классов».

Селектор классов CSS.

Селектор классов - это всего лишь своеобразная метка, для определённых правил каскадных таблиц.  В отличие от селектора тегов, где имя играет непосредственную роль, селектор классов может носить любое название (например:  .vasya), но желательно что бы это имя всё-таки было осмысленным. Основным преимуществом селекторов классов, является то что, единожды созданные правила можно присвоить к любому элементу, на любой странице веб ресурса.

Селектор классов, для тега <table>.

Первым делом я предлагаю, создать селекторы классов для всех тегов <table>, при этом также как и в HTML? мы можем сразу сделать комментарии, ко всем селекторам, чтобы не путаться в дальнейшем. Создать закомментированную строку в CSS  можно следующим образом.  Воспользовавшись редактором Notepad++ выделить необходимую область, и сделав клик правой кнопкой «мышки», выбрать пункт «Закомментировать выделенное».  Второй способ, это ручной ввод , достаточно перед строкой которую необходимо закомментировать поставить косой слеш и звёздочку, а в конце звёздочку и косой слеш и всё готово.

/* Закомментированная строка в CSS */

И так, я предлагаю создать закомментированную строку с надписью «Селекторы таблиц» и уже под ней размещать именно то, что мы указали. Для первой основной таблицы создаём селектор .table и переносим все его правила, те которые находятся в кавычках после атрибута style. Далее нам необходимо дописать правила для фона background: #00FFFF; вот так, и правила для бордюра. Здесь нам необходимо сказать браузеру, что это бордюр, указать его толщину, стиль и цвет border: 1px solid #0000FF; вот таким образом. Атрибут «cellpadding» и «cellspacing», предлагаю оставить, дабы не усложнять обучение и оставить нулевые отметки для таблиц. В общем, с CSS должно получиться вот так:

/* Селекторы таблиц. */
/* Основная таблица. */
.table{
                width: 1024px;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                background: #00FFFF;
                border: 1px solid #0000FF;
}

Теперь нам необходимо присвоить, наш класс для «Основной таблицы»

<!-- Основная таблица -->
<table class="table"  cellpadding="0" cellspacing="0">

Здесь мы видим, как сначала пишется «class» а затем его имя, в данном случае table. Следующим этапом у нас идёт шапка сайта, точнее, её таблица, присваиваем её класс .table1 и переносим правила, всё то же самое и для остальных таблиц, за исключением типа бордюра. То есть вместо solid пишем ridge и увеличиваем толщину на 1px.

border: 2px ridge #0000FF;

То есть у нас должно получиться пять контейнеров правил, для таблиц. После того как всё перенесли у нас исчезнуть, перегородки бордюров, не стоит пугаться, так и должно быть. Мы их вернем впоследствии. Сейчас нам необходимо перенести правила, для ячеек. Отделяем таблицы от ячеек закомментированной строкой «Ячейки таблиц тег td» и вперёд!!! Но мы помним, что хотели вернуть бордюры таблиц, для левой и правой колонки, так вот как только переносим левую колонку, добавляем следующее:

border-right:2px ridge #121AF0;

В данном случае, мы указали браузеру. Отображать бордюр только справа.  Дойдя до правой колонки добавляем:

border-left:2px ridge #121AF0;

Или же можем поместить эти два правила, в ячейку с контентом.  В общем, всего должно получиться, восемь контейнеров правил, для наших ячеек.  Если у вас что-то прошло не так, не расстраивайтесь, в конце урока сделайте клик по кнопки «Смотреть Демо>>» и, сравнив результаты, устраните ошибки.

Практический мы перенесли все стили, кроме  стиля кнопок меню ( button ). Здесь два варианта, или мы создаём класс, для кнопок меню, или же просто пока перенесём правила для селектора тегов.  Я воспользовался пока вторым вариантом, перенёс правила для тега <button> немного изменив ширину width: 163px;  добавил выравнивание содержимого по центру, в таблицу ( table ) меню text-align:center.




razdacha.jpg

Просмотров: 2 755
Последние новости блога
Позиционирование и z-index в CSS. Часть-3.
Всплывающая подсказка. Эффект всплывающей подсказки, с боку изображения, на сегодняшний день очень актуальная тема.  Очень неплохо и солидно, этот трюк смотрится на кино сайтах и интернет
Позиционирование и z-index в CSS. Часть-2.
Накладываем текст на изображение. Если вы разобрались что к чему в предыдущей статье, тогда здесь для вас всё будет значительно проще.  И так нашей целью этого занятия является создать, общий
Позиционирование и z-index в CSS. Часть-1.
Рано или поздно большинство веб мастеров при изучении CSS, сталкиваются с такими свойствами как позиционирование блоков  и z-index, то есть отображение их поверх друг друга. На самом деле это
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru