Существуют ли какие-либо стандарты CSS, которым я должен следовать при написании моей первой таблицы стилей?

Не совсем материал для новичков, но Список отдельно - очень интересный блог о CSS и его тонкостях.

Я считаю, что страницы на CSS школы W3 отлично подходит для справки.

Это достойный обзор:

http://www.onlinetools.org/articles/cssguides.html

Ошибка, которую новички допускают довольно часто:

CSS тоже семантический. Старайтесь выражать концепции, а не форматы. Надуманный пример:

Неправильный:

div.red
{
    color: red;
}

в отличие от:

Хорошо:

div.error
{
    color: red;
}

CSS должен быть помощником при форматировании концепций, которые вы используете на своем веб-сайте, поэтому они должны быть в нем отражены. Так вы станете более гибкими.

Полное руководство по CSS на сайте westciv.com содержит исчерпывающий объем информации о CSS. Это отличное место для начала погружения.

Помимо замечательных ресурсов, указанных в других ответах, вот несколько советов по структурированию вашей работы с CSS:

Работу выполняйте в следующем порядке ...

1. Изложите семантическую структуру своей страницы в HTML. Убедитесь, что все правильно, без CSS.
   • Создайте базовый макет страницы в CSS - столбцы, заголовки, плавающие поля.
   • Добавьте типографику - шрифты, размеры и цвета.
   • Добавьте графические элементы - фоновые рисунки, логотипы и т. д.

Разместите на своей странице ссылку на Валидатор CSS W3C (если ваш сайт виден из Интернета) и продолжайте нажимать на нее время от времени.

Храните все свои стили вне HTML.

Хорошо иметь IE6 / 7/8, FF2 / 3 и Chrome / Safari. Опера тоже была бы хороша. Продолжайте менять браузер, в котором вы открываете свою страницу во время работы (если вы не разбираетесь в конкретной проблеме браузера :-)).

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

Обновлять: Как сказал Бобби Джек, я не упомянул инструменты отладки. Вы можете использовать Панель инструментов разработчика IE (для IE) или Firebug (для FF) или интегрированные инструменты проверки в Chrome, чтобы проверить, какие правила применяются к определенному элементу, или изменить стиль элемента на лету.

Мой первый совет - всегда использовать только внешние таблицы стилей - старайтесь избегать встроенных стилей или стилей заголовков.

По возможности используйте классы и идентификаторы.

Я поддерживаю предложение для Список отдельно

Несмотря на то, что HTML-справка от WDG не очень красив, а иногда и немного староват, у него есть несколько хороших ссылок.

Quirksmode.org имеет отличную таблицу совместимости css.

Вы уже получили хороший набор ответов на свой вопрос, который вы можете найти здесь полезным.

Используйте Firefox с расширением Firebug. Если у вас нет Firefox, я рекомендую вам установить его, даже если он предназначен только для этого. Firebug позволяет выбрать элемент на странице и показывает примененный CSS. Затем вы можете отредактировать этот CSS с ошибкой огня без перезагрузки страницы. Как только вы будете довольны стилем, вы можете легко скопировать определения из firbug в свой редактор css.

По крайней мере, для меня firebug абсолютно необходим при работе со стилями.

Пара советов по самому CSS. При определении ваших стилей используйте идентификаторы только в том случае, если рассматриваемый элемент уникален. Таким образом, ваши стили можно будет использовать повторно. Используйте иерархические определения, например. #header .navigationElement a{color:red;} и #footer .navigationElement a{color:black;} Таким образом вы можете перемещать свой html-код, и правильный стиль применяется автоматически.

Посмотри на Системы CSS для написания поддерживаемого CSS, Натали Даун из ClearLeft. В ее презентации много замечательных концепций (я рекомендую скачать PDF-файл, потому что ее заметки довольно подробны).

Я думаю, что ее презентация нацелена на разработчиков CSS, работающих на полную ставку, в большей степени, чем на новичков, но даже новички могут многое извлечь из нее.

Вы можете избавить себя от головной боли с помощью понимание специфики. Когда вы устанавливаете правило для чего-либо, если есть конфликтующее правило, специфичность решает, какое правило выигрывает.

Краткое (неполное) изложение:

