Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Html класс: Атрибут class | htmlbook.ru

Содержание

Атрибут class | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Описание

Задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.

Синтаксис

class="имя"

Значения

Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo><bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут class</title>
  <style>
    p { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
    } 
    p.cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
    } 
  </style>
 </head> 
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
    Они отличаются высокой световой отдачей, продолжительным сроком службы, 
    малой яркостью светящейся поверхности, близким к естественному спектральным 
    составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p>Для исключения засветки экрана дисплея световыми потоками 
    оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

Классы | htmlbook.ru

Классы применяют, когда необходимо определить стиль для
индивидуального элемента веб-страницы или задать разные стили для
одного тега. При использовании совместно с тегами синтаксис для классов
будет следующий.

Тег.Имя класса { свойство1:
значение; свойство2: значение; … }

Внутри стиля вначале пишется желаемый тег, а затем, через точку
пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется
с определённым классом, к тегу добавляется атрибут (пример 8.1).

Пример 8.1. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   P { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   P.cite { /* Абзац с классом cite */
    color: navy; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
     Они отличаются высокой световой отдачей, продолжительным сроком службы, 
     малой яркостью светящейся поверхности, близким к естественному спектральным 
     составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p>Для исключения засветки экрана дисплея световыми потоками 
     оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

Результат данного примера показан на рис. 8.1.

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому
применен класс с именем cite — отображается синим цветом и с линией слева.

Можно, также, использовать
классы и без указания тега. Синтаксис в этом случае будет следующий.

.Имя класса { свойство1: значение;
свойство2: значение; … }

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8.2. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   .gost {
    color: green; /* Цвет текста */
    font-weight: bold; /* Жирное начертание */
   }
   .term {
    border-bottom: 1px dashed red; /* Подчеркивание под текстом */
   }
  </style>
 </head> 
 <body>
   <p>Согласно <span>ГОСТ 12.1.003-83 ССБТ &quot;Шум. Общие 
      требования безопасности&quot;</span>, шумовой характеристикой рабочих 
      мест при постоянном шуме являются уровни звуковых давлений в децибелах 
      в октавных полосах. Совокупность таких уровней называется 
      <b>предельным спектром</b>, номер которого численно равен 
      уровню звукового давления в октавной полосе со среднегеометрической 
      частотой 1000&nbsp;Гц.
   </p>
 </body>
</html>

Результат применения классов к тегам <span> и <b> показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы:
ячейкам таблицы, ссылкам, абзацам и др.
В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Камни</title>
  <style>
   table.jewel {
    width: 100%; /* Ширина таблицы */
    border: 1px solid #666; /* Рамка вокруг таблицы */
   }
   th {
    background: #009383; /* Цвет фона */
    color: #fff; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   tr.odd {
    background: #ebd3d7; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
   </tr>
   <tr>
    <td>Алмаз</td><td>Белый</td><td>10</td>
   </tr>
   <tr>
    <td>Рубин</td><td>Красный</td><td>9</td>
   </tr>
   <tr>
    <td>Аметист</td><td>Голубой</td><td>7</td>
   </tr>
   <tr>
    <td>Изумруд</td><td>Зеленый</td><td>8</td>
   </tr>
   <tr>
    <td>Сапфир</td><td>Голубой</td><td>9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Облако тегов</title>
  <style type="text/css">
   .level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   A.tag { 
    color: #468be1; /* Цвет ссылок */ 
   }
  </style>
 </head> 
 <body>
  <div> 
   <a href="/term/2">Paint.NET</a> 
   <a href="/term/69">Photoshop</a> 
   <a href="/term/3">цвет</a> 
   <a href="/term/95">фон</a> 
   <a href="/term/11">палитра</a> 
   <a href="/term/43">слои</a> 
   <a href="/term/97">свет</a> 
   <a href="/term/44">панели</a> 
   <a href="/term/16">линия</a> 
   <a href="/term/33">прямоугольник</a> 
   <a href="/term/14">пиксел</a> 
   <a href="/term/27">градиент</a> 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

В стилях также допускается использовать запись вида .layer1.layer2, где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2.

Вопросы для проверки

1. Какое имя класса написано правильно?

  1. 2layer1
  2. 1layer
  3. Яndex
  4. pink-floyd
  5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

<p>Коэффициент использования излучаемого светильниками <span>потока</span>, на расчетной плоскости.</p>

При использовании следующего стиля?

BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }

  1. Зелёный.
  2. Синий.
  3. Жёлтый.
  4. Оранжевый.
  5. Чёрный.

3. Как задать стиль у тега <div>DOOM</div>?

  1. div[iddqd] { color: red; }
  2. div.iddqd { color: red; }
  3. iddqd.div { color: red; }
  4. div#iddqd { color: red; }
  5. div=iddqd { color: red; }

4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

 s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }

  1. s1
  2. s2
  3. s3
  4. s2 s4
  5. s5

Ответы

1. pink-floyd

2. Чёрный.

3. div.iddqd { color: red; }

4. s2 s4

Идентификаторы | htmlbook.ru

Идентификатор (называемый также «ID
селектор») определяет уникальное имя элемента, которое
используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис применения идентификатора следующий.

#Имя идентификатора { свойство1:
значение; свойство2: значение; … }

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами,
встречаться в коде документа только один раз.

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого
слова у тега используется атрибут id, значением
которого выступает имя идентификатора (пример 9.1). Символ решётки при
этом уже не указывается.

