Css основы – Основы CSS для начинающих | Учимся управлять внешним видом сайта

Понимание основ CSS — Изучение веб-разработки

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

Точка старта

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

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

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

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

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

Первоначальные настройки:

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

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

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

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

• Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в ems.
• margin по умолчанию, применяемый браузером к элементам <h3> и <p>, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.
• Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <article>), нужно задать ему определенную высоту. Установите высоту <article> в 120px, но выраженную в ems. Также задайте ему полупрозрачный черный цвет фона, в результате получится чуть более темный оттенок, который позволяет цвету фона немного просвечивать красным цветом.
• Напишите набор правил, который задает тегу <h3> эффективный размер шрифта 20px (но выраженный в ems) и соответствующую высоту строки, чтобы поместить ее в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.
• Напишите набор правил, который задает тегу <p> внутри нижнего колонтитула эффективный размер шрифта 15px (но выраженный в ems) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.
• В качестве последнего штриха задайте параграфу внутри <article> соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом <h3> и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.

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

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

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

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

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

Образец

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

Проверка

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

В этом модуле

Основы работы с селекторами CSS для новичков

В данном уроке мы с вами научимся более продвинутой работе с селекторами CSS.

В предыдущих уроках мы с вами использовали только один тип селекторов — имя тега, по которому мы обращались ко всем таким тегам.

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

Способы сделать это мы и будем изучать в данном уроке.

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

Блок . Тег div

Тег div служит контейнером для других тегов. Сам по себе он ничего не делает, однако в него можно положить много разных тегов, например, абзацев и заголовков, а затем для всех них одновременно применить различные CSS свойства. Для примера покрасим содержимое тега div в красный цвет (используя атрибут style):

<div>
	<h3>
		Lorem ipsum dolor sit amet.
	</h3>
	<p>
		Lorem ipsum dolor sit amet.
	</p>
	<p>
		Lorem ipsum dolor sit amet.
	</p>
	<p>
		Lorem ipsum dolor sit amet.
	</p>
</div>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

В настоящее время тег div является одним из основных строительных элементов на сайте. Вы еще столкнетесь с ним в дальнейшем много раз.

Блок . Тег span

Тег span является контейнером для кусочка текста. Вы уже знаете, что для того, чтобы сделать, к примеру, жирный текст — следует использовать тег b. Однако, что делать, если я хочу покрасить кусочек текста в красный цвет? Для такого случая тега, подобного тегу b, не существует.

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

Давайте покрасим некоторый текст в красный цвет:

<p>
	Lorem ipsum <span>dolor</span> sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

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

Блок . Группировка селекторов

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

h3 {
	color: red;
}
h4 {
	color: red;
}
p {
	color: red;
}

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

h3, h4, p {
	color: red;
}

<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<p>
	Абзац с текстом.
</p>

Так код будет выглядеть в браузере:

Заголовок h3

Заголовок h4

Абзац с текстом.

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

Блок . Вложенность тегов друг в друга

Представим теперь ситуацию, когда мы хотим обратиться только к тем тегам i, которые находятся внутри абзацев, и не хотим трогать те теги i, которые находятся внутри заголовков h3.

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

Чтобы показать вложенность, между селекторами следует поставить пробел (этот пробел и есть знак контекстного селектора).

Например, так — p i — мы обратимся ко всем тегам i, находящимся внутри p, p b — так ко всем тегам b внутри p, а так — div p b — ко всем тегам b, которые находятся внутри абзацев p, которые в свою очередь находятся внутри тега div.

В следующем примере мы обратимся ко всем абзацам внутри div и покрасим их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h3) красными не станут:

div p {
	color: red;
}

<div>
	<h3>
		Заголовок h3 внутри тега div.
	</h3>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
</div>
<p>
	Абзац вне тега div.
</p>

Так код будет выглядеть в браузере:

Заголовок h3 внутри тега div.

Абзац внутри тега div.

Абзац внутри тега div.

Абзац внутри тега div.

Абзац вне тега div.

Блок . Выбор элемента по уникальному id

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

Второй способ заключается в том, что нужному элементу дается атрибут id, который содержит в себе уникальное имя нашего тега (другого id с таким именем на странице быть не должно — будет конфликт). Если мы дадим ему, к примеру, имя test, тогда в CSS мы сможем обратиться к нему таким образом: #test — то есть сначала пишется символ «решетка», а затем — то имя, которое мы записали в атрибут id.

Давайте сейчас для всех абзацев зададим красный цвет, а для абзаца с id=»test» — зеленый:

p {
	color: red;
}
#test {
	color: green;
}

<p>
	Абзац с атрибутом id в значении "test".
</p>
<p>
	Обычный абзац с текстом.
</p>
<p>
	Обычный абзац с текстом.
</p>

Так код будет выглядеть в браузере:

Абзац с атрибутом id в значении «test».