Правило для всего элемента (например, p {color:green;}) будет отменено:
Правило, зависящее от класса (например, p.sidenote {color: blue;}), которое будет подавлено:
Правило, зависящее от идентификатора (например, p#final {color: red;}), которое будет отменено:
Встроенное объявление (например, <p style = "color: orange;">), которое будет заменено:
Важное правило (вроде p#final {color: inherit !important;})

... все это может быть отменено правилами пользователя.

Взаимодействия могут быть сложными, но в их основе лежат математические правила. Для более полной информации см. Главу 3 книги Эрика Мейера «CSS: The Definitive Guide».

Резюмируем: Если вы устанавливаете правило, и оно ни на что не влияет, вероятно, у вас есть противоречащее правило. Чтобы понять, почему одно правило лучше другого, узнайте о специфичности.

Я просто должен упомянуть css Zen Garden как источник вдохновения.

Если это ваш первый раз, удачи!

Я не уверен, что как новичку вам нужны обширные или исчерпывающие ресурсы. Не торопитесь и делайте все возможное, чтобы сохранить код удобочитаемый. Интервал, интервал, интервал.

Используйте внешние таблицы стилей (кто-то сказал выше) и, как бы неплохо это ни звучало, не добавляйте новые таблицы стилей для разных разделов сайта. Это сделает вашу жизнь намного проще в будущем.

Что ж, если это ваш первый веб-сайт, и вы пытаетесь пойти по пути CSS, вам следует ознакомиться с макетом CSS и блочной моделью CSS. Узнайте, как использовать блочные элементы для создания макета и держитесь подальше от таблиц для макета.

Еще я бы порекомендовал вам использовать FireFox для всей первичной разработки, чтобы ваш сайт работал и выглядел так, как вы хотите, в FF. Затем запускает IE и исправляет все проблемы, которые есть в необычном IE. Если вы сделаете это таким образом, вы получите гораздо более чистый сайт и гораздо более чистый CSS.

Не поддавайтесь желанию переоценить имена классов или идентификаторов. Используйте контекстные селекторы или селекторы-потомки. Это позволит вам легко определять стили для областей вашей страницы, но сэкономить на разумности необходимости управлять и запоминать множество имен. Например:

<ul id = "nav">
   <li class = "navItem"><span class = "itemText">Nav Item</span></li>
   <li class = "navItem"><span class = "itemText">Nav Item</span></li>
</ul>

#nav { }
#nav .navItem { }
#nav .itemText { }

Это излишне сложно, и вы обнаружите, что у вас быстро заканчиваются хорошие семантические описания. Вам будет лучше с чем-то вроде:

<ul id = "nav">
  <li><span>Nav Item</span></li>
  <li><span>Nav Item</span></li>
</ul>

#nav {}
#nav li {}
#nav li span {}

Я узнал то, что мне нужно знать, из «Пропавшего руководства» Мак Фарланда (книга Орейли) и из таблицы стилей приложение для образцов рельсов. Это работает очень хорошо, Google "example / sample projects / app / repositories" для PHP, ASP.net, что бы вы ни использовали.

Если вы используете сценарий сброса - он устранит некоторые причуды между разными браузерами. Это облегчило мне жизнь.

Я видел, как некоторые люди ругаются, просто используя

* { padding: 0; margin: 0; }

Но вы также можете использовать более тщательные реализации - например, в библиотеке YUI ... http://developer.yahoo.com/yui/reset/

Когда дело доходит до тестирования рендеринга вашего сайта, браузер Browsershots.org очень полезен.

Плагин webdev firefox великолепен - CTRL + SHIFT + E позволяет редактировать CSS и видеть изменения на лету. Если вы нажмете CTRL + F, вы также можете навести указатель мыши на элемент, чтобы узнать, что это такое.

Чтобы добавить к сайтам, упомянутым другими людьми - я нашел http://css-discuss.incutio.com полезным. Freenode #css тоже пригодится.

У многих есть отличные предложения. Я хотел бы поддержать то, что сказал весь кодекс.

Я настоятельно рекомендую использовать таблицу стилей reset.css:

*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0}

Либо скопируйте и вставьте, либо просто сохраните тот, к которому я привязан.

Кроме того, ошибка, которую я использовал в первые дни, заключалась в чрезмерном использовании <div id = ""> в сочетании с <div class = "">. Id = "" предполагается использовать только один раз (никогда не используйте два <div id = "content">), тогда как у вас могут быть тысячи class = "" (например, <div class = "box">).

Кроме того, наличие нескольких идентификаторов с одинаковым именем недопустимо для HTML.

Я создаю веб-сайты уже 5 лет и до сих пор многому учусь, время от времени читая это: http://code.google.com/speed/page-speed/docs/rendering.html

Также посетите блог http://www.zeldman.com о CSS. Этот парень - легенда веб-мира.