Пример 9.1. Использование идентификатора

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */ 
   }
  </style>
 </head> 
 <body> 
  <div>
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>

 </body> 
</html>

В данном примере определяется стиль тега <div> через идентификатор с именем help (рис. 9.1).

Рис. 9.1. Результат применения идентификатора

Как и при использовании классов, идентификаторы можно
применять к конкретному тегу. Синтаксис при этом будет следующий.

Тег#Имя идентификатора { свойство1:
значение; свойство2: значение; … }

Вначале указывается имя тега, затем без пробелов символ решётки и название
идентификатора. В примере 9.2 показано использование идентификатора применительно
к тегу <p>.

Пример 9.2. Идентификатор совместно с тегом

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   P {
    color: green; /* Зеленый цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#opa { 
    color: red; /* Красный цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
   <p>Обычный параграф</p> 
   <p>Параграф необычный</p>
 </body> 
</html>

Результат данного примера показан на рис. 9.2.

Рис. 9.2. Вид текста после применения стиля

В данном примере вводится стиль для тега <p> и для такого же тега, но с указанием идентификатора opa.

Вопросы для проверки

1. В каких ситуациях имена идентификаторов и классов можно называть одинаково?

  1. Никогда, это недопустимо.
  2. В любом случае.
  3. Только, если они применяются к одному элементу.
  4. Только, если они применяются к разным элементам.
  5. Только, если в коде они встречаются один раз.

2. Какое имя идентификатора написано неправильно?

  1. id_1id1
  2. a-a-a-1-1-1
  3. L0g0
  4. bla-bla
  5. кrevedko

3. Какая ошибка содержится в следующем коде?

<div>
<div><a href=»209.html»>Подключение к MySQL через PHP</a></div>
<div><a href=»213.html»>Создание таблиц в phpMyAdmin</a></div>
<div><a href=»211.html»>Структура базы данных</a></div>
</div>

  1. Имя класса написано неверно.
  2. Имена идентификаторов написаны неверно.
  3. Неправильное вложение тегов.
  4. Повторяющиеся идентификаторы.
  5. Разные идентификаторы для однотипных элементов.

4. Как корректно задать стиль для тега <div> с идентификатором loom?

  1. loom { font-size: bold; }
  2. div { font-size: bold; }
  3. .loom { font-size: bold; }
  4. #loom# { font-size: bold; }
  5. #loom { font-size: bold; }

Ответы

1. В любом случае.

2. кrevedko

3. Повторяющиеся идентификаторы.

5. #loom { font-size: bold; }

Псевдоклассы | htmlbook.ru

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

Синтаксис применения псевдоклассов следующий.

Селектор:Псевдокласс { Описание правил стиля }

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует
двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы
к именам идентификаторов или классов (A.menu:hover {color:
green}), а также к контекстным селекторам (.menu A:hover
{background: #fc0}). Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

  • определяющие состояние элементов;
  • имеющие отношение к дереву элементов;
  • указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.

:active

Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.

:link

Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё
не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому
ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован
переход ранее.

Запись A {…} и A:link
{…} по своему результату равноценна, поскольку в браузере даёт один
и тот же эффект, поэтому псевдокласс :link можно
не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля
формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса :focus

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   INPUT:focus { 
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <form action="">
   <p><input type="text" value="Черный текст"></p>
   <p><input type="text" value="Черный текст"></p>
  </form>
 </body>
</html>

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

В данном примере в текстовом поле содержится предварительный текст, он определяется
значением атрибута value тега <input>.
При щелчке по элементу формы происходит получение полем фокуса, и цвет текста
меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового
поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному
чёрному цвету.

Результат будет виден только для тех элементов, которые могут
получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.

:hover

Псевдокласс :hover активизируется, когда курсор
мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет
свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры
можно задать самостоятельно (пример 15.2).

Пример 15.2. Изменение цвета ссылок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   A:link { 
    color: #036; /* Цвет непосещенных ссылок */
   }
   A:visited { 
    color: #606; /* Цвет посещенных ссылок */
   }
   A:hover { 
    color: #f00; /* Цвет ссылок при наведении на них курсора мыши */
   }
   A:active { 
    color: #ff0; /* Цвет активных ссылок */
   }
  </style>
 </head>
 <body>
  <p>
   <a href="1.html">Ссылка 1</a> | 
   <a href="2.html">Ссылка 2</a> | 
   <a href="3.html">Ссылка 3</a></p>
 </body>
</html>

