Использование css: Недопустимое название — Викиучебник

Содержание

Использование CSS в HTML | Yocton

Содержание:

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

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

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

Вы также можете использовать таблицы стилей, предоставляемые с веб-сайтов через CDN (Cеть доставки содержимого). Например, Bootstrap:

<head>
 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
</head>

Обычно CDN используется для поддержки фреймворка на своем веб-сайте.

Вы также можете использовать элементы CSS внутри HTML, используя тег <style>:

<head>
    <style type="text/css">
        body {
            background-color: gray;
        }
    </style>
</head>

Более того, на странице можно использовать несколько внутренних таблиц стилей:

<head>
    <style type="text/css">
        body {
            background-color: gray;
        }
    </style>
    <style type="text/css">
        p {
            background-color: blue;
        }
    </style> 
</head>

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

<span>Этот текст будет отображаться красным цветом.</span>

Примечание. Старайтесь избегать этого стиля — смысл CSS заключается в том,
чтобы отделить содержимое от представления.

Можно загрузить несколько таблиц стилей:

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

Обратите внимание, что более более поздние файлы и объявления будут отменять предыдущие. Поэтому, если general.css содержит:

body {
    background-color: red;
}

а specific.css содержит:

body {
    background-color: blue;
}

если используются оба файла, фон документа будет синим.

Благотворительный фонд CSS / Правовые положения и условия использования

Права на интеллектуальную собственность

Содержание этого сайта представляет собой собственную разработку и является конфиденциальным. Оно защищено международными законами об авторском праве и другими правами интеллектуальной собственности. Владельцами этих прав являются сам Фонд «Че Сара Сара», его аффилированные организации или другие лицензиары. Все названия продуктов и компаний и логотипы, отображаемые на этом сайте или здесь упоминаемые, являются товарными знаками, знаками обслуживания или торговыми названиями их соответствующих владельцев, включая нас.

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

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

  2. Мы не несем ответственность за любые потери или ущерб, вызванные распределенной атакой типа «отказ в обслуживании», вирусами или другими технологически вредными материалами, которые могут заразить ваше компьютерное оборудование, компьютерные программы, данные или другие запатентованные материалы из-за использования вами нашего сайта или из-за загрузки любого материала, размещенного на сайте, или на любом связанном с ним сайте.

Меры предосторожности

Фонд «Че Сара Сара» полагает, что информация, содержащаяся на этом сайте, предназначена только лицам, которым разрешено получать данную информацию в соответствии с законодательством их местной юрисдикции («Пользователи»).

Заявление об отказе от ответственности

  1. Настоящим вы подтверждаете, что информация, содержащаяся на этом сайте, считается Фондом «Че Сара Сара» правильной. Утверждения, высказанные на этом сайте, считаются Фондом «Че Сара Сары» разумно обоснованными. Тем не менее, Фонд «Че Сара Сара» не несет ответственность перед пользователем за последствия в случае, если любое лицо полагается на содержание этого сайта для каких-либо целей.

  2. Сайт может содержать типографские ошибки или другие неточности, а также устаревшую информацию. Фонд «Че Сара Сара» не обязан обновлять подобные материалы.

  3. Материал этого сайта предоставляется «как есть» без каких-либо условий, сроков пользования или других гарантий любого рода. Соответственно, в максимальной степени, разрешенной законом, Фонд «Че Сара Сара» предоставляет вам этот сайт на том основании, что Фонд «Че Сара Сара» исключает все утверждения, явные или подразумеваемые гарантии, условия, которые могут иметь последствия по отношению к этому сайту, если бы не было этого юридического уведомления.

Предоставление сайта

Этот сайт предназначен для работы 24 часа в сутки 7 дней в неделю. Не предполагается, что на сайте потребуется время простоя, хотя это не может быть гарантировано. Фонд «Che Sara Sara» и / или любой из его советников могут в любое время отказаться от сайта без предварительного уведомления. Не гарантируется, что сайт будет доступен в любое конкретное время или что любая информация может быть доступна в любом формате с любой скоростью загрузки. Фонд «Че Сара Сара» и / или любой из его советников могут по своему усмотрению предоставлять альтернативные средства для доступа к информации на сайте.

