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

Содержание

CSS для начинающих

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

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

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

Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.


Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки - HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем  веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

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

Наглядный пример

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

Содержание будущей картины

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

Итоговая картина

Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.

Сайт на голом HTML, без CSS

 

 

Далее, при помощи CSS мы определяем цвета, размеры и расположение элементов на веб-странице, то есть занимаемся внешним оформлением сайта.

Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com. Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper. Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке "Установить".

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.

Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.

Соц. сеть с подключенными CSS файлами

Как работает CSS?

Все правила оформления сайта хранятся в файле с расширением css, который в свою очередь загружается на веб-страницу через тег <link>.

Во время загрузки html страницы, через тег <link> загружается и CSS файл, после чего браузер начинает его обработку и сайт отображается согласно правилам, заданным в этом файле. В нем описаны свойства отображения элементов веб-страницы.

Например, через селектор 'p' мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор 'h2'.

Думаю, общий принцип работы довольно прост и понятен, посему не будем вдаваться в детали. Если какие-то моменты у вас вызывают затруднения - ничего страшного, в последующих уроках на практике все будет очень легко и понятно.

Зачем изучать CSS?

Не думаю что в наше время можно найти хоть один более или менее "приличный" сайт без использования CSS. Данная технология очень хорошо зарекомендовала себя и на сегодняшний день очень трудно представить себе верстку сайта без использования каскадных таблиц стилей.

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

Плюсы CSS

  • С использованием CSS стилей, код HTML значительно сокращается. Порой в несколько раз. Это положительно влияет на скорость загрузки сайта, что в свою очередь облегчает его продвижение в поисковых системах;
  • При обновлении дизайна сайта, больше нет необходимости править каждый тег отдельно на всех веб-страницах. Достаточно изменить пару строк в таблице стилей;
  • CSS открывает перед вами широкие возможности в оформлении и разметке ваших сайтов;
  • Отпадает необходимость использовать устаревшие теги. Многие поисковики не любят их, и использование устаревших тегов считается моветоном;
  • Используя CSS вы идете в ногу с временем.

Как быстро научиться основам CSS

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

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

Суть работы с каскадными таблицами стилей довольна проста, поэтому не теряйте время и приступайте к ее освоению. Список уроков:

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

CSS Основы

CSS Основы

Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам

CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по CSS. Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с JavaScript позволяют создавать динамические HTML-страницы (DHTML), красота и удобство которых, порой, просто поражают.

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

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Прочитав статьи по основам CSS, Вы узнаете:

1) Синтаксис CSS.

2) Способы и их приоритеты задания CSS-стиля.

3) Типы селекторов в CSS.

4) CSS хаки для браузеров.

5) Правила написания CSS.

6) Как создать всплывающую подсказку на CSS.

7) Как изменить внешний вид первой буквы через CSS.

8) Как задать вид курсора через CSS.

9) Как изменить вид курсора при наведении мыши с помощью CSS.

10) Как сделать подменю на

CSS.

11) О замене свойства min-width в IE6.

12) О валидности CSS.

13) Как задать цвет посещённых ссылок.

14) Как задать отступ абзаца через CSS.

15) Как сделать закруглённые углы через CSS.

16) Как вместо маркера списка поставить своё изображение через CSS.

17) Как сделать фон картинкой.

18) Как сделать затемнение фона на CSS.

19) Что такое дочерние селекторы в CSS.

20) Какие единицы измерения имеются в CSS.

21) Как сделать всплывающее окно с затемнением.

22) Как сделать анимированный фон.

23) Как сделать красивое текстовое поле.

24) Как менять изображение при наведении на него курсора мыши.

25) Что такое псевдоэлементы в CSS.

26) Что такое CSS спрайты.

27) Как прижать футер (подвал) к низу через CSS.

28) Как запретить изменение размеров textarea через CSS.

29) Как нарисовать треугольник через CSS.

30) Как обработать событие click через CSS.

31) Как задать свой курсор через CSS.

32) Как сделать горизонтальное выпадающее меню на

CSS.

33) Как использовать нестандартный шрифт на сайте.

34) Как изменить фон у радиокнопки через CSS.

35) Можно ли использовать CSS3.

36) Как сделать тень на CSS.

37) Как задать атрибуты cellpadding и cellspacing на CSS.

38) Как сделать div со 100% height.

39) О совместимости z-index и плеера Youtube.

40) Почему плохо использовать -moz, -ms, -webkit и прочие свойства.

41) Стоит ли использовать CSS Reset.

42) Как вертикально выравнять маркер списка.

43) Как сделать версию для печати.

44) Как сделать кроссбраузерную прозрачность на CSS.

45) Что такое clearfix.

46) Как частично отменить float.

47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.

48) Что такое адаптивная вёрстка.

49) Что такое медиа-запросы в CSS.

50) Что такое less.

51) Как сделать эффект загнутого уголка на CSS.

52) Как сделать отзывчивый "липкий" подвал сайта.

53) Как использовать Google Fonts API.

54) Как использовать сервис

Livetools.

55) Как разрешить или запретить выделение текста на CSS.

56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS.

57) Зачем нужно свойство page-break-inside в CSS.

58) Как выравнять по центру блок переменной ширины на CSS.

59) Как сделать треугольники на чистом CSS.

60) Сервис по генерации CSS треугольников.

61) Как прижать футер к нижней грани страницы(позиционирование).

62) Как прижать футер к низу страницы(табличный способ).

63) Изучаем Sass. Установка и настройка.

64) Как скрыть элемент на странице на CSS.

65) Изучаем Sass. Основы.

66) Когда использовать reset.css и normalize.css.

67) Сервис по работе с изображениями с мощным API.

68) Как сделать эффект увеличения картинки на CSS.

69) Koala - быстрая компиляция sass файлов.

70) Как добавить фильтры к фотографиям на CSS.

71) Изучаем Sass. Миксины.

72) Изучаем Sass. Математические операции.

73) Анимированная иконка меню на Sass.

74) Изучаем Sass. Функции.

75) Что такое PostCSS.

76) Как установить и настроить PostCSS.

77) Как сделать возможность оценивания на CSS.

78) Изучаем Sass. Стиль написания кода.

79) Изучаем Sass. Расширение родительского селектора.

80) 10 полезных SASS миксинов.

81) Как сделать интро в стиле "Звёздных Войн" на CSS.

82) Bootstrap 4. Введение.

83) Bootstrap 4. Установка.

84) Bootstrap 4. Reboot.

85) Bootstrap 4. Контейнеры и ключевые точки.

86) Bootstrap 4. Система сеток.

87) Bootstrap 4. Flex-свойства сетки.

88) Какие 5 нововведений появятся в CSS4.

89) Bootstrap 4. Что такое Jumbotrons.

90) Bootstrap 4. Утилиты и типография.

91) Bootstrap 4. Компонент Cards.

92) Разницу между class и id на примере тега div.

93) Неудачные элементы веб-дизайна, которые не стоит использовать.

94) Bootstrap 4. Модальные окна.

95) О приоритете

и наследовании в CSS на практике

96) Как верстать PSD макет по Bootstrap сетке. Часть 1.

97) Как верстать PSD макет по Bootstrap сетке. Часть 2.

98) Как использовать псевдоэлементы after и before в CSS.

99) Об особенностях ширины и высоты блока в CSS.

100) Псевдоэлемене after и псевдоклассе last-child.

101) Как показать сайт на различных девайсах.

102) Верстка по сетке Bootstrap (часть 1)

103) Верстка по сетке Bootstrap (часть 2)

104) Верстка по сетке Bootstrap (часть 3)

105) Верстка по сетке Bootstrap (часть 4)

106) Препроцессор LESS, начиная с простого.

107) Как устроена сетка Bootstrap.

108) Модальное окно на Bootstrap. Стилизация.

109) Как сделать фон в CSS

110) Как сделать анимированную кнопку на CSS.

Все материалы по основам CSS

Основы CSS

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

Комбинируя селекторы Вы можете быть более конкретными в том, какой элемент или группу элементов Вы хотели бы выбрать.

К примеру, если Вы хотите, чтобы абзацы и заголовки h3 и h4 были написаны одним шрифтом и цветом и отличались только лишь размером, Вы можете сперва сгруппировать элементы <p>, <h3> и <h4> и указать для них шрифт и цвет, и уже ниже для каждого элемента указать отдельно размер шрифта. Выглядеть это будет примерно следующим образом:

p, h3, h4
{ font-family: Georgia, 'Times New Roman', Times, serif;
color: #333; }
p {font-size:1.1rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }

Разберем еще один, более сложный пример комбинации селекторов. Например, у Вас есть страница, в которой абзацы лежат внутри элемента с классом brightstyle, но при этом для отдельных абзацев прописан собственный стиль dullstyle, и Вы хотите для всех абзацев brightstyle установить красный цвет текста, а для тех абзацев, у которых свой класс dullstyle - серый цвет текста (иными словами, в HTML у Вас, скажем, есть <div> и для него прописан класс brightstyle - <div, внутри него несколько абзацев <p>, а также несколько абазцев с собственными классами <p>...</p>). Представим, как это будет выглядеть в CSS:

.brightstyle p {
color: red;
}
.brightstyle p.dullstyle {
color: gray;
}

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

Иными словами, сперва в нашем примере описано, что для всех абзацев <p> (это основной селектор) с классом brightstyle (это уже уточнение) будет применяться красный цвет.

Затем указано, что для всех элементов с классом dullstyle (основной селектор), являющихся абзацами <p>, лежащими внутри класса brightstyle (это уточнения) будет применен серый цвет.

Также стоит заметить, что на применение стилей влияет наличие пробелов.

В нашем примере есть пробел между ".brightstyle" и "p.dullstyle", но нет пробела между "p" и ".dullstyle".

Отсутствие пробела указывает на то, что цвет будет применен только к абзацам <p> с классом .dullstyle, таким образом объединяя 2 селектора одного элемента, повышая специфичность селектора. Если просто убрать пробел - запись p .dullstyle будет означать последовательность селекторов, то есть читать можно будет так - элементы с классом .dullstyle внутри абзаца <p>. Если бы мы убрали пробел и селектор абзаца <p> - цвет применился бы ко всем элементам с классом .dullstyle, а не только к абзацам  <p>, таким образом снизится специфичность селектора.

основы CSS — Основы CSS — HTML Academy

CSS-правила

CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:

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

Для комментариев в CSS используются символы /* и */.

Селекторы

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

.feature-kitten {
  padding-top: 60px;
}

Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h2 { color: red; }
.info { color: blue; }

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

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

Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

nav a {…}
  .menu ul {…}
  .post .title {…}

Свойства и значения

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

.feature-kitten {
  padding-top: 60px;
}

Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.

Наследование

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

Составные свойства

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

font: 16px/26px "Arial", sans-serif;

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

Типы значений: абсолютные и относительные

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

font-size: 1cm;
font-size: 10mm;
font-size: 38px;

Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.

Стили по умолчанию

Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу.

Каскадирование

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

<p>Зелёный - мой любимый цвет</p>

Заданные стили:

.beloved-color { color: green; }

Браузерные стили:

margin: 1em 0;

Итоговые стили:

color: green;
margin: 1em 0;

Конфликт свойств

На один элемент могут действовать несколько CSS-правил. Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например:

ul { list-style: disc; }
.blog-navigation ul { list-style: none; }

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

  1. Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. Например, авторские (то есть наши) стили приоритетнее браузерных.
  2. Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. Например, селектор по классу более специфичен, чем селектор по тегу.
  3. Побеждает то свойство, которое находится ниже в коде.

Каскад работает и внутри CSS-правил.

Встраивание и подключение внешних стилей

Внешние стили подключаются через тег <link>

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

Встраивание стилей в тег <style>. Его обычно размещают внутри <head>:

<head>
  <style>
    CSS-код
  </style>
</head>

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

Встраивание в атрибут style:

<div>&lt/div>

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

Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.


Продолжить

Понимание основ 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 имеет очень серьезный арсенал инструментов форматирования текста, поэтому советую вам серьезно отнестись к следующему уроку.

Отправить ответ

avatar
  Подписаться  
Уведомление о