Результат примера показан на рис. 15.2.

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

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

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только
для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении
на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   table { border-spacing: 0; }
   td { padding: 4px; }
   tr:hover {
    background: #fc0; /* Меняем цвет фона строки таблицы */ 
   }
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
    <th></th>
    <th>Пики</th>
    <th>Трефы</th>
    <th>Бубны</th>
    <th>Червы</th>
   </tr>
   <tr> 
    <td>Чебурашка</td>
    <td>5</td><td>2</td><td>4</td><td>2</td>
   </tr>
   <tr> 
    <td>Крокодил Гена</td>
    <td>2</td><td>7</td><td>1</td><td>3</td>
   </tr>
   <tr> 
    <td>Шапокляк</td>
    <td>5</td><td>4</td><td>3</td><td>1</td>
   </tr>
   <tr> 
    <td>Крыса Лариса</td>
    <td>1</td><td>0</td><td>5</td><td>7</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан ниже (рис. 15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Псевдоклассы, имеющие отношение к дереву документа

К этой группе относятся псевдоклассы, которые определяют положение элемента
в дереве документа и применяют к нему стиль в зависимости от его статуса.

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве
элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код
(пример 15.4).

Пример 15.4. Использование псевдокласса :first-child

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style type="text/css">
   B:first-child {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>

  <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
  adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt 
  ut lacreet dolore magna aliguam erat volutpat.</p>

  <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
  consequat</b>.</p>

 </body>
</html>

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса :first-child

В данном примере псевдокласс :first-child добавляется
к селектору B и устанавливает для него красный цвет
текста. Хотя контейнер <b> встречается в первом
абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е.
текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку
родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена
красным цветом.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.

Псевдокласс :first-child удобнее всего использовать
в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных
элементов. Например, в некоторых случаях красную строку для первого абзаца
текста не устанавливают, а для остальных абзацев добавляют отступ первой строки.
С этой целью применяют свойство text-indent с нужным
значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него
отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).

Пример 15.5. Отступы для абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   P {
    text-indent: 1em; /* Отступ первой строки */
   }
   P:first-child {
    text-indent: 0; /* Для первого абзаца отступ убираем */
   }
  </style>
 </head>
 <body>

  <p>Историю эту уже начали забывать, хотя находились горожане, которые 
  время от времени рассказывали ее вновь прибывшим в город посетителям.</p>
  <p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее 
  в действительности событие. И, тем не менее, ни один человек не решался 
  заикнуться о ней с наступлением темноты.</p>
  <p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>
 </body>

</html>

Результат примера показан ниже (рис. 15.5).

Рис. 15.5. Изменение стиля первого абзаца

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

Псевдоклассы, задающие язык текста

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

:lang

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.

Элемент:lang(язык) { … }

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.

Пример 15.6. Вид кавычек в зависимости от языка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>lang</title>
  <style>
   P {
    font-size: 150%; /* Размер текста */ 
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */ 
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ 
   }
   q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */ 
    quotes: "\00AB" "\00BB"; 
   }
  </style>
 </head>
 <body>
  <p>Цитата на французском языке: <q lang="fr">Ce que femme veut, 
  Dieu le veut</q>.</p>
  <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
  <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>

 </body>
</html>

Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.

Рис. 15.6. Разные кавычки для разных языков

Вопросы для проверки

1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.

A { color: blue; background: orange; }
A:hover { background: yellow; color: black; }
A:visited { color: white; }
A:active { color: red; }

Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?

  1. Код CSS не валидный.
  2. К селектору A не добавлен псевдокласс :link.
  3. Псевдокласс :visited стоит после :hover.
  4. Псевдокласс :active стоит после :visited.
  5. Неверное значение свойства color у A:hover.

2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?

  1. :active
  2. :first-child
  3. :focus
  4. :hover
  5. :lang

3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?

  1. К непосещённым ссылкам.
  2. К посещённым ссылкам.
  3. К любым ссылкам при наведении на них курсора мыши.
  4. К посещённым ссылкам при наведении на них курсора мыши.
  5. Ни к одному элементу.

Ответы

1. Псевдокласс :visited стоит после :hover.

2. :first-child

3. Ни к одному элементу.

Атрибут class — классы элемента

Атрибут class задает один или несколько
классов для элемента (под элементом имеется
ввиду тег).

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

Существует также атрибут
id, который подобно атрибуту class
позволяет выбирать элементы на HTML странице.

Разница между атрибутом class и атрибутом
id в том, что class выбирает группу
элементов (даже если он дан одному элементу
— его в последствии можно дать и другому),
а id выбирает уникальный элемент (больше
элемента с таким id не должно быть на странице
сайта, иначе будет конфликт).

Как понять, что давать элементу — класс или
id? Класс дается тем элементам, которые повторяются
на страницах сайта (чтобы по несколько раз
не писать один и тот же CSS код). Даже если
у вас сейчас данный элемент один, но вы чувствуете,
что похожие элементы могут появится в дальнейшем
— давайте этому элементу класс. Если же вы
уверены, что такой элемент уникальный
— то давайте ему id. Хотя в настоящее время
есть тенденция к тому, чтобы всем элементам
давать класс, а id оставить для JavaScript,
но она не является общепринятой.

Элементу можно задать несколько классов,
в этом случае их следует перечислять через пробел.

Названия классов должны быть набраны английскими
буквами, цифрами, без пробелов (пробел отделяет
классы друг от друга, вместо него можно использовать
подчеркивание или дефис). Классы не должны
начинаться с цифры (в HTML5 уже можно, но
не будет работать в старых браузерах).

