В чем основная задача css

Основы CSS — Основы современной верстки

В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то свое визуальное оформление: параграфы имеют отступы, ссылки выделяются подчеркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

В этом уроке мы разберем ту часть аббревиатуры, которая относится к таблицам стилей. Что такое каскадность и как это работает, вы сможете прочитать в следующем уроке.

Стили CSS

Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название свойства: значение; .

Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмем следующую HTML-разметку:

 Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. 

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

p  color: red; font-size: 20px; > 

Что означает эта таинственная запись выше? Ее можно условно разбить на три основные составляющие:

1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
2. Фигурные скобки < >. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
3. Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Разберем некоторые свойства, которые помогут вам оформлять текст:

• font-size . Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие еще стили указаны у текста.
• color . Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color . Посмотреть на все такие записи можно здесь .
• text-align . Свойство, устанавливающее выравнивание текста. Оно может принимать одно из следующих значений: left , right , center , justify .

Подключение CSS

Использовать CSS на странице можно с помощью нескольких способов:

• использование специального файла
• использование тега внутри HTML-разметки
• записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберемся с каждым способом отдельно.

Использование отдельного CSS-файла

Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нем становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:

Добавим основную информацию в файл index.html:

  lang="ru">  charset="UTF-8"> Основной файл index.html   

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег . У данного тега необходимо указать атрибут href , значением которого будет путь до файла main.css. Тег указывается в секции .

  lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">   

Дополнительно разберем эту запись: ../css/main.css . Ее можно условно разбить на три составляющие:

1. ../ — переход в директорию выше. Изначально файл index.html находится в директории html/, поэтому мы «выходим» из нее в директорию site/.
2. css/ — переход в директорию css/.
3. main.css — указание имени и расширения файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href=»main.css» .

После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

Использование тега style

Вторым способом использования CSS является использование стилей в специальном теге . Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег обычно указывается внутри секции . Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

  lang="ru">  charset="UTF-8"> Основной файл index.html p  color: red; font-size: 20px; >    Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.   

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

Inline-стили

Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придется для каждого указывать отдельно. Это приведет к постоянному копированию стилей.

Возьмем прошлый пример и добавим inline стили:

  lang="ru">  charset="UTF-8"> Основной файл index.html   style="color: red; font-size: 20px;"> Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.   

Классы и идентификаторы

При создании разметки разработчикам удобно отделять одинаковые теги друг от друга с помощью имён. Например, на странице есть два заголовка:

 Как стать программистом  Какими навыками обладает программист 

Оба заголовка второго уровня, но в дизайне они могут иметь разные CSS стили. Вы уже познакомились с селектором по тегу и он не поможет дать каждому из заголовков уникальные стили.

Дать имена тегам позволяют атрибуты class и id . Эти атрибуты принимают произвольные имена, с помощью которых можно обратиться к элементу в CSS.

Различие класса и идентификатора в количестве использований:

• class — значение атрибута может устанавливаться сколько угодно раз в рамках одной страницы
• id — значение атрибута устанавливается у одного элемента на странице. Не может быть двух одинаковых идентификаторов на странице

Если значений у атрибута несколько, то они указываются через пробел, например:

 class="title title-big">Как стать программистом  class="another-title title-big">Какими навыками обладает программист  id="help">Второго элемента с идентификатором help быть не должно  id="another-help">Второго элемента с идентификатором another-help быть не должно 

Чтобы обратиться к элементам по их классу или идентификатору, используются специальные селекторы, которые мы сейчас и рассмотрим.

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только четные или нечетные элементы и так далее.

Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса , добавить стили.
3. Селектор по идентификатору. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора .

Рассмотрим все три селектора на реальном примере:

  lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">   class="content">  id="main-title">Заголовок с идентификатором Просто параграф без класса или идентификатора    

#main-title  color: white; font-size: 20px; text-align: center; > .content  background-color: black; > p  color: white; > 

После применения этих стилей получится следующая картина:

• Черный фон секции . Для этого использовали класс content и селектор .content ;
• Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title , поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title ;
• Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

В реальной разработке не всегда удается пользоваться только этими тремя видами селекторов в том виде, в котором вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберем на примере:

 class="news"> Новости  Новость 1 Текст новости   Новость 2 Текст новости    class="stories"> Интересные истории  История 1 Текст истории   История 2 Текст истории   

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h2  font-size: 32px; > 

Этот селектор комбинирует два уже известных типа:

