Смесь новых стилей
Давайте немного изменим внешний вид сайта — добавим больше стилей в тело и изменим внешний вид навигации. Скопируйте приведенный ниже CSS в ваш файл style1.css (или скопируйте его из архива кода книги):
/ *
CSS для Bubble Под сайтом
* /
тело {
семейство шрифтов: Verdana, Helvetica, Arial, без засечек;
цвет фона: # e2edff;
высота линии: 125%;
отступы: 15 пикселей;
}
h1 {
семейство шрифтов: «Trebuchet MS», Helvetica, Arial, без засечек;
размер шрифта: х-большой;
}
li {
размер шрифта: маленький;
}
h2 {
цвет синий;
размер шрифта: средний;
Вес шрифта: нормальный;
}
п {
размер шрифта: маленький;
цвет: темно-синий;
}
Сохраните файл CSS, затем нажмите « Обновить» (или « Обновить» ) в браузере. Надеемся, вы увидите страницу, подобную той, что показана на рисунке 3.7, «Применение незначительных изменений в CSS, которые влияют на отображение шрифта».
Новый взгляд в мгновение ока!
Мы ввели здесь довольно много новых объявлений стилей. Давайте рассмотрим некоторые из них в порядке их появления в файле CSS:
тело {
семейство шрифтов: Verdana, Helvetica, Arial, без засечек;
цвет фона: # e2edff;
высота линии: 125%;
отступы: 15 пикселей;
}
Свойство background-color может быть применено к большинству элементов на веб-странице, и существует множество различных способов определения самого цвета. Одним из них является использование признанных цветовых названий, таких как navy blue , blue , red , yellow и т. Д. Их легко запомнить и записать, но вы можете быть ограничены дальностью действия. Другой способ ссылки на цвета — использовать шестнадцатеричную цветовую спецификацию. Да, вы правы: это звучит немного страшно. Я имею в виду, просто посмотрите на код для этого:
цвет фона: # e2edff ;
Вряд ли это интуитивно понятно? Эта неясная ссылка ( #e2edff ) переводится в светло-голубой оттенок. Вы не могли, как новичок, начать догадываться, что это будет голубой цвет. К счастью, в Интернете есть множество инструментов, которые позволяют вам выбрать цвет из диаграммы (часто называемой палитрой цветов ), а затем дать вам соответствующий код. Взгляните на некоторые из этих инструментов [5], и вскоре вы сможете найти шестнадцатеричные числа, необходимые для создания идеальных цветовых схем.
Примечание: Что за хекс?
Цвета в HTML часто записываются в виде шестнадцатеричной спецификации цвета. Возможно, вы помните шестнадцатеричную систему подсчета из вашего математического класса в старшей школе. Или, может быть, вы спали в глубине комнаты. Ничего. Шестнадцатеричная система — та странная система подсчета, которая идет до 16 вместо 10; тот, который, как ты думал, тебе никогда не пригодится. Ну, вы делаете сейчас!
Правильно: если считать шестнадцатеричное число, то есть не десять, а 16 цифр . Шестнадцатеричная последовательность выглядит так:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12…
А? Что тут происходит? Ну, как вы можете видеть, после того, как мы достигаем 9, вместо того, чтобы идти прямо к 10 (как мы делаем при десятичном подсчете), мы проходим через A, B, C, D, E и F, прежде чем наконец достигнем 10. Это дает нам шесть дополнительных цифр, чтобы использовать, когда мы считаем. Звук сбивает с толку? Ну, как это происходит, компьютеры могут считать в шестнадцатеричном формате гораздо лучше, чем люди!
Ключевым моментом здесь является то, что все те числа, которые мы знаем и любим в десятичной системе, такие как 2 748, 15 000 000 и 42, могут быть представлены в шестнадцатеричном формате. И Таблица 3.1, «Десятичное в шестнадцатеричное преобразование» доказывает это!
Десятичное в шестнадцатеричное преобразование
| Десятичная дробь | шестнадцатеричный |
| 7 | 7 |
| 15 | F |
| 2748 | азбука |
| 15000000 | E4E1C0 |
| 69 | 45 |
Когда цвет выражается в виде шестнадцатеричного числа, такого как ff0000 , это число фактически содержит три значения, которые объединяются вместе. Значения представляют пропорции красного (часть ff ), зеленого (первые два нуля) и синего (вторые два нуля), которые смешиваются для создания указанного цвета. Эти три основных цвета можно комбинировать для отображения любого цвета на экране, аналогично тому, как телевизор использует различное количество красного, зеленого и синего для создания единой точки на экране. [6] В этом примере ff — это значение для красного, а зелёное и синее значения равны нулю. Тогда вас может не удивить, что #ff0000 даст вам красный цвет.
Свойство line-height интересное. Увеличив это значение (в нашем примере мы использовали 125%), вы можете увеличить расстояние между строками текста, что может значительно улучшить читаемость. Попробуйте изменить это значение, сохраните свой CSS-файл и посмотрите, как новое значение влияет на текст на вашей веб-странице.
Свойство padding используется для обеспечения пространства между внешним краем рассматриваемого элемента и содержимым, которое находится внутри него. Поскольку мы ссылаемся на элемент body , вы можете думать о внешнем крае как о верхней, нижней и боковых сторонах окна просмотра браузера (то есть части браузера, где веб-страница доступна для просмотра, не включая какой-либо из панели инструментов браузера, меню или полосы прокрутки). Мы рассмотрим заполнение более подробно в Главе 4, Формирование с использованием CSS.
Значение, которое мы дали этому свойству, указывает, сколько пространства должно существовать между краем области просмотра и содержимым. В данном случае мы указали 15px или 15 пикселей. Мы упоминали пиксели раньше, когда указывали размер изображения, но что такое пиксель ? По сути, один пиксель — это одна из крошечных точек, которые составляют то, что вы видите на экране компьютера. Сам экран состоит из сотен тысяч этих пикселей, поэтому 15-пиксельная рамка не займет слишком много места на вашем экране!
Теперь к стилю абзаца:
п {
размер шрифта: маленький;
цвет: темно-синий;
}
Мы уже показали, что можно изменить цвет текста в абзаце; Теперь мы собираемся выбрать подходящий цвет военно-морского флота.
Давайте посмотрим, что изменилось со стилем элемента списка:
li {
размер шрифта: маленький;
}
Размер элементов списка немного изменился благодаря нашему применению свойства font-size . Здесь мы решили установить размер шрифта с помощью small ключевого слова, но мы могли бы также легко использовать процентные или пиксельные методы. Как мы уже видели — существует много способов обшить кошку с помощью CSS! Ключевые слова с размером шрифта варьируются от xx-small до xx-large и предлагают быстрый способ оформления текста. К сожалению, разные браузеры реализуют ключевые слова с размером шрифта немного по-разному, и, к сожалению, нельзя гарантировать, что шрифт xx-large будет отображаться одинакового размера во всех браузерах. Однако, если вы не очень беспокоитесь о точном размере, эти ключевые слова являются хорошей отправной точкой.
Мы также ввели новое правило для элемента h1 (основной заголовок на наших веб-страницах, где отображается название сайта) и еще раз использовали свойство font-size чтобы указать размер текста (очень большой!) ,
h1 {
семейство шрифтов: «Trebuchet MS», Helvetica, Arial, без засечек;
размер шрифта: х-большой;
}
Элемент h2 также получает незначительное изменение:
h2 {
цвет синий;
размер шрифта: средний;
Вес шрифта: нормальный;
}
Браузеры обычно отображают заголовки жирным шрифтом, но мы можем сделать так, чтобы они отображались стандартным шрифтом, задав font-weight свойства font-weight значение normal .