Имена классам следует давать на английском
языке (а не на русском, просто английскими
буквами!). Имена должны быть осмысленными,
отражать суть класса.

Пример

Давайте всем абзацам с классом test
зададим красный цвет текста:

<p>Абзац с классом test.</p>
<p>Контрольный абзац без класса.</p>

.test {
color: red;
}

:

Пример . Несколько классов для элемента

А здесь давайте первому абзацу зададим несколько
классов — test1 и test2 (запишем
их через пробел). Класс test1 задает
красный цвет
тексту, а класс test2 задает размер
шрифта в 20px. Второму абзацу
дан только класс test1 (этот абзац
станет красным), а третьему абзацу — класс
test2 (этот абзац будет иметь размер
шрифта в 20px). Первый абзац, у которого
два класса, будет иметь одновременно и красный
цвет и размер шрифта в 20px:

<p>Абзац с двумя классами test1 и test2.</p>
<p>Абзац с классом test1.</p>
<p>Абзац с классом test2.</p>
<p>Контрольный абзац без классов.</p>

.test1 {
color: red;
}
.test2 {
font-size: 20px;
}

:

Атрибуты class HTML уроки для начинающих академия


Использование атрибута Class

Атрибут class указывает одно или несколько имен классов для элемента HTML.

Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.

В CSS, чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса:

Пример

Используйте CSS для оформления всех элементов с именем класса «City»:

.city {
    background-color: tomato;
    color: white;
    padding:
10px;
}

<h3
class=»city»>London</h3>
<p>London is the capital of England.</p>

<h3 class=»city»>Paris</h3>
<p>Paris is the capital of France.</p>

<h3
class=»city»>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>

Result:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Совет: Атрибут Class можно использовать для любого элемента HTML.

Примечание: Имя класса чувствительно к регистру!

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.



Использование атрибута Class в JavaScript

JavaScript может получить доступ к элементам с указанным именем класса с помощью getElementsByClassName() method:

Пример

Когда пользователь щелкает по кнопке, скройте все элементы с именем класса
«city»:

<script>
function myFunction() {
  var x = document.getElementsByClassName(«city»);
  for (var i = 0; i < x.length;
i++) {
    x[i].style.display = «none»;
  }
}
</script>


Несколько классов

Элементы HTML могут иметь более одного имени класса, каждое имя класса должно быть разделено пробелами.

Пример

Элементы стиля с именем класса «City», а также элементы стиля с именем класса «Main»:

<h3
class=»city main»>London</h3>
<h3>Paris</h3>
<h3
class=»city»>Tokyo</h3>

В приведенном выше примере первый элемент <h3> принадлежит как классу «City», так и классу «Main».


Тот же класс, другой тег

Различные теги, такие как <h3> и <p>, могут иметь одно и то же имя класса и тем самым использовать один и тот же стиль:

Пример

<h3>Paris</h3>
<p
class=»city»>Paris is the capital of France</p>


Атрибут class

Пример

Использование атрибута class в документе HTML:

h2.intro {
    color: blue;
}

p.important {
    color: green;
}
</style>
</head>
<body>

<h2>Header 1</h2>
<p>A paragraph.</p>
<p>Note that this is an important paragraph. :)</p>

</body>
</html>

Подробнее примеры ниже.


Определение и использование

Атрибут class указывает одно или несколько классов для элемента.

Атрибут class используется в основном для того, чтобы указывать на класс в таблице стилей.
Однако он также может использоваться JavaScript (через HTML DOM) для внесения изменений в элементы HTML с указанным классом.


Поддержка браузера

Атрибут
class Да Да Да Да Да

Различия между HTML 4,01 и HTML5

В HTML5 атрибут class можно использовать для любого элемента HTML (он будет проверяться на любом элементе HTML. Однако, это не обязательно полезно).

В HTML 4,01 атрибут class не может использоваться с:
<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.


Синтаксис

<element>

Значения атрибутов

Значение Описание
classname Задает одно или несколько имен классов для элемента. Чтобы указать несколько классов, разделите имена классов пробелами, например <span>. Это позволяет объединять несколько CSS-классов для одного HTML-элемента.

Правила именования:

  • Должен начинаться с буквы A-Z or a-z
  • Может сопровождаться: буквы (A-Za-z), Цифр (0-9), Дефисы («-«), и подчеркивает («_»)

Другие примеры

Пример

Добавьте несколько классов в один элемент HTML:

h2.intro {
    color: blue;
    text-align: center;
}

.important {
    background-color: yellow;
}
</style>
</head>
<body>

<h2>Header 1</h2>
<p>A paragraph.</p>

</body>
</html>


Похожие страницы

HTML Учебник: HTML Атрибуты

CSS Учебник: CSS Синтаксис

CSS Ссылки: CSS .class Селектор

HTML DOM Reference: HTML DOM getElementsByClassName() Method

HTML DOM Reference: HTML DOM className Свойство

HTML DOM Reference: HTML DOM classList Свойство

HTML DOM Reference: HTML DOM Style Объекта

HTML-классов — Атрибут класса


Атрибут HTML class
используется для указания класса для элемента HTML.

Несколько элементов HTML могут использовать один и тот же класс.


