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

Leave a Comment / Html / By /

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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

Идентификатор (называемый также «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; }

селекторы

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

❮ Пред. Следующий ❯

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

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

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

В HTML 4.01 атрибут class нельзя использовать со следующими элементами: <голова>,, <база>, <базовый шрифт>, <параметр>, <стиль>, <мета>, <скрипт> и <название>.

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

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

 

  <голова>
    Название документа
    <стиль>
      .красный {
        красный цвет;
      }
      .апельсин {
        оранжевый цвет;
      }
    
  
  <тело>
     
Пример атрибута класса 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 для использования в книге образцов шрифтов. размещение печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона «De Finibus Bonorum et Malorum» для использования в книге образцов шрифтов.

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

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

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

 

  <голова>
    <div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";}
else{var rtbBlockID="R-A-744004-5";}
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");}
g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script>Название документа
    <стиль>
      .заглавие {
        цвет фона: #202131;
        цвет: #дддддд;
        отступ: 15px 25px;
      }
      .текст-справа {
        выравнивание текста: вправо;
      }
    
    <тело>
       
Пример нескольких классов
 
      <р>
        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 с элементами

и

:

 

  <голова>
    Название документа
    <стиль>
      .grey-текст {
        цвет: #808080;
      }
    
    <тело>
       
Пример атрибута класса 
 
       
Заголовок
 
      

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

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

Узнайте, как использовать атрибут класса HTML

TL;DR — атрибут класса HTML определяет имя класса. Вы можете использовать его для выбора и доступа к элементам HTML для различных задач, выполняемых с использованием CSS и JavaScript.

Содержание
  • 1. Определение класса HTML
  • 2. Использование классов HTML для CSS
  • 2.1. Наиболее распространенные свойства для классов стилей
  • 3. Работа с классами в JavaScript
  • 4. Класс HTML: полезные советы

Определение класса HTML

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

Синтаксис <тег>контент
Пример
Мойте руки!

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

Синтаксис <тег>контент
Пример
Мойте руки!

Примечание: помните, что классы HTML чувствительны к регистру .

Использование классов HTML для CSS

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

Пример 

 <стиль>
  .зеленый {
    цвет: зеленый;
    поле слева: 20px;
  }

Попробуйте живое обучение на Udacity

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

Попробуйте живое обучение на Udacity

Чтобы указать цвет фона , вы можете использовать background-color:

Пример

Попробуйте в прямом эфире Узнайте на Udacity

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

Чтобы выровнять элемент, используйте text-align. Для этого свойства есть три возможных значения: слева , по центру или справа :

Пример 

 <стиль>
  .align-c {
      выравнивание текста: по центру;
  }

Попробуйте вживую. Учитесь на Udacity

Свойство padding создает пространство между содержимым элемента и его границей :

Пример

Попробуйте вживую. Учитесь на Udacity

Работа с классами в JavaScript

Если у вас есть какие-то знания в JavaScript, вы можете узнать свойство className. Разработчики используют его, чтобы установить или вернуть имя класса для элемента HTML.

Чтобы получить доступ к элементам, для которых указано определенное имя класса HTML, необходимо использовать метод document.getElementsByClassName() в JavaScript:

Пример 

 var ].имя_класса;
var sampleElem2 = document.getElementById("sampleDiv").имя_класса;

Попробуйте вживую. Учитесь на Udacity

Класс HTML: полезные советы

  • Некоторые новички путаются при использовании HTML class и id атрибуты, так как оба могут использоваться для доступа к элементам. Помните, что элемент может иметь только один идентификатор , который должен быть уникальным . Классы могут быть применены к множественным элементам, а также к объединенным элементам.

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

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