Обычный абзац с текстом.

Обычный абзац с текстом.

А теперь атрибут id дадим конкретному диву и покрасим содержимое этого дива в красный цвет, обратившись к нему по его id:

#test {
	color: red;
}

<div>
	<h3>
		Заголовок h3 внутри #test.
	</h3>
	<h3>
		Заголовок h3 внутри #test.
	</h3>
	<h3>
		Заголовок h3 внутри #test.
	</h3>
	<p>
		Абзац внутри #test.
	</p>
	<p>
		Абзац внутри #test.
	</p>
	<p>
		Абзац внутри #test.
	</p>
</div>
<p>
	Абзац вне #test.
</p>

Так код будет выглядеть в браузере:

Заголовок h3 внутри #test.

Заголовок h3 внутри #test.

Заголовок h3 внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац вне #test.

А теперь совместим контекстный селектор (который пробел, показывающий вложенность) и id и сделаем так, чтобы только абзацы (но не заголовки h3 в данном случае) из #test стали красного цвета:

#test p {
	color: red;
}

<div>
	<h3>
		Заголовок h3 внутри #test.
	</h3>
	<h3>
		Заголовок h3 внутри #test.
	</h3>
	<h3>
		Заголовок h3 внутри #test.
	</h3>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
	<p>
		Абзац внутри тега div.
	</p>
</div>
<p>
	Абзац вне тега div.
</p>

Так код будет выглядеть в браузере:

Заголовок h3 внутри #test.

Заголовок h3 внутри #test.

Заголовок h3 внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац внутри #test.

Абзац вне #test.

Блок . Классы элементов

Обращение к элементу по его id имеет некоторый недостаток — так мы можем обратиться только к одному элементу на странице. А что делать, если нам, к примеру, нужны абзацы двух типов — красные и зеленые и они могут чередоваться в произвольном порядке? В этом случае гораздо удобнее будет воспользоваться классами.

Классы задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у многих элементов на странице. То есть, если элементы должны вести себя одинаково — мы даем им один и тот же класс.

Как обратиться к элементам с определенным классом в CSS: пусть мы задали нужным нам элементам класс с именем test, тогда в CSS ко всем элементам с этим классом мы можем обратиться следующим образом — .test — вначале символ «точка» и потом имя класса из атрибута class.

В примере ниже и абзацы, и заголовки имеют один и тот же класс test, который красит эти элементы в красный цвет:

.test {
	color: red;
}

<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

Блок . Определенный тег с заданным классом

Бывают такие ситуации, когда разные теги имеют один и тот же класс. К примеру, у абзацев и заголовков h3 одновременно задан класс test. Вам может потребоваться выбрать только абзацы с классом test, не затрагивая заголовков h3 с этим же классом.

В этом случае вместо селектора .test я должен написать следующее: p.test — таким образом я выберу все абзацы с классом test, не затронув заголовки. Если же я напишу h3.test — то выберу все заголовки h3 с классом test, не затронув абзацев.

В следующем примере только абзацы с классом test станут красного цвета, а заголовки с таким же классом — не станут:

p.test {
	color: red;
}

<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

Итак, еще раз: p.test — такой селектор выбирает абзацы с классом test. А вот если я сделаю так: p .test (поставлю пробел), то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.

Давайте теперь выберем только h3 с классом test:

h3.test {
	color: red;
}

<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки h3 с классом test красились в красный цвет, а абзацы с этим классом — в зеленый:

.test {
	font-style: italic;
}
h3.test {
	color: red;
}
p.test {
	color: green;
}

<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<h3>
	Заголовок h3 с классом test.
</h3>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац с классом test.
</p>
<p>
	Абзац без класса.
</p>

Так код будет выглядеть в браузере:

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Заголовок h3 с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац с классом test.

Абзац без класса.

Блок . Видео

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

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

CSS основы

«CSS основы » – второй урок учебника CSS. В этом уроке мы обсудим базовые особенности синтаксиса таблиц стилей CSS. Синтаксис CSS очень прост, хотя и не имеет ничего общего с html тегами.

Синтаксис CSS.

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

селектор {свойство: значение}

• Селектор – определяемый элемент
• Свойство – изменяемый атрибут
• Значение – присваиваемое атрибуту значение

Далее предлагаю вам разобраться с основными особенностями синтаксиса в CSS:

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

  p{font–size: 75%}

• Значения, состоящие более, чем из одного слова должны быть помещены в кавычки:

  h2 {font – family: «lucida calligraphy»}

• Если для одного селектора определяется одновременно несколько свойств, то они должны быть разделены точкой с запятой. После последнего свойства не обязательно ставить точку с запятой, хотя их присутствие не вызовет никакой ошибки:

  table { font – family: arial, «sans serif»; border – style: dotted}

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

  p,table,li { font – family: «sans serif»; }

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

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