Практическое руководство 'схемы' CSS

Question

Практическое руководство 'схемы' CSS

Вот еще один способ реализации:

<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;coord=52.70967533219885, -8.020019531250002&amp;q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />

Вы должны изменить следующее:

ширина = (ширина фрейма)
высота = (высота фрейма)
координировать = (кординаты адреса)
q = (адрес) [116 ]
z = (уровень масштабирования)

Надеюсь, это поможет

8

styling css

задан warren 8 October 2008 в 14:43

8 ответов

Думайте о CSS как о создании 'инструментария', к которому может относиться HTML. Следующие правила помогут:

Сделать class однозначные имена. В большинстве случаев это означает снабжать префиксом их predicatable способом. Например, а не left, используйте что-то как header_links_object2_left.
Использовать id вместо class только если Вы знаете, что только когда-либо будет один из объекта на странице. Снова, сделайте id однозначный.
Рассмотрите побочные эффекты. Правила как margin и padding, float и clear, и так далее может все иметь неожиданные последствия на других элементах.
Если Ваша таблица стилей должна использоваться мои несколько кодеров HTML, считать запись им маленьким, четким руководством по тому, как записать HTML для соответствия схеме. Сохраните это простым, или Вы будете, перенес их.

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

3

ответ дан 5 December 2019 в 08:26

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

Разделите свой CSS на несколько файлов. Например: имейте один файл для расположения, один для текста, один для стилей сброса и т.д.
Прокомментируйте свой код CSS.
Почему бы не добавить оглавление?
Попытайтесь использовать платформу CSS как 960.gs для получения запущенного.

Это - все вниз к персональному вкусу действительно. Но вот несколько ссылок, которые Вы могли бы найти полезным:

4

ответ дан 5 December 2019 в 08:26

Помещение всех Ваших объявлений CSS примерно в том же порядке, поскольку они приземлятся в иерархии документа, обычно является хорошей вещью. Это делает довольно легким для будущих читателей видеть, какие атрибуты будут наследованы, так как те классы будут выше в файле.

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

2

ответ дан 5 December 2019 в 08:26

Лучший организационный совет, который я когда-либо получал, прибыл из презентации в Событии Независимо.

Принятие, которое Вы сохраняете всем в единственной таблице стилей, существует в основном пять частей к ней:

Правила сброса (может быть столь же простым как * {margin: 0; padding: 0} правило, сброс Eric Meyer или сброс YUI)
Моделирование основного элемента; это - материал как базовая типография для абзацев, располагающих с интервалами для списков, и т.д.
Универсальные классы; этот раздел для меня обычно содержит вещи как .error, .left (Я являюсь только на 80% семантическим), и т.д.
Универсальное расположение/Идентификаторы; #content, #header, или независимо от того, что Вы сократили свою страницу в.
Определенные для страницы правила; если необходимо изменить существующий стиль только для один или несколько страниц, засунуть уникальный идентификатор высоко (тег основного текста обычно хорош), и встряхните переопределения в конце документа

Я не рекомендую использовать платформу CSS, если Вы не должны копировать что-то в HTML быстро. Они слишком чрезмерно увеличены в размере, и я никогда не встречал тот, семантика которого имела смысл мне; это - намного лучшая практика для создания собственной "платформы", поскольку Вы выясняете, какой код совместно используется Вашими проектами со временем.

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

2

ответ дан 5 December 2019 в 08:26

Строка отговорки года: это зависит.

Сколько необходимо разрабатывать? Необходимо ли изменить аспекты alomost каждый элемент, или это только некоторые?

Моим любимым местом для движения для получения информации как это является CSS Zen Garden & A List Apart .

1

ответ дан 5 December 2019 в 08:26

Еще несколько подсказок для хранения организованного:

В каждом объявлении примите порядок атрибутов, которых Вы придерживаетесь. Например, я обычно перечисляю поля, дополнение, высоту, ширину, границу, шрифты, display/float/other, в том порядке, допуская более легкую удобочитаемость в моей следующей подсказке
Запишите, что Ваш CSS как Вы был бы любой другой код: отступ! Легко просканировать файл CSS для элементов высокого уровня и затем выполнить развертку вместо того, чтобы просто идти исходным порядком Вашего HTML.
Семантический HTML с хорошими именами классов может помочь много с запоминанием, к чему стили относятся который элементы.

1

ответ дан 5 December 2019 в 08:26

Существует два мира:

