Сегодня на смену стандартным юкозовским таблицам пользователи пришли к css блокам.
Минусы таблиц:
1. Сайт с таблицами больше загружается чем сайт, который построен на CSS блоках;
2. Html код таблиц очень громоздкий в отличии от css;
3. Функциональность таблиц очень маленькая.
Рассмотрим код таблиц и CSS.
Табличный блок:
Код:
Code <table style="border: 3px solid #aaaaaa; width:200px; height:200px; border-radius: 20px; background: #dbdbdb; opacity:0.7;"><tbody><tr><td>Блок с помощью таблицы<br></td></tr></tbody></table>
И блок CSS
Блок с помощью CSS
Код:
Code <div class="block_css">Блок с помощью CSS</div>
А CSS код представляет собой:
Code .block_css { border: 3px solid #aaaaaa; width:200px; height:200px; border-radius: 20px; background: #dbdbdb; opacity:0.7; }
Как видно из примера html код таблиц больше чем в css.
Использование CSS стилей
Но как же начать пользоваться css стилями?
И так поехали!
Id – уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id. В HTML записывается, так:
Code <div id=”test”>Содержание блока</div>
В CSS, стили для id, записываются так:
Class – определитель стиля объекта, или группы объектов на странице. Его часто применяют для повторяющихся конструкций. В HTML записывается, так:
Code <div class=”test”>Содержание блока</div>
В CSS, стили для class, записываются так:
Code .test {font: 12px Arial;}
Атрибуты css стилей
Атрибуты в CSS заисываются так
Code .test { атрибут1: значение; атрибут2: значение; и так далее}
Ниже основные атрибуты для CSS стилей
background - Фон элемента. Задается одним или двумя цветами (т.е. их смесью) или именем графического файла.
border - Рамка вокруг элемента.
border-radius - Размер скругления краёв у рамки
opacity - Прозрачность(0-прозрачный, 1-непрозрачный, 0.5-наполовину прозрачный)
font-size - Размер шрифта
font-style - Стиль шрифта
font-weight - Толщина шрифта
text-align - Выравнивание текста
text-decoration - Стиль оформления текста
padding - Отступ текста от края
margin - Отступ блока от ближайших элементов
widht - Ширина блока
height - Высота блока
Оформление ссылок
Псевдоклассами называются элементы одного типа, удовлетворяющие определенному критерию. Например, посещенные элементы A (ссылки) составляют псевдокласс visited. В настоящее время поддерживаются только псевдоклассы ссылок. Но и это уже кое-что. С помощью таблицы стилей, где псевдокласс следует отделять двоеточием ( : ), можно изменить оформление активной (active), посещенной (visited), непосещенной (link) ссылки, а также ссылки, на которую наведена мышь (hover).
Например:
Code test:link {text-decoration:none}
test:visited {text-decoration:none}
test:active {text-decoration:none}
test:hover {text-decoration:underline} | 