Поправки. Регулирующее право. Юрисдикции

  1. Фонд «Че Сара Сара» и / или любой из его советников могут в любое время изменить это соглашение путем уведомления на сайте, и дальнейшее использование этого веб-сайта является принятием пользователями таких поправок.

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

усовершенствование внешнего облика приложения с использованием технологии CSS

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

На примере ниже показано, как можно улучшить внешний вид страницы index.php .

  1. Для разрешения использования классов CSS, которые были определены, введите следующий код в блок <head></head> :

<link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />

Стили «body» и «input» автоматически применяются внутри соответствующих тегов, поэтому их необходимо указать явно.

  1. Для применения любого другого стиля (класса) к области заключите код, который реализует область, в теги <div></div> :

<div>
    <input type="submit" name="showWishList" value="Show Wish List of >>"/>

    <form name="wishList" action="wishlist.php" method="GET">
       <input type="text" name="user"/>
       <input type="submit" value="Go" />
    </form>
</div>

Примечание. Если класс указывается в теге <div>, в начале не нужно указывать точки.

  1. Можно использовать вложенные теги <div>:

<div>
    <input type="submit" name="myWishList" value="My Wishlist"/>
    <form name="logon" action="index.php" method="POST"
             hidden"; else echo "visible";?>">
        Username: <input type="text" name="user"/>
        Password:  <input type="password" name="userpassword"/><br/>
        <div>
          <?php
             if (!$logonSuccess) echo "Invalid name and/or password";
           ?>
        </div>
        <input type="submit" value="Edit My Wish List"/>
    </form>
</div>

Класс «logon» применяется ко всей форме, а класс «error» применяется к сообщению об ошибке внутри формы.

Использование классов и идентификаторов для назначения стилей

Часто нужно применить стиль только для отдельных элементов. В других случаях необходимо создать стиль, который можно применить к нескольким элементам документа без повторения правила для каждого отдельного экземпляра. Для реализации этих задач можно использовать HTML class и id.

Селекторы класса

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

