Уроки css для начинающих: Введение в CSS | htmlbook.ru

by

Содержание

Введение в CSS | htmlbook.ru

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

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

Рис. 1.1. Веб-страница, созданная только на HTML

Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).

Рис. 1.2. Веб-страница, созданная на HTML и CSS

Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.

1).

Пример 1.1. Исходный код документа

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Флексагон</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h2>Флексагон</h2>
  <p>Флексагон представляет собой бумажную фигуру, которая имеет 
   три и более стороны. Поначалу кажется, что это невозможно, но вспомните 
   ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа  бумаги, 
   и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и 
   склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но 
   стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, 
   что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. 
   Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
 </body>
</html>

Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style. css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

body {
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}
h2 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 24pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста  */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселах */
  margin-right: 10px; /* Отступ справа в пикселах */
  border-left: 1px solid #999; /* Параметры линии слева */
  border-bottom: 1px solid #999; /* Параметры линии снизу */
  padding-left: 10px; /* Отступ от линии слева до текста  */
  padding-bottom: 10px; /* Отступ от линии снизу до текста  */
}

В файле style. css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

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

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

Типы стилей

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

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора

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

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

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

Вопросы для проверки

1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

  1. font-color
  2. color
  3. font-family
  4. text
  5. font-size

2. Что такое стиль?

  1. Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
  2. Язык разметки гипертекстовых документов.
  3. Набор правил форматирования элементов веб-страницы.
  4. Метод преобразований текстовых документов в HTML.
  5. Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

3. Как расшифровывается аббревиатура CSS?

  1. Colorful Style Sheets
  2. Cascading Style Sheets
  3. Computer Style Sheets
  4. Creative Style Sheets
  5. Common Style Sheets

Ответы

1. color

2. Набор правил форматирования элементов веб-страницы.

3. Cascading Style Sheets

Селекторы тегов | htmlbook.ru

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

Тег { свойство1: значение; свойство2: значение; … }

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

Пример 7.1. Изменение стиля тега абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   P { 
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зеленый цвет текста */
   }
  </style>
 </head> 
 <body>

  <p>Более эффективным способом ловли льва в пустыне
  является метод золотого сечения. При его использовании пустыня делится
  на две неравные части, размер которых подчиняется правилу золотого
  сечения.
 
 </p>

 </body>
</html>

В данном примере изменяется цвет и выравнивание текста абзаца. Стиль будет применяться только к тексту, который располагается внутри контейнера <p>.

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

Вопросы для проверки

