Есть ли какие-либо стандарты CSS, за которыми я должен следовать при записи моей первой таблицы стилей?
format-dateTime имеет спецификатор [W] для недели, поэтому, если у вас есть доступ к версии или процессору XQuery с поддержкой, который вы можете использовать, например, format-dateTime(xs:dateTime(.), '[Y0001][W01]'), более полным примером является
root/date/format-dateTime(xs:dateTime(.), '[Y0001][W01]')
, который для входного документа
2017-02-13T00:00:00.001+00:00
2019-12-08T23:59:59.001+00:00
выводит 201707 201949
16 ответов
Ошибка, которую новички совершают довольно часто:
CSS является семантическим также. Попытайтесь выразить понятия, не форматы. Изобретенный пример:
Неправильно:
div.red
{
color: red;
}
в противоположность:
Хороший:
div.error
{
color: red;
}
CSS должен быть компаньоном форматирования для понятий, которые Вы используете на своем веб-сайте, таким образом, они должны быть отражены в нем. Вы будете намного более гибкими этот путь.
Хорошо, если это - Ваш первый веб-сайт, и Вы пытаетесь пойти путем CSS затем, необходимо пойти чтение на модели макета CSS и модели фрагмента CSS. Поймите, как использовать элементы блока, чтобы сделать Ваше расположение и избегать таблиц для расположения.
другая вещь, которую я рекомендовал бы, является Вами, используют FireFox для всей основной разработки и заставляют Ваш сайт работать и посмотреть, как Вы хотите это к в И следующие Затем , разжигают IE и решают любые проблемы, которые имеет изворотливый IE. Вы закончите с намного более чистым сайтом и намного более чистым CSS, если Вы сделаете это этот путь.
Вы уже добрались, хороший набор ответов относительно Вашего вопроса, помещенного здесь, является точкой, которую можно найти полезным.
Firefox Использования с расширением Firebug. Если у Вас нет Firefox, я рекомендую установить его, даже если это только для этого. Firebug позволяет Вам выбирать элемент из страницы и показывает Вам, th применил CSS. Затем можно отредактировать эту CSS с ошибкой огня без любых перезагрузок страницы. После того как Вы довольны стилем, можно легко скопировать определения от firbug до редактора CSS.
, По крайней мере, для меня поджигатель является абсолютной необходимостью при работе со стилями.
Несколько подсказок для самой CSS. Когда определение Ваших стилей использует идентификатор, единственный, когда рассматриваемый элемент уникален. Тем путем Ваши стили являются допускающими повторное использование. Используйте иерархические определения, например, #header .navigationElement a{color:red;} и #footer .navigationElement a{color:black;} Тот способ, которым можно переместиться, Вы - HTML-код вокруг, и корректный стиль применяется автоматически.
Моя первая подсказка должна была бы всегда использовать только внешние таблицы стилей - стараются избегать встроенный или стили заголовка.
классы Использования и идентификаторы как можно больше.
я второй предложение для Список А Независимо
, Хотя не очень симпатичный, и иногда немного старый, Справка HTML WDG имеет некоторые хорошие ссылки.
Quirksmode.org имеет замечательную таблицу совместимости CSS.
Можно сохранить себя много головной боли [1 115] специфика понимания . Когда Вы устанавливаете правило для чего-то, если существует конфликтующее правило, , специфика решает, какое правило побеждает .
А быстрое (неполное) краткое изложение:
правило всего элемента (как p {color:green;}) будет превзойдено:
А определенное для класса правило (как p.sidenote {color: blue;}), который будет превзойден:
определенное для идентификатора правило (как p#final {color: red;}), который будет превзойден:
встроенное объявление (как <p style="color: orange;">), который будет превзойден:
важное правило (как p#final {color: inherit !important;})
..., все из которых могут быть превзойдены правилами пользователя.
взаимодействия могут быть сложными, но существуют математические правила, лежащие в основе их. Для более полной обработки см. Главу 3 "CSS Eric Meyer: Полное руководство".
Для резюме: , если Вы устанавливаете правило и это, кажется, ни на что не влияет, Вы, вероятно, получили конфликтующее правило. Для понимания, почему одно правило бьет другой узнайте о специфике.
Сопротивляйтесь желанию чрезмерно определить идентификационные названия или класс. Используйте контекстные или происходящие селекторы. Это позволяет нам, Вы легко определяете стили для областей Вашей страницы, но экономите на исправности необходимости управлять и помнить тонны имен. Например:
<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 {}
Кроме больших ресурсов, на которые указывают в других ответах, вот некоторые подсказки для структурирования способа, которым Вы работаете над CSS:
Делают работу в следующем порядке...
- Размечают семантическую структуру Вашей страницы в HTML. Удостоверьтесь, что это правильно без любого CSS.
- Создают базовый макет страницы в CSS - столбцы, заголовки, пуская в ход поля.
- Добавляют типографию - шрифты, размеры и цвета.
- Добавляют графические элементы - фоновые изображения, логотипы и так далее
Помещенный ссылка на Вашей странице к W3C блок проверки допустимости CSS (если Ваш сайт видим из Интернета), и продолжайте поражать его время от времени.
Сохраняют все Ваши стили за пределами HTML.
хорошо иметь IE6/7/8, FF2/3 и Chrome/Safari. Opera был бы хорош также. Продолжайте изменять браузер, в котором Вы открываете свою страницу при работе (если Вы не роете в конкретную проблему браузера :-)).
Добавляют комментарии, что каждое правило делает и почему. Сохраните dev версию CSS зарегистрированной и после того как Вы сделаны, затем удаляете комментарии и пробелы и сжимаете несколько правил в одно для производства.
Обновление : Как Bobby Jack упомянул, я отсутствовал для упоминания средств отладки. Можно использовать Панель инструментов Разработчика IE (для IE) или Firebug (для FF) или интегрированные инструменты Inspection в Chrome для осмотра, какие правила применяются к конкретному элементу или изменяют стиль элемента на лету.
При использовании сценария сброса - он сгладит некоторые причуды между различными браузерами. Выполнение так сделало мою жизнь легче.
я видел, что некоторые люди клянутся простым использованием
* { 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 удобен также.
я изучил то, на что я должен знать от МГц Недостающее Руководство Farland (книга Oreilly), и уставившись таблица стилей приложения демонстрационных направляющих. Это работает вполне прилично, Google "пример / демонстрационные проекты / приложение / репозитории" для PHP, ASP.net, независимо от того, что Вы используете.
у Полного Руководства CSS по westciv.com есть исчерпывающий объем информации на CSS. Это - великолепное место, чтобы начать погружаться в.
Alot людей имеют некоторые превосходные предложения. Я хотел бы к второму что сказанный codeinthewhole.
я настоятельно рекомендовал бы использовать таблица стилей 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="">. Идентификатор = "", как только предполагается, используется однажды (никогда не имеют два <div id="content"> 's), тогда как у Вас могут быть тысячи класса = "" (как <div class="box">).
И кроме того, наличие больше чем одного идентификатора с тем же именем не допустимый html
Если это - Ваш первый раз, когда удачи!
я не уверен, что как новичок Вам нужны обширные или исчерпывающие ресурсы. Возьмите вещи, замедляют и делают все, что Вы можете для хранения кода читаемым . Интервал, располагая с интервалами, располагая с интервалами.
внешние таблицы стилей Использования (кто-то сказал выше) и столь хороший из идеи, как это звучит теперь, не продолжайте добавлять модернизированные листы для различных разделов сайта. Это сделает Вашу жизнь настолько легче в будущем.
Взгляните на Системы CSS для записи удобного в сопровождении CSS Natalie Downe ClearLeft. Существует много больших понятий в ее презентации (я рекомендую загрузить PDF, потому что ее примечания довольно подробно изложены).
я думаю, что ее презентация нацелена на полностью занятый CSS devs больше, чем новички, но даже новички могли устранить много из него.
Я просто должен упомянуть CSS Zen-Garden как источник вдохновения.
Не точно материал новичка, но Список А Независимо является очень интересным блогом о CSS и его запутанности.
я нахожу страницы Школы W3 на CSS большими для ссылки.