<style type="text/css">
  p { color: #0000ff; }
  p.alert { color: #ff0000; }
</style>

Эти стили задают для всех параграфов синий цвет (#0000FF), но любой абзац с классом «alert» будет выводиться красным цветом.

Атрибут class является более специфичным, чем первое правило CSS, которое использует только селектор тега. Вот как это можно использовать в HTML-разметке:

<p>
Этот абзац будет отображаться синим цветом, который является цветом текста по умолчанию.
</p>
<p>
Этот абзац также будет синим.
</p>
<p>
А этот абзац будет отображаться красным цветом, так как атрибут class переопределяет стандартный синий цвет.
</p>

В этом примере стиль «p.alert» будет применяться только к параграфам, которые используют класс «alert«. Если вы хотите применить этот HTML style class для нескольких элементов, нужно удалить элемент из начала стиля (только не забудьте оставить точку):

<style type="text/css">
.alert {background-color: #ff0000;}
</style>

Теперь можно применять этот класс к любому элементу:

<p>
Этот параграф будет отображаться красным цветом.
</p>
<h3>Этот элемент h3 также будет красным.</h3>

На сегодняшний день классы CSS применяются к большинству элементов, потому что с ними легче работать, чем с идентификаторами.

Селекторы ID

Селектор ID позволяет присвоить имя определенному стилю, не связывая его с тегом или другим HTML-элементом. Допустим, что у вас есть блок div, который содержит информацию о событии. Можно задать для него id «event«, а затем выделить этот блок черной рамкой шириной в 1 пиксель:

<style type="text/css">
#event { border: 1px solid #000; }
</style>

Проблема, связанная с идентификаторами, заключается в том, что они не могут повторяться в HTML-документе. Они должны быть уникальными. Так что если у вас есть три блока событий, и для них нужно создать рамку, придется присвоить им идентификаторы «event1«, «event2» и «event3» и задать стили отдельно для каждого. Поэтому было бы гораздо проще использовать упомянутый выше HTML div class «event» и задать стили для всех сразу.

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

Но идентификаторы незаменимы, если нужно создать страницу, которая содержит анкорные ссылки. Например, если у вас есть параллакс-сайт. Он содержит весь контент на одной странице со ссылками, с помощью которых можно «перепрыгивать» к различным частям страницы. Это делается с помощью идентификаторов и текстовых ссылок, которые использует эти анкорные ссылки. Вы просто добавляете значение этого атрибута, которому предшествует символ #, в атрибут ссылки href. Например, следующим образом:

<a href="#event"> Это ссылка </a>

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

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

Данная публикация является переводом статьи «Using Style Classes and IDs» , подготовленная редакцией проекта.

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

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

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

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

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

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

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

Начните комментарий с добавления /* и завершите добавлением */.

Имеет следующий синтаксис:

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>          
      p {
      line-height: 2em; 
      }         
    </style>
  </head>
  <body>
    <p>Какой-нибудь параграф.</p>
    <p>Высока строки этого параграфа равна 2em.</p>
  </body>
</html>

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

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

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

Пример¶

Или может иметь следующий вид:

Пример¶

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

CSS — Что такое, преимущества и история создания / ProgLang

CSS (англ. Cascading Style Sheets, каскадные таблицы стилей) — это простой язык дизайна, предназначенный для упрощения процесса презентации веб-страниц.

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

CSS легко освоить и понять, но он обеспечивает мощный контроль над представлением HTML-документа. Чаще всего CSS комбинируется с языками разметки HTML или XHTML.

Преимущества CSS

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

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

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

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

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

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

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

Независимость от платформы. Скрипт обеспечивает независимость от платформы и поддерживает новейшие браузеры.

История: кто создает и поддерживает CSS

CSS был предложен Хоконом Виумом Ли 10 октября 1994 года и поддерживается через группу людей из W3C, называемой рабочей группой CSS. Рабочая группа CSS создает документы, называемые спецификациями. Когда спецификация обсуждается и официально утверждается членами W3C, она становится рекомендацией.

Эти ратифицированные спецификации называются рекомендациями, поскольку W3C не контролирует фактическую реализацию языка. Независимые компании и организации создают это программное обеспечение.
Примечание. Консорциум Всемирной паутины (The World Wide Web Consortium) или W3C – это группа, которая дает рекомендации о том, как работает Интернет и как он должен развиваться.

История CSS: создание версий

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

CSS2 стал рекомендацией W3C в мае 1998 года и основывается на CSS1. Эта версия добавляет поддержку для конкретных таблиц стилей, например, принтеров и звуковых устройств, загружаемых шрифтов, элементов позиционирования и таблиц.

CSS3 стал рекомендацией W3C в июне 1999 года и основывается на более старых версиях CSS. Он разделен на документацию, которая называется «Модулями» и здесь каждый модуль имеет новые расширенные функции, определенные в CSS2.

Модули CSS3

  • Модули CSS3 имеют старые спецификации CSS, а также расширенные функции.

  • Селекторы.

  • Блоковая модель.

  • Фоны и границы.

  • Значения изображения и замененный контент.

  • Текстовые эффекты.

  • Преобразования 2D/3D.

  • Анимация.

  • Расположение нескольких столбцов.

  • Пользовательский интерфейс.

Поделитесь:

CSS: правильное использование — залог успеха — Вёрстка

Начинаем свой путь к мастерству. Он будет достаточно долгим и непростым, но вы справитесь, если у вас есть цель. По крайней мере, к этому моменту вы уже обладаете определенным багажом знаний, достаточным для применения на практике. Однако использовать CSS можно по-разному. Цель данной главы — научить вас применять CSS правильно. Поверьте, это не так просто, как кажется на первый взгляд. Ведь можно просто особо не задумываясь написать таблицу стилей с множеством классов и ненужных объявлений, которая будет корректно работать. Но такая таблица стилей будет неоптимальной и неудобной. Неоптимальной потому, что ее можно значительно сократить и уменьшить объем, что немаловажно. Неудобной потому, что разбираться в неупорядоченном нагромождении классов достаточно сложно. Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть множество рекомендаций. Кроме того, можно все же выделить одно главное правило, которое всегда надо применять при использовании CSS.

Правило

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

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

Форматирование таблиц стилей

Главное требование — в таблице стилей должен быть порядок. Возьмем пример из предыдущей главы. Вот эта таблица:

P {color: #000; font: x-small Verdana}

BODY {background: #FFF}

#mainmenu A {color: #000; font: bold small Arial}

h4 {color: #000; font-family: Arial}

.back {background: url(img/fragment_3.gif) no-repeat;}

#submenu A {color: #FFF; font: bold xx-small Arial}

.bluecol {background: #1d3d4e}

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

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

Как вы помните, существует несколько типов селекторов: элементы, классы, ID. Так что если формировать блоки по типам селекторов уже будет какой-то уровень организованности. Первое правило организации таблиц.

Совет

Разделяйте селекторы, т. е. сформируйте первый блок из селекторов по элементам, второй блок из селекторов по классам, а третий блок из селекторов по ID. Блоки друг от друга можно отделять дополнительным переводом строки.

В нашем случае блок селекторов по элементам будет состоять из h4, P и BODY, второй блок из селекторов по классам будет состоять из .back и .bluecol, третий блок из селекторов по ID будет состоять из #mainmenu и #submenu. А таблица стилей будет выглядеть так:

BODY {background: #FFF}

h4 {color: #000; font-family: arial}

P {color: #000; font: x-small Verdana}

.back {background: url(img/fragment_3.gif) no-repeat;}

.bluecol {background: #1d3d4e}

#mainmenu A {color: #000; font: bold small arial}

#submenu a {color: #fff; font: bold xx-small arial}

Кроме того, в каждом блоке селекторы надо расставить в алфавитном порядке. На первый взгляд, это не очень сильно упорядочит таблицу стилей, однако есть достаточно веская причина соблюдать такое правило. На первых порах вам будет абсолютно все равно, в каком порядке расположены селекторы в трех блоках, однако постепенно вы привыкните располагать селекторы именно в алфавитном порядке, вследствие чего в своих таблицах стилей будете ориентироваться легко, и быстро находить необходимые правила. Вы будете подсознательно чувствовать, что селектор .back находится в начале блока селекторов по классам, потому что начинается с буквы b, а селектор .vis — в конце, потому что начинается с буквы v.

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

P {color: #000; font-size: 12px; padding-left: 1em}

используют запись в несколько строк:

P {

  color: #000;

  font-size: 12px;

  padding-left: 1em}

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

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

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

Первая:



P.emphasize {

  font-size: 14px;

  text-indent: 1em;

  color: #000;

  font-style: italic}

TD {

  font-style: italic;

  color: #000;

  font-size: 14px}

Вторая:

P.emphasize {

  color: #000;

  font-style: italic;

  font-size: 14px;

  text-indent: 1em}

TD {

  color: #000;

  font-style: italic;

  font-size: 14px}

А теперь внимательно сравните их и ответьте на вопрос, какая структурирована лучше и почему? Подумайте две минуты, не читайте дальше.

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

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

Совет

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

Имена классов и ID

При верстке вам частенько придется вводить новые классы и как-то их называть. Естественным образом возникает желание, чтобы названия были короткими и логичными. Если класс для заголовков раздела назвать head1, то это будет достаточно логично и коротко, а если bigblacktext — нелогично и длинно. Конечно, часто встречаются ситуации, когда не получается придумать подходящее короткое имя, тогда приходится чем-то жертвовать: либо длиной, либо логичностью. Лично я предпочитаю жертвовать логичностью, потому что в своем коде я разберусь всегда. Однако если над проектом работает несколько HTML-верстальщиков и каждый из них создает какую-либо часть сайта, то лучше жертвовать длиной, потому что в этом случае логичность гораздо важнее. Согласитесь, далеко не каждый поймет, что класс aa обозначает, к примеру, отступ справа на 10 пикселов, тогда как класс rightpad10 об этом свидетельствует достаточно однозначно. Вообще вам все время придется балансировать на грани между объемом и логикой, важно сохранять баланс в большинстве случаев и четко представлять себе, когда его можно нарушить. Нарушить его можно в двух случаях.

  1. Если вы профессионал и работаете над HTML-кодом сайта в одиночку.

  2. Если вам до зарезу надо максимально уменьшить объем кода и важным становится каждый лишний байт.

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

Оптимизация таблиц стилей

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

  1. незначительно ускоряется загрузка страниц;

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

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

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

Стили по умолчанию

Не стоит писать ничего лишнего. Практически все свойства CSS имеют какое-либо значение по умолчанию. Не стоит явно их указывать. Например, стиль на элемент <P>, приведенный ниже



P {

  font-style: normal;

  letter-spacing: normal;

  text-decoration: none}

вообще не имеет смысла, потому что все эти значения для элементов <P> установлены по умолчанию. Зачем же их указывать явно? Конечно, возможны случаи, когда надо переписать установленный ранее стиль. Например, вы хотите, чтобы все элементы <h2> были подчеркнутыми и пишите стиль:

h2 {

  text-decoration: underline;}

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



h2.nounderline {

  text-decoration: none}

То есть вы первым правилом переписали значение по умолчанию для элементов <h2>, поэтому потом пришлось явным образом восстанавливать это значение для заголовков с классом nounderline. В этом случае другого выхода нет, но вообще если вам нет необходимости изменять стили элементов, то и не надо прописывать значения по умолчанию явным образом.

Правило

Не указывайте в таблице стилей значений, которые являются для данного элемента значениями по умолчанию.

Сокращенные формы записи

Второй способ сократить объем таблицы стилей — использование сокращенных форм записи некоторых свойств. В таблице они систематизированы.







Сокращенная формаВходящие свойства
font: italic small-caps 12px/140% Tahoma, sans-seriffont-style: italic
font-variant: small-caps
font-weight: normal
font-size: 12px
line-height: 140%
font-family: Tahoma, sans-serif
margin: 1em 2em 0 1emmargin-top: 1em
margin-right: 2em
margin-bottom: 0em
margin-left: 1em
padding: 10px 20pxpadding-top: 10px
padding-right: 20px
padding-bottom: 10px
padding-left: 20px
border: 1px solid #000
border-top: 1px solid #000
border-right: 1px solid #000
border-bottom: 1px solid #000
border-left: 1px solid #000		border-width: 1px
border-style: solid
border-color: #000
background: url(«backgr.gif») #FFF repeat-xbackground-color: #FFF
background-image: url(«backgr.gif»)
background-repeat: repeat-x
background-attachment: scroll
background-position: 0px 0px

Использование сокращенных форм записи является делом весьма полезным и нужным, потому что объем таблицы стилей при этом значительно уменьшается. Это видно уже из сравнения правого и левого столбцов табл. 5.1, но чтобы окончательно вас убедить, я приведу еще один несложный пример. Пусть нам надо создать блок rule, который имеет черную рамку толщиной один пиксел и внутренние отступы величиной 10 пикселов. Ширина блока будет 300 пикселов, а текст в нем будет выводиться полужирным шрифтом Verdana размером 12 пикселов. Если не пользоваться сокращенными формами записи вообще, то код будет такой:

#rule {

     font-family: Verdana, sans-serif;

     font-weight: bold;

     font-size: 12px;

     width: 300px;

     border-top: 1px solid #000;

     border-right: 1px solid #000;

     border-bottom: 1px solid #000;

     border-left: 1px solid #000;

     padding-top: 10px;

     padding-right: 10px;

     padding-bottom: 10px;

     padding-left: 10px}

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

#rule {

     font: bold 12 px Verdana, sans-serif;

     width: 300px;

     border: 1px solid #000;

     padding: 10px}

Первое правило занимало 290 байт, а второе всего 96. Вес уменьшился в три раза, т. е. оптимизация достигла 300%! Конечно, этот пример показывает что будет, если не использовать сокращений вообще, но тем не менее он совершенно реальный и вам частенько придется создавать очень похожие блоки, так что примите к сведению эти 300%.

Группировка

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


P {

  color: #000;

      font: 14px Tahoma, Verdana, sans-serif}

TD {

     color: #000;

     font: 14px Tahoma, Verdana, sans-serif}

P {

     text-indent: 2em}

BODY {

     color: #000;

     font: 14px Tahoma, Verdana, sans-serif}

Ее можно оптимизировать так:

P, TD, BODY {

     color: #000;

     font: 14px Tahoma, Verdana, sans-serif}

P {

     text-indent: 2em}

Получилось очень компактно, но зато логика таблицы стилей сильно пострадала. Если вам понадобится изменить какое-либо объявление в элементе <P>, то в большой таблице вы его можете искать очень долго, потому что селекторы на этот элемент будут располагаться в разных местах. Запомните правило.

Правило

Все объявления для одного и того же элемента должны находится в одном месте

Это означает, что в нашем примере мы можем объединить только селекторы на элементы <BODY> и <TD>, а селекторы на элемент <P> надо свести в один, как того требует правило:


BODY, TD {

  color: #000;

  font: 14px Tahoma, Verdana, sans-serif}

P {

  color: #000;

  font: 14px Tahoma, Verdana, sans-serif;

     text-indent: 2em}

Кроме того, если вы захотите, скажем, добавить в таблицу стилей фон страницы, то придется разбить группу селекторов BODY и TD, потому что стили к ним уже не будут совершенно одинаковыми. Вот нам, к примеру, понадобилось добавить фоновый цвет на элемент <BODY>. Тогда придется разбить группу, и таблица стилей будет выглядеть так:

BODY {

     color: #000;

     background-color: #CCC;

     font: 14px Tahoma, Verdana, sans-serif}

TD {

     color: #000;

     font: 14px Tahoma, Verdana, sans-serif}

P {

     color: #000;

     font: 14px Tahoma, Verdana, sans-serif;

     text-indent: 2em}

Строчные и прописные

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

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

Оптимизация на практике

Исходная таблица у нас страшно неорганизованная и запутанная:

A:link {font-weight: bold; COLOR: black}

A:visited {font-weight: bold; COLOR: #555555}

A:active {font-weight: bold; COLOR: #FF0000}

A:hover {font-weight: bold; COLOR: #FF0000}

#lnk A:link {color: #666666}

#lnk A:visited {color: #666666}

#lnk A:active {color: #ff9900}

#lnk a:hover {color: #ff9900}

BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
.imgnews {margin-right: 12px}

CODE {color: #00C; font-family: courier new}

em {font-weight: bold; font-style: normal; color: black}

.norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}

p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}

input {border: 1px solid black; margin: 1px 2px}

TEXTAREA {border: 1px solid black; margin-top: 1px; margin-left: 2px; margin-bottom: 1px; margin-letf: 2px}

.EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}

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

1. A:link {font-weight: bold; COLOR: black}

2. A:visited {font-weight: bold; COLOR: #555555}

3. A:active {font-weight: bold; COLOR: #FF0000}

4. A:hover {font-weight: bold; COLOR: #FF0000}

5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}

6. CODE {color: #00C; font-family: courier new}

7. em {font-weight: bold; font-style: normal; color: black}

8. input {border: 1px solid black; margin: 1px 2px}

9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}

10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}

11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}

12. .imgnews {margin-right: 12px}

13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}

14. #lnk A:link {color: #666666}

15. #lnk A:visited {color: #666666}

16. #lnk A:active {color: #ff9900}

17. #lnk a:hover {color: #ff9900}

Пойдем дальше. Для начала займемся правилами для ссылок, которые находятся в строках 1-4. Заранее договоримся, что в объявлениях стилей сначала будет идти цвет и фон, затем шрифт, затем поля и отступы. Итак:

  • перенесем в начало объявления цвета;

  • свойство COLOR запишем строчными буквами;

  • вместо обозначения черного цвета словом black запишем #000;

  • остальные значения сократим так: #555555 поменяем на #555, #FF0000 поменяем на #F00.

Получится вот что:

1. A:link {

     color: #000;

     font-weight: bold}

2. A:visited {

     color: #555;

     font-weight: bold}

3. A:active {

     color: #F00;

     font-weight: bold}

4. A:hover {

     color: #F00;

     font-weight: bold}

Заметьте, что последние два селектора имеют совершенно одинаковые объявления, так что можно смело их сгруппировать:

1. A:link {

     color: #000;

     font-weight: bold}

2. A:visite {

     color: #555;

     font-weight: bold}

3. A:active, A:hover {

     color: #F00;

     font-weight: bold}

Займемся строками 5-7:

5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}

6. CODE {color: #00C; font-family: courier new}

7. em {font-weight: bold; font-style: normal; color: black}

Объявление стилей на элемент <BODY> содержит четыре отступа, причем все они имеют значение 0, так что можно смело вместо всех четырех отступов использовать сокращенную форму записи, кроме того, надо переписать все свойства строчными буквами:

5. BODY {

     margin: 0px;

     padding: 0px}

В шестой строке на первый взгляд все правильно, однако в свойстве font-family указан только один шрифт. Укажем кроме него еще и шрифтовое семейство, в данном случае это monospace. Кроме того, названия шрифтов из двух и более слов рекомендуется заключать в кавычки:

6. CODE {

     color: #00C;

     font-family: "Сourier new", monospace}

В седьмой строке запишем название селектора em большими буквами, переместим в начало свойство color и заменим значение black на #000.

7. EM {

     color: #000;

     font-weight: bold;

     font-style: normal}

Теперь рассмотрим строки 8-10:

8. input {border: 1px solid black; margin: 1px 2px}

9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}

10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}

Восьмая строка практически правильная, надо только переписать селектор input заглавными буквами. В строке 9 надо:

  • селектор p заменить на P;

  • перенести в конец правила свойство text-align;

  • переписать свойство FONT строчными буквами.

Получится так:

9. P {

     color: #555;

     font: 12px Verdana, sans-serif;

     text-align: justify}

В десятой строке можно кое-что сократить. Заметьте, что верхнее и нижнее поля имеют значение 1 пиксел, а левое и правое — 2 пиксела. Это можно записать сокращенно с помощью объявления margin: 1px 2px. Кроме того, надо в объявлении рамок поменять значение цвета black на #000. Тогда десятая строка будет такой:

10. TEXTAREA {

     border: 1px solid #000;

     margin: 1px 2px}

А сейчас сравните исправленные строки 8 и 10. Они совершенно одинаковые, т. е. можно сгруппировать селекторы INPUT и TEXTAREA:

8. INPUT, TEXTAREA {

     border: 1px solid #000;

     margin: 1px 2px}

С блоком селекторов по элементам мы разобрались, так что перейдем к классам:

11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}

12. .imgnews {margin-right: 12px}

13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}

Здесь надо в строке 11 переписать название класса EXAMPLE и свойство BORDER строчными буквами, а также написать значение цвета в сокращенной форме. Строка 12 теперь полностью корректна. А в строке 13 надо переписать свойство FONT строчными буквами:

11. .example {

     background-color: #EEE;

     border: 1px dotted #000;

     padding: 20px}

12. .imgnews {

     margin-right: 12px}

13. .norm {

     color: #555;

     font: 12px Verdana, Helvetica, sans-serif}

Остался блок контекстных селекторов:

14. #lnk A:link {color: #666666}

15. #lnk A:visited {color: #666666}

16. #lnk A:active {color: #ff9900}

17. #lnk a:hover {color: #ff9900}

Здесь надо только записать цвета в сокращенной форме и сгруппировать селекторы 14 и 15, а также 16 и 17:

14. #lnk A:link, #lnk A:visited {

     color: #666}

15. #lnk A:active, #lnk A:hover {

     color: #F90}

Вся обновленная таблица стилей будет выглядеть следующим образом:

1. A:link {

     color: #000;

     font-weight: bold}

2. A:visited {

     color: #555;

     font-weight: bold}

3. A:active, A:hover {

     color: #F00;

     font-weight: bold}

5. BODY {

     margin: 0px;

     padding: 0px}

6. CODE {

     color: #00C;

     font-family: "Courier new", monospace}

7. EM {

     color: #000;

     font-weight: bold;

     font-style: normal}

8. INPUT, TEXTAREA {

     border: 1px solid #000;

     margin: 1px 2px}

9. P {

     color: #555;

     font: 12px Verdana, sans-serif;

     text-align: justify}

11. .example {

      background-color: #EEE;

     border: 1px dotted #000;

     padding: 20px}

12. .imgnews {

     margin-right: 12px}

13. .norm {

     color: #555;

     font: 12px Verdana, Helvetica, sans-serif}

14. #lnk A:link, #lnk A:visited {

     color: #666}

15. #lnk A:active, #lnk A:hover {

     color: #F90}

Как видите, таблица стилей стала значительно более структурированной и читаемой. Кроме того, первоначальная таблица весила 877 байт, а оптимизированная таблица весит 677 байт (если убрать переводы строк и лишние пробелы перед каждым объявлением). Мы смогли уменьшить вес таблицы стилей на 23%, что само по себе не так уж мало. К тому же она стала более логичной, так что теперь найти нужное объявление или селектор не составит труда. Это и есть цель данной главы — научиться создавать легкочитаемые и компактные таблицы стилей, а также оптимизировать старые, уже созданные ранее.

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

Михаил Дубаков

Стиль

с помощью CSS — вот такой код

Встроенный стиль

  • Добавление стиля непосредственно в элемент HTML
  • Использует атрибут стиля элемента
  • Объявления входят в стиль значение атрибута

Пример:

Допустим, у нас есть следующий HTML:

 


  
     Моя кошка 
  
  
    
 Мой кот Боб 

    
 Моего кота зовут Боб.Он ленивый кот.

Вот пример CSS:

  h2 {
  красный цвет;
  размер шрифта: 24 пикселя;
}

п {
  цвет синий;
  размер шрифта: 12 пикселей;
}

Что здесь делает CSS?

Селекторы соединений 1

Селекторы могут нацеливаться на элементы, вложенные в другие элементы

  p img {
  максимальная ширина: 320 пикселей;
  высота: авто;
}

Селекторы соединений 2

Селекторы

могут нацеливаться на определенные элементы с классом

  h2.заглавие {
  дисплей: блок;
  маржа: 0, авто;
  padding-top: 1em;
}

Селекторы соединений 3

Селекторы могут нацеливаться на определенные элементы с несколькими уровнями вложенности

  main .introduction> p {
  цвет фона: светло-серый;
  маржа: 10 пикселей автоматически;
}

«применить эти стили ко всем p , которые являются прямыми дочерними элементами div класса Introduction внутри основного раздела »

Селекторы псевдо-класса

Вы можете настроить таргетинг на состояние элемента с помощью селекторов псевдо-класса

  • Ховер
  • Посещали
  • Проверено
  • Активный
  • Многие другие

Полный список по MDN

MDN Psuedo-Class Tutorial

  a: hover {
  цвет фона: красный;
}

a: нажал {
  цвет фона: синий;
}

a: active {
  цвет фона: зеленый;
}

Включение CSS в HTML

Есть несколько способов добавить стиль к HTML-странице

  • <стиль> Встроенный CSS
  • <ссылка> Тег для файла CSS

  • Рядный

  • <ссылка> Тег для файла CSS