Использование атрибута класса

Атрибут класса часто используется для указания
к имени класса в таблице стилей. Он также может использоваться JavaScript для доступа и
манипулировать элементами с определенным именем класса.

В следующем примере у нас есть три элемента


с атрибутом класса со значением
«город».Все три


элементы будут одинаково стилизованы в соответствии с .city
определение стиля в головном разделе:

Пример

.city {
цвет фона: помидор;
цвет: белый;
граница: сплошной черный цвет 2px;
маржа: 20 пикселей;
отступ: 20 пикселей;
}

Лондон

Лондон — столица Англии.

Париж

Париж — столица Франции.

Токио

Токио — столица Японии.


Попробуй сам »

В следующем примере у нас есть два элемента
с атрибутом класса со значением
«Примечание». Оба
элементы будут иметь одинаковый стиль в соответствии с . примечание .
определение стиля в головном разделе:

Пример

.примечание {
размер шрифта: 120%;
цвет: красный;
}

Мой

важный заголовок

Это какой-то важный текст.


Попробуй сам »

Совет: Атрибут class можно использовать для любого HTML-элемента .

Примечание: Имя класса чувствительно к регистру!

Совет: Вы можете узнать больше о CSS в нашем Руководстве по CSS.



Синтаксис для класса

Для создания класса; напишите символ точки (.), за которым следует
название класса.
Затем определите свойства CSS в фигурных скобках {}:

Пример

Создайте класс с именем «city»:

. Город {
цвет фона: помидор;
цвет: белый;
отступ: 10 пикселей;
}

Лондон

Лондон — столица Англии.

Париж

Париж — столица Франции.

Токио

Токио — столица Японии.


Попробуй сам »


Несколько классов

HTML-элементов могут принадлежать более чем к одному классу.

Чтобы определить несколько классов, разделите имена классов пробелом, например

. Элемент будет оформлен в соответствии со всеми
указанные классы.

В следующем примере первый элемент

принадлежит обоим
класс city
, а также класс main ,
и получит стили CSS от обоих классов:

Пример

Лондон

Париж

Токио

Попробуй сам »


Различные элементы могут иметь один и тот же класс

Различные элементы HTML могут указывать на одно и то же имя класса.

В следующем примере и

, и


указывает на «городской» класс
и будут использовать тот же стиль:

Пример

Париж

Париж — столица Франции

Попробуй сам »


Использование атрибута class в JavaScript

Имя класса также может использоваться JavaScript для выполнения определенных задач для
конкретные элементы.

JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName () :

Пример

Нажмите кнопку, чтобы скрыть все элементы с именем класса
«город»:

Попробуй сам »

Не беспокойтесь, если вы не понимаете код в приведенном выше примере.

Вы узнаете больше о JavaScript в нашей главе HTML JavaScript, или вы можете изучить наши
Учебник по JavaScript.


Краткое содержание главы

  • Атрибут HTML class определяет один или
    другие имена классов для элемента
  • Классы

  • используются CSS и JavaScript для выбора и доступа к определенным
    элементы
  • Атрибут класса можно использовать на любом
    HTML-элемент
  • Имя класса чувствительно к регистру
  • Различные элементы HTML могут указывать на одно и то же имя класса
  • JavaScript может получить доступ к элементам с определенным именем класса с помощью функции getElementsByClassName ()
    метод

Упражнения HTML

HTML — Атрибут id


Используется атрибут HTML id
для указания уникального идентификатора HTML-элемента.

У вас не может быть более одного элемента с одинаковым идентификатором в
HTML-документ.


Использование атрибута id

Атрибут id определяет уникальный идентификатор
для элемента HTML. Значение id
Атрибут должен быть уникальным в HTML-документе.

Атрибут id используется для указания
к определенному объявлению стиля в таблице стилей. Он также используется JavaScript для доступа и
манипулировать элементом с определенным идентификатором.

Синтаксис идентификатора: напишите символ решетки (#), за которым следует имя идентификатора.
Затем определите свойства CSS в фигурных скобках {}.

В следующем примере у нас есть элемент

, который указывает на
имя id
«myHeader». Это


элемент будет оформлен в соответствии с #myHeader
определение стиля в головном разделе:

Пример

#myHeader {
цвет фона: светло-голубой;
цвет: черный;
отступ: 40 пикселей;
выравнивание текста: центр;
}

Мой
Заголовок


Попробуй сам »

Примечание: Имя идентификатора чувствительно к регистру!

Примечание: Имя идентификатора должно содержать хотя бы один
символ, не может начинаться с числа и не должен содержать пробелов (пробелы, табуляции,
и т.п.).


Разница между классом и идентификатором

А
имя класса может использоваться несколькими элементами HTML, в то время как имя идентификатора должно быть только
используется одним элементом HTML
на странице:

Пример

/ * Стиль элемента с идентификатором «myHeader»
* /
#myHeader {
background-color: lightblue;
черный цвет;
набивка:
40px;
выравнивание текста: по центру;
}

/ * Стиль все
элементы с именем класса «city» * /
.город
{
фоновый цвет: помидор;
цвет: белый;
отступ: 10 пикселей;
}

Мой
Города

Лондон

Лондон — столица Англии.

