Каскадные таблицы стилей звучат устрашающе. Одно только имя вызывает в воображении образы загадочного кода и синтаксиса, слишком сложного для понимания непрофессионалами. В действительности, однако, CSS является одним из самых простых и удобных инструментов, доступных веб-разработчикам.
Эта статья фактически является главой из книги SitePoint . Антология CSS: 101 полезный совет, хитрости и полезные советы .
Кто должен читать эту книгу?
Эта книга предназначена для людей, которым нужно работать с CSS — веб-дизайнеры и разработчики, которые видели классные дизайны CSS, но не имеют времени пробираться сквозь массы теории и дебатов, чтобы создать сайт. Каждая проблема решается с помощью рабочего решения, которое можно реализовать как есть или использовать в качестве отправной точки.
Эта книга не учебник; в то время как глава 1 «Начало работы с CSS» охватывает самые основы CSS, а первые главы посвящены более простым методам, чем те, которые следуют, вы найдете примеры, которые легче понять, если у вас есть базовые знания в CSS.
Что кроется в этой серии?
Эта серия глав будет включать в себя первые четыре главы из Антологии CSS: 101 Essential Tips, Tricks & Hacks .
Эта глава не соответствует тому же формату, что и остальная часть книги, — это просто краткое руководство по CSS для тех, кому нужно освежить основы CSS. Если вы использовали CSS в своих собственных проектах, вы можете пропустить эту главу и вернуться к ней по мере необходимости, если вы обнаружите, что хотите более подробно изучить основные концепции.
Глава 2: Стилизация текста и другие основы
В этой главе рассматриваются методы для стилизации и форматирования текста в ваших документах; Размер шрифта, цвета и удаление раздражающего лишнего пробела вокруг элементов страницы объясняются по мере продвижения главы. Даже если вы уже используете CSS для стилизации текста, вы найдете здесь несколько полезных советов.
Объединение CSS и изображений может создавать мощные визуальные эффекты. В этой главе рассматриваются способы, с помощью которых вы можете сделать это, и рассматриваются фоновые изображения (не только на теле), а также расположение текста с изображениями, среди других тем.
Нам всем нужна навигация, и в этой главе рассказывается, как это сделать в стиле CSS. В этой главе рассматриваются вопросы замены CSS для навигации на основе изображений, навигации «вкладок» CSS, комбинирования фоновых изображений с текстом CSS для создания привлекательных и доступных меню и использования списков для структурирования навигации доступным способом.
Для получения информации см. Страницу книги .
Но теперь давайте начнем с CSS!
В этой первой главе, которая принимает формат, отличный от остальной части книги, я познакомлю вас с основами CSS и покажу, как его можно использовать для упрощения задачи по управлению последовательно отформатированным веб-сайтом. Если вы использовали CSS для форматирования текста на своих сайтах, вы можете пропустить эту главу и перейти непосредственно к решениям, которые начинаются в главе 2 «Стилизация текста и другие основы». И, если вы предпочитаете читать эту информацию в автономном режиме, вы можете скачать .pdf версию первых 4 глав здесь .
Проблема с HTML
CSS — это язык, используемый для определения форматирования, применяемого к веб-сайту, включая цвета, фоновые изображения, гарнитуры (шрифты), поля и отступы. Если вы никогда раньше не использовали CSS, вы можете подумать: «Ну, теперь я делаю все это с помощью тегов HTML. Зачем мне нужен CSS?» Это правильный вопрос, на который лучше всего ответить с иллюстрацией проблем, которые могут возникнуть при определении стилей с помощью HTML.
В настоящее время популярным выбором дизайна является использование шрифта без засечек (например, Arial, Verdana, Tahoma и т. Д.) Для основного текста сайта. Поскольку большинство веб-браузеров по умолчанию используют шрифт с засечками, например Times New Roman, при создании сложного макета веб-страницы с использованием шрифта без засечек часто используется множество тегов <font> . В сложном макете вы можете увидеть десять или двадцать тегов <font> предназначенных для применения одного и того же шрифта ко всему тексту на странице. Умножьте это на пять — количество страниц на скромном сайте — и мы получим около ста тегов. На более мощном сайте может быть пятьдесят или более страниц, и в этом случае вы просматриваете тысячу тегов <font> , все из которых посвящены применению этого основного, согласованного стиля к тексту вашего документа.
А вот и кикер: ваш клиент звонит вам поздно вечером в пятницу, чтобы сказать: «Вердана хороша, но все используют ее. Давайте вместо этого воспользуемся Tahoma». Помимо изысканных инструментов поиска и замены, теперь перед вами стоит задача настроить сто, тысячу или даже больше тегов <font> чтобы сделать то, что, с точки зрения вашего клиента, кажется очень простым изменением. Ты можешь поцеловать те лыжные выходные, которые ты запланировал на прощание. И постарайтесь не стонать вслух — это не подходит большинству клиентов.
Если вы знаете свой HTML, вы можете подумать, что <basefont> , который позволяет вам установить шрифт по умолчанию, который будет использоваться на странице, является хорошим решением этой проблемы. Но даже тогда вам придется настроить один тег для каждой страницы вашего сайта. Добавьте другой стиль шрифта к уравнению (если, скажем, вы хотите использовать другой шрифт для этой вашей необычной панели навигации), и проблема вернется полностью.
Еще одна причина, по которой вам не следует использовать HTML для форматирования вашего сайта, заключается в том, что эти элементы представления устарели (помечены для удаления в будущих спецификациях) и не могут использоваться, если вы хотите следовать строгому DOCTYPE, например HTML 4.01 Strict или XHTML. 1.0 Строгое. Хотя ваша страница по-прежнему будет действительной, если вы используете переходный DOCTYPE, рекомендуется избегать использования этих устаревших элементов, где это возможно. Как вы увидите из примеров в этой книге, CSS позволяет вам делать много вещей, которые вы не можете сделать с помощью одного HTML, поэтому есть много причин, почему вы должны использовать CSS — но давайте прекратим говорить и рассмотрим некоторые CSS в действие!
Определение стилей с помощью CSS
Основное назначение CSS — позволить разработчику определить стиль (список деталей форматирования, таких как шрифты, размеры и цвета), а затем применить его к одной или нескольким частям одной или нескольких страниц HTML с помощью селектора. Давайте посмотрим на базовый пример, чтобы увидеть, как это делается.
Рассмотрим следующую схему документа HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Simple Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <h1>< font face="sans-serif" color="#3366CC" >First Title< /font > </h1> <p>...</p> <h2>< font face="sans-serif" color="#3366CC" >Second Title< /font > </h2> <p>...</p> <h2>< font face="sans-serif" color="#3366CC" >Third Title< /font > </h2> <p>...</p> </body> </html>
Этот документ содержит три заголовка, созданных с использованием тегов <h1> и <h2> . Чтобы сделать эти заголовки более заметными, я использовал теги <font> чтобы они отображались голубым шрифтом без засечек (например, браузеры Windows будут отображать их в Arial). Обратите внимание на повторение, даже на этом базовом уровне. Я должен был указать детали шрифта, который хотел три раза. Разве не имеет смысла определить шрифт только один раз, а затем применить его к моим заголовкам? Вот версия CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Simple Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> h1, h2 { font-family: sans-serif; color: #3366CC; } </style> </head> <body> <h1>First Title</h1> <p>...</p> <h2>Second Title</h2> <p>...</p> <h2>Third Title</h2> <p>...</p> </body> </html>
Вся магия заключается в тегах <style> в <head> документа, где мы определяем наш голубой шрифт без засечек и применяем его ко всем тегам <h1> и <h2> в документе. Не беспокойтесь о синтаксисе; Я объясню это подробно через минуту. Между тем, теги <font> полностью исчезли из <body> , в результате чего наш документ выглядит намного менее загроможденным. Изменения в определении стиля в верхней части страницы будут влиять на все три заголовка, а также на любые другие заголовки, добавляемые на страницу.
Теперь, когда у вас есть представление о том, что делает CSS, позвольте мне объяснить различные способы использования стилей CSS в ваших документах HTML. Самый простой способ размещения стилей CSS на ваших веб-страницах — использовать <style> , как я это делал в примере выше. Это позволяет вам объявлять любое количество стилей CSS, помещая их в <style> следующим образом:
<style type="text/css"> CSS Styles here </style>
Атрибут type определяет язык, который вы используете для определения своих стилей. CSS является единственным широко используемым языком на момент написания этой статьи и обозначается значением text/css .
Хотя это красиво и просто, <style> имеет один существенный недостаток. В частности, если вы хотите использовать определенный набор стилей на своем сайте, вам придется повторять эти определения стилей в <style> в верхней части каждой страницы вашего сайта.
Более разумная альтернатива — поместить эти определения в простой текстовый файл (обычно с именем файла .css ), а затем связать ваши документы с этим файлом. Любые изменения в определениях стиля в этом одном файле будут влиять на все страницы, которые ссылаются на него. Это достигает цели определений стиля для всего сайта, упомянутых ранее.
Чтобы связать документ с текстовым файлом CSS (скажем, styles.css ), поместите <link> в заголовок документа:
<link rel="stylesheet" type="text/css" href="styles.css" />
Давайте вернемся к исходному примеру, в котором три заголовка имели общий стиль; этот документ теперь будет выглядеть так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Simple Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> < link rel="stylesheet" type="text/css" href="styles.css" / > </head> <body> <h1>First Title</h1> <p>...</p> <h2>Second Title</h2> <p>...</p> <h2>Third Title</h2> <p>...</p> </body> </html>
Файл styles.css будет содержать определение стиля:
h1, h2 { font-family: sans-serif; color: #3366CC; }
Как и в случае файла изображения, вы можете повторно использовать этот файл styles.css количестве страниц. Это не только спасет вас от печатания, но и обеспечит последовательный просмотр заголовков по всему сайту.
CSS селекторы
Каждое определение стиля CSS имеет два компонента: селектор , который определяет теги, к которым будет применяться стиль, и свойства , которые определяют, что на самом деле делает стиль. В предыдущем примере селектор был h1 , h2 , указывая, что стиль должен применяться ко всем тегам <h1> и <h2> . Оставшаяся часть определения стиля включает атрибуты, определяющие шрифт и цвет, которые должны применяться стилем. В этом разделе я опишу основные типы селекторов CSS и приведу примеры каждого из них.
Селектор тегов
Самая основная форма селектора — это то, что мы уже видели. Присваивая имя определенному тегу HTML, вы можете применять определение стиля к каждому вхождению этого тега в документ. Это часто используется для установки основных стилей, которые будут отображаться на всем сайте. Например, следующее может быть использовано для установки шрифта по умолчанию для веб-сайта:
body, p, td, th, div, blockquote, dl, ul, ol { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #000000; }
Этот довольно длинный селектор представляет собой список тегов, каждый из которых будет иметь определение стиля (шрифт, размер и цвет). Теоретически, <body> — это все, что нужно (так как все остальные теги появляются внутри <body> и, таким образом, наследуют его свойства), но многие браузеры неправильно переносят свойства стиля в таблицы и другие элементы. Таким образом, я указал другие элементы для полноты картины.
Селекторы псевдокласса
Форматирование тега <a> в HTML более универсально, чем форматирование большинства других тегов. Указав vlink link , vlink и alink в <body> , вы можете установить цвета для различных состояний ссылок на вашей странице (не посещенных, посещенных и по которым щелкают соответственно). CSS предоставляет свой собственный способ сделать это и добавляет четвертое состояние, которое применяется, когда мышь наводит курсор на ссылку. Рассмотрим следующий пример:
a:link { color: #0000FF; } a:visited { color: #FF00FF; } a:hover { color: #00CCFF; } a:active { color: #FF0000; }
Этот код содержит четыре определения стиля CSS. Каждый из селекторов использует то, что называется псевдоклассом тега <a> . Первая, link , относится только к непосещенным ссылкам и указывает, что они должны быть синего цвета. Второй, visited , относится к посещенным ссылкам и делает их пурпурными. Третье определение стиля, hover , переопределяет первые две, делая ссылки светло-голубыми при наведении на них hover мыши, независимо от того, были они посещены или нет. Окончательное определение стиля делает ссылки красными, когда на них нажимают. Поскольку active появляется последним, он отменяет первые три, поэтому он вступит в силу независимо от того, были ли ссылки посещены или нет, а также от того, находится ли мышь над ними или нет.
Селекторы классов
Присвоение стилей тегам — это хорошо, но что произойдет, если вы захотите назначить разные стили одинаковым тегам, встречающимся в разных местах вашего документа? Вот где приходят классы CSS. Рассмотрим следующий стиль, который делает весь текст абзаца на странице синим:
p { color: #0000FF; }
А что если у вас на странице есть боковая панель с синим фоном? Вы не хотели бы, чтобы текст на боковой панели также был синим, потому что он был бы невидимым! Что вам нужно сделать, это определить класс для текста на боковой панели, а затем назначить стиль CSS для этого класса:
p { color: #0000FF; } .sidebar { color: #FFFFFF; }
Это второе правило использует селектор класса, который указывает, что стиль должен применяться к любому тегу класса sidebar . Точка указывает, что класс именуется, а не тег. Чтобы создать текстовый абзац класса sidebar , вы добавляете атрибут класса к тегу:
<p class="sidebar" >This text will be white, as specified by the CSS style definitions above.</p>
А что если в боковой панели есть ссылки? По умолчанию они будут отображаться так же, как и любые другие ссылки на вашей странице; однако добавьте атрибут class="sidebar" к тегу, и они тоже станут белыми:
<p class="sidebar">This text will be white, <a class="sidebar" href="link.html">and so will this link</a>.</p>
Это довольно аккуратно, но что, если вы хотите, чтобы ссылки выделялись немного больше, отображая их жирным шрифтом? Добавление атрибута bold текста к классу sidebar сделает всю вашу боковую панель жирным шрифтом. Вам нужен CSS-селектор, который выбирает ссылки только класса боковой панели. Комбинируя селектор тега с селектором класса, вы можете сделать именно это:
p { color: #0000FF; } .sidebar { color: #FFFFFF; } a.sidebar:link, a.sidebar:visited { font-weight: bold; }
Обратите внимание, что мы также использовали псевдоклассы :link и :visited <a name="..."> для указания тегов <a> которые являются ссылками (в отличие от тегов <a name="..."> , которые не являются таковыми).
Также обратите внимание, что наши ссылки на боковой панели по-прежнему белые — оба стиля, относящиеся к классу боковой панели, применяются к нашим ссылкам на боковой панели. Однако если мы указали другой цвет в третьем стиле, ссылки примут этот новый цвет, поскольку третий селектор более специфичен, а стили CSS применяются в порядке увеличения специфичности селектора.
Между прочим, вызывается процесс применения нескольких стилей к одному элементу страницы, и именно там каскадные таблицы стилей получили свое имя.
Контекстные селекторы
Если ваша боковая панель содержит много ссылок, становится утомительно назначать класс sidebar каждому тегу <a> . Разве не было бы неплохо использовать селектор, чтобы выбрать любую ссылку, которая появилась внутри абзаца класса боковой панели? Вот для чего нужны контекстные селекторы: выбор тега на основе его контекста, то есть на основе тегов, которые его содержат.
Вот новый CSS:
p { color: #0000FF; } .sidebar { color: #FFFFFF; } p.sidebar a:link, p.sidebar a:visited { font-weight: bold; color: #FFFFFF; }
И вот обновленный HTML:
<p class="sidebar">This text will be white, <a href="link.html">and so will this link</a>.</p>
Как вы можете видеть, контекстный селектор предоставляет список селекторов, разделенных пробелами, которые должны соответствовать тегам «извне». В этом случае, поскольку ссылка (сопоставляемая селектором a:link или a:visited ) находится внутри абзаца боковой панели (сопоставляемого селектором p.sidebar ), стиль применяется к ссылке.
Обратите внимание, что для того, чтобы ссылка оставалась белой, мы должны были добавить этот цвет в атрибуты CSS для ссылок, так как стиль для класса sidebar больше не применяется к ссылкам.
Селекторы ID
Подобно селекторам классов, селекторы идентификаторов используются для выбора одного конкретного тега, а не группы тегов. Выбранный вами тег идентифицируется атрибутом ID следующим образом:
<p id="sidebar1">This paragraph is uniquely identified by the ID "sidebar1".</p>
Селектор идентификатора — это просто идентификатор, которому предшествует хеш (#). Таким образом, следующий стиль сделает вышеуказанный абзац белым:
#sidebar1 { color: #FFFFFF; }
Селекторы ID могут использоваться в сочетании с другими типами селекторов. Например, следующий стиль применяется к непосещенным ссылкам, появляющимся в абзаце sidebar1 :
#sidebar1 a:link { font-weight: bold; color: #FFFFFF; }
Существуют другие типы селекторов, но они не используются широко. Поддержка их в некоторых браузерах (особенно в Netscape 4) в лучшем случае глючит.
Свойства CSS
В примерах, использованных до сих пор в этой главе, мы использовали несколько общих свойств CSS, таких как color, font-family, font-size и font-weight. В оставшейся части книги мы будем использовать эти свойства — и многое другое.
Резюме
Эта глава дала вам представление о CSS и его использовании на самом базовом уровне. Если вы раньше не использовали CSS, но у вас есть общее представление о концепциях, обсуждаемых в этой главе, вы сможете начать использовать примеры из этой книги. Примеры в первых главах этой книги несколько проще, чем в конце, поэтому, если вы раньше не работали с этой технологией, возможно, вы захотите начать с более ранних глав. Они будут основаны на знаниях, которые вы получили в этой главе, чтобы научиться пользоваться и, надеюсь, наслаждаться CSS.
Следите за следующей главой Антологии CSS: 101 полезный совет, хитрости и хаки — она скоро появится на SitePoint. Или, если вы не можете ждать, загрузите первые 4 главы бесплатно прямо сейчас .