1. Селектор по классу .news
2. Селекторы по тегу article и h2

Разделив их пробелом, мы сказали браузеру: «Возьми все заголовки из , который лежит внутри элемента с классом news ». В примере это элемент .

Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов

Важно понимать, что такая запись .news article h2 выберет все заголовки второго уровня во всех , которые лежат внутри блока с классом news . Давайте немного видоизменим верстку, чтобы это проверить.

 class="news"> Новости  Новость 1 Текст новости   Новость 2 Текст новости  Похожие новости  Похожая новость 1 Текст новости     

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри , которые находятся в блоке с классом .news .

Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ > . Укажем, что нам нужны только те , которые лежат внутри .news . И нам нужны заголовки, которые находятся внутри этих . Это делается следующим образом:

.news > article > h2  font-size: 24px; > 

Теперь размер шрифта для заголовков «Похожие новости» и «Похожая новость 1» не будет увеличен, так как мы указали более конкретный селектор для заголовков.

Самостоятельная работа

• Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
• Попробуйте скопировать примеры из этого урока.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Понимание основ CSS

Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.

Предварительно:	Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля.
Цель:	Проверка понимания основной теории, синтаксиса и техник CSS.

Отправной пункт

Чтобы начать проверку, вы должны:

• Перейти и скачать HTML файл для упражнения и связанный файл изображения, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать своё имя, то пожалуйста — только убедитесь, что изображение квадратное.
• Скачайте текстовый файл с исходным CSS — в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.

Примечание: Вместо этого вы можете использовать для проверки такие сайты как JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент в заголовке документа.

Краткое описание проекта

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

• Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например style.css .
• Подключите ваш CSS к вашему файлу HTML с помощью элемента .
• Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.
• Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. «Общие стили страницы» подойдут. Также добавьте ещё три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.

Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:

• Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.
• Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать:
  • Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закруглённые углы!), помимо прочего.
  • Задайте заголовку градиент фона, который идёт от тёмного к светлому, плюс закруглённые углы, которые вписываются в закруглённые углы, заданные для главного контейнера карты.
  • Задайте для футера градиент фона, переходящий от светлого к тёмному, а также скруглённые углы, которые вписываются в скруглённые углы контейнера основной карты.
  • Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).

  Какие новые наборы правил надо написать:

  • Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в em s.
  • margin по умолчанию, применяемый браузером к элементам и

    , будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.

  • Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент ), нужно задать ему определённую высоту. Установите высоту в 120px, но выраженную в em s. Также задайте ему полупрозрачный чёрный цвет фона, в результате получится чуть более тёмный оттенок, который позволяет цвету фона немного просвечивать красным цветом.
  • Напишите набор правил, который задаёт тегу удобный размер шрифта 20px (но выраженный в em s) и соответствующую высоту строки, чтобы поместить её в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.
  • Напишите набор правил, который задаёт тегу

    внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в em s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.

  • В качестве последнего штриха задайте параграфу внутри соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.

  Примечание: Имейте в виду, что второй набор правил устанавливает font-size: 10px; для элемента — это означает, что для любых потомков em будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и , на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).

  Другие вещи для размышления:

  • Вы получите бонусные баллы, если напишите объявления своего CSS в отдельных строках, чтобы обеспечить максимальную читаемость.
  • Вы должны включить .card в начале цепочки селекторов во всех ваших правилах, чтобы эти правила не мешали стилизации каких-либо других элементов, в случае если визитная карточка должна быть помещена на страницу с загрузкой другого контента.

  Советы и подсказки

  • Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.
  • При попытке определить значение em вам нужно представить определённую величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент ( ), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение em , по крайней мере, в таком простом случае как этот.

  Образец

  На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:

  

  Проверка

  Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путём: спросив в теме обсуждения об этом упражнении, или в канале #mdn IRC на Mozilla IRC. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путём обмана!

  В этом модуле

  • Вступление в CSS
  • Как работает CSS
  • Синтаксис CSS
  • Введение в селекторы
  • Простые селекторы
  • Селекторы по атрибутам
  • Псевдоклассы и псевдоэлементы
  • Комбинаторы и множественные селекторы
  • CSS значения и единицы
  • Каскадность и наследование
  • Блочная модель
  • Отладка CSS (en-US)
  • Задание: Основы понимания CSS (en-US)

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 3 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  Основы CSS

  CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?

  Так что же такое CSS?

  Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки — это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:

  Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles .

  Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

  Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между и тегами:

  link href="styles/style.css" rel="stylesheet" type="text/css" /> 

  

  Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

  Анатомия набора правил CSS

  Давайте взглянем на вышеупомянутый CSS немного более подробно:

  

  Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:

  Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.

  Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.

  Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, color является свойством для элементов ). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.

  Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color , помимо red ).

  Обратите внимание на важные части синтаксиса:

  • Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ( <> ).
  • В каждом объявлении необходимо использовать двоеточие ( : ), чтобы отделить свойство от его значений.
  • В каждом наборе правил вы должны использовать точку с запятой ( ; ), чтобы отделить каждое объявление от следующего.

  Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:

  p  color: red; width: 500px; border: 1px solid black; > 

  Выбор нескольких элементов

  Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:

  p, li, h1  color: red; > 

  Разные типы селекторов

  Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:

  Имя селектора	Что выбирает	Пример
  Селектор элемента (иногда называемый селектором тега или типа)	Все HTML-элемент(ы) указанного типа.	p Выбирает
  ID селектор	Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.	#my-id Выбирает или
  Селектор класса	Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).	.my-class Выбирает и
  Селектор атрибута	Элемент(ы) на странице с указанным атрибутом.	img[src] Выбирает но не
  Селектор псевдокласса	Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.	a:hover Выбирает , но только тогда, когда указатель мыши наведён на ссылку.

  Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US) .

  Шрифты и текст

  Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл style.css , чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.

  Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами и ). Это будет выглядеть примерно так:

  link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" /> 

  html  font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту */ font-family: placeholder: здесь должно быть имя шрифта из Google fonts > 

  Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.

  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 , сплошная линия, которая расположена рядом с padding
  • margin , пространство вокруг внешней стороны элемента

  

  В этом разделе мы также используем:

  • 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; > 

  • width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
  • margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding , первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
  • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для элемента, но не стесняйтесь и экспериментируйте.
  • 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; > 

  Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента (en-US) (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0; .

  Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

  Здесь, мы использовали одно довольно интересное свойство — это text-shadow , которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

  • Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
  • Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
  • Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
  • Четвёртое значение задаёт основной цвет тени.

  И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.

  Центрирование изображения

  img  display: block; margin: 0 auto; > 

  Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для (600px). Если ваше изображение больше, тогда оно выйдет за границы и займёт пространство страницы. Чтобы исправить это, вы можете: 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства width для меньше, чем у .

  Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

  Заключение

  Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

  

  Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

  Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу страницу изучения CSS.

  В этом модуле

  • Установка базового программного обеспечения
  • Каким должен быть ваш веб-сайт?
  • Работа с файлами
  • Основы HTML
  • Основы CSS
  • Основы JavaScript
  • Публикация вашего веб-сайта
  • Как работает Веб

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 3 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  CSS — Введение в веб-разработку

  HTML отвечает за то, ЧТО будет выведено на экран. А вот за то, КАК оно будет выглядеть, и где будут располагаться разные части страницы, отвечает CSS.

  Проще говоря, HTML — это структура и содержание, а CSS — внешний вид.

  CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.

  Основной целью разработки CSS являлось разделение структуры страницы от описания внешнего вида документа. Это позволяет создавать представления (можно сказать, «версии») одного HTML-документа, адаптированные для людей с ограниченными возможностями, оптимизированные под мобильные устройства, предназначенные для печати и так далее. Кроме того, последние версии CSS позволяют накладывать анимацию и, фактически, рисовать.

  Допустим, вы хотите изменить внешний вид всех абзацев (элементов

  .

  ). С помощью CSS-кода ниже мы сделаем так, что у всех элементов p будет синий фон, отступ со всех сторон по 10 пикселей и шрифт Arial:

   . p  background-color: blue; /* Фон */ margin: 10px; /* Отступы от границ блока с абзацем */ font-family: Arial; /* Шрифт */ >  .  Это абзац с голубым фоном, отступами и шрифтом Arial Это еще один абзац с голубым фоном, отступами и шрифтом Arial  

  Элемент

  вставляется в HTML страницу внутрь элемента head (то есть между тегами и ).

  Но что, если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).

   . .strange  background-color: blue; /* Фон */ margin: 10px; /* Отступы от границ блока с абзацем */ font-family: Arial; /* Шрифт */ >  .  class="strange">Это абзац с голубым фоном, отступами и шрифтом Arial Это абзац без стилей  

  Атрибут class есть у каждого тега, а значит, можно изменить внешний вид и расположение всего, что представлено на странице (иногда с ограничениями).

  Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи. Другой пример — логотип сайта где-нибудь наверху. Для уникальных «разовых» элементов стоит использовать id:

   . #important  color: red; /* красный цвет шрифта */ >  .  id="important">Это абзац с красным текстом  

  В CSS id указываются через решетку # , а классы — через точку . . А в HTML они пишутся прямо словами: например,

  или

  .

  В наших примерах CSS p , .strange и #important называются селекторами. Ими мы выбираем то, к чему применять стиль.

  В CSS существует несколько видов селекторов, но для начала достаточно знать о трех:

  • div – элементы конкретного типа, в данном примере div (тег
    .

    )

  • #id – элемент с данным id
  • .class – элементы с таким классом

  Попробуйте создать файл index.html со следующим содержанием и открыть его в браузере:

      body  color: red; > .note  color: grey; background-color: yellow; font-weight: bold; >    style="font-size: 20px; color: green;">Абзац со стилем, указанным прямо в теге!  class="note">Абзац класса "note"   

  С помощью CSS можно менять сотни разных свойств. Поэкспериментируйте со своей страницей и стилями.

  Каждый браузер содержит определенный набор стилей «по умолчанию». Этот набор применяется всегда и формирует базовое представление элементов. С одной стороны, это избавляет от необходимости писать стили тогда, когда устраивает умолчание, но с другой — появляются серьезные проблемы.

  Этот набор отличается от браузера к браузеру. Все усугубляется тем, что и сами стили работают по-разному в разных браузерах. В этот момент проявляется самая большая боль верстки. Необходимо знать тонкости старых и новых браузеров, причем в современном мире это не только браузеры для обычных компьютеров, но также браузеры для мобильных устройств и даже для автомобилей с телевизорами (например, Tesla).

  Есть определенные инструменты , позволяющие частично сгладить эту проблему, но системно, скорее всего, она не решится никогда, и чем дальше, тем больше появляется подобных различий. Их можно увидеть на сайте caniuse.com .

  Файл стилей

  В реальных приложениях стили описывают не внутри HTML-страниц, а в отдельных файлах, например style.css , и с помощью специального тега подключают на страницу:

   rel="stylesheet" href="style.css"> 

  Эта строчка должна также находиться внутри элемента head (то есть между тегами и ).

  Layouting

  Отдельным большим блоком в CSS является позиционирование. Эта тема, наверное, самая сложная и крайне важная. Благодаря определенному набору свойств можно творить чудеса. Располагать элементы как угодно на странице, менять их размеры и вид, в зависимости от ширины экрана и даже скрывать.

  Bootstrap

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

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

  Хекслет целиком и полностью построен на Bootstrap’e. Такой подход позволяет нам не отвлекаться на непрофильную деятельность и ускорить разработку проекта в разы.

  Подробнее об основных концепциях и элементах Bootstrap можно узнать из нашего гайда.

  Полезные ссылки

  • Bootstrap
  • Что такое Bootstrap / Hexlet Guides

  Developer Tools

  Инструментарий разработчика, предлагаемый браузерами, позволяет просматривать не только структуру HTML, но и CSS. Более того, вы можете очень быстро проводить эксперименты, изменяя CSS прямо тут же.

  Заключение

  Как видно, владение CSS на должном уровне — совсем не то же самое, что и понимание HTML. Чтобы хорошо его применять, недостаточно прочитать справочник. Нужно целенаправленно учиться и практиковаться. Однако, это не означает, что все его знают. Большинство веб-разработчиков знают CSS так себе. Все же это прерогатива верстальщиков, да и фреймворки, такие как Bootstrap, позволяют оставаться в неведении.

  На Хекслете есть бесплатный курс Основы современной верстки, содержащий текстовые уроки, интерактивные упражнения и тесты. Теме CSS там посвящены несколько уроков.

  

  Остались вопросы? Задайте их в разделе «Обсуждение»

  Вам ответят команда поддержки Хекслета или другие студенты

  Об обучении на Хекслете

  • Статья «Как учиться и справляться с негативными мыслями»
  • Статья «Ловушки обучения»
  • Статья «Сложные простые задачи по программированию»
  • Урок «Как эффективно учиться на Хекслете»
  • Вебинар « Как самостоятельно учиться »

  Открыть доступ

  Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

  Наши выпускники работают в компаниях:

  Читать:

  Arkamys что это