Париж

< / h3>

Париж — столица Франции.

Токио

Токио — столица Японии.

Попробуй сам »



HTML-закладки с идентификаторами и ссылками

Закладки

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

Закладки могут пригодиться, если ваша страница очень длинная.

Чтобы использовать закладку, вы должны сначала создать ее, а затем добавить ссылку
к нему.

Затем, когда ссылка будет нажата, страница прокрутится до места с
закладка.

Пример

Сначала создайте закладку с атрибутом id :

Глава 4

Затем добавьте ссылку на закладку («Перейти к главе 4») на той же странице:

Или добавьте ссылку на закладку («Перейти к главе 4») с другой страницы:

Перейти к главе 4


Использование атрибута id в JavaScript

Атрибут id также может использоваться JavaScript для выполнения
некоторые задачи для этого конкретного элемента.

JavaScript может получить доступ к элементу с определенным идентификатором с помощью метода getElementById () :

Пример

Используйте атрибут id для управления текстом с помощью JavaScript:

Попробуй сам »


Краткое содержание главы

  • Атрибут id используется для указания уникального идентификатора
    для элемента HTML
  • Значение идентификатора
    Атрибут должен быть уникальным в HTML-документе
  • The id
    Атрибут используется CSS и JavaScript для стилизации / выбора определенного элемента
  • Значение идентификатора
    атрибут чувствителен к регистру
  • The id
    атрибут также используется для создания закладок HTML
  • JavaScript может получить доступ к элементу с определенным идентификатором с помощью getElementById ()
    метод

Упражнения HTML

Divs, Spans, Ids и Classes

Divs, Spans, Ids, and Classes

Вернуться на страницу третьего класса »

HTML-теги div и span сами по себе не имеют презентационной ценности.Это означает, что если вы поместите его в свой HTML, они фактически ничего не будут отображать.

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

Класс

и идентификаторы являются атрибутами HTML. Они также используются как перехватчики CSS.

Блочные и встроенные элементы HTML

из Stylin ‘With CSS Чарльз Вайк-Смит:

… Большинство тегов XHTML делятся на две широкие категории по способу отображения на странице: блочные и встроенные. Элементы уровня блока, такие как заголовки от

до

и абзацы

, будут любезно располагаться на странице без разрывов строк. У них даже есть предустановленные поля для создания пространства между ними. Встроенные элементы не имеют таких полей и располагаются бок о бок на странице, переходя к следующей строке только в том случае, если им не хватает места для размещения рядом друг с другом.(стр.18)

Div Tag

Тег div — это HTML-элемент уровня блока. Он используется для разделения или раздела других HTML-тегов на значимые группы.

Прекрасным примером использования тега div является обозначение списка навигации:

  

Диапазон значений

Тег span — это встроенный HTML-элемент, который используется для группировки набора встроенных элементов. Вообще говоря, вы используете span для перехвата текста или группы тегов, которые вы хотите стилизовать по-разному. Однако часто вы можете сделать это более семантически, используя другие элементы, такие как em или strong .

Хороший пример правильного использования диапазона — это заголовок, который вы хотите разделить на две части.

 

Comm 244:

Дизайн для WWW

Идентификационный атрибут

Атрибут id используется для обозначения разделов или частей вашего HTML-документа.

Вы можете использовать один и тот же идентификатор только один раз на странице, поэтому сохраните его для важных основных разделов вашей страницы. Кроме того, селектор id в CSS имеет высокий уровень специфичности и, следовательно, отменяет другие вещи (например, селектор классов).

  

Атрибут класса

Если на странице было несколько фрагментов боковой панели, мы могли бы создать один класс, чтобы мы могли использовать CSS для стилизации каждого фрагмента с помощью одного правила.

 

Заголовок боковой панели

текст боковой панели Lorem ipsum dolor sit amet,
consctetur adipisicing elit.


Дополнительная литература

Вот несколько статей с дополнительной информацией о div, промежутках, идентификаторах и классах.

Вернуться на страницу третьего класса »

CSS Class vs ID: какой использовать

В этом посте мы кратко рассмотрим, как классы и идентификаторы используются в CSS, и постараемся помочь вам лучше понять, как решить, когда использовать класс CSS или id, предоставив несколько простых примеров.

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

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

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

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

со значением атрибута id , заголовок .

Это заголовок нашей веб-страницы.

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

 #header {width: 100%; высота: 80 пикселей; background: blue} 

Обратите внимание на использование # (хэш) перед именем идентификатора при применении правила CSS. Вы можете узнать больше о селекторах идентификаторов на этой странице и на этой странице.

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

Селектор класса используется для выбора одного или группы элементов HTML с одинаковым значением атрибута класса. В приведенном ниже примере вы увидите три элемента абзаца

со значением атрибута класса , содержимое .

Это наш первый абзац.

Это наш второй абзац.

Это наш третий абзац.

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

.content {margin: 20px 0; высота строки: 24 пикселя; font-size: 15px} 

Обратите внимание на использование . (точка) перед значением класса при применении правила CSS. Вы можете узнать больше о селекторах классов на этой странице и на этой странице.

В чем разница между классом CSS и идентификатором

