Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Klassy-v-css

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

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

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

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

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

Имена названий классов могут содержать латинские буквы, целые числа от 0 до 9, а также знаки дефиса (-) и подчеркивания (_). Названия классов могут начинаться только с буквы или подчеркивания. Чтобы присвоить к какому-нибудь тегу определенный класс достаточно к тегу HTML добавить атрибут class=»имя класса». Предлагаю вам немного отвлечься от теории и рассмотреть вот такой вот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Классы в CSS</title>
  <style type="text/css">
   .vertical_menu {
    width: 300px; /* ширина колонки с меню */
   }
   .menu_name {
    font-weight: bold; /* жирный шрифт названия меню */
    font-weight: bold; /* жирный шрифт названия меню */
text-align: center; /* ставим по центру текст в названии */
border-top: 1px #fff4e2 solid; /* стили верхней стороны рамки */
border-left: 1px #fff4e2 solid; /* стили левой стороны рамки */
border-bottom: 3px #fff4e2 solid; /* стили нижней стороны
 рамки */
border-right: 1px #fff4e2 solid; /* стили правой стороны рамки */
padding: 7px; /* размер внутренних отступов */
background-color:#EAEAEA /* цвет фона */
   }
   .menu {
    list-style-type: none; /* убираем маркеры списка */
    border: 1px #66ccff solid; /* стили рамки вокруг списка */
    margin: 4px 0; /* изменяем размеры внешних полей */
    padding: 5px; /* изменяем размеры внутренних отступов */
   }
   a {
    color: #0099cc; /* цвет ссылок на странице */
   }
  </style>
 </head>
 <body>
  <div class="vertical_menu"> <!-- Начало колонки с меню -->
   <div class="menu_name">Меню</div>
   <ul class="menu">
    <li><a href="#">Первый пункт меню</a></li>
    <li><a href="#">Второй пункт меню</a></li>
    <li><a href="#">Третий пункт меню</a></li>
    <li><a href="#">Четвертый пункт меню</a></li>
   </ul>
  </div> <!-- конец колонки с меню -->
 </body>
</html>

Результат должен получиться следующим:

Пример использования классов в CSS

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

Объединение классов

Объединение классов в CSS используется довольно редко, чаще используется объединение какого-нибудь тега и класса. Чтобы применить к тегу несколько классов, достаточно указать названия классов в атрибуте class через пробел. Ну и как всегда небольшой пример для разминки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Классы</title>
  <style type="text/css">
   p {
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   p.abzac { /* Абзац текста с классом abzac */
    color: #f00; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */   
   } 
   .kursiv { font-style: italic; }
   .bold { font-weight: bold; }
   .kursiv.bold { text-decoration: underline; }
  </style>
 </head> 
 <body>
  <p>Это обычный небольшой текст с выравниванием по ширине без
применения классов.</p>
  <p class="abzac">А этот текст с применением класса <span 
class="kursiv">abzac</span>,
 а также применением классов
<span class="bold">bold и kursiv</span> и их <span class="bold 
kursiv">объединением</span></p>
 </body>
</html>

В результате должно получиться следующее:

Объединение классов

В завершении урока скажу одну вещь, которую следует учитывать при объединении классов. Если в разных классах есть одно и тоже свойство, тогда при их объединении будет применено значение свойства того класса, который находится ниже в файле стилей. Чтобы вам было понятнее предлагаю рассмотреть ещё один небольшой пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Объединение классов</title>
  <style type="text/css">  
  p {
    text-align: justify; /* Выравнивание текста по ширине */
   } 
  .bold { font-weight: bold; }
  .blue { color: blue;
background-color:#FEF4E0 }
  .green { color: green; }
  </style>
 </head>
 <body>
  <p class="blue">Текст синего цвета.</p>
  <p class="green blue">Этот текст зеленого цвета, потому 
что класс <span  class="bold">green</span> стоит ниже в коде
 таблицы стилей.</p>
 </body>
</html>

Вы получите вот такой вот результат:

Объединение классов в CSS

В следующем уроке мы рассмотрим ещё один вид селекторов — это идентификаторы, которые также как и классы нашли своё применение в CSS



наверх