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

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

Буду признателен за любые ссылки или советы из первых рук.

ОТВЕТЫ

Ответ 1

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

CSS также семантический. Попробуйте выразить понятия, а не форматы. Продуманный пример:

Неправильно:

div.red
{
    color: red;
}

в отличие от:

Хорошо:

div.error
{
    color: red;
}

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

Ответ 2

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

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

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

Поместите ссылку на свою страницу в W3C CSS validator (если ваш сайт виден из интернета) и постоянно бейте его так часто.

Сохраняйте все свои стили вне HTML.

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

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

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

Ответ 3

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

<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 {}

Ответ 4

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

Быстрое (неполное) сокращение:

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

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

Взаимодействия могут быть сложными, но существуют математические правила, лежащие в их основе. Более полное обращение см. В главе 3 Эрика Мейера "CSS: окончательное руководство".

Напомним: , если вы установили правило, и оно, похоже, ничего не влияет, вы, вероятно, получили противоречивое правило. Чтобы понять, почему одно правило превосходит другое, узнайте о специфике.

Ответ 5

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

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

Второе предложение A List Apart

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

Ответ 8

Не совсем новичок, но A List Apart - очень интересный блог о CSS и его тонкостях.

Я нахожу W3 School страницы на CSS отлично подходит для справки.

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

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

Я настоятельно рекомендую использовать 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

Ответ 15

Я узнал, что мне нужно знать из Mc Farland Missing Manual (книга Oreilly), и посмотрев на таблицу стилей образца rails ", Это работает очень хорошо, google" example/sample projects/app/repositories" для PHP, ASP.net, независимо от того, что вы используете.

Ответ 16

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

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

* { padding: 0; margin: 0; }

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

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

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

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