Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 8841 сообщений
Cообщения с меткой

css - Самое интересное в блогах

«  Предыдущие 30
chooser

Классы и ID CSS: Что использовать?

Воскресенье, 28 Января 2018 г. 22:03 (ссылка)

 


Классы и ID CSS: Что использовать?


В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.


В CSS мы можем управлять стилями HTML-элементов веб-страницы с помощью ряда селекторов. ID и классы являются двумя наиболее часто используемыми селекторами CSS, с помощью которых можно не только задавать структуру HTML-документа, но и назначать стили.


Сначала рассмотрим, как используются CSS классы и идентификаторы, а затем определим различия между ними, и когда лучше применять каждый из них.


Как используется CSS-селектор ID


Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:



  1. <div id="header">
  2. <font>
  3. <font class="">Это заголовок нашей веб-страницы.
  4. </font>
  5. </font>
  6. </div>


В файле CSS можно применить стили к этому элементу div:



  1. #header { width: 100%; height: 80px; background: blue }


Обратите внимание на использование # (хэша) перед именем идентификатора.


Как используется селектор CSS класса


Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:



  1. <p class="content">
  2. <font>
  3. <font class="">Это наш первый пункт.</font>
  4. </font>
  5. </p>
  6. <p class="content">
  7. <font>
  8. <font>Это наш второй абзац.</font>
  9. </font>
  10. </p>
  11. <p class="content">
  12. <font>
  13. <font>Это наш третий абзац.</font>
  14. </font>
  15. </p>


В файле CSS можно применить стили к этим абзацам следующим образом:



  1. .content { margin: 20px 0; line-height: 24px; font-size: 15px }


Обратите внимание на использование точки перед именем класса.


В чем разница между CSS-классами и ID


Рассмотрим, в чем состоит разница между CSS классами и идентификаторами. В приведенных выше примерах мы использовали селектор ID (#header) для одного элемента, а селектор класса (.content) — для нескольких.


Это потому, что значение идентификатора может быть присвоено только одному элементу HTML, и несколько элементов на одной странице не могут иметь одинаковый ID. Например, на странице может присутствовать только один элемент с идентификатором #header или один элемент с идентификатором #footer. Значение класса может быть присвоено одному или нескольким HTML-элементам. Например, нескольким абзацам с классом .content.


Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:



  1. <div id="menu">
  2. <a class="link">
  3. <font>
  4. <font class="">Ссылка 1 </font>
  5. </font></a>
  6. <a class="link">
  7. <font>
  8. <font class="">Ссылка 2 </font>
  9. </font>
  10. </a>
  11. <a class="link">
  12. <font>
  13. <font class="">Ссылка 3 </font>
  14. </font>
  15. </a>
  16. <a class="link">
  17. <font>
  18. <font class="">Ссылка 4</font>
  19. </font>
  20. </a>
  21. </div>
  22. <div id="content">
  23. <p class="text">
  24. <font>
  25. <font class="">Это наш первый пункт.</font>
  26. </font><
  27. /p>
  28. <p>&nbsp;</p>
  29. <p class="text">
  30. <font>
  31. <font>Это наш второй абзац.</font>
  32. </font>
  33. </p>
  34. <p>&nbsp;</p>
  35. <p class="text">
  36. <font>
  37. <font>Это наш третий абзац.</font>
  38. </font>
  39. </p>
  40. </div>


В приведенном выше HTML коде мы присвоили контейнеру <div> ID (#container), так как у нас на странице есть только один контейнер.


В нем содержатся разделы меню (#menu) и контента (#content). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки <a>, мы присвоили каждой из них CSS класс (.link). Аналогичным образом мы присвоили класс (.text) каждому абзацу в разделе контента.


Назначим стили для этих элементов:



  1. #container { width: 1080px; margin: 0 auto; background: #eee }
  2. #menu { height: 90px; background: #ddd }
  3. .link { color: #000; text-decoration: none }
  4. #content { padding: 20px }
  5. .text { font-size: 15px }


Когда использовать в CSS класс, а когда ID


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


Следует помнить, что HTML-элемент может иметь CSS класс и идентификатор. Например, вам нужно разместить на странице две панели с одним размером и стилями, но в разных местах. В этом случае можно назначить для панелей один класс, чтобы задать их размер и стили, а затем назначить им разные идентификаторы, чтобы задать их позиции:



  1. <div id="box1" class="box">
  2. <font>
  3. <font class="">...</font>
  4. </font>
  5. </div>
  6. <div id="box2" class="box">
  7. <font>
  8. <font>...</font>
  9. </font></div>


Элементам также можно назначить в CSS несколько классов одновременно. Это полезно, когда нужно задать стили группе элементов в пределах элемента определенного типа на странице. Например, предположим, что у вас есть класс .content, который применяется ко всем абзацам. Если вы хотите добавить определенным абзацам рамку, то можно добавить еще один класс. Например, .bordered:



  1. <p class="content">
  2. <font>
  3. <font class="">Этот пункт не имеет границ.</font>
  4. </font>
  5. </p>
  6. <p class="content bordered">
  7. <font>
  8. <font>Этот пункт имеет границы.</font>
  9. </font>
  10. </p>


Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:



  1. .content { margin: 10px; font-size: 15px; color: blue }
  2. .bordered { border: 2px solid #222 }


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


На этом мы завершаем сравнение классов и ID CSS. Мы надеемся, что этот материал окажется полезным для вас.

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
battnentthersma77

Без заголовка

Суббота, 27 Января 2018 г. 08:28 (ссылка)

Конструктор сайтов html css на русском онлайн
подробнее тут - https://prohoster.info/hosting/constructor


Компания PROHOSTER.INFO
Почта:support@prohoster.info

ICQ: 4143254
https://prohoster.info/hosting/constructor

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

«  Предыдущие 30

<css - Самое интересное в блогах

Страницы: 1 ..
.. 15 16 [17]

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda