Содержание

Валидация CSS | htmlbook.ru

Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации — невалидный. Наиболее удобно делать проверку кода через сайт http://jigsaw.w3.org/css-validator/, с помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Большим плюсом сервиса является поддержка русского и украинского языка.

Проверить URI

Эта вкладка позволяет указывать адрес страницы размещенной в Интернете. Протокол http:// можно не писать, он будет добавлен автоматически (рис. 20.1).

Рис. 20.1. Проверка документа по адресу

После ввода адреса нажмите на кнопку «Проверить» и появится одна из двух надписей: «Поздравляем! Ошибок не обнаружено» в случае успеха или «К сожалению, мы обнаружили следующие ошибки» при невалидном коде. Сообщения об ошибках или предупреждениях содержат номер строки, селектор и описание ошибки.

Проверить загруженный файл

Эта вкладка позволяет загрузить HTML или CSS-файл и проверить его на наличие ошибок (рис. 20.2).

Рис. 20.2. Проверка файла при его загрузке

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

Проверить набранный текст

Последняя вкладка предназначена для непосредственного ввода HTML или CSS-кода, при этом проверке будет подвергнут только стиль (рис. 20.3).

Рис. 20.3. Проверка введённого кода

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

Выбор версии CSS

В CSS3 добавлено много новых стилевых свойств по сравнению с предыдущей версией, поэтому проводить проверку кода следует с учётом версии. По умолчанию в сервисе указан CSS3, так что если вы хотите проверить код на соответствие CSS2.1, это следует указать явно. Для этого щелкните по тексту «Дополнительные возможности» и в открывшемся блоке из списка «Профиль» выберите CSS2. 1 (рис. 20.4).

Рис. 20.4. Указание версии CSS для проверки

Базовый синтаксис CSS | htmlbook.ru

Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 5.1 показаны две разновидности оформления селекторов и их правил.

Пример 5.1. Использование стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Заголовки</title>
  <style> 
   h2 { color: #a6780a; font-weight: normal; } 
   h3 { 
    color: olive; 
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body>
  
  <h2>Заголовок 1</h2>
  <h3>Заголовок 2</h3>
  
 </body>
</html>

В данном примере свойства селектора h2 записаны в одну строку, а для селектора h3 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.

Правила применения стилей

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

Форма записи

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

Пример 5.2. Расширенная форма записи

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

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

Пример 5.3. Компактная форма записи

td {
  background: olive;
  color: white;
  border: 1px solid black;
}

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5. 4).

Пример 5.4. Разные значения у одного свойства

p { color: green; }
p { color: red; }

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

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

Значения

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

Комментарии

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию (пример 5.5).

Пример 5.5. Комментарии в CSS-файле

/* 
  Стиль для сайта htmlbook.ru
  Сделан для ознакомительных целей
*/
  
div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  float: left; /* Обтекание по правому краю */
}

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

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

1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3. css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?

  1. красный.
  2. синий.
  3. зелёный.
  4. чёрный.
  5. установленный в браузере по умолчанию.

2. В какой строке кода содержится ошибка?

  1. p { text-align: center; color: #000000 }
  2. div { color: red; font-size: 11pt; }
  3. title { color: #fc0; margin: 10px; }
  4. p { color: green; color; }
  5. html {
    float: left; }

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

/* ———————————
div {
color: #fc0; /* Цвет теска */
margin: 10px; /* Поля вокруг элемента */
float: left /* Обтекание по правому краю */
}
——————————— */

  1. Опечатка в тексте комментария.
  2. Вложенные комментарии.
  3. Нет точки с запятой.
  4. Недопустимые значения у стилевых свойств.
  5. Лишние переносы в коде.

4. В какой строке содержится корректный синтаксис?

  1. body:color=black
  2. body{color:black}
  3. {body;color:black}
  4. {body:color=black}
  5. body{color=black}

5. Как правильно вставить комментарий в CSS-файл?

  1. ‘ комментарий
  2. // комментарий
  3. // комментарий //
  4. /* комментарий */
  5. <!— комментарий —>

Ответы

1. синий.

2. p { color: green; color; }

3. Вложенные комментарии.

4. body{color:black}

5. /* комментарий */

Селекторы тегов | htmlbook.ru

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

Тег { свойство1: значение; свойство2:
значение; … }

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

Пример 7.1. Изменение стиля тега абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   P { 
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зеленый цвет текста */
   }
  </style>
 </head> 
 <body>

  <p>Более эффективным способом ловли льва в пустыне
  является метод золотого сечения. При его использовании пустыня делится
  на две неравные части, размер которых подчиняется правилу золотого
  сечения.</p>

 </body>
</html>

В данном примере изменяется цвет и выравнивание текста
абзаца. Стиль будет применяться только к тексту, который
располагается внутри контейнера <p>.

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

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

1. В какой строке содержится ошибка?

  1. h2 { margin-left: 20px; }
  2. p { margin-left: 20px; padding-left: 20px; }
  3. h3 { margin-right: 20px; }
  4. head { color: #rob; }
  5. body { font-size: 11pt; color: #aaa; }

2. Таня для фона веб-страницы и цвета текста выбрала цвета #ffe9f2 и #6e143b и в стилях использовала следующий код, однако нужные цвета не проявились. В чем причина?

body {
background-color: #ffe9f2
color: #6e143b
}

  1. body написан строчными буквами.
  2. Свойство background-color неверное, следует писать background.
  3. Значения цветов указаны неправильно.
  4. В качестве селектора применять body некорректно.
  5. Не хватает точки с запятой.

3. Какая строка написана правильно?

  1. <P> { color: #333; }
  2. P { color: #333; }
  3. P: { color: #333;}
  4. P { color: 333; }
  5. P { color: #3333; }

4. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?

  1. !DOCTYPE
  2. A
  3. HEAD
  4. TITLE
  5. BODY

5. Как добавить фоновый цвет ко всем элементам <h2>?

  1. h2 { background-color: white }
  2. h2.all { background-color: white }
  3. h2:all { background-color: white }
  4. h2[all] { background-color: white }
  5. h2#all { background-color: white }

Ответы

1. head { color: #rob; }

2. Не хватает точки с запятой.

3. P { color: #333; }

4. BODY

5. h2 { background-color: white }

что это и как работает — учебник CSS

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

Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).

Рассмотрим простой пример:


body {
	color: #913D88;
	border: 1px solid #333;
}

И результат на скриншоте:

Скриншот: пример CSS наследования

На скриншоте можно увидеть, что теги <p> переняли стиль у своего предка <body>: цвет текста на странице стал #913D88. А вот рамка border появляется только один раз – для тега <body>, но не для <p>.

Почему рамка не появилась у других элементов веб-страницы? Всё потому, что согласно спецификации CSS, существуют определенные правила наследования. Есть свойства, которые наследуются (в основном, это свойства, определяющие внешний вид текста) и те, которые не наследуются (например, border, а также свойства, определяющие границы, поля, отступы). К тому же, у браузеров есть свои стили, установленные по умолчанию. Именно поэтому стандартная синяя подчеркнутая гиперссылка a не будет перенимать от body свойство color, что видно на скриншоте.

Узнать, наследуется ли то или иное свойство, можно в этом стандарте CSS. Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.

Значение inherit

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

Для демонстрации используем предыдущий пример: чтобы всё-таки заставить теги <p> унаследовать рамку border от своего предка <body>, необходимо записать:


p {
	border: inherit;
}

Скриншот: пример использования inherit

Такой вариант удобен тем, что при необходимости можно внести правки только в стиль для элемента body, а на теги <p> тратить время не нужно, так как стиль автоматически изменится и для них.

Итоги

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

В следующей главе учебника мы будем изучать каскадность CSS.

Учебник по основам CSS, для начинающих

Видеокурс по CSS для начинающих верстальщиков от компании WebForMySelf.

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

В учебнике по основам CSS для начинающих мы с вами будем изучать css свойства и их значения.

СSS свойств достаточно много и еще больше у них значений. Но особенностью данного курса является то, что мы не будем в нем рассматривать детально все css свойства. Поверьте, мне за почти 10-летний опыт разработки некоторые из них приходилось использовать всего несколько раз, а некоторые в реальных проектах вообще ни разу. Поэтому я не вижу смысла подробно рассматривать все свойства со всеми значениями, некоторые из которых вы, возможно, никогда не примените.

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

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

Все уроки курса:

Количество уроков: 10

Продолжительность курса: 01:31:17

Автор: Андрей Бернацкий

Один из создателей проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — www.WebForMyself.com. Свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

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

Категории премиум

УЧЕБНИК CSS

  • Автор: Р. Эндрю
  • год издания: 2010
  • жанр: учебник
  • язык: русский
  • самоучитель объемом: 333стр.
  • формат: pdf
  • размер файла: 5.8Mb

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

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

Построен учебник по CSS следующим образом: в начале предлагаются основы языка, а далее методы и примеры постепенно усложняются. Особенных знаний для понимания представленного материала от читателя не требуется, а если он обладает начальными знаниями CSS, то это, еще более облегчает восприятие материала. Примеры, содержащиеся в учебнике, затрагивают использование простеньких методов применения CSS, и простираются до создания любых сложных макетов страниц, сложной навигации, форм. 3-е издание «CSS: 100 и 1 совет» было полностью переработано и обновлено, и содержит самые современные подходы, в т.ч. рассматриваются операторы CSS3, а также учитываются особенности, как последних версий браузеров, так и кроссбраузерность.

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

скачать учебник CSS: TurbobitDepositfiles

Могу порекомендовать видеокурс: «HTML5 и CSS3 для начинающих», если хотите изучить эти технологии быстро. Обучение по видеоурокам занимает гораздо меньше времени. Уроки построены на решении практических задач и легко усваиваются, благодаря уникальной методике. А в результате — вы «построите» полноценный сайт, причем, адаптированный под мобильные устройства.

Верстка сайта на HTML и CSS

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

подробнее…

Курсы Евгения Попова

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

подробнее…

Заработок на создании сайтов под заказ

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

подробнее…

Верстка сайта на HTML5 и CSS3

Видеокурс по изучению технологий верстки адаптивных сайтов. Основанием всех современных сайтов являются «два кита»: новейшие версии веб-языков HTML5 и CSS3.

подробнее…

Создание сайта с нуля (PDF)

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

подробнее…

Основы JavaScript

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

подробнее…

Основы PHP 7

Понятный курс по основам PHP 7. В нём — базовые знания PHP без «воды». Это основы веб-программирования.

подробнее…

Видеокурс по основам PHP

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

подробнее…

Современный учебник CSS: ваш онлайн-самоучитель

Учимся создавать веб-страницы, отвечающие современным требованиям.

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

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

Немного о таблицах стилей

Веб-страница создается и структурируется с помощью стандартного языка разметки — HTML. Раньше, в середине 90-х годов, этот язык использовался и для стилевого оформления документа, но сейчас всё, что касается дизайна страниц, решается с помощью каскадных таблиц стилей (Cascading Style Sheets — англ.). У CSS есть множество достоинств и возможностей, о которых вы узнаете по ходу чтения книги.

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

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

Для кого эта книга

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

Желаем вам успехов в обучении!

 

СОДЕРЖАНИЕ

Часть I. Азы CSS

  1. Подготовка почвы: поговорим об HTML
  2. Синтаксис CSS. Подключение внешних таблиц. Создаем первый стиль
  3. Изучение селекторов:

    1. Селекторы CSS. Теги, классы, ID, группы
    2. Селекторы потомков. Псевдоклассы и псевдоэлементы CSS
    3. Дочерние селекторы CSS. Дополнительные псевдоклассы
    4. Соседние и родственные селекторы
    5. Селекторы атрибутов
    6. Урок: тренируемся применять селекторы
  4. Наследование в CSS: что это и как работает
  5. Каскадность CSS. Приоритеты стилей

Часть II. Использование CSS

  1. Работа с текстом:

    1. Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
    2. Установка цвета для текста в CSS. Способы представления цветов
    3. Размер шрифта в CSS. Единицы измерения px, %, em
    4. Жирный шрифт и курсив CSS
    5. Прописные и строчные буквы в CSS: свойство text-transform
    6. Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
    7. Тень для текста: свойство CSS text-shadow
    8. Межсимвольный, межстрочный интервал CSS. Расстояние между словами
    9. Выравнивание текста в CSS: свойство text-align
    10. CSS для списков: свойство list-style и его производные
  2. Работа с блоками:

    1. Вступление. Блоки
    2. Поля и отступы CSS: отличия свойств margin и padding
    3. Блочные и строчные элементы
    4. Свойство border: границы для блоков
    5. Border-radius: закругленные углы в CSS
    6. Box-shadow: тень для элемента
    7. Width и height: определяем размеры элемента
    8. Box-sizing: управляем вычислением ширины и высоты
    9. Overflow: управление переполненными элементами
    10. Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
    11. Поток документа. Свойства float и clear
    12. Практика: делаем адаптивную посадочную страницу
  3. Работа с графикой:

    1. CSS для тега img
    2. Background-image: установка фонового изображения
    3. Относительный и абсолютный путь к файлу
    4. Background-repeat: повторение фоновой картинки
    5. Background-position: позиционирование фона
    6. Background-attachment: фиксация фона
    7. Свойства CSS3 background-origin и background-clip
    8. Background-size: масштабирование фонового рисунка
    9. Свойство background: все настройки фона в одном месте
    10. Несколько фоновых рисунков для одного элемента
    11. Linear-gradient(): линейный градиент в фоне
    12. Repeating-linear-gradient(): градиент с повторением
    13. Radial-gradient(): радиальный градиент
    14. Repeating-radial-gradient(): повторяющийся радиальный градиент
    15. Практика: создаем фотогалерею на CSS
    16. Практика: работаем с фоновыми рисунками
  4. Ссылки и навигация:

    1. Состояния ссылок в CSS. Псевдоклассы
    2. Варианты стилизации ссылок в CSS
    3. Навигационные панели с помощью CSS
    4. Стили для особых ссылок
    5. CSS-спрайты
  5. Трансформирование и анимация:

    1. Свойство transform: трансформация элементов
      1. Функция rotate()
      2. Функция scale()
      3. Функция skew()
      4. Функция translate()
      5. Несколько значений свойства transform
      6. 3D-трансформации в CSS
    2. CSS3 transition: плавные переходы
      1. Свойство transition-property
      2. Свойство transition-duration
      3. Свойство transition-timing-function
      4. Свойство transition-delay
      5. Сокращенная запись transition
    3. CSS3-анимация
      1. Правило @keyframes
      2. Запуск анимации: аnimation-name и animation-duration
      3. Свойства animation-timing-function и animation-delay
      4. Свойство animation-iteration-count
      5. Свойство animation-direction
      6. Свойство animation-fill-mode
      7. Свойство animation-play-state
      8. Сокращенная запись animation
    4. Практика: создание CSS-анимации
  6. Таблицы и формы:

    1. Стилизация таблиц с помощью CSS
    2. CSS-стили для форм

Часть III.

Разметка CSS

  1. Ширина веб-страницы
  2. В разработке.

CSS Quick Tutorial

CSS Quick Tutorial


Таблица стилей состоит из правил стилей, которые сообщают браузеру, как представить документ. Есть различные способы связать эти правила стиля с вашими HTML-документами, но самый простой способ начать — использовать элемент HTML STYLE . Этот элемент помещен в документ HEAD , и он содержит правила стиля для страницы.

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

Каждое правило состоит из селектора — обычно HTML-элемента, такого как BODY , P или EM — и стиля, применяемого к селектору.

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

Правила стиля формируются следующим образом:

  селектор {свойство: значение}

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

селектор {свойство1: значение1; свойство2: значение2}

В качестве примера следующий сегмент кода определяет свойства color и font-size для элементов h2 и h3 :

  <ГОЛОВКА>
 Пример CSS %MINIFYHTML15eb300532cc579053738674a7f8ecc021%

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

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

Индекс CSS ~
Структура CSS ~
CSS свойства

Дом,
Форумы,
Справка,
Инструменты,
FAQs,
Статьи,
Дизайн,
Ссылки

Авторские права © 1996 — 2006.Все права защищены.

Запуганы CSS? Полное руководство, чтобы избавиться от страха »

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

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

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

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

Что такое CSS?

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

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

Чем CSS отличается от HTML?

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

  • Все критическое содержимое веб-сайта должно быть добавлено на веб-сайт с использованием языка разметки, такого как HTML.
  • Представление содержимого веб-сайта должно определяться языком стилей, например CSS.

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

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

Синтаксис CSS

Синтаксис CSS включает селекторы, свойства, значения, объявления, блоки объявлений, наборы правил, правила at и операторы.

  • Селектор — это фрагмент кода, используемый для идентификации элемента или элементов веб-страницы, на которые должны воздействовать стили.
  • Свойство — это аспект элемента, на который необходимо повлиять. Например, наиболее часто используемые свойства CSS — это цвет, отступ, поля и фон.
  • Значение используется для определения свойства . Например, цвету свойства можно присвоить значение красного цвета следующим образом: color: red; .
  • Комбинация свойства и значения называется декларацией .
  • Во многих случаях несколько объявлений применяются к одному селектору . Блок объявлений — это термин, используемый для обозначения всех объявлений, применяемых к одному селектору .
  • Отдельный селектор и следующий за ним блок объявления вместе называются набором правил .
  • Ат-правила похожи на наборы правил , но начинаются со знака @ , а не с селектора . Наиболее распространенным at-правилом является правило @media , которое часто используется для создания блока правил CSS, которые применяются в зависимости от размера устройства, просматривающего веб-страницу.
  • Оба набора правил и at-rules являются операторами CSS .

Пример синтаксиса CSS

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

  h2 {
    красный цвет;
    размер шрифта: 3em;
    оформление текста: подчеркивание;
    }

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

Используя h2 в качестве селектора, мы говорим, что каждый заголовок уровня 1 на веб-странице должен следовать за объявлениями, содержащимися в этом наборе правил.

Набор правил содержит три объявления:

  • цвет: красный;
  • размер шрифта: 3em;
  • оформление текста: подчеркивание;

цвет , font-size и text-decoration — все это свойства. Вы можете использовать буквально сотни свойств CSS, но обычно используются лишь несколько десятков.

Мы применили значения red , 3em и underline к используемым свойствам.Каждое свойство CSS определено для приема значений, отформатированных определенным образом.

Для свойства color мы можем использовать ключевое слово цвета или формулу цвета в формате Hex, RGB или HSL. В этом случае мы использовали ключевое слово цвета красный . В CSS3 доступно несколько десятков цветовых ключевых слов, но миллионы цветов доступны с другими цветовыми моделями.

Мы применили значение 3em к свойству font-size . Мы могли бы использовать широкий диапазон единиц размера, включая пиксели, проценты и т. Д.

Наконец, мы добавили значение underline к свойству text-decoration . Мы также могли бы использовать overline или line through в качестве значений для text-decoration . Вдобавок, CSS3 позволяет использовать стили линий: сплошные, двойные, пунктирные, пунктирные и волнистые, что вполне соответствует спецификации цветов оформления текста. Мы могли бы применить все три значения сразу, используя такое объявление:

  text-decoration: blue double underline;

Это правило приведет к тому, что h2 в нашем первоначальном примере будет подчеркнуто двойной синей линией. Сам текст останется красным, как определено в нашем свойстве color .

Подготовка HTML-разметки для стилизации

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

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

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

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

Когда использовать классы

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

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

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

Вот пример кода HTML и CSS для простой панели навигации для базового сайта электронной коммерции.

  <стиль>
    #nav {
        фон: светло-серый;
        перелив: авто;
        }
    #nav li {
        плыть налево;
        отступ: 10 пикселей;
        }
    #nav li: hover {
        фон: серый;
        }

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

Этот код не повлияет на любые дополнительные списки на той же веб-странице.

# example-nav {
background: lightgray;
перелив: авто;
}
# example-nav li {
float: left;
отступ: 10 пикселей;
}
# example-nav li: hover {
background: gray;
}

Когда не использовать хуки

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

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

  <стиль>
    ul {
        тип-стиль-список: верхний римский;
        маржа слева: 50 пикселей;
        }
    п {
        цвет: темно-синий
        }



 Здесь текст абзаца.Два коротких предложения. 


    

  •  Быстрый список 
    • 

  •  Всего два предмета. 
    • 



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

Этот код будет выглядеть так.

.code_sample ul {
список-стиль-тип: верхний римский;
margin-left: 50 пикселей;
}
.code_sample p {
color: darkblue
}

Здесь текст абзаца. Два коротких предложения.

  • Быстрый список
  • Всего два элемента

Дополнительный текст абзаца здесь.На этот раз давайте перейдем к трем предложениям. Как это.

  • Другой список
  • По-прежнему всего два элемента

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

Лучшие методы подготовки разметки для стилизации

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

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

Способы связывания правил CSS с HTML-документом

Есть три способа добавления правил CSS на веб-страницу:

  • Встроенные стили
  • Внутренние таблицы стилей
  • Внешние таблицы стилей

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

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

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

  
 Пример заголовка

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

Внутренние таблицы стилей

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

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

  <заголовок>
    <стиль>
        h2 {
            красный цвет;
            отступ: 10 пикселей;
            оформление текста: подчеркивание;
            }
    


    
 Пример заголовка

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

Внешние таблицы стилей

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

Чтобы использовать внешнюю таблицу стилей, сначала создайте документ CSS.

  / ********************************************* ***
Сохраните с именем, заканчивающимся на .css, например, styles.css.
*******************************************************************************************************************************************************************************************************************************
h2 {
    красный цвет;
    отступ: 10 пикселей;
    оформление текста: подчеркивание;
    }

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

  <заголовок>



    
 Пример заголовка

Когда этот HTML-документ загружен, ссылка тег вызовет загрузку стилей в файле styles.css на веб-страницу. В результате все элементы заголовка уровня 1 будут отображаться с красным текстом, подчеркнутым и с 10-пиксельным отступом, примененным к каждой стороне.

Когда использовать каждый метод

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

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

Встроенные стили можно использовать в двух случаях:

  1. При написании правил CSS, которые будут применяться только к одному элементу на одной веб-странице.
  2. При применении редактором WYSIWYG, например редактором tinyMCE, интегрированным в систему управления контентом, такую ​​как WordPress.

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

Как работает CSS

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

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

Как разработчик может написать правила, достаточно общие, чтобы охватить все h2 , но достаточно конкретные, чтобы определять стили, которые должны появляться только в определенных экземплярах данного элемента?

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

Два правила, которые определяют поведение CSS, — это наследование и специфичность.

Каскадное наследование

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

Рассмотрим пример.Давайте напишем два правила CSS во внутренней таблице стилей, которые прямо противоречат друг другу.

  <заголовок>
    <стиль>
        p {цвет: красный;}
        p {цвет: синий;}
    



 Какого цвета будет текст этого абзаца?

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

.code_sample_p {цвет: красный;}
.code_sample_p {color: blue;}

Какого цвета будет текст этого абзаца?

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

Правила в styles_2.css будут применяться, если есть конфликты между стилями, содержащимися в этих двух таблицах стилей.

Наследование стилей — еще один пример каскадного поведения стилей CSS.

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

  <заголовок>
    <стиль>
        ul {цвет: красный;}
    


    
    
        
  •  Пункт 1 
    • 
        
  •  Пункт 2 
    •

Вот как будет отображаться этот код.

.code-sample-ul {color: red;}

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

Специфичность

Второе правило, определяющее, какие правила применяются к каждому элементу HTML, — это правило специфичности.

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

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

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

Еще один способ повысить специфичность селектора — использовать ряд элементов, классов и идентификаторов для точного определения элемента, к которому вы хотите обратиться. Например, если вы хотите точно определить элементы неупорядоченного списка в списке с классом «example-list», содержащимся в div с идентификатором «example-div», вы можете использовать следующий селектор для создания селектора с высоким уровнем специфичности.

  div # example-div> ul.example-list> li {стили здесь}

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

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

Что умеет CSS?

Лучше спросить: «Что не умеет CSS?»

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

  • Создайте гибкую сетку для разработки полностью адаптивных веб-сайтов, которые красиво отображаются на любом устройстве.
  • Стилизуйте все, от типографики до таблиц, форм и т. Д.
  • Расположите элементы на веб-странице относительно друг друга, используя такие свойства, как float , position , overflow , flex и box-sizing .
  • Добавьте фоновые изображения к любому элементу.
  • Создавайте формы, взаимодействия и анимацию.

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

Коробочная модель

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

CSS Box Model от авторов Mozilla, CC-BY-SA 2.5.

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

Два замечательных места, где можно узнать о блочной модели:

Создание макетов

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

Сеть разработчиков Mozilla предлагает хорошее введение в макеты CSS. Это краткое руководство охватывает основные концепции макетов CSS и быстро вводит такие свойства, как text-align , float и position .

На W3C доступно гораздо более подробное руководство по макетам CSS: Модель макета CSS. Этот документ является ресурсом для профессиональных разработчиков, поэтому, если вы новичок в CSS, не торопитесь, просматривая его.Это не быстрое чтение. Однако все, что вам нужно знать о создании макетов CSS, содержится в этом документе.

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

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

Веб-шрифты и типографика

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

Создание согласованного кросс-браузерного взаимодействия

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

Возьмем, к примеру, этот короткий фрагмент кода.

  
 Заголовок 1 


 Короткий абзац текста. Всего четыре предложения. Большинство предложений довольно короткие. Особенно этот. 


 Заголовок 2 


    
    
  •  Краткий список. 
    • 
    
  •  Три пункта в этом списке 
    • 
    
  •  Мы сделаем это неупорядоченным списком. 
    • 



 Заголовок 3 


 Последний короткий абзац текста.Всего четыре предложения. Большинство предложений довольно короткие. Особенно этот.

Если мы отобразим этот код в двух разных браузерах, мы увидим тонкие различия. Вот как Mozilla Firebox и Microsoft Edge обрабатывают этот код.

Вы видите тонкие различия? Firefox, слева, добавляет немного больше поля вокруг каждого элемента заголовка. Кроме того, при рендеринге в Edge маркеры становятся немного меньше. Хотя эти различия не имеют значения, есть случаи, когда эти незначительные различия между браузерами могут создавать проблемы.

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

Самый простой способ включить normalize.css в вашу проектную работу — это сделать ссылку на копию, размещенную в Google. Для этого просто поместите эту строку кода в элемент head HTML-документа.

Джон — писатель-фрилансер, энтузиаст путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.

Advanced Techniques and Tools — Smashing Magazine

Об авторе

Кэмерон Чапман — профессиональный веб-дизайнер и графический дизайнер с более чем 6-летним опытом. Она пишет для ряда блогов и является автором книги The Smashing…
Больше о
Кэмерон
↬

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

В Части 1: Стилизация элементов дизайна мы рассмотрели основы веб-дизайна с помощью CSS. Во второй части мы предлагаем более продвинутые методы и эффекты, которых можно достичь с помощью CSS. Здесь описано все, от создания ваших собственных онлайн-приложений (например, календарей) до стилизации веб-страниц для использования с iPhone и некоторых основ работы с CSS3.

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

1. Календари, списки, таблицы и временные рамки

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

Последовательный список CSS / jQuery
Вам когда-нибудь приходилось вручную кодировать что-то последовательное? Тебя это не раздражало? Что ж, вот вам простое решение. В этом руководстве показано, как использовать jQuery для добавления последовательности классов CSS для создания графического списка.

Отображение даты со спрайтами
В этом руководстве объясняется, как добиться оригинального отображения даты с помощью спрайтов CSS. Умная техника. Альтернативное решение (с использованием свойства transform в CSS).

Хронология на чистом CSS
Отличное руководство по созданию понятной временной шкалы для вашего сайта с использованием простой разметки CSS и HTML.

Хронология на основе CSS
Еще один урок по созданию временной шкалы с помощью CSS.

Календарь в стиле iCal (CSS + jQuery)
Отличное руководство по созданию динамического календаря, напоминающего приложение iCal.

Создание календаря с использованием PHP, XHTML и CSS Пример
Простое руководство по созданию динамического онлайн-календаря.

CSS: Дизайн списка меню
Это краткое руководство по CSS, которое покажет вам, как создать список меню с использованием стиля границы CSS или фонового изображения. Хитрость заключается в том, чтобы применить нижнюю границу к элементу li, а затем использовать свойство absolute position для смещения вложенных элементов вниз, чтобы закрыть границу.

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

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

Таблицы стилей с CSS
Простое руководство по стилизации HTML-таблиц полностью с помощью CSS.

2.Технологии CSS для iPhone

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

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

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

Safari на iPhone Графика, мультимедиа и визуальные эффекты. Практические инструкции по кодированию
Это полное руководство от Apple по работе с Safari на iPhone, включая информацию о графике, мультимедиа и многом другом.

Веб-разработка для iPhone
Еще одно руководство по разработке сайтов специально для iPhone.

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

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

jPint
jPint — это набор библиотек, разработанный Journyx, чтобы позволить разработчикам создавать веб-приложения, которые выглядят и ощущаются как нативные приложения для iPhone, насколько это возможно, сохраняя при этом возможность использования этих приложений людьми, которые по какой-либо причине не используют На самом деле у меня нет iPhone.

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

3. Форма и методы поиска

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

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

Дизайн необычных форм с использованием CSS
В этой статье рассматривается стилизация форм с помощью CSS.

Разработка кнопки отправки поиска — решение, совместимое с кроссбраузерностью CSS
Узнайте, как создать собственное изображение, например увеличительное стекло или слово «GO» в круге, вместо кнопки отправки по умолчанию для поиска.

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

Коллекции CSSG: веб-формы
Это коллекция уникальных веб-форм, доступных для бесплатного использования.

45+ Действительно необходимые бесплатные улучшения HTML [Form]
Этот набор улучшений свободной формы охватывает ряд методов CSS.

минимальный макет формы / быстрые трюки css
В этом посте дается несколько быстрых приемов CSS для создания минималистичных форм и дизайна.

4. Методы визуализации

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

Простая техника CSS с блестящей полосой выполнения
В этом посте описывается простой метод создания индикатора выполнения с парой DIVS и изображением, раскрашенным с помощью CSS.

20+ методов визуализации данных CSS
Этот пост дает отличное изложение более чем двадцати методов визуализации данных с помощью CSS.

Доступная визуализация данных с помощью веб-стандартов
Эта статья из A List Apart дает краткое изложение создания совместимых со стандартами визуализаций данных с использованием CSS и XHTML.

5. Другие удобные приемы и советы

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

CSS Star Rating Part Deux
Это руководство основано на предыдущем руководстве и показывает, как создавать рейтинги в виде звездочек, которые показывают оценки, не являющиеся точными целыми числами (например, 3,5).

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

Размещение фонового изображения CSS по горизонтали справа на h3 с помощью элемента span
Узнайте, как добавить фоновое изображение к элементу заголовка 2 и добиться его точного выравнивания по правой стороне текста, сохранив поведение элемента блока по умолчанию.

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

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

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

Создание эскизов с помощью свойства CSS Clip
Свойство clip в CSS полезно для обрезки изображений и создания эскизов без создания дополнительных файлов.Этот трюк можно использовать для создания квадратных эскизов или для создания других видов эскизов без фактического дублирования файлов на сервере. Вот краткое изложение.

Замена изображения CSS… изображениями!
Сайты с темным фоном хорошо подходят для белых или светлых логотипов. Результат может быть приятным на экране, но если сайт напечатан, могут быть нежелательные результаты: либо логотип не отображается, либо, если он был сохранен как прозрачный gif, он отображается с неровными пиксельными краями там, где края предназначен для слияния с темным цветом фона.В этой статье представлен метод, который использует оптимизированное для печати изображение в HTML и CSS для замены изображения на изображение, удобное для экрана.

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

Проблемы с Internet Explorer и CSS
В этой статье рассматриваются различные методы устранения проблем с отображением CSS в Internet Explorer.

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

6. Методы CSS3

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

Смешивание CSS3 и jQuery
Подробный обзор методов объединения CSS3 и jQuery.

CSS-градиенты в действии
Сообщение с примерами градиентов CSS с включенным кодом.

Эффект тени в CSS3
Обзор использования собственного эффекта тени CSS3.

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

7. Инструменты CSS

Перечисленные здесь инструменты могут сделать ваш CSS лучше, быстрее и эффективнее.

SlickMap CSS — инструмент визуального сопоставления сайтов для веб-разработчиков
Инструмент для создания стилизованной карты сайта из простого неупорядоченного списка HTML.

Phoenix: Дополнения для Firefox
Phoenix — это дополнительный редактор Firefox, который позволяет работать с кодом CSS, HTML и JavaScript, включая тестирование. Он также сообщает вам, сколько файлов CSS или JS загружено на страницу, а также их размер и позволяет управлять этими файлами.

Juicer — инструмент упаковки CSS и JavaScript
Это приложение объединит ваши несколько файлов CSS или JS в один файл, уменьшая количество запросов HTML и ускоряя время загрузки.

Gridmaker v3
Простое онлайн-приложение для создания сетки.

Расширение Codetech для Firefox
Почувствуйте себя Dreamweaver в расширении Firefox. Редактируйте документы прямо рядом с вашими веб-страницами во время просмотра.

Boks — визуальный редактор сетки
Boks — это приложение AIR (поэтому оно работает в Windows, Mac и Linux), которое предоставляет пользовательский интерфейс для инфраструктуры Blueprint CSS. Он был разработан для тех, кто считает систему сеток хорошей, но никогда особо не уделял ей времени. Он обрабатывает конфигурацию сетки, базовый ритм pimpin ’, CSS (со сжатием или без него) и сетку.png экспорт и HTML макет.

Modernizr
Modernizr позволяет создавать операторы if в вашем CSS с интуитивно понятным синтаксисом.

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

Typeselect — Выбираемая замена текста
Используя typeface.js, jQuery, холст, toDataURL, свойства фона CSS и реальный наложенный текст, Type Select может комбинировать пользовательские шрифты с встроенными функциями выбора текста вашего браузера.Теперь вы можете работать с красиво оформленными шрифтами, как с обычным текстом. Недостатки: нет поддержки: при наведении курсора или переносе строки, текст в IE нельзя выделить.

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

Сжатие PHP, CSS, JavaScript (JS) и оптимизация производительности веб-сайта.
Эта статья дает хороший обзор сжатия GZip.

8. Еще статьи и ресурсы

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

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

Десять моих лучших приемов CSS
Краткое изложение некоторых отличных приемов и советов по CSS.

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

CSS-спрайты глупы — давайте вместо них будем использовать архивы!
Статья о том, почему использование архивов лучше, чем CSS-спрайтов.

10 удивительных приемов и приемов CSS
Ознакомьтесь с 10 кроссбраузерными методами CSS и хитростями для создания лучших веб-сайтов.

7 маленьких приемов CSS, которые всегда понадобятся для темы WordPress.
Обзор основных приемов и приемов CSS, характерных для дизайна и разработки WordPress.

21 Стильное решение CSS / jQuery для украшения вашего веб-дизайна
Коллекция методов CSS и jQuery, которые сделают ваши веб-сайты более эстетичными.

CSS: дань уважения селекторам
Отличная статья о селекторах CSS.

10 свойств CSS, которые «невозможно» реализовать в IE6
В этом посте рассматриваются десять методов CSS, которые предположительно невозможно было реализовать в IE6, а также информация о том, как заставить их работать.

Фоновые изображения и CSS в электронной почте HTML
Несколько советов по использованию фоновых изображений в электронной почте HTML.

Об авторе

Кэмерон Чапман — профессиональный веб-дизайнер и графический дизайнер с опытом работы более 6 лет. Она также пишет для ряда блогов, включая свой собственный Cameron Chapman On Writing. Она также является автором готовящейся к выходу книги «Известные в Интернете».

Мы также обсуждаем методы кодирования CSS в нашей предстоящей Smashing Book (23 доллара.90 29,90 $ , доступно по всему миру). Сделайте предварительный заказ сейчас и получите скидку 20%!

изучить веб-стандарты :: практическое руководство по css

Содержание

В этом руководстве рассматривается CSS с использованием ручного кодирования и Мастера стилей для Windows. Вы также можете следовать ему, используя инструкции Style Master для Mac OS X. Выполняя упражнения, вы узнаете все о CSS для стилизации текста и внешнего вида страницы, включая макет, и создадите стильно выглядящую страницу, подобную этой.Если вы хотите изучать CSS только с помощью ручного кодирования, просто выполните все упражнения и примеры кода и пропустите все специально разработанные инструкции Style Master.

Style Master — это редактор CSS, который включает полную поддержку ручного кодирования. Это отличный способ начать изучать CSS: код вручную, когда он подходит, и использование редакторов WYSIWYG, когда вы работаете с новыми свойствами и селекторами. Это руководство входит в состав 30-дневной демо-версии.

1. Введение

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

2. Краткое введение в CSS

Что такое таблицы стилей и как они работают.

3. Контрольный список инструментов

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

4. Моя первая таблица стилей

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

5. Внешний вид основной страницы

Создайте свои первые правила таблицы стилей и изучите некоторые из основных свойств.

6. Дополнительные свойства текста

См. Еще несколько способов стилизации текста.

7. Селекторы классов

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

8. Стилизация ссылок

Узнайте, как настроить внешний вид ссылок, чтобы они соответствовали остальному дизайну.

9. Макет страницы

Используйте CSS для создания плавного жидкого макета.

10. Творческое использование изображений

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

11. Селекторы потомков

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

12. Стилизация навигационной панели

Завершите страницу, стилизовав панель навигации.

13. Куда теперь?

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

Учебник

CSS — Часть 1 — Как создавать веб-сайты

Учебник CSS: Часть 1

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

Не только стили CSS, но и позиционирование CSS, это означает, что ТАБЛИЦЫ НЕ требуются!

После завершения вы будете создавать страницы сложными способами, которые позволят просматривать ваши веб-сайты на всех типах устройств, включая обычные компьютеры, сотовые телефоны, Iphone, PSP… на любом устройстве !!

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

Макет шаблона CSS

— часть 1 из 3

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

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

Приступим:

Вы можете загрузить файлы CSS и HTML, которые мы создали в этом руководстве: Файлы CSS

Вы можете проверить, как должна выглядеть страница, здесь: CSS Example Page

Теги, используемые в этом макете на основе CSS:

Благодаря мощи CSS мы сможем значительно сократить количество HTML-тегов, которые мы используем на странице, при этом сохраняя возможность компоновки великолепно выглядящих страниц, используя только 6 типов (из-за отсутствия лучшего word) HTML-тегов.

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

1. Теги заголовков, которые варьируются от ‘

‘ до ‘

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

, а наименее важный — в тег

. Пример заголовка этой статьи:

Это сообщает браузерам и поисковым системам, что эта страница в первую очередь посвящена: «Макету шаблона CSS»

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

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

2.

Тег Paragraph используется для обозначения частей страниц как «абзацев», достаточно просто. Теги абзаца — это то, что называется «блочным элементом»; это означает, что он действует как блок, в котором перед и после каждой пары тегов

автоматически вставляется пробел.Вы увидите, как это работает в следующих примерах.

3.