Несколько макетов с одной таблицей стилей

Итак, я думаю, что у меня либо отсутствует что-то очень очевидное, но и настроение для неприятного падения, или это так очевидно, что никто не говорит об этом.Несколько макетов с одной таблицей стилей

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

Пример: у домашней страницы будет правая боковая панель; другая страница будет полной ширины; и у другого, возможно, будет три столбца.

Вот и все. Я создаю несколько div с различными размерами, которые бы соответствовали различным форматам.

Т.е. #rightSide;#leftSide;#fullWidth;#middleContent.

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

Итак, я создал индексную страницу, и она отлично работала. Это была ширина 3/4 + rightSide. Теперь я создаю полную ширину ... и все равно кажется прекрасным.

Однако все исследования, которые я делаю в отношении нескольких макетов на css, настаивают на том, что я использую разные таблицы стилей даже для небольших изменений макета, таких как двойные столбцы для полной ширины. Я видел нулевую ссылку на использование CSS таким образом, но, возможно, я использую неправильные ключевые слова. Создание 3 или 4 таблиц стилей для сайта с 6-8 страницами кажется немного чрезмерным.

Так что мне не хватает?

источник

2013-07-20 Smokva

Мы то, что называется форматирование и абзацы, что вещь убивает мои глаза –

Я попытался с помощью этого и он отскочил меня из коробки один раз, и заставил меня представить частично заполненный комментарий в другой раз. Итак ... Я немного напуган, чтобы использовать его. :) Но я попробую еще раз. – Smokva

Редактировал вопрос –

Просто тег стиля в верхней части страницы, которые вы хотите иметь специальные функции на потом положить все ваши особенности стиля там

Вы можете использовать п-селекторы дочерних элементов:

div.class:nth-child(1) { specific style for first}

источник

2013-07-20 07:32:14

Ummm .. Я пытаюсь понять, что вы имеете в виду, поэтому я искал путеводитель идиота. :). «Специальные функции» относятся к различным размерам div. Вы имеете в виду указать класс? Если я уже создал div (у меня должно было быть 3 в любом случае), в чем преимущество этого? – Smokva

Да, просто добавьте класс, а затем в тег стиля укажите конкретные вещи. –

Но мне все же нужно создать три div, которые будут иметь уникальное имя. Я не могу повторно использовать один div и делить его на три. (Могу ли я?) :) Но я вижу ценность повторного использования некоторых из них. Так хорошо. Но как насчет дополнительного? Будут ли какие-нибудь сюрпризы? Будет ли оно просто исчезать в фоновом режиме? По сути, вы говорите: «Да, вы можете это сделать, но сделать это более эффективно?» – Smokva

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

.menu{color:red} 
.blogpage .menu {color:green}

и так далее для каждой страницы

источник

2013-07-20 07:55:22 Hushme

Форматирование цветов/шрифтов/и т. Д. - это не моя проблема. Я согласен, что это прямолинейно. Это факт, что я создаю отдельные столбцы/разделители внутри тела макета, чтобы организовать контент, который меня интересует. Одна страница будет иметь два расположения столбцов, еще три ... поэтому у меня будут перекрывающиеся div, хотя не все из них будут использоваться одновременно. – Smokva

Вы можете включать таблицы стилей на каждой странице в обычном режиме, но затем перезаписать стиль «на странице» отелях:

Главная страница

<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
<style> 
/* Custome style for home page */ 
#rightSide { 
    text-align: right; 
} 
</style> 
</head>

Второй страница

<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
<style> 
/* Custome style for second page */ 
#leftSide { 
    text-align: left; 
} 
</style> 
</head>

EDITED

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

HTML

<div id="homePage"> 
    <div class="mainDiv"> 
    </div> 
    <div id="rightSide"> 
    </div> 
</div>

CSS

#homePage .mainDiv { 
    // style this home page only 
} 

#secondPage .mainDiv { 
    // style this for second page 
} 
#homePage #rightSide { 
    // style this home page only 
} 

#secondPage #rightSide { 
    // style this for second page 
}

источник

2013-07-20 08:24:32 Vector

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

Вы правильно поняли. Я думал, что вам нужна одна таблица стилей, чтобы ограничить серверные звонки, чтобы поддерживать оптимальную производительность. В этом случае для удобства обслуживания я бы не использовал внутренний стиль. См. Раздел «Изменить». – Vector

Не обращайте внимания = это вышло беспорядок. Я не могу сделать чертовски новую линию. Я выясню другой путь. – Smokva

Несколько макетов с одной таблицей стилей

ответ

Смежные вопросы