Во второй части этой серии мы создадим файл CSS (Cascading Style Sheet) для редактирования внешнего вида нашей HTML-страницы. Веб-дизайнеры держат содержимое веб-страницы (HTML) отдельно от стиля (CSS), чтобы сделать исходный код легко читаемым, и сделать редизайн сайта намного проще, чем если бы стили были смешаны с контентом.
Также доступно в этой серии:
- Руководство для начинающих по веб-дизайну: часть 1
- Руководство для начинающих по веб-дизайну: часть 2
- Руководство для начинающих по веб-дизайну: часть 3
Изображение выше, как выглядит наша веб-страница прямо сейчас. Сегодня мы возьмем эту неустановленную страницу и с помощью CSS превратим ее в следующую:
Шаг 1: Начало работы
Используя предпочитаемый вами текстовый редактор, создайте новый пустой файл в том же каталоге, что и ваша HTML-страница, и назовите его «style.css» — это файл, в котором мы будем хранить все наши стили.
Но сначала нам нужно сослаться на наш CSS-файл на нашей веб-странице.
Внутри HTML-файла добавьте следующую строку в раздел <head>, чуть ниже <title>:
|
1
|
<link rel=»stylesheet» href=»style.css» type=»text/css» media=»screen» charset=»utf-8″ />
|
Введите следующее в style.css:
|
1
2
3
|
body {
background-color: #eeeeee;
}
|
Здесь мы задаем стиль для тега <body> на нашей HTML-странице. Стилизуя тело, мы создаем стиль всей страницы. В фигурных скобках {} мы вводим стили для применения к целевому тегу.
background-color — это свойство CSS для цвета фона целевого тега. После ввода свойства у нас есть двоеточие (:), за которым следует значение этого свойства. В конце каждого свойства CSS вы должны ввести точку с запятой (;).
#eeeeee — это шестнадцатеричное число, представляющее следующий оттенок серого: , Это может быть знакомо вам, если у вас есть опыт работы с любым графическим пакетом, таким как Photoshop.
Вы также можете установить цвета по их имени цвета в HTML (не рекомендуется, так как у вас мало контроля над цветовыми оттенками):
|
1
|
background-color: red;
|
Или как десятичное число RGB :
|
1
|
background-color: rgb(255, 255, 255);
|
Взгляните на свою веб-страницу. Фон теперь должен быть другого цвета:
Укладка тела
Помимо изменения цвета фона, добавим еще несколько стилей к тегу <body>:
- Цвет текста: Цвет по умолчанию, который браузер дает тексту — черный (# 00000). Давайте заменим это на почти черный цвет, который будет выглядеть немного менее резким на фоне, например, # 111111.
- Шрифт: большинство браузеров устанавливают шрифт по умолчанию «Times New Roman», нам нужен похожий шрифт с засечками , но немного более «классический». Мы установим шрифт «Грузия».
- Размер шрифта: шрифт сейчас немного велик, мы уменьшим его до 90% от размера по умолчанию.
Добавьте следующие свойства в селектор стиля body {} вместе с background-color:
|
1
2
3
|
color: #111111;
font-family: «Georgia», «Times New Roman», serif;
font-size: 90%;
|
В первой строке мы используем свойство «color», чтобы установить цвет текста на нашей странице равным # 111111.
После этого мы используем «font-family» для изменения шрифта. Поскольку на всех компьютерах могут не устанавливаться одни и те же шрифты, важно настроить другие шрифты так, чтобы браузер использовал их, если он не может найти первый шрифт.
В нашем случае мы устанавливаем шрифт по умолчанию «Грузия». В том маловероятном случае, если посетителю нашего сайта не будет установлена Грузия, браузер будет использовать шрифт «Times New Roman». Если этот шрифт также не установлен, вместо него будет использоваться системный шрифт с засечками .
Наконец, мы используем «font-size», чтобы установить размер текста на нашей странице равным 90% от значения по умолчанию. Чтобы подтвердить, ваш CSS-файл должен теперь читать:
|
1
2
3
4
5
6
|
body {
background-color: #eeeeee;
color: #111111;
font-family: «Georgia», «Times New Roman», serif;
font-size: 90%;
}
|
Взгляните на страницу в браузере:
Модель Box — поля, отступы и границы
Некоторые из наиболее важных свойств CSS для стилевых страниц — «margin», «padding» и «border». Посмотрите на диаграмму ниже:
Каждый элемент HTML по сути представляет собой блок с содержимым посередине. Вокруг содержимого находится отступ, который добавляет пустое пространство и зависит от цвета фона элемента.
Граница находится на краю отступа, а граница окружает поле, которое добавляет прозрачное пустое пространство вокруг объекта.
На изображении ниже показано изображение, выровненное по левому краю двух абзацев текста. Это изображение не имеет отступов, границ или полей, поэтому оно находится максимально близко к тексту.
Если бы мы предоставили изображению следующие свойства:
|
1
2
3
4
5
|
padding: 3px;
border: 3px solid #dddddd;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
|
Это будет выглядеть так:
Вы можете ясно видеть, что серая граница 3px вступает в силу. Пустое пространство между изображением и границей — это отступы, а разные поля добавили прозрачное пространство вокруг внешней границы, чтобы немного отделить его от текста.
Поскольку заполнение принимает цвет фона элемента, если бы мы добавили следующее свойство:
|
1
|
background-color: yellow;
|
Мы получим:
Шаг 2: Контейнер
Прямо сейчас наша веб-страница заполняет всю ширину браузера, что серьезно влияет на читаемость страницы в больших браузерах. Чтобы бороться с этим, мы обернем весь контент нашей веб-страницы в «контейнер», а затем используем CSS, чтобы ограничить ширину этого контейнера.
Откройте файл HTML в текстовом редакторе и сразу после открывающего тега <body> введите:
|
1
|
<div id=»container»>
|
И непосредственно перед закрывающим тегом </ body> закройте контейнер:
|
1
|
</div>
|
Тег <div> помечает «деление» и в основном используется как строительный блок, помогающий разметить части страницы.
Все теги HTML могут иметь атрибуты ID и Class, чтобы помочь со стилем. Обратите внимание, что вы можете использовать идентификатор только один раз на той же странице, и это полезно для элементов, которые могут существовать только один раз — например, контейнер.
Атрибуты класса могут использоваться любое количество раз на одной странице и полезны для общего стиля между элементами (например, выравнивание изображения). Мы рассмотрим подробнее атрибут класса позже.
В своем CSS-файле добавьте следующее:
|
1
2
3
|
#container {
width: 900px;
}
|
# In #container — это селектор CSS для «HTML-элемента с идентификатором …». Мы также можем написать этот селектор как div # container .
Мы установили ширину контейнера в 900 пикселей. Это хорошая ширина для веб-сайта, но имейте в виду, что максимальная рекомендуемая ширина для использования — 960 пикселей, чтобы обеспечить отображение страницы без горизонтальной полосы прокрутки на подавляющем большинстве разрешений экрана.
Чтобы центрировать контейнер в окне браузера, добавьте следующий стиль в #container:
|
1
|
margin: 0 auto;
|
Это устанавливает верхнее и нижнее поля равными 0 (т.е. без полей), а левое и правое поля рассчитываются автоматически — это означает, что браузер будет центрировать контейнер внутри окна браузера.
CSS Shorthand
В стиле поля для контейнера мы использовали сокращение CSS. Мы могли бы написать стиль как:
|
1
2
3
4
|
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
|
Однако, установив «margin» и присвоив ему два значения («0» и «auto»), первое значение используется для верхнего и нижнего полей, а второе — для левого и правого.
Используя одно значение
Стиль, представленный ниже, добавит поле в 5px к каждой стороне элемента:
|
1
2
3
4
5
6
7
8
|
/* Short-hand: */
margin: 5px;
/* Long-hand: */
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
|
Две ценности
Это даст 10px запас сверху и снизу и 20px слева и справа:
|
1
2
3
4
5
6
7
8
|
/* Short-hand: */
margin: 10px 20px;
/* Long-hand: */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
|
Три ценности
Если мы устанавливаем три значения, первое значение используется для верхнего поля, второе используется для левого и правого полей, а третье используется для нижнего поля.
|
1
2
3
4
5
6
7
8
|
/* Short-hand: */
margin: 10px 15px 5px;
/* Long-hand: */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
|
Четыре ценности
Устанавливая четыре значения, первое — это верхнее поле, второе — справа, третье — снизу, а четвертое — слева. Думайте об этом порядке, как обтекание элемента по часовой стрелке — сверху, справа, снизу, слева.
|
1
2
3
4
5
6
7
8
|
/* Short-hand: */
margin: 5px 3px 9px 12px;
/* Long-hand: */
margin-top: 5px;
margin-right: 3px;
margin-bottom: 9px;
margin-left: 12px;
|
Вы можете использовать этот сокращенный стиль с полями и отступами. Чтобы прочитать о других методах сокращения CSS, ознакомьтесь с этой статьей на WebCredible .
Шаг 3: Заголовок
По мере продвижения вниз по странице, следующий раздел — заголовок. Здесь мы хотим центрировать заголовок на странице и нанести на него тонкую текстовую тень.
Добавьте следующий стиль в вашу таблицу стилей:
|
1
2
3
4
|
header h1 {
text-align: center;
text-shadow: 1px 1px 1px #999999;
}
|
Селектор «заголовок h1» означает «найти каждый h1 внутри заголовка».
«text-align» делает точно так, как вы ожидаете: он устанавливает горизонтальное выравнивание элемента. В этом случае мы устанавливаем его в центр. Вы также можете установить его «вправо» или «влево» (по умолчанию).
«text-shadow» является новым свойством в CSS 3 и требует четырех значений:
- Количество пикселей вправо для отображения тени (используйте отрицательное число, чтобы установить его влево)
- Количество пикселей ниже для отображения тени (используйте отрицательное число, чтобы установить его выше)
- Количество пикселей для размытия тени
- Цвет тени
В нашем случае мы устанавливаем тень на 1 пиксель ниже и справа от текста, с очень тонким размытием в 1 пиксель и средним серым цветом (# 999999).
навигация
Теперь перейдем к навигации, которая займет немного больше кода для стиля:
Начните со следующего стиля:
|
1
2
3
4
5
|
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
|
Здесь мы нацелены на ul (неупорядоченный список) внутри nav. «стиль списка» стилизует маркеры каждого элемента списка. В этом случае мы удаляем маркеры, устанавливая для свойства значение «none».
«отступ: 0;» удаляет отступы по умолчанию, веб-браузеры обычно дают UL (обычно левый отступ). Наконец, мы центрируем текст с помощью «text-align».
Таким образом, наша навигация теперь сосредоточена на странице, но они отображаются ниже друг друга. Это потому, что каждый элемент списка имеет стиль по умолчанию, который делает их «блочными» элементами, то есть они не будут отображаться рядом. Чтобы исправить это, мы заставим их отображать ‘inline’:
|
1
2
3
4
5
|
nav ul li {
display: inline;
font-variant: small-caps;
letter-spacing: 2px;
}
|
Так что теперь каждый из наших элементов списка (li) внутри неупорядоченного списка (ul) внутри nav будет отображаться встроенным, позволяя другим элементам сидеть рядом с ними.
Мы также установили свойство «font-option», чтобы установить для текста «маленькие заглавные буквы» (все строчные буквы будут отображаться как строчные буквы меньшего размера).
Наконец, мы устанавливаем «межбуквенный интервал» на 2 пикселя. Это добавляет дополнительный разрыв в 2 пикселя между каждым символом. Здесь можно использовать отрицательное значение, чтобы сблизить символы.
Вы действительно можете увидеть силу, которую предлагает нам CSS; он может делать почти все, что может Photoshop.
Теперь давайте добавим несколько строк между каждым элементом навигации, чтобы немного их выделить. Добавьте следующее в стиле «nav ul li»:
|
1
|
border-right: 1px solid #999999;
|
Мы добавили границу справа от каждого элемента списка толщиной 1 пиксель в виде «сплошной» линии и средне-серого цвета (# 999999). Другие стили линий, кроме «сплошной», включают «пунктирная», «пунктирная», «двойная» и еще несколько .
Граница есть, но нам действительно нужен промежуток между ней. Давайте добавим поле и отступ, чтобы исправить это:
|
1
2
|
margin-right: 10px;
padding-right: 10px
|
Помните из «Box Model», что отступы находятся внутри границы, а поле — снаружи. Исходя из этого, мы знаем, что приведенный выше код добавляет промежуток в 20 пикселей между каждым элементом списка с границей в 1 пиксель в середине.
Однако есть еще две проблемы: граница на последнем элементе списка не нужна, а сами ссылки ужасного цвета.
Чтобы удалить границу из последнего элемента списка, используйте следующий стиль:
|
1
2
3
4
5
|
nav ul li:last-child {
border: none;
margin: 0;
padding: 0;
}
|
Селектор «: last-child» нацелен на последний li внутри ul в nav (в основном, наш последний элемент навигации). Мы удалили все границы, поля и отступы из этого элемента (мы удалили поля и отступы, чтобы убедиться, что они не выбрасывают список немного смещенным от центра).
Чтобы изменить цвета ссылок, мы нацеливаем все ссылки (теги «a») внутри nav:
|
1
2
3
4
|
nav a {
color: #111;
text-decoration: none;
}
|
Первая строка понятна, мы установили цвет ссылок на # 111 — такой же цвет, как и остальная часть текста на сайте. Во второй строке мы удалили подчеркивание, которое обычно появляется под ссылками, установив для «text-painting» значение «none».
Это прекрасно работает, но когда мы наводим указатель мыши на ссылку, с ней ничего не происходит, чтобы подтвердить, что мы наводим курсор на нее. Чтобы исправить это, добавьте следующий стиль:
|
1
2
3
|
nav a:hover {
text-decoration: underline;
}
|
Селектор «: hover» означает «когда этот элемент наведен мышью». Поэтому, когда это произойдет, мы добавим подчеркивание к ссылке, изменив свойство text-художественное оформление, из которого мы ранее удалили его.
На изображении выше я наведите курсор на ссылку «Неттутс», чтобы появилось подчеркивание.
Раздел и в сторону
Прямо сейчас наша боковая панель (<aside>) на самом деле не является боковой панелью — она просто находится ниже основного содержимого (<section>). Чтобы исправить это, нам нужно указать ширину <section> и <aside>, а затем указать им придерживаться любой стороны контейнера.
Как вы помните, наш #container имеет ширину 900 пикселей, с которой мы можем работать. Мы знаем, что наш основной контент должен быть шире боковой панели, поэтому соотношение 2: 1 между <section> и <aside> будет работать хорошо — поэтому мы установим «section» на 600px и «aside» на 300px.
Однако с этой логикой есть небольшая проблема: между основным контентом и боковой панелью нет промежутка. Чтобы исправить это, мы установим боковую панель только на 280 пикселей, оставив между ними промежуток в 20 пикселей:
|
1
2
3
4
5
6
7
8
9
|
section {
float: left;
width: 600px;
}
aside {
float: right;
width: 280px;
}
|
В приведенном выше коде мы устанавливаем ширину обоих объектов, но мы также сказали <section> «плавать» влево и <aside> «плавать» вправо.
Устанавливая свойство «float», мы буквально выравниваем каждый объект по обе стороны от их контейнера, позволяя боковой панели располагаться рядом с основным содержимым.
нижний колонтитул
Прямо сейчас наш нижний колонтитул сидит прямо под боковой панелью, поскольку он пытается вписаться в любое пустое пространство. Чтобы исправить это, нам нужно указать нижнему колонтитулу не позволять объектам плавать по обе стороны от него:
|
1
2
3
4
|
footer {
clear: both;
display: block;
}
|
«clear: both» гарантирует, что ничто не «плавает» с обеих сторон нижнего колонтитула. Вы также можете установить «очистить» на «влево» или «вправо», чтобы ничего не плавало на одной конкретной стороне.
«display: block» гарантирует, что нижний колонтитул не отображается в строке (Firefox нуждается в этом).
Наконец, давайте исправим стилизацию текста внутри нижнего колонтитула. Добавьте следующее в существующий стиль нижнего колонтитула:
|
1
2
3
4
|
font-size: 90%;
font-style: italic;
font-variant: small-caps;
padding-top: 10px;
|
И следующий новый стиль для стилизации ссылок в нижнем колонтитуле:
|
1
2
3
|
footer a {
color: #111111;
}
|
Резюме
В заключительной части серии мы продолжим совершенствовать ваши навыки работы с HTML и CSS, добавив дополнительную страницу на наш веб-сайт, работая с некоторыми различными элементами HTML и расширив наши знания CSS, стилизуя их.