1. В какой строке содержится ошибка?

  1. h2 { margin-left: 20px; }
  2. p { margin-left: 20px; padding-left: 20px; }
  3. h3 { margin-right: 20px; }
  4. head { color: #rob; }
  5. body { font-size: 11pt; color: #aaa; }

2. Таня для фона веб-страницы и цвета текста выбрала цвета #ffe9f2 и #6e143b и в стилях использовала следующий код, однако нужные цвета не проявились. В чем причина?

body {
background-color: #ffe9f2
color: #6e143b
}

  1. body написан строчными буквами.
  2. Свойство background-color неверное, следует писать background.
  3. Значения цветов указаны неправильно.
  4. В качестве селектора применять body некорректно.
  5. Не хватает точки с запятой.

3. Какая строка написана правильно?

  1. <P> { color: #333; }
  2. P { color: #333; }
  3. P: { color: #333;}
  4. P { color: 333; }
  5. P { color: #3333; }

4. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?

  1. !DOCTYPE
  2. A
  3. HEAD
  4. TITLE
  5. BODY

5. Как добавить фоновый цвет ко всем элементам <h2>?

  1. h2 { background-color: white }
  2. h2.all { background-color: white }
  3. h2:all { background-color: white }
  4. h2[all] { background-color: white }
  5. h2#all { background-color: white }

Ответы

1. head { color: #rob; }

2. Не хватает точки с запятой.

3. P { color: #333; }

4. BODY

5. h2 { background-color: white }

Учебник CSS для начинающих.

Что такое CSS?

Введение

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

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

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

Приведу ряд доводов в пользу использования CSS:

HTML в чистом виде имеет весьма ограниченный набор инструментов не позволяющий решать те или иные дизайнерские и функциональные задумки веб-мастера. Ну вот хотя бы, к примеру, взять больной вопрос всех начинающих веб-ремесленников «Как убрать подчеркивание ссылки?» или «Как сделать чтобы наведя курсором на эту самую ссылку она меняла цвет и подсвечивалась?» с помощью одного HTML этого никак не сделать!! А сколько их еще таких «больных вопросов»? — тьма.

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

Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки

<h2> делать красным цветом, параграфы <p> писать курсивам, ссылки <a> не подчёркивать 🙂 фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги
<h2> и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента <h2> на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.

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

Ну как? Заинтриговал? Если да то рекомендую перейти к непосредственному изучению CSS. В главах этого учебника Вы научитесь внедрять каскадные таблицы стилей на страницы Вашего сайта, познакомитесь с основными стилевыми свойствами элементов на примере создания сайта с использованием CSS, вникните в тонкости и хитрости дела. Если Вы уже знакомы c каскадными таблицами стилей и Вас интересует исключительно справочная информация, то предлагаю заглянуть в справочник CSS где собранны и кратко описаны свойства CSS и их возможные значения.





HTML и CSS для начинающих — базовый багаж знаний

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

Нужны ли базовые навыки в программировании перед курсом HTML и CSS

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

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

Важность самостоятельного обучения

Хорошо, если перед стартом будущий студент начнет изучать данную область IT. Это поможет быстрее усваивать получаемое на занятиях. Учебе в одиночку способствует онлайн обучение, видео на профильных ресурсах или ютубе, а также дополнительные материалы, предоставленные лектором на занятии. Перед тем, как идти в IT-школу можно посмотреть вводные видео на ютуб-канале EasyCode — они помогут сформировать понимание разметки, стилей или JavaScript — в зависимости от уровня будущего студента. Не лишним будет ознакомиться с распространенными ошибками, открыть Git и/или редактор кода, чтобы примерно понимать, с чем придется столкнуться в ближайшие несколько месяцев.

С чего начать формирование багажа знаний:

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

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

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

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

Что изучают на уроках по HTML и CSS

Обучение верстке — это комплексный процесс, затрагивающий не только разметку и стили, но и необходимые инструменты, вроде Git. Но актуальны не только хард скиллы. Часть проектов на курсе не индивидуальны — крупная задача разбивается на мелкие, прикрепляемые к ученикам. Чтобы создать цельный продукт, все члены группы будут взаимодействовать, что поспособствует повышению soft skills: ответственности, урегулирования конфликтных ситуаций, тайм-менеджмента.

Стоит отметить, что HTML и CSS — это в первую очередь практика. Их изучение не будет проходить в режиме: «Месяц учим теорию, только потом приступаем к настоящим заданиям». Студент получает ДЗ, уделяет внимание большим проектам, которые позже сможет включить в свое портфолио и начинать искать вакансию сразу после выпуска. Всем ученикам полагается бонус — оффлайн или онлайн-занятие с HR и по фрилансу. Оба урока направлены на поддержку новоиспеченного специалиста в поиске работы — отличие в том, будет она проходить онлайн или в штате какой-либо компании. На встрече с HR можно обновить свое резюме и пройти тестовое собеседование. Лучшие ученики также получают помощь в трудоустройстве.

Технологии, в которые углубляются на базовом курсе, помимо HTML и CSS:

  • Gulp;
  • jQuery;
  • SASS;
  • Bootstrap;
  • Git;
  • npm.

Также полезны: английский, минимальное понимание JS и другие сопутствующие технологии. Также в IT ценятся soft skills, ведь любой продукт создается в команде. Специалисту по верстке приходится взаимодействовать, как минимум, с веб-дизайнером, а в некоторых компаниях еще и с заказчиком.


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

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

Как развиваться после курса по HTML и CSS

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

На самом деле, сегодня есть масса возможностей для прокачки себя в качестве программиста. Можно поработать на фрилансе, расширив свое портфолио, и создать почву для того, чтобы устроиться высокооплачиваемую должность в IT-компанию.

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

Возможность трудоустройства после обучения

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

Школа EasyCode предлагает своим студентам помощь в трудоустройстве. Мы сотрудничаем с самыми крупными компаниями Харькова и Украины — талантливые выпускники могут построить дальнейшую карьеру в большой IT-корпорации. Если возникли вопросы, звоните — наши менеджеры ответят на них.

В качестве вывода отметим, что для новичков HTML и CSS становятся лучшей точкой входа в IT, ведь создают хорошую базу, позволяют «попробовать IT» и после выпуска сделать осознанный выбор. Базовые знания верстки пригодятся не только будущим frontend-разработчикам или веб-дизайнерам, но и HR, project или product manager, копирайтерам, контент-менеджерам, sales manager и любому человеку, пользующемуся интернетом.

Знакомство с CSS. Основы CSS для начинающих. Урок №1


Знакомство с CSS. Основы CSS для начинающих. Урок №1

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

○ Что такое CSS?
CSS (от англ. Cascading Style Sheets) – это каскадные таблицы стилей, позволяющие управлять внешним видом сайта (цвет фона, размер и цвет текста, оформление ссылок, позиция блоков на сайте и др.).
Другими словами можно сказать так, что CSS это инструмент позволяющий сделать полный ремонт в вашем доме (покраска потолков и полов, клейка обоев, перестановка мебели).
Метафору вы поняли.
В общем, если дело касается оформления сайта, то в этом ваш лучший помощник CSS.

○ Чем же хорош CSS, если оформление веб-документа можно осуществить и с помощью HTML?
Если оформлять документ только с помощью HTML, то в случае каких-либо изменений, например, замена цвета заголовка в статье, вам придется угробить на это массу времени, так как по отдельности на 1000 страницах веб-документа нужно будет внести исправления.
В CSS же все довольно просто.  Достаточно указать в одном css файле цвет к заголовкам, и на всех 1000 страницах веб-документа он изменится автоматически. Да, да, это огромноя экономия времени, и риск на инфаркт уменьшается.

Не буду вас нагружать с первого урока, скажу только, что css файл имеет расширение «*.css» и зачастую файлу присваивают название «style.css» (но это не обязательно).
Еще скажу, что файл CSS работает только в паре с HTML. Сам по себе CSS работать не будет. Так что если вы не знаете основ HTML, рекомендую с ними ознакомиться прежде, чем вы откроете урок №2.

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

Предыдущая запись
Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2 Следующая запись
Коротко о PHP. Основы PHP с нуля. Урок №1

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 Учебник. Уроки для начинающих. W3Schools на русском

CSS (англ. Cascading Style Sheets, рус. Каскадные таблицы стилей) — специальный язык, который используется для описания внешнего вида страниц, написанных языками разметки данных.

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

Спецификации CSS были созданы и развиваются Консорциумом Всемирной паутины — W3C.

CSS имеет разные уровни и профили. Следующий уровень CSS создаётся на основе предыдущих, добавляя новую функциональность или расширяя уже существующие функции. Уровни обозначаются как CSS1, CSS2 и CSS3. Профили — совокупность правил CSS одного или больше уровней, созданные для отдельных типов устройств или интерфейсов. Например, существуют профили CSS для принтеров, мобильных устройств и т.д.

CSS (каскадная или блочная вёрстка) пришла на замену табличной верстке веб-страниц. Главное преимущество блочной вёрстки — разделение содержания страницы (данных) и её визуальной презентации (оформления).

По состоянию на 2020-й год актуальной версией является спецификация CSS3. Спецификация CSS4 разрабатывается ещё с 2011 года. Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft) и на данный момент официально не утверждены.

Информация взята из Википедии

CSS — это язык, который описывает стиль HTML документа.

CSS описывает, как должны отображаться HTML элементы.

Этот учебник научит вас писать CSS от базового уровня до расширенного.

Примеры в каждой главе

Этот учебник CSS содержит сотни примеров CSS.

С помощью онлайн-редактора от W3Schools вы можете редактировать CSS, нажав кнопку «Попробуйте сами», и сразу просматривать результат.

CSS Пример

body {
  background-color: lightblue;
}

h2 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Попробуйте сами »

Кликните на кнопку «Попробуйте сами» чтобы увидеть, как она работает.

Начать изучение CSS сейчас!

CSS Примеры

Обучайтесь более чем на 300 примерах! С онлайн-редактором от W3Schools вы можете редактировать CSS и нажимать кнопку, чтобы просмотреть результат.

Перейти к CSS примерам!

CSS Шаблоны

Мы создали некоторые адаптивные шаблоны W3.CSS для использования.

Вы можете изменять, сохранять, обмениваться и использовать их в любых своих проектах.

Свободные для использования CSS Шаблоны!

CSS Упражнения и Викторины

Проверьте ваши CSS знания и навычки на W3Schools!

Начать CSS Упражнения!

Начать CSS Викторину!

CSS Справочники

На сайте вы найдёте ссылки на все CSS свойства и селекторы с синтаксисом, примерами, поддержкой веб-браузера и т.д.

CSS Экзамен — Получите Ваш Диплом!

Онлайн Сертификация W3Schools

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

Более 25 000 сертификатов уже выдано!

Получите Ваш Сертификат! »

HTML Сертификат документирует ваши знания HTML.

CSS Сертификат документирует ваши знания CSS.

JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.

Python Сертификат документирует ваши знания Python.

jQuery Сертификат документирует ваши знания jQuery.

SQL Сертификат документирует ваши знания SQL.

PHP Сертификат документирует ваши знания PHP и MySQL.

XML Сертификат документирует ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документирует ваши знания Bootstrap framework.

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.

Справочник по селекторам CSS

Селектор Пример Описание примера
. класс .intro Выбирает все элементы с помощью
.class1.class2 .name1.name2 Выбирает все элементы с name1 и name2 set в пределах своего атрибута класса
.класс1. класс2 .name1 . name2 Выбирает все элементы с именем 2 , который является потомком элемент с именем 1
# id # имя Выбирает элемент с помощью
* * Выбирает все элементы
элемент p Выбирает все элементы

элемент.класс стр. Выбирает все элементы

с

элемент, элемент div, p Выбирает все элементы
и все элементы

элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент

элемент + элемент div + p Выбирает первый элемент

, который помещается сразу после элементов

элемент1 ~ элемент2 p ~ ul Выбирает каждый элемент
    , которому предшествует элемент

[ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
[ атрибут = значение ] [target = _blank] Выбирает все элементы с target = «_ blank»
[ атрибут ~ = значение ] [название ~ = цветок] Выбирает все элементы с атрибутом title, содержащим слово «цветок». = «https»] Выбирает каждый элемент , значение атрибута href которого начинается с https.
[ атрибут $ = значение ] а [href $ = «.pdf »] Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf»
[ атрибут * = значение ] a [href * = «w3schools»] Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools».
: активный a: активный Выбирает активную ссылку
:: после ч :: после Вставить что-нибудь после содержимого каждого элемента

:: до p :: до Вставить что-нибудь перед содержимым каждого элемента

: проверено ввод: проверено Выбирает каждый отмеченный элемент
: по умолчанию ввод: по умолчанию Выбирает элемент по умолчанию
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто p: пусто Выбирает каждый элемент

, у которого нет дочерних элементов (включая текстовые узлы).

: включено вход: включен Выбирает каждый активированный элемент
: первенец р: первенец Выбирает каждый элемент

, который является первым дочерним элементом своего родительского

:: первая буква п :: первая буква Выбирает первую букву каждого элемента

.

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

.

: первый в своем роде р: первый в своем роде Выбирает каждый элемент

, который является первым элементом

его родительского

: фокус ввод: фокус Выбирает элемент ввода, имеющий фокус
: полноэкранный режим: полноэкранный режим Выбирает элемент, который находится в полноэкранном режиме
: парение a: парение Выбирает ссылки при наведении указателя мыши на
: в пределах вход: в диапазоне Выбирает элементы ввода со значением в указанном диапазоне
: неопределенный ввод: неопределенный Выбирает элементы ввода, которые находятся в неопределенном состоянии
: недействительно ввод: недопустимый Выбирает все элементы ввода с недопустимым значением
: язык ( язык ) p: lang (it) Выбирает каждый элемент

с атрибутом lang, равным «it» (итальянский)

: последний ребенок p: последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом своего родительского

: последняя машина p: последний тип Выбирает каждый элемент

, который является последним элементом

его родительского

: ссылка а: ссылка Выбирает все непосещенные ссылки
:: маркер :: маркер Выбирает маркеры элементов списка
: нет ( селектор ): нет (p) Выбирает каждый элемент, не являющийся элементом

: nth-ребенок ( n ) p: nth-ребенок (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родительского

: nth-последний-ребенок ( n ) p: nth-last-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента

: nth-last-of-type ( n ) p: nth-last-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родителя, считая от последнего дочернего элемента

: nth-of-type ( n ) p: nth-of-type (2) Выбирает каждый элемент

, который является вторым элементом

его родительского

: только тип p: одинарный Выбирает каждый элемент

, который является единственным элементом

его родительского

: только ребенок p: только ребенок Выбирает каждый элемент

, который является единственным дочерним элементом своего родительского

: опционально вход: опционально Выбирает элементы ввода без атрибута «обязательный».
: вне допустимого диапазона вход: вне диапазона Выбирает элементы ввода со значением вне указанного диапазона
:: заполнитель input :: заполнитель Выбирает элементы ввода с указанным атрибутом «заполнитель».
: только для чтения ввод: только для чтения Выбирает элементы ввода с указанным атрибутом «только для чтения».
: чтение-запись вход: чтение-запись Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения»
: требуется ввод: требуется Выбирает элементы ввода с указанным атрибутом «обязательный».
: корень: корень Выбирает корневой элемент документа
:: выбор :: выбор Выбирает часть элемента, выбранную пользователем
: цель # новости: target Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует ввод: действительный Выбирает все входные элементы с допустимым значением
: посетил a: посетил Выбирает все посещенные ссылки

Цвета | HTML Dog

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

  • красный
  • RGB (255,0,0)
  • RGB (100%, 0%, 0%)
  • # ff0000
  • # f00

Предопределенные названия цветов включают аква , черный , синий , фуксия , серый , зеленый , лайм , бордовый , темно-синий фиолетовый, 905 оливковый 905 красный , серебристый , бирюзовый , белый и желтый . прозрачный также является допустимым значением.

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

Три значения в значении RGB: от 0 до 255, 0 - самый низкий уровень (например, без красного), 255 - самый высокий уровень (например, полный красный). Эти значения также могут быть процентными.

Шестнадцатеричная система (ранее и более точно известная как « шестнадцатеричная ») - это система счисления по основанию 16 .Обычно мы используем десятичную систему счисления , ( с основанием 10, , от 0 до 9), но шестнадцатеричная имеет 16 цифр, от 0 до f.

Шестнадцатеричное число предваряется символом решетки ( # ) и может состоять из трех или шести цифр. По сути, трехзначная версия является сжатой версией шестизначной ( # ff0000 становится # f00 , # cc9966 становится # c96 и т. Д.). Трехзначную версию легче расшифровать (первая цифра, как и первое значение в RGB, красная, вторая зеленая и третья синяя), но шестизначная версия дает вам больше контроля над точным цветом.

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

Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.

цвет и цвет фона

Цвета могут быть применены с использованием цвета и background-color (обратите внимание, что это должен быть «цвет» американского английского языка, а не «цвет»).

Синий фон и желтый текст могут выглядеть так:

 
h2 {
  цвет: желтый; 
  цвет фона: синий; 
}

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

 
тело {
    размер шрифта: 14 пикселей;
    цвет: темно-синий;
}

h2 {
  цвет: #ffc; 
  цвет фона: # 009; 
}

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

Вы можете применить свойства color и background-color к большинству HTML-элементов, включая body , который изменит цвета страницы и всего на ней.

Руководство по CSS для новичков

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

Позвольте мне начать с основ.

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

Наряду с JavaScript и HTML, CSS является важным компонентом каждой веб-страницы в Интернете.

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

До использования CSS почти все атрибуты, связанные с отображением документов HTML, были написаны в разметке HTML. Это означает, что так много правил пришлось повторить во всем HTML-коде.

Но CSS позволяет разработчикам перемещать эту информацию в таблицу стилей, что упрощает HTML.

В результате HTML короче, легче и менее подвержен ошибкам. Это также значительно упрощает поддержку вашего HTML.

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

Распространенное использование CSS

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

Когда вы овладеете этими общими принципами и сценариями использования, в будущем вы сможете работать с более сложными элементами CSS.

Стиль шрифта

Вы можете использовать CSS для создания стиля шрифта. Напишите свойства для таких элементов, как:

  • Тип шрифта
  • Цвет
  • Вес
  • Размер
  • Выравнивание
  • Корпус
  • Высота строки

CSS также можно использовать для добавления таких эффектов, как подчеркивание и зачеркивание.Позвольте мне привести пример, чтобы показать вам, как это работает.

Взгляните на три правила, которые я написал в стиле этого CSS. Свойство A - это обычный стиль шрифта, Свойство B - это курсивный шрифт, а все h2 - красные.

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

На таком простом примере вы можете не сразу увидеть преимущества CSS.

А теперь попробуйте представить документ с 30 или 40 h2s. На основе свойств в этом примере все h2 автоматически будут красными, без необходимости добавления какого-либо дополнительного кода в HTML. Если бы я хотел изменить их на синий, все, что мне нужно было бы сделать, это изменить CSS, в отличие от индивидуального прохождения 40 h2s в документе.

Свойства позиции

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

Значения общей собственности включают:

  • Статический - элементы упорядочены в зависимости от того, как они отображаются в документе.
  • Исправлено - элементы расположены в позиции относительно окна просмотра.
  • Absolute - Элементы позиционируются относительно его первой позиции.
  • Прикреплено - элементы располагаются относительно места прокрутки пользователя веб-сайта.

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

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

Свойства поплавков

В основном свойство float используется для отправки элемента в HTML справа или слева от другого элемента без изменения потока документа. Это один из лучших подходов к созданию макетов для веб-сайта.

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

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

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

Как видите, свойство CSS говорит, что изображения будут плавать правильно. Таким образом, в теле HTML при вводе изображения автоматически применяется свойство float.

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

Очистить свойства

Свойство clear в CSS часто используется для очистки плавающего объекта. Как вы только что узнали, когда элемент перемещается, все последующие элементы корректируются так, чтобы они правильно выровнялись на основе свойства float.

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

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

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

Коробчатая модель

Каждый элемент HTML можно рассматривать как коробку. При использовании CSS блочная модель относится к дизайну и макету страницы.

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

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

P {

отступ: 10 пикселей;

граница: сплошной синий цвет 20 пикселей;

поле: 20 пикселей;

}

Эти свойства CSS будут преобразованы в 10 пикселей отступа с каждой стороны текста. Это будет пустое место вокруг абзаца. Также вокруг отступа будет сплошная синяя рамка размером 20 пикселей. Наконец, между границей и любым другим окружающим элементом должно быть 20 пикселей.

Адаптивный веб-дизайн с CSS

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

Наличие полноразмерного веб-сайта с одним дополнительным дизайном для небольшого устройства больше не вариант. Поэтому вам нужно использовать CSS для создания адаптивного дизайна.

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

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

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

Этот подход дает множество преимуществ.

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

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

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

Учебные ресурсы CSS

Все, что я рассмотрел до сих пор, едва касалось CSS. Я просто хотел дать вам представление, чтобы вы лучше поняли, как это работает.

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

Кодекадемия

Codecademy - одна из лучших платформ для обучения программированию в Интернете. За последние семь лет более 45 миллионов человек научились программировать с помощью своей системы.

Почти 500 000 из этих людей прошли курс CSS. Это займет около 15 часов, и вам нужно будет пройти их вводный курс по HTML в качестве предварительного условия. Таким образом, вы потратите примерно 22 часа на изучение CSS.

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

В класс также входят:

  • Селекторы CSS
  • Визуальные правила
  • Коробка модель
  • Дисплеи
  • Выбор позиции
  • Типографика
  • CSS сетки

Как видно из этого списка, некоторые из этих тем мы обсуждали в этом руководстве. Таким образом, у вас уже будет базовое понимание некоторых принципов, которые дадут вам фору.

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

Цена

составляет 19,99 долларов в месяц за годовой контракт, что является лучшим предложением, которое у них есть. В противном случае вы заплатили бы 29,99 доллара США или 39,99 доллара США за шестимесячный или помесячный контракт соответственно.

W3Школы

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

Мне нравится этот ресурс, потому что он очень простой и удобный.

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

На сайте W3Schools есть более 300 различных примеров CSS. Вы можете протестировать все это с помощью их редактора.

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

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

После завершения обучения вы можете сдать экзамен из 70 вопросов, на которые у вас будет 70 минут. Если вы ответите правильно на 75% вопросов, вы сдадите экзамен и получите сертификат. Если вы дадите 95% правильных ответов, к сертификату будет добавлен знак отличия.

Программа сертификации CSS от W3Schools стоит 95 долларов.

Заключение

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

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

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

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

Онлайн-курс CSS для начинающих

Цвета
Как добавлять и изменять цвета элементов.

Попробуйте!

Фоны
Изменение цвета фона, изображений и т. Д.
Границы
Добавление границ к элементам и изменение стиля границы.
Поля и отступы
Понимание разницы между Margins и Padding.
Высота и ширина
Как изменить свойства высоты и ширины элемента.
Коробка модель
Понимание блочной модели CSS для вашего дизайна и макета.
Наброски
Узнайте, как изменить стиль, цвет и ширину контура.
Форматирование текста
Как изменить форматирование и выравнивание текста.
Шрифты
Как управлять семейством шрифтов, жирностью, стилем и размером текста.
Ссылки
Научитесь стилизовать ссылки. Понимание активного, наведенного и посещенного форматирования, а также оформления текста.
Списки
Стилизация как упорядоченных, так и неупорядоченных списков.
Таблицы
Как сильно изменить внешний вид HTML-таблиц.
Дисплей
Понимание того, как элемент отображается с помощью CSS.
Позиция
Понимание статического, относительного, фиксированного и абсолютного позиционирования.
Плавающий и прозрачный
Что такое Float left, Float right и четкое выражение.
Встроенный блок
Узнайте, как упростить плавание с помощью Inline-Block
Align
Выравнивание элементов по горизонтали и вертикали, а также центрирование объектов.
Комбинаторы
Что такое комбинаторы и когда их использовать.
Псевдокласс
Понимание псевдоклассов CSS и их использования.

Изучите CSS с помощью онлайн-курсов и уроков

Что такое CSS?

CSS - это таблица стилей, описывающая представление страницы на основе HTML. Это один из краеугольных камней Интернета. CSS означает каскадные таблицы стилей и разделяет представление и контент для улучшения доступности и сокращения времени, затрачиваемого на кодирование. Он позволяет создавать несколько страниц с одинаковым форматированием, но с указанием CSS для каждой конкретной страницы. Разделение презентации и содержимого позволяет отображать несколько версий одной страницы для альтернативных форматов, таких как мобильный, экранный или голосовой.Он поддерживается W3C, который предоставляет бесплатную службу проверки. CSS поддерживается другими языками разметки в дополнение к HTML, такими как XHTML и SVG. Он также интегрируется с такими вещами, как javascript.

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

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

Сертификаты и курсы CSS

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

CSS и ваша карьера

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

Как выучить CSS - журнал Smashing

Об авторе

Рэйчел Эндрю (Rachel Andrew) - веб-разработчик, писатель и спикер. Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬

Вам не нужно запоминать каждое свойство и значение CSS, так как есть хорошие места для их поиска.Однако есть некоторые фундаментальные вещи, которые значительно упростят вам использование CSS. Эта статья направлена ​​на то, чтобы помочь вам в изучении CSS.

Многие люди просят меня порекомендовать им учебные пособия по различным частям CSS или спрашивают, как изучать CSS. Я также вижу много людей, которые не понимают, что такое CSS, отчасти из-за устаревших представлений о языке. Учитывая, что за последние несколько лет CSS претерпел существенные изменения, сейчас самое время освежить свои знания.Даже если CSS - это небольшая часть того, что вы делаете (потому что вы работаете в другом месте стека), CSS - это то, как все в конечном итоге выглядит так, как вы хотите, на экране, поэтому стоит быть в разумных пределах в актуальном состоянии.

Таким образом, цель этой статьи - описать ключевые основы CSS и ресурсы для дальнейшего чтения по ключевым областям современной разработки CSS. Многие из этих вещей прямо здесь, в Smashing Magazine, но я также выбрал некоторые другие ресурсы, а также людей, которым нужно следить в ключевых областях CSS. Это не полное руководство для начинающих, и оно не предназначено для охвата абсолютно всего.Моя цель - охватить весь спектр современного CSS с акцентом на нескольких ключевых областях, которые помогут вам разблокировать остальную часть языка.

Основы языка

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

Селекторы, больше, чем просто класс

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

Селекторы, которые являются частью спецификации уровня 3 (вы, возможно, слышали, что они называются селекторами уровня 3), отлично поддерживаются браузером. Подробное описание различных селекторов, которые вы можете использовать, см. В справочнике MDN.

Некоторые селекторы действуют так, как если бы вы применили класс к чему-то в документе. Например, p: first-child ведет себя так, как если бы вы добавили класс к первому элементу p , они известны как селекторы псевдокласса .Селекторы псевдоэлемента действуют так, как если бы элемент был вставлен динамически, например :: first-line действует аналогично тому, как вы оборачиваете диапазон вокруг первой строки текста. Однако он будет применен повторно, если длина этой строки изменится, чего не было бы, если бы вы вставили элемент. С этими селекторами можно усложнить задачу. Ниже на CodePen показан пример псевдоэлемента, связанного с псевдоклассом. Мы нацелены на первый элемент p с псевдо-классом : first-child , затем селектор :: first-line выбирает первую строку этого элемента, действуя так, как если бы вокруг этой первой строки в чтобы сделать его жирным и изменить цвет.

См. Первую строку «Ручка» Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Первую строку «Ручка» Рэйчел Эндрю (@rachelandrew) на CodePen.
Наследование и каскад

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

Примечание : Чтобы понять все эти вещи, я бы предложил прочитать Каскад и наследование в MDN Introduction to CSS.

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

См. Специфику Pen от Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Специфику Pen от Рэйчел Эндрю (@rachelandrew) на CodePen.DevTools может помочь вам понять, почему некоторые CSS не применяются к элементу (большой предварительный просмотр)
Box Model

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

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

В демонстрации ниже у меня две коробки. Оба имеют ширину 200 пикселей с границей 5 пикселей и отступом 20 пикселей. Первый блок использует стандартную блочную модель, поэтому его общая ширина составляет 250 пикселей.Второй использует альтернативную блочную модель, поэтому на самом деле имеет ширину 200 пикселей.

См. Модели ящиков с ручками от Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Модели ящиков с ручками от Рэйчел Эндрю (@rachelandrew) на CodePen.

Browser DevTools снова может помочь вам разобраться в используемой блочной модели. На изображении ниже я использую Firefox DevTools для проверки окна, используя стандартную модель блока content-box . Инструменты говорят мне, что это используемая блочная модель, и я могу видеть размер и то, как граница и отступы добавляются к назначенной мной ширине.

DevTools поможет вам понять, почему блок имеет определенный размер и какая модель блока используется (большой предварительный просмотр)

Примечание : До IE6 в Internet Explorer использовалась альтернативная блочная модель с отступом и границами, вставляющими содержимое вдали от заданная ширина. Итак, какое-то время браузеры использовали разные модели боксов! Если сегодня вас расстраивают проблемы совместимости, радуйтесь, что ситуация улучшилась, и теперь мы не имеем дело с браузерами, вычисляющими ширину объектов по-разному.

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

Нормальный поток

Если у вас есть документ с HTML-разметкой, и вы просматриваете его в браузере, мы надеемся, что он будет удобочитаемым. Заголовки и абзацы начинаются с новой строки, слова отображаются в виде предложения с одним пробелом между ними. Теги для форматирования, такие как em, не прерывают поток предложений. Этот контент отображается в обычном или блочном режиме. Каждая часть контента описывается как «в потоке»; он знает об остальном содержании и поэтому не перекрывается.

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

Контексты форматирования

Если у вас есть документ с содержимым в нормальном потоке, вы можете захотеть изменить внешний вид части этого содержимого. Вы делаете это, изменяя контекст форматирования элемента.В качестве очень простого примера, если вы хотите, чтобы все ваши абзацы выполнялись вместе, а не начинались с новой строки, вы можете изменить элемент p на display: inline , изменив его с блока на встроенный контекст форматирования.

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

Примечание : Последняя версия спецификации дисплея изменяет значения display для явного объявления внутреннего и внешнего значения. Следовательно, в будущем вы можете сказать display: block flex; ( блок является внешним и изгибом является внутренним).

Узнайте больше о display на MDN.

Находится в потоке или вне его

Элементы в CSS описываются как «находящиеся в потоке» или «вне потока».'Элементам в потоке дается пространство, и это пространство уважается другими элементами в потоке. Если вы извлекаете элемент из потока, перемещая его или позиционируя его, пространство для этого элемента больше не будет учитываться другими элементами потока.

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

См. Pen Out of Flow: абсолютное позиционирование Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Out of Flow: абсолютное позиционирование Рэйчел Эндрю (@rachelandrew) на CodePen.

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

See the Pen Out of flow: float Рэйчел Эндрю (@rachelandrew) на CodePen.

See the Pen Out of flow: float от Рэйчел Эндрю (@rachelandrew) на CodePen.

Вы можете узнать больше об элементах в потоке и вне потока на MDN. Важно помнить, что если вы извлекаете элемент из потока, вам нужно самостоятельно управлять перекрытием, поскольку обычные правила компоновки потока блоков больше не применяются.

Макет

Более пятнадцати лет мы занимаемся версткой на CSS без системы, предназначенной для работы в системе.Это изменилось. Теперь у нас есть отлично работающая система макета, которая включает в себя сетку и Flexbox, а также макет с несколькими столбцами и более старые методы макета, используемые для их реальной цели. Если CSS Layout для вас загадка, перейдите к руководству MDN Learn Layout или прочтите мою статью «Начало работы с CSS Layout» здесь, в Smashing Magazine.

Не думайте, что такие методы, как grid и flexbox, каким-то образом конкурируют с . Чтобы правильно использовать Layout, вы иногда обнаружите, что компонент лучше всего как гибкий компонент, а иногда как Grid.Иногда вам может понадобиться, чтобы поток столбцов был multicol. Все это верный выбор. Если вы чувствуете, что боретесь с тем, как что-то ведет, это, в общем, очень хороший знак того, что, возможно, стоит сделать шаг назад и попробовать другой подход. Мы так привыкли взламывать CSS, чтобы заставить его делать то, что мы хотим, что, вероятно, забудем, что у нас есть ряд других вариантов, которые можно попробовать.

Макет - моя основная область знаний, и я написал ряд статей здесь, в Smashing Magazine и в других местах, чтобы попытаться помочь укротить новый ландшафт макета.В дополнение к упомянутой выше статье «Макет» у меня есть целая серия статей о Flexbox - начните с «Что происходит при создании гибкого контейнера Flexbox». В Grid By Example у меня есть множество небольших примеров CSS Grid плюс видеоурок.

Кроме того - и особенно для дизайнеров - посмотрите Джен Симмонс и ее серию видеороликов Layout Land.

Выравнивание

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

В MDN вы можете покопаться в «Выравнивании блоков» и в том, как это реализовано для сетки, Flexbox, Multicol и блочного макета. Здесь, в Smashing Magazine, у меня есть статья, посвященная выравниванию в Flexbox: все, что вам нужно знать о выравнивании во Flexbox.

Размер

Я провел большую часть 2018 года, рассказывая о спецификациях внутреннего и внешнего размера, и о том, как они связаны, в частности, с Grid и Flexbox.В Интернете мы привыкли устанавливать размеры в длинах или процентах, так как именно так мы могли создавать макеты типа сетки с использованием поплавков. Однако современные методы компоновки могут сделать большую часть распределения пространства за нас - если мы им позволим. Понимание того, как Flexbox распределяет пространство (или как работает модуль Grid fr ), стоит вашего времени.

Здесь, в Smashing Magazine, я писал об изменении размеров в макете в целом, а также о Flexbox в статье «Насколько велик этот гибкий блок?».

Адаптивный дизайн

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

Вот несколько простых руководств по адаптивному дизайну, а для медиа-запросов, в целом, ознакомьтесь с моей статьей Использование медиа-запросов для адаптивного дизайна в 2018 году. Я смотрю, для чего полезны медиа-запросы, а также показываю новые функции входит в Media Queries на уровне 4 спецификации.

Шрифты и типографика

За последний год, наряду с макетом, использование шрифтов в Интернете претерпело огромные изменения.Здесь можно найти переменные шрифты, позволяющие одному файлу шрифта иметь неограниченное количество вариантов. Чтобы получить общее представление о том, что они из себя представляют и как работают, посмотрите этот отличный краткий доклад Мэнди Майкл: «Вариативные шрифты и будущее веб-дизайна». Кроме того, я бы порекомендовал динамическую типографику с современным CSS и переменными шрифтами от Джейсона Паментала.

Для изучения переменных шрифтов и их возможностей есть забавная демонстрация от Microsoft, а также несколько игровых площадок для опробования переменных шрифтов - Axis Praxis является наиболее известным (мне также нравится площадка для шрифтов).

Как только вы начнете работать с переменными шрифтами, это руководство по MDN окажется невероятно полезным. Чтобы узнать, как реализовать резервное решение для браузеров, которые не поддерживают переменные шрифты, прочтите статью «Реализация переменного шрифта с резервными веб-шрифтами» Оливер Шендорфер. Редактор шрифтов Firefox DevTools также поддерживает работу с переменными шрифтами.

Преобразования и анимация

CSS-преобразования и анимация - это определенно то, что я ищу по мере необходимости.Мне нечасто их нужно использовать, и синтаксис, кажется, выскакивает у меня из головы между использованием. К счастью, мне помогает справочник по MDN, и я бы посоветовал начать с руководств по использованию преобразований CSS и анимации CSS. У Зелла Лью также есть хорошая статья, которая дает отличное объяснение переходов CSS.

Чтобы узнать о некоторых возможностях, загляните на сайт Animista.

Одна из вещей, которая может сбивать с толку в анимации, - это какой подход использовать.В дополнение к тому, что поддерживается в CSS, вам может потребоваться задействовать JavaScript, SVG или API веб-анимации, и все эти вещи, как правило, объединяются. В своем выступлении «Выберите свое анимационное приключение», записанном на мероприятии отдельно, Вэл Хед объясняет возможные варианты.

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

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

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

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

(il)

Изучение CSS: руководство по изучению каскадных таблиц стилей

Как выучить CSS

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

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

HTML и CSS работают рука об руку. Когда вы видите заголовок, использующий новый шрифт на веб-сайте, для определения заголовка будет использоваться HTML. Затем CSS будет использоваться для установки шрифта для заголовка.Рассмотрим абзац текста. HTML будет использоваться для определения текста. Стили CSS будут использоваться для изменения цвета текста.

Это руководство расскажет, как лучше всего выучить CSS в Интернете. Мы дадим вам набор четких шагов, которым вы можете следовать, чтобы помочь вам быстро и эффективно начать свой путь к изучению CSS.

Для чего используется CSS?

Найдите свой учебный курс