The human editor perspective: Где CSS, наиболее легко понимают, когда он имеет четкую структуру, хорошее форматирование, подробные имена, структурированные в расположение, цвет и набор...
The consumer perspective: Посетитель является самым счастливым, если Ваш сайт загружается быстро, если это выглядит прекрасным в его браузере, таким образом, CSS должна быть маленькой, в одном файле (для сохранения дальнейших соединений) и содержать взломы CSS для поддержки всех браузеров.

Я рекомендую Вам запуститься с платформы CSS:

Проект, если Вам нравятся меньшие вещи
или YAML для большого и функционального

Существует также список Платформ CSS...

И затем принесите его в форме (для браузера) с Оптимизатором CSS (p.e. Форма &Opti CSS.)

Можно измерить Результаты (unpotimized <-> оптимизированный) с YSlow.

1

ответ дан 5 December 2019 в 08:26

Другие вопросы по тегам:

styling css

Похожие вопросы:

score 6 · Accepted Answer

Я - большой поклонник именования моих классов CSS их содержанием, или типы контента, например, <ул.>, содержащая навигационные "вкладки", имели бы класс = "вкладки". Заголовок, содержащий дату, мог быть классом =, "дата" или заказанный список, содержащий лучшие 10 списков, могли иметь класс = "диаграмма". Точно так же для идентификаторов, можно было дать идентификатор нижнего колонтитула страницы = "нижний колонтитул" или логотип идентификатора веб-сайта = "mainLogo". Я нахожу, что это не только делает классы легкими помнить, но также и поощряет надлежащее расположение каскадом CSS. Вещи как ol.chart {насыщенность шрифта: полужирный; цвет: синий;} #footer ol.chart {цвет: зеленый;} довольно читаемы, и принимает во внимание, как селекторы CSS набирают вес, будучи более конкретными.

Надлежащее расположение с отступом является также большой справкой. Ваш CSS, вероятно, вырастет довольно много, если Вы не захотите осуществить рефакторинг свои шаблоны HTML каждый раз, Вы добавляете новый раздел к своему сайту или хотите опубликовать новый тип содержания. Однако трудно Вы судите Вас, должны будут неизбежно добавить несколько новых правил (или исключения), что Вы не ожидали в своей исходной схеме. Indeting позволит Вам сканировать большой намного более быстрый файл CSS. Мое персональное предпочтение состоит в том, чтобы сделать отступ о том, как конкретный и/или вложил селектор, что-то вроде этого:

    ul.tabs {
    list-style-type: none;
    }
        ul.tabs li {
        float: left;
        }
            ul.tabs li img {
            border: none;
            }

Тем путем "родитель" является всегда самым далеким налево и таким образом, текст разбит в блоки родительскими контейнерами. Мне также нравится разделять таблицу стилей на несколько разделов; сначала прибывает все селекторы для элементов HTML. Я считаю их столь универсальными, что они должны быть на первом месте действительно. Здесь я поместил "тело {размер шрифта: 77%;}" и "{цвет: #FFCC00;}" и т.д. После этого я поместил бы селекторы для основных частей платформы страницы, например, "ul#mainMenu {плавание: оставленный;}" и "div#footer {высота: 4em;}". Затем на общих классах объектов, "td.price {текст - выравниваются:правильно;}", наконец сопровождаемый дополнительными небольшими битами как ".clear {ясный: оба;}". Теперь это, как мне нравится делать это - я уверен, что существуют лучшие пути, но это работает на меня.

Наконец, несколько подсказок:

Лучше всего используйте каскады и не "сверхклассифицируйте" материал. При предоставлении <ул.> класса = "textNav" затем, можно получить доступ к <литий> s и их дети, не имея необходимость добавлять любые дополнительные присвоения класса. литий ul.textNav a:hover {}
Не бойтесь использовать несколько классов на отдельном объекте. Это совершенно допустимо и очень полезно. Вы затем имеете контроль над CSS для групп объектов больше чем от одной оси. Также давая объекту идентификатор добавляет все же третью ось. Например:
```
<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 15em; 
}

div.narrow {
width: 8em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>
```
При предоставлении класса документу <тело> тег (или идентификатор с тех пор должен только когда-либо быть тот...) включает некоторые изящные переопределения для отдельных страниц, как hilighting пункт меню для страницы, Вы в настоящее время включены или избавляетесь от той избыточной второй формы входа в систему на странице входа в систему, все использование CSS только. "body.signIn div#mainMenu form.signIn {дисплей:ничего;}"

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