Простая вёрстка в 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.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.