Если вы заметили из приведенных выше примеров, мы использовали селектор идентификатора (#header) для одного элемента, тогда как мы использовали селектор класса (.content) для нескольких элементов. Это связано с тем, что значение идентификатора может быть присвоено только одному элементу HTML, другими словами, несколько элементов не могут иметь одинаковое значение идентификатора на одной странице.Например, на вашей странице может быть только один элемент с идентификатором #header или один элемент с идентификатором #footer. С другой стороны, значение класса может быть присвоено одному или нескольким элементам HTML, обычно одного типа. Например, у вас может быть несколько абзацев с классом .content или несколько ссылок с классом .external .

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

Это наш первый абзац.

Это наш второй абзац.

Это наш третий абзац.

В приведенном выше макете HTML мы начали с контейнера div. Мы присвоили ему идентификатор (#container), потому что на нашей странице только один контейнер. Внутри этого контейнера у нас есть разделы меню (#menu) и содержимого (#content). Как и в случае с контейнером, на нашей странице есть только одно меню и один раздел содержимого. Внутри элемента меню у нас есть четыре ссылки, , поэтому мы присвоили класс (.ссылка) к каждой из этих ссылок. Точно так же мы присвоили класс (.text) каждому абзацу в блоке содержимого.

Если бы мы применили стили к этим элементам, мы бы использовали что-то вроде следующего:

 #container {width: 1080px; маржа: 0 авто; фон: #eee}

#menu {height: 90px; фон: #ddd}
.link {цвет: # 000; text-decoration: none}

#content {padding: 20px}
.text {font-size: 15px} 

Когда использовать класс и идентификатор в CSS

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

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

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

Этот абзац не имеет границ.

У этого абзаца есть рамки.

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

.content {margin: 10px; размер шрифта: 15 пикселей; цвет синий }
.bordered {border: 2px solid # 222} 

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

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

Как использовать классы в CSS для стилизации элемента HTML — Урок для начинающих

Вы ищете способ без проблем стилизовать элементы HTML? Скорее всего, вам придется использовать классы CSS.В этой статье вы узнаете, что такое классы в CSS и как их эффективно использовать.

Что такое класс CSS?

Синтаксис

CSS содержит селектор, и класс именно такой. Это необходимо для стилизации HTML-элементов, включая изменение цвета, шрифта или размера текста.

Если вы хотите использовать класс, используйте точку (.) , за которой следует имя класса в блоке стиля . Затем используйте скобку, называемую блоком объявления , который содержит свойство , чтобы стилизовать элемент, например цвет текста или размер текста.

Давайте возьмем пример. Вот как это выглядит, если вы хотите изменить цвет текста на зеленый:

 <стиль>

.green-text {

цвет: # 008000;

}

 

CSS-классы помогут быстро стилизовать элементы HTML. Более того, вы можете избежать повторения одного и того же кода для каждого элемента HTML, использующего один и тот же стиль. Следовательно, уменьшается количество используемого кода CSS, что делает его более читабельным и легким для отладки.

С другой стороны, вы также можете использовать селектор идентификаторов для стилизации HTML-элементов.Однако он может изменить только один элемент HTML, тогда как селектор класса может стилизовать более одного элемента.

Как использовать класс CSS для стилизации элемента?

Готовы использовать классы CSS? Приведенные ниже примеры помогут вам по-настоящему понять концепцию. Начнем с создания классов с помощью тегов стиля:

 <стиль>

.green-text {

цвет: # 008000;

}



<стиль>

.font-36 {

размер шрифта: 36 пикселей;

}

 

Давайте разберемся и посмотрим, что представляет каждая часть:


  • Пример атрибута HTML-класса

    Это какой-то красный абзац.

    Это какой-то текст.

    Это какой-то желтый абзац.

    Попробуйте сами »

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

    Пример атрибута класса HTML, используемого с CSS: ¶

      
    
      
         Название документа 
        <стиль>
          .заглавие {
            цвет фона: # 1c87c9;
            цвет: #ffffff;
            отступ: 20 пикселей;
          }
        
      
      
        

    Пример атрибута класса

    Заголовок

    Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов.Этот отрывок приписывается неизвестному наборщику 15 века, который, как считается, скремблировал отрывки из книги Цицерона De Finibus Bonorum et Malorum для использования в сборнике образцов шрифта.

    Заголовок

    Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как считается, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как считается, скремблировал отрывки из книги Цицерона De Finibus Bonorum et Malorum для использования в сборнике образцов шрифта.

    Попробуйте сами »

    HTML-элементы также могут иметь несколько имен классов. Каждый из них должен быть разделен пробелом.

    Пример атрибута HTML-класса с несколькими именами классов: ¶

      
    
      
         Название документа 
        <стиль>
          .заглавие {
            цвет фона: # 202131;
            цвет: #dddddd;
            отступ: 15px 25px;
          }
          .text-right {
            выравнивание текста: вправо;
          }
        
        
          

    Пример нескольких классов

    Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как считается, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.

    Лондон

    Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как считается, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.

    Париж

    Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов.Этот отрывок приписывается неизвестному наборщику 15 века, который, как считается, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.

    Токио

    Попробуйте сами »

    Различные теги, такие как

    и

    , могут иметь одно и то же имя класса и один и тот же стиль.

    Пример атрибута HTML-класса с элементами

    и

    : ¶

      
    
      
         Название документа 
        <стиль>
          .gray-text {
            цвет: # 808080;
          }
        
        
          

    Пример атрибута класса

    Заголовок

    Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как считается, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.

    Попробуйте сами »

    Изучите атрибуты класса HTML - полное введение в веб-разработку, версия 2

    Транскрипт урока« Атрибуты класса HTML »

    [00:00:00]
    >> ​​Брайан Холт: Итак классы - это особый тип атрибута, у чего угодно может быть класс. Есть некоторые вещи, есть много вещей, для которых вы не будете использовать классы, но у любого тега может быть класс. Итак, для чего нужны классы, они сами по себе ничего не делают.Итак, если вы дадите чему-то урок, это не обязательно будет делать что-то само по себе.

    [00:00:25] Но это как если бы вы наклеили на это заметку и сказали, что это такая же тема, не так ли? Итак, у меня может быть десять различных типов div на моей странице, и вы делаете это так, как будто это div поста в блоге. А это блок навигации.

    [00:00:40] И это похоже на то, что вы маркируете каждый из них в разных типах div. Верно, потому что тегов не так много, поэтому вы можете использовать разные типы тегов для каждого из них.Так что вам нужно уметь изобрести свою собственную систему маркировки.

    [00:00:53] Это действительно так, вы просто навешиваете здесь ярлыки. Таким образом, CSS работает так, что вы устанавливаете правила для вещей, верно? Итак, вы говорите, что если это div, он окрашен в зеленый цвет. Однако, если у вас большой веб-сайт, например Gmail, у вас буквально тысячи div.

    [00:01:14] Таким образом, вы не можете просто сказать, что все div окрашены в зеленый цвет, потому что вы не хотите, чтобы все было окрашено в зеленый цвет в Gmail.В этом нет никакого смысла. Итак, вы в основном говорите, что это div поста в блоге, и я хочу, чтобы все div поста блога были окрашены в зеленый цвет. Итак, вы говорите, что влияет только на эти типы div.

    [00:01:33] Итак, если вы вернетесь к нашей аналогии с домом, вы не хотите говорить, что каждые два на четыре, которые у меня есть, идут на южную стену, потому что тогда у вас не будет двух на четыре для остальных трех стен, верно? Итак, что вы сделаете, вы отметите некоторые из двух четверок.

    [00:01:47] Мол, это южная стена по двое по четыре, и только те идут по южной стене, а эти могут идти в других местах, да? Вот для чего нужны занятия.Они позволяют помечать вещи так, чтобы на них могли влиять разные вещи, как из CSS, так и из JavaScript.

    [00:02:04]
    >> ​​Брайан Холт: Как вы их называете, в конечном итоге становится важным. Не потому, что на самом деле там был div, это не важно для программ чтения с экрана, это одна вещь, на которую я хотел указать. Разве что классы не используются никем, кроме вас. Так что, если вы дадите им плохую репутацию, единственный человек, которого вы вроде как облажаетесь, - это вы сами.

    [00:02:26] [СМЕЕТ] И твои будущие коллеги и все такое.Поэтому убедитесь, что вы назвали их хорошими вещами, и я дам вам несколько советов через секунду о том, как их назвать.
    >> ​​Брайан Холт: Итак, вы можете видеть здесь, я как бы привел вам пример того, как это может выглядеть, давая хорошие названия вещам.

    [00:02:44] Вот так выглядит этот класс приравнивания к бизнесу. Итак, это div заголовка. Это заголовок-заголовок. Это сообщения в блоге. Это сообщение. Это пост, верно. Обратите внимание, что у меня несколько сообщений, верно. Это имеет смысл, если вы просматриваете блог, ведь у них там несколько постов.

    [00:03:03] Итак, вы бы назвали каждый из них постом, чтобы вы могли стилизовать их одинаково. Вы можете заставить JavaScript воздействовать на них таким же образом. И вы можете видеть, как это выглядит прямо здесь. Так мой блог будет выглядеть так. И я использовал CSS, чтобы они выглядели вот так.

    [00:03:20] Вот почему они смотрят, мы поговорим о том, как это сделать в следующем или двух разделах. Итак, да, причина, по которой я назвал этот пост и этот пост, заключается в том, что я хотел, чтобы у них обоих были эти серые контуры.И если бы я не называл их тем же самым, если бы я называл это как-нибудь иначе,

    [00:03:42]
    >> ​​Брайан Холт: Обратите внимание, он потерял границу, верно? Но как только они оба называются post, у них обоих появляется серая рамка, потому что я создал правила CSS, которые влияют на публикацию.
    >> ​​Брайан Холт: Есть вопросы по классам? Имеет ли это смысл?
    >> ​​Брайан Холт: Круто.
    >> ​​Брайан Холт: Итак, да, у меня есть несколько сообщений на одной странице, и поэтому классы действительно полезны, потому что они очень многоразовые.

    [00:04:25] Итак, если я размещу здесь сообщение, даже если я перейду на другую часть моего веб-сайта, я все равно могу использовать созданный мной класс сообщений.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *