Лекция 4 Каскадные таблицы стилей CSSКаскадные таблицы стилей

Зарегистрируйтесь, чтобы просмотреть полный документ!

Лекция 4 Каскадные таблицы стилей CSS

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

А далее в этом элементе следует прописать правила. Сначала вы выбираете элемент, который хотите стилизовать. Например, абзац, т.е. элемент

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

. p { background-color: red; } Все это и называется правилом.

Можно добавить в CSS-правило столько свойств и их значений, сколько пожелаете. Например, p { background-color: silver; border: 1px solid gray; color: maroon; } В данном случае фон абзаца будет серебристого цвета, цвет текста красно-коричневого, а также будет создана граница вокруг абзаца в виде сплошной серой линии шириной в 1 пиксель.

Для того чтобы стилизовать разные элементы веб-страницы, нужно прописать правила для каждого из них. h1 { font-family: sans-serif; color: gray; } h2 { font-family: sans-serif; color: gray; } p { color: maroon; }

Поскольку правила для заголовков h1 и h2 абсолютно одинаковы, то их можно объединить. h1, h2 { font-family: sans-serif; color: gray; } p { color: maroon; }

В этом случае, у обоих заголовков будет один шрифт и цвет текста. Если же нужно будет добавить нижнюю границу для заголовка первого уровня, но не добавлять для заголовка второго уровня, то можно просто задать второе правило, которое добавляет свойство только для элемента h1: определение нижней границы. h1, h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; }

Элементы, которые мы выбираем для стилизации (h1; p; h1, h2), называются селектором. CSS позволяет задавать любые виды селекторов, которые определяют, для каких элементов применяется стиль.

Внешние таблицы стилей Мы оформили страницу lounge.html, однако нам нужно точно также стилизовать страницы elixir.html и directions.html. Можно скопировать элемент style со своими правилами в каждый файл. Если так сделать, то при необходимости поменять стиль оформления всего сайта вам придется вносить изменения в каждый файл. Однако существует способ проще.

Возьмите правила из lounge.html и поместите их в файл lounge.css. Создайте внешнюю ссылку на этот файл из файла lounge.html. Добавьте следующую строку в XHTML-код в разделе заголовков вместо элемента style: Создайте такие же внешние ссылки из файлов elixir.html и directions.html.

Переопределение наследуемых свойств Для того чтобы применить одинаковый стиль семейства шрифтов для всего документа, нужно его прописать в селекторе body. Если же нужно будет, чтобы у дочернего элемента (например, ) был другой стиль шрифта, то для этого мы просто укажем другое семейство шрифтов для этого селектора в таблице стилей. Это и называется переопределением наследуемых свойств. В CSS всегда используется более приоритетное правило. Итак, если у вас есть правило для и более приоритетное правило, заданное только для элемента , то будет использовано более приоритетное правило.

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

Свойства шрифтов Гарнитура font-family Размер font-size Начертание font-weight Стилизация font-style Оформление text-decoration

Семейства шрифтов Каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов: sans-serif serif monospace cursive fantasy

Семейство sans-serif содержит шрифты без засечек: Verdana, Arial, Arial Black, Geneva, Trebuchet MS. В семейство serif входят шрифты с засечками: Times, Times New Roman, Georgia. Семейство monospace состоит из шрифтов, символы которых имеют одинаковую фиксированную ширину: Courier, Courier New, Andale Mono. Эти шрифты используются в основном для отображения примеров кода программ. Семейство cursive состоит из шрифтов, буквы в которых подобны рукописным: Comic Sans, Apple Chancery. Семейство fantasy состоит из художественных и декоративных шрифтов: Last Ninya, Impact. Эти шрифты не очень широко распространены, доступны не на всех компьютерах и редко используются для серьезного веб-дизайна.

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

Свойств font-family дает возможность задать список предпочтительных шрифтов. Например, body { font-family: Verdana, Geneva, Arial, sans-serif; }

Размеры шрифтов Существует четыре способа того, как задать размер шрифта: В пикселах, например, body { font-size: 14px; } Когда вы указываете размер шрифта таким образом, вы говорите браузеру, какой высоты должны быть символы шрифта. Символы рх должны следовать сразу же после числа, не ставьте между ними пробел.

В процентах, например, font-size: 150%; Размер шрифта, заданный в процентах, определяет высоту шрифта относительно других шрифтов. body { font-size: 14px; h1 { font-size: 150%; } Учитывая, что font-size наследуемое свойство, при задании размера таким способом проценты будут вычисляться относительно размера шрифта родительского элемента. h1 наследует свойства body, поэтому размер его шрифта будет 150% от размера шрифта элемента .

В относительных единицах em. С помощью em вы задаете масштабный коэффициент. font-size: 1.2em; (Это означает, что размер шрифта будет масштабирован с коэффициентом 1.2) Допустим, вы таким образом задаете размер заголовков
. Тогда размер заголовков
будет составлять 1.2 размера шрифта родительского элемента, что в нашем случае означает в 1.2 раза больше, чем 14рх, и примерно равняется 17рх.

По ключевым словам. Вы можете определить размер шрифта как xx-small, x-small, small, medium, large, x-large, xx-large, и браузер преобразует эти слова в значения в пикселах. Обычно размеры шрифтов, которые задаются различными ключевыми словами, соотносятся друг с другом таким образом. Каждый следующий размер примерно на 20% больше предыдущего, а small обычно равен 12 пикселов в высоту. Тем не менее не забывайте, что ключевые слова не всегда одинаково определяются в различных браузерах и пользователи при желании могут их переопределить. body { font-size: small; }

Как же задавать размер шрифта? Выберите ключевое слово (рекомендуется small или medium) и укажите его в качестве размера шрифта в правиле для body. Таким образом вы зададите размер шрифта, используемый на вашей странице по умолчанию. Задайте размеры шрифтов для остальных элементов относительно размера шрифта элемента body, используя либо проценты, либо em (выбор за вами, так как это по сути это два разных способа выполнения одного и того же действия).

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

Насыщенность шрифтов font-weight: bold; (полужирный шрифт) font-weight: normal; (таким образом можно уменьшить насыщенность шрифта)

Стилизация шрифтов font-style: italic; (курсивный шрифт) font-style: oblique; (наклонные символы – стандартные символы наклонены вправо) Курсивный и наклонный – это два стиля, которые устанавливают для шрифта наклон вправо. Поскольку вы не можете управлять теми шрифтами и браузерами, что используют ваши посетители, вы будете в одних случаях получать курсивный шрифт, а в других наклонный, независимо от того, какой стиль вы указали.

Оформление текста text-decoration: line-through; (перечеркнутый текст) text-decoration: underline; (подчеркнутый текст) text-decoration: overline; (надчеркнутый текст) text-decoration: none; (все виды декорировния будут удалены из элемента)

Сокращения при задании шрифтов body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: small; font-style: oblique; font-weight: bold; }

Однако при задании шрифтов можно все свойства объединить Рассмотрим свойства, которые можно задать для шрифтов: font-family, font-style, font-weight, font-size, font-variant и line-height. line-height – это межстрочный интервал Значения line-height: множитель | значение | проценты | normal | inherit

font-variant – определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью. Синтаксис font-variant: normal | small-caps | inherit Значения normal - оставляет регистр символов исходным, заданным по умолчанию. small-caps - модифицирует все строчные символы как заглавные уменьшенного размера. inherit - наследует значение родителя

font: font-style font-variant font-weight font-size/line-height font-family Эти свойства могут перечисляться в сокращении. Их порядок имеет значение. Если свойство не используется, его можно не указывать.

Например: body{ font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } или font: small/1.6em Verdana, Helvetica, Arial, sans-serif;