CSS

Оригинальные формы разметки текста

меню  

      Реклама от Google  


      Реклама от Google  
      Поиск  

      И еще раз о написании CSS  

В таблице стилей (CSS) основная конструкция такая:
Сперва определяется элемент, которому применяется стиль. Затем открывается фигурная скобка { после которой перечисляются стили, разделенные точкой с запятой ; и фигурная скобка закрывается }.

Это может выглядеть так:
body { список стилей; }
или для нескольких элементов, использующих одинаковые стили:
p, div, span { список стилей; }

Синтаксис стилей такой:
имя-атрибута-стиля: значение;
Иногда значений может быть несколько, например для атрибута border:
border: 1px solid red;

При использовании классов между названием элемента и именем его класса ставится точка. Выглядит это так:
p.nameofclass { список стилей; }
Такое написание предполагает, что в HTML есть элемент "p", у него есть атрибут class, значение которого — "nameofclass":
<p class="nameofclass">

Если использовать такой синтаксис:
.nameofclass { список стилей; }
то любой элемент с классом "nameofclass", не только тэг "p" будет использовать эти стили.

Еще есть псевдоклассы, например :hover. Чаще всего используется с элементом "a", так как еще не все браузеры могут применять псевдокласс к другим элементам. Стили псевдокласса hover применяются если над обозначенным элементом провести курсор мышки.
a:hover { color: red; }
Псевдокласс можно использовать в продолжение классу:
a.nameofclass:hover { color: red; }.

Если у элемента есть ID, ему можно определить стили так:
div#id { color: red; font-weight: bold; }
или так:
#id { color: red; font-weight: bold; }
Однако этого лучше избегать, потому что ID должен быть уникальным в коде странице. Описывать стили для каждого элемента неэффективно.

Теперь небольшая хитрость. Если нужно определить стили элементу "li" у которого родительскиv элементом будет "ul", который будет внутри ячейки "td", которая будет внутри "tr", все это будет внутри таблицы "table", для которой родительским элементом будет "body" можно написать:
body table tr td ul li { список стилей; }
элементы в этом случае разделяются пробелами.

Если эти же стили нужно применить и к элементу "p", можно написать так:
body table tr td ul li, p { список стилей; }.

Если написать так:
td.fish li { список стилей; }
стили применятся ко всем элементам "li" которые размещены внутри "td" с атрибутом class="fish".

На верх Печать Добавить в избранное Cделать стартовой

Сайт управляется системой uCoz