CSS (Cascading Style Sheets) — это код, который вы используете для стилизирования вашей веб-страницы. Под Основами CSS понимают то, что вам нужно знать, чтобы начать. Мы ответим на такие вопросы: Как я могу сделать мой текст черным или красным? Как я могу сделать, чтобы мой контент появлялся в разных местах экрана? Как украсить мою веб-страницу фоновыми изображениями и цветами?
Что такое CSS на самом деле?
Как и HTML, CSS не является языком программирования. Это язык таблицы стилей, то есть он позволяет выборочно применять стили к элементам в HTML документах. Например, чтобы выбрать все элементы параграфа на HTML странице и превратить их текст в красный, вы должны написать этот CSS:
p {
color: red;
}
Давайте попробуем: вставить эти три строки CSS в новый файл в вашем текстовом редакторе, а затем сохраним файл как style.css в вашей папке styles.
Однако нам нужно применять CSS к нашему HTML документу, в противном случае CSS стиль не повлияет на то, как ваш браузер отображает HTML документ. (Если вы не следили за нашим проектом, то прочитайте Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)
- Откройте ваш файл
index.htmlи вставьте следующую строку где-то в шапке, то есть,<head>и</head>тегами:<link href="styles/style.css" rel="stylesheet" type="text/css">
- Сохраните
index.htmlи загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:
Если ваш параграф текста теперь красный, поздравляем, теперь вы написали свой первый успешный CSS!
Анатомия CSS набора правил
Давайте посмотрим на вышеупомянутый CSS немного более подробно:
Вся структура называется набором правил (но зачастую "правило" для краткости). Отметим также, имена отдельных частей:
- Селектор
- Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае,
pэлементы). Для стилизования другого элемента, просто измените селектор. - Декларация
- Единственное правило, как
color: red;указывает, какие из свойств элемента вы хотите стилизовать. - Свойства
- Способы, которыми вы можете стилизовать данный HTML элемент. (В этом случае,
colorявляется свойством дляpэлементов.) В CSS вы можете указать какие угодно свойства для вашего правила. - Значение свойства
- Справа от свойства, после двоеточия, находится значение свойства, выбирается одно из множества возможных значений для данного свойства (есть много значений
color, помимоred).
Обратите внимание на другие важные части синтаксиса:
- Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки (
{}). - В каждой декларации, необходимо использовать двоеточие (
:), чтобы отделить свойство от его значений. - В каждом наборе правил, вы должны использовать точку с запятой (
;), чтобы отделить каждую декларацию от следующей.
Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их разделяя точкой с запятой, например, так:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Множественный выбор элементов
Вы также можете выбрать множество элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделенных запятыми. Например:
p,li,h1 {
color: red;
}
Разные типы селекторов
Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы данного типа в HTML документе. Но мы можем сделать выбор более конкретным, чем этот. Вот некоторые из наиболее распространенных типов селекторов:
| Имя селектора | Что выбирает | Пример |
|---|---|---|
| Селектор элемента (иногда называемый селектором тега или типа) | Все HTML элемент(ы) указанного типа. | pВыбирает <p> |
| ID селектор | Элемент на странице с указанным ID (на одной HTML странице, может быть только один элемент с каким-либо ID). | #my-idВыбирает <p id="my-id"> или <a id="my-id"> |
| Селектор класса | Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице). | .my-classВыбирает <p class="my-class"> и <a class="my-class"> |
| Селектор атрибута | Элемент(ы) на странице с указанным атрибутом. | img[src]Выбирает <img src="myimage.png"> но не <img> |
| Селектор псевдокласса | Указанные элемент(ы), но только в случае определенного состояния, например, при наведении курсора. | a:hoverВыбирает <a>, но только тогда, когда указатель мыши наведен на ссылку. |
Существует много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов.
Шрифты и текст
Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл style.css, чтобы наш пример выглядел хорошо. Прежде всего, давайте сделаем наши шрифты и текст немного лучше.
- Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент
<link ... >где-нибудь внутри шапки вашегоindex.html(снова, в любом месте между тегами<head>и</head>). Это будет выглядеть примерно так:<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
- Затем удалите существующее правило в вашем
style.cssфайле. Это был хороший тест, но красный текст на самом деле не выглядит очень хорошо. - Добавьте следующие строки в нужное место, заменив строку placeholder фактической
font-familyстрокой, которую вы получили от Google Fonts. (font-familyпросто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило сначала устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку<html>является родительским элементом для всей страницы, и все элементы внутри него наследуют такой жеfont-sizeиfont-family):html { font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту */ font-family: placeholder: здесь будет имя шрифта из Google fonts }Примечание: Я добавил в комментарии объяснения, что означает "px". Все в CSS документе между
/*и*/является CSS комментарием, который браузер игнорирует, когда он обрабатывает код. Это место, где вы пишите полезные заметки о том, что вы делаете. - Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (
<h1>,<li>, и<p>). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }
Вы можете настроить значения px по своему усмотрению, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:
Блоки, блоки и ещё раз о блоках
Одну вещь, которую вы заметите в написании CSS -это то, что там постоянно используются блоки - установка их размера, цвета и расположения и т.д. Большинство HTML элементов на странице могут быть представлены как блоки, расположенные друг на друге.
Не удивительно, CSS макет основан главным образом на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет свойства, такие как:
padding, пространство только вокруг контента (например, вокруг параграфа текста)border, сплошная линия, которая расположена рядом с paddingmargin, пространство вокруг внешней стороны элемента
В этом разделе мы также используем:
width(ширину элемента)background-color, цвет позади контента и padding элементовcolor, цвет контента элемента (обычно текста)text-shadow: устанавливает тень на тексте внутри элементаdisplay: устанавливает режим отображения элемента (не волнуйтесь об этом пока что)
Итак, давайте начнем и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.
Изменение цвета страницы
html {
background-color: #00539F;
}
Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.
Разбираемся с телом
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Теперь для body элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:
width: 600px;— заставляет тело быть всегда 600 пикселей в ширину.margin: 0 auto;— когда вы установите два значения для таких свойств какmarginилиpadding, первое значение элемента влияет на верхнюю и нижнюю сторону (сделав их0в данном случае), и второе значение для левой и правой стороны (здесь,autoявляется особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.background-color: #FF9500;— как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета дляhtmlэлемента. Идите вперед и экспериментируйте. Не стесняйтесь использоватьwhiteили те, которые вы хотите.padding: 0 20px 20px 20px;— у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.border: 5px solid black;— просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.
Позиционирование и стилизация нашего заголовка главной страницы
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Вы, возможно, заметили, что есть ужасной разрыв в верхней части тела. Это происходит потому, что браузеры применяют некоторый стиль по умолчанию для <h1> элемента (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0;.
Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.
Здесь, мы использовали одно довольно интересное свойство это text-shadow, которое применяет текстовую тень для текстового контента элемента. Он имеет следующие четыре значения:
- Первое значение пикселей задает горизонтальное смещение тени от текста — как далеко она движется поперек: отрицательное значение должно двигать ее влево.
- Второе значение пикселей задает вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить ее вверх.
- Третье значение пикселей задает радиус размытия тени — большое значение будет означать более размытую тень.
- Четвертое значение задает основной цвет тени.
И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что можно придумать.
Центрирование изображения
img {
display: block;
margin: 0 auto;
}
В заключение, мы отцентрируем изображение, чтобы сделать его лучше. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать что-то еще. Элемент body является блочным, это означает, что занимает много места на странице и может иметь margin и другие значения отступов применяемые к нему. Изображения, наоборот, является строчными элементами, то есть оно этого не могут. Таким образом, чтобы применять margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.
Примечание: Не стоит беспокоиться, если вы еще не понимаете display: block; и блочное/строчное различие. Вы поймете, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.
Заключение
Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.
Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу страницу изучения CSS.