? еще раз о написании CSS
В таблице стилей (CSS) основная конструкция такая:
Сперва определяется элемент, которому применяется стиль. Затем открывается фигурная скобка { после которой перечисляются стили, разделенные точкой с запятой ; и фигурная скобка закрывается }.
Это может выглядеть так:
body { список стилей; }
или для нескольких элементов, использующих одинаковые стили:
p, div, span { список стилей; }
Синтаксис стилей такой:
имя-атрибута-стиля: значение;
?ногда значений может быть несколько, например для атрибута border:
border: 1px solid red;
При использовании классов между названием элемента и именем его класса ставится точка. Выглядит это так:
p.nameofclass { список стилей; }
Такое написание предполагает, что в HTML есть элемент "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".
Несколько больше о правилах написания CSS здесь: "Основные css свойства с примерами".
эээ… здесь кто этого не знает? :/
2006-02-12 at 2:22 pm
ну а вдруг кто не знал :)
2006-02-13 at 12:02 pm
Двум, высказавшимся ранее:
А Вы написали это в надежде, что незнавшие это Вам ответят?
На подобном портале должно быть все, от А до Я!
2006-02-15 at 11:59 am
На этом сайте действительно много хороших статей, но это… Колумб отдыхает…
Если уж писать про селекторы, то надо было рассказать про (*;+;> и т.д.) и их поддержку в современных браузерах.
2006-02-15 at 1:39 pm
спасибо, не все сразу.
если вам что-то известно, это совершенно не значит, что это же знают все.
поверьте, круг посетителей этого сайта не ограничивается профессионалами.
некоторые примеры сложны для новичков, некоторые статьи примитивны для знающих тему. все это вполне соответствует общей тематической направленности сайта. воспринимайте его как он есть, пожалуйста.
2006-02-15 at 2:10 pm
Согласен с возмущениями предыдущих ораторов. Нельзя мешать две различные аудитории: новичков с профессионалами. Новичкам не будет понятно то, что интересно для профессионалам, а профессионалам будет не интересно то, что понятно новичкам. Для новичков есть официальная документация, есть переводы, есть примеры – этого в интернете как грязи. Публикуя здесь подобные статьи — Вы делаете ваш ресурс менее привлекательным для профессионалов.
2006-02-16 at 3:10 pm
Ничего нового из статьи я не вынес, но не разделяю возмущения остальных.
Во-первых, если мне неинтересна статья, я её просто пропускаю, я ещё не видел сайта, где мне были бы интересны все статьи. Причём, я говорю о сайтах самой разной направленности.
Во-вторых, хочу сказать спасибо за статью, я поместил её в закладки, буду давать читать новичкам – наш штат постоянно расширяется.
2006-02-23 at 2:45 pm
Нормальная статья. Правильно, что и для новичков здесь есть. Хоть я это и давно знаю, но моя девушка только-только начинает и эта статья ей уже помогает. Респект! Даешь доступность для всех – и профи, и новичков!
2006-03-03 at 4:22 pm
отличная статья… как раз по моим скромным способностям ))
а вот вы супер кодеры…. не ворчали бы…. все когда-то начинают…… и никто из вас не исключение.!!!!
ах да спасибо .. )
2006-04-26 at 6:49 pm
Полносью согласен с a4igo : , если вы “профи” только не родились с этими знаниями.
2006-05-01 at 10:51 pm
Я вообще подобный блог впервые вижу.
2006-06-27 at 1:02 am
Да вы чё… Отличная статья… ? даже некоторые тонкости (ранее не докнца мне понятные) я наконецта уточнил. Пасяб.
2006-07-18 at 12:02 am
Подобных статей в инете пруд – пруди. Если продолжать в том же духе, то уже через месяц найти толковый материал будет проблематично.
2006-08-09 at 3:35 pm
Вот блять, знатоки.. Такое впечатление, что весь и-нет слыхом не слыхивал, да даже не предполагал наличие в CSS конструкций, позволяющих фильтровать теги по используемым в них атрибутам (что-то типа td[align="center"]{…}), уже битый час пытаюсь хоть что-то найти, впустую.. сипец..
2006-08-16 at 3:30 am
>> td[align=”center”]{…}
Спецификация CSS2 явно говорит о подобных возможностях, но “осёл” всё равно эти дела не поддерживает. Новые Лиса и Опера вроде как поддерживают, но тоже не всегда точно.
2006-08-16 at 10:52 am
Статья супер! Большое спасибо!
2006-08-29 at 5:10 pm
Я не все комментарии прочитал,а только начало.? я уверен в том что когдато те двое что писали в верху,были очень рады таким статьям.Это действительно написано очень доступно.Многие берутся за перо так сказать а толком обьяснить не могут,в том смысле сто не все так быстро могут улавливать без подробного обьяснения.Я за автора этой статьи.
2007-04-27 at 7:12 am
Спасибо за статью, очень доступно иполезно. Я все не мог врубиться в систему CSS только по вашей стать наконецто понял. Книги не такие доступные во всяком случае которые покупал.
2007-06-15 at 1:09 am
Отличная идея создать раздел “Все для новичков”.
Кто начнет у Вас учиться, проникнется уважением, и будет, при дальнейшем подъеме давать хорошую рекламу. ВЕРНЫЙ ХОД!
2007-07-01 at 8:41 am
Для новичка будет очень полезно но собствернно про * + > можно было черкануть даже для новичков это было бы очень полезно ;)
2008-01-15 at 12:56 am