Лучшая стратегия для стилизации одного и того же HTML, когда он появляется на нескольких страницах - PullRequest
Новая
       9

Лучшая стратегия для стилизации одного и того же HTML, когда он появляется на нескольких страницах

3 голосов
/ 04 февраля 2009

У меня есть простая таблица HTML с 2 столбцами, содержащими текстовые поля и заголовки для «Имя», «Комментарии» и «Электронная почта».

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

Например, я мог бы показывать форму комментариев с шириной 50% на странице «комментарии», но только с боковой панелью в 20% в некоторых дополнительных местах на сайте.

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

Очевидно, есть много способов его стилизовать. Предположим, у меня уже есть 1 мастер-файл CSS.

1) Поместите процентную ширину в теги input, и тогда внешний div будет равен 100% ширины для любой панели, в которой он содержится. Это не требует конкретной страницы CSS, но мне не нравится идея процентов внутри td теги, плюс я не могу легко изменить высоту textarea.

2) создавать стили для #Name, #Comments и #Email на каждой отдельной странице в качестве дополнительных стилей в <head><style> *

3) стиль, основанный на #Name, #Comments и #Email в css-файле определенной страницы. Являются ли файлы для конкретной страницы хорошими или плохими? Я даже не уверен, что мне нравится стиль, основанный на идентификаторах, потому что они генерируются динамически, и если по какой-то причине они должны были измениться, мне придется обновлять css везде.

4) стиль, основанный на #Name, #Comments и #Email, но квалифицирует их селектором потомков, характерным для каждой страницы. Так что у меня будет .faqPage #Name, когда это появится на странице часто задаваемых вопросов. Очевидно, они идут в моем мастер-файле CSS.

5) создать имена классов для 'emailField , nameField and commentsField` [опции 2,3,4 повторяются для этой опции]

6) создать имена классов для 'shortField , fullWidthField and textInputField` [опции 2,3,4 повторяются для этой опции]

7) вы поняли:)

8) что-то еще

Я просто немного перегружен всеми вариантами. Как мне решить, какой путь лучше? Конкретная цель состоит в том, чтобы иметь возможность стилизовать один и тот же HTML на нескольких страницах (очевидно, в этом и заключается смысл CSS - но это влияет на то, какие опции я могу использовать). 

<div id="pnlSubmitComments">
<table class="fieldTable"> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Name:</label> 
    </td> 
    <td> 
        <input id="Name" name="Name" type="text" value="" /> 
    </td> 
    </tr> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Email:</label> 
    </td> 
    <td> 
        <input id="Email" name="Email" type="text" value="" /> 
    </td> 
    </tr> 
     <tr> 
    <td align="right" valign="top"> 
        <label for="Comments">Questions:</label> 
    </td> 
    <td> 
        <textarea id="Comments" name="Comments"> 
</textarea> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    </td> 
    <td> 
        <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" /> 
    </td> 
    </tr> 
</table> 
</div>
  • PS. Более конкретные имена полей, такие как CommentsName, просто проще поместить Name для удобства чтения.

Ответы [ 3 ]

5 голосов
/ 04 февраля 2009

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

ваш пример без таблиц (выглядит также намного красивее): 

<style type="text/css">
<!--

form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
    font: 100% verdana, arial, sans-serif;
    margin: 0;
    padding: 0;
    min-width: 500px;
    max-width: 600px;
    width: 560px;
}

form fieldset {
    /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    padding: 10px; /* padding in fieldset support spotty in IE */
    margin: 0;
}

form fieldset legend {
    font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
    /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label {
    display: block; /* block float the labels to left column, set a width */
    float: left;
    width: 150px;
    padding: 0;
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right;
}

form input, form textarea {
    /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
    width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of
     label aligns textarea better in IE */
}

textarea {
    overflow: auto;
}

 /* uses class instead of div, more efficient */
form br {
    clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
-->
</style>
<div id="pnlSubmitComments">
    <form>
        <fieldset>
            <label for="Comments">
                Name:
            </label>
            <input id="Name" name="Name" type="text" value="" /><br />
            <label for="Comments">
                Email:
            </label>
            <input id="Email" name="Email" type="text" value="" /><br />
            <label for="Comments">
                Questions:
            </label>
            <textarea id="Comments" name="Comments">
            </textarea><br />
            <label for="spacing"></label>
            <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
        </fieldset>
    </form>
</div>

Теперь к вашему главному вопросу. Я бы сделал это следующим образом:

Я бы использовал идентификаторы разных столбцов макета, в которых я хочу использовать форму. Поэтому, если я использую его в своем основном столбце (), я бы написал CSS соответственно следующим образом: 

#main .pnlSubmitComments form fieldset {
    /*your CSS*/ 
}

и для бокового столбца соответственно 

#side .pnlSubmitComments form fieldset {
    /*your CSS*/
}

Вы можете контролировать каждый элемент, назначая классы следующим образом: 

<input type="text" class="email" name="email" id="email" />

и тогда вы делаете точно так, как описано выше: 

#main .email {
   /*your css for the .email textbox/*
}
3 голосов
/ 04 февраля 2009

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

Например, страница 1 будет иметь следующий HTML: 

<body class="page1">
  <!-- repeated html here -->
  <input />
</body>

А на странице 2 у вас будет: 

<body class="page2">
  <!-- repeated html here -->
  <input />
</body>

В вашем одном файле CSS вы можете настроить таргетинг на входные теги в зависимости от класса элемента body: 

body.page1 input { width: 25%; }
body.page2 input { width: 50%; }

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

Обновление: после перечитывания вашего списка, я вижу, что это более или менее в вашем списке под номером 4. Я думаю, что это хороший вариант, если вы можете использовать его. Я также использую его для таргетинга на разные браузеры, добавив класс, указывающий браузер на теге body.

0 голосов
/ 04 февраля 2009

1) Используйте общий CSS и установите некоторые значения, такие как ширина в коде позади.

2) Создайте несколько CSS-файлов для различных нужд и свяжите правильную CSS-страницу со страницей с помощью кода позади.

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

Нет похожих вопросов

...