CSS (каскадная таблица стилей) является одним из трех краеугольных камней Интернета, наряду с HTML и JavaScript. Это то, что оживляет веб-сайты благодаря цветам, стилю, позиционированию и многому другому. Таким образом, знание CSS имеет огромное значение на сегодняшнем рынке труда!
Поэтому я рад сообщить, что мы только что запустили бесплатный курс CSS по Scrimba. Его создал наш блестящий инструктор Эрик Тирадо, который также провел наш популярный вводный курс по HTML.
Менее чем за час Эрик превратит вас с нуля до знатока CSS!
Давайте посмотрим, как проложен курс.
Часть # 1: Введение
Во вводном видео Эрик даст вам обзор того, как выглядит курс, каковы предварительные условия, а также обзор тем, которых он затрагивает на протяжении всего курса. Он также кратко расскажет о себе, чтобы вы познакомились с ним, прежде чем прыгать.
Часть 2: CSS-документы и каскад
Затем мы переходим непосредственно к первому официальному уроку курса. В этой статье мы рассмотрим способы включения CSS в наши HTML-страницы и способы применения основных стилей к нашим элементам.
Часть № 3: Селекторы, свойства и значения CSS
Во втором уроке Эрик рассказывает о некоторой лексике CSS, которая помогает вам лучше понимать концепции, которые он использует в последующих лекциях. Вы узнаете, что такое элементы HTML, что такое селекторы CSS и как применять свойства и присваивать им значения.
<h1> CSS Vocabulary <h1>
Так, например, это элемент h1. У него есть стиль по умолчанию, который появляется, когда вы его визуализируете в браузере. Если мы хотим изменить какой-то стиль, мы можем использовать CSS:
h1 {
color: 'red';
}
Селектор для нашего элемента h1 - это просто имя самого элемента, а затем мы присваиваем ему свойство цвета со значением красного. Таким же образом мы можем выбирать элементы, используя классы и идентификаторы, что обсуждается в следующих видеороликах.
Часть # 4: классы и идентификаторы
В этой части курса обсуждается, как использовать классы и идентификаторы в CSS для выбора элементов HTML и применения к ним различных стилей. В нем также подробно обсуждается разница между классом и идентификатором, а также как и когда мы назначаем их элементам HTML.
Взгляните на следующий код в качестве примера:
<h1 class='heading'>This is the heading tag</h1> <p class='paragraph'>This is a paragraph tag</p>
Приведенный выше фрагмент состоит из тегов h1 (заголовок) и ap (абзац). Мы присвоили элементу h1 класс heading, а нашему элементу p идентификатор paragraph..
В нашем файле CSS мы выбираем класс заголовка и присваиваем ему свойство цвета. Позже мы выбираем ID абзаца и даем ему свойства цвета и размера шрифта:
.heading {
color: blue
}
#paragraph {
color: green;
font-size: 14px;
}
Часть # 5: Специфика
В части 5 курса вы узнаете о специфичности, то есть о том, как браузер узнает, какие стили и правила наиболее актуальны для применения к элементу.
<h1 class='heading'>This is the heading tag</h1>
Например, здесь у нас есть тег h1 с примененным к нему классом заголовка.
h1 {
color: blue;
}
.heading {
color: green;
}
Используя CSS, мы назначаем синий цвет тегу h1, который будет изменять цвет каждого h1. Затем мы также назначаем зеленый цвет классу heading, чтобы каждый элемент с этим классом имел свой цвет, замененный на зеленый. Таким образом, тег h1, который мы определили выше, будет зеленым.
Часть # 6: Ширина и высота
В этом уроке вы узнаете, как применять ширину и высоту, чтобы управлять форматированием и отображением страницы.
Выше слайд из урока, который даст вам представление о том, как мы можем создавать разделы и блоки, используя ширину и высоту, чтобы наша веб-страница выглядела правильно отформатированной.
Часть # 7: Единицы длины
В CSS мы можем использовать разные единицы измерения для измерения различных размеров, которые мы передаем в качестве свойств наших HTML-элементов. В этом уроке подробно обсуждается, что это за разные единицы и чем они отличаются в использовании.
Есть два типа единиц длины:
- Абсолютные единицы
- Относительные единицы.
Абсолютные единицы - это единицы фиксированной длины, и длина, выраженная в любой из них, будет отображаться как точно такой размер. Например, cm, mm, in, 'px и т. Д. Являются абсолютными единицами.
С другой стороны, единицы относительной длины определяют длину относительно другого свойства длины. Например, em, ex, rem и т. Д. Являются абсолютными единицами.
Часть # 8: Цвета
В этом уроке подробно обсуждается, как мы можем использовать и применять цвета к различным элементам HTML. Здесь также обсуждаются различные способы объявления имени цвета в наших свойствах CSS.
.heading1 {
color: orange;
}
.heading2 {
color: #ff6347;
}
.heading3 {
color: RGB(255, 99, 71);
}
В приведенном выше примере есть три класса, объявленных с одинаковым свойством цвета, назначенным им. Но стоит обратить внимание на то, как мы использовали разные способы присвоения значений цветов.
Класс heading1 использует название цвета (оранжевый) в качестве своего свойства. heading2 использует шестнадцатеричное значение цвета. И heading3 использует значение цвета RGB.
Часть # 9: Прокладка
В CSS отступы используются для создания пробелов вокруг содержимого элемента внутри любых определенных границ. В CSS у вас есть возможность применить отступ ко всем или любой стороне элементов. В уроке 9 этого курса рассказывается о заполнении и рассказывается, как его можно применять по-разному.
.container {
padding: 10px;
// padding-left: 10px;
// padding-right: 10px;
// padding-top: 5px;
// padding-bottom: 5px;
}
Как и в приведенном выше примере, мы можем либо просто использовать свойство padding, которое применит интервал ко всем сторонам, либо, в качестве альтернативы, вы можете задать отступы для отдельных направлений.
Часть # 10: Границы
В этом уроке вы узнаете, как применить границы вокруг вашего контента. Вы также узнаете о вариациях, которые можно придать рамкам с помощью различных стилей и параметров, доступных в CSS.
Возьмите пример коробки на картинке выше и обратите внимание на границы вокруг него разного цвета и ширины.
Часть # 11: Поля
Поля в CSS похожи на отступы: они применяют интервалы вокруг элемента, но делают это за пределами любой определенной границы. В этом уроке рассказывается об использовании полей внутри вашего CSS и о том, как вы можете применять одни и те же поля во всех направлениях или разные поля в разных направлениях.
.container {
margin: 10px;
// margin-left: 10px;
// margin-right: 10px;
// margin-top: 5px;
// margin-bottom: 5px;
}
Часть # 11: Коробчатая модель
Коробочная модель в CSS - это термин, который мы используем при описании дизайна и макета. Мы можем рассматривать все элементы HTML как блоки, в каждом из которых содержатся свойства полей, отступов, границ и т. Д.
На иллюстрации выше поясняется концептуальная модель коробки. В этом уроке Эрик объяснит, как мы можем использовать эту концепцию, чтобы лучше спроектировать и расположить наши элементы.
Часть # 13: Видимость
Мы также можем обновить видимость любого элемента в HTML с помощью CSS. Мы можем, например, скрыть или отобразить любой элемент, используя свойство display. Этот урок объясняет три различных способа, которыми мы можем поиграть с видимостью элементов.
.hidden {
display: none:
}
Один из трех способов обновить видимость - использовать свойство display. В приведенном выше примере мы установили для свойства display значение none, чтобы любой элемент, имеющий класс hidden, вообще не отображался в браузере.
Часть # 14: Шрифты
Шрифты - одна из самых важных и полезных функций CSS. Мы можем поиграть с различными стилями шрифтов и семействами шрифтов, чтобы текст выглядел хорошо. Урок 14 этого курса посвящен использованию шрифтов!
На изображении выше текст Hello World имеет font-family Black Han Sans’, arial, sans-serif и font-size 30px. Таким же образом мы можем применять различные свойства, чтобы сделать наш текст более привлекательным и красивым.
Часть # 15: поток элементов
В этом разделе курса вы узнаете о типичном потоке элементов о том, как они отображаются в браузере. Есть два типа HTML-элементов: встроенные и блочные.
Встроенные элементы не могут принимать свойства width и height. Они всегда будут такими же большими, как и их содержание. Однако для блочных элементов вы можете установить и width, и height по своему усмотрению.
Часть # 16: Float & Clear
На этом уроке вы узнаете о свойствах float и clear. Это очень полезно, если мы хотим управлять положением элементов HTML, чтобы они перемещались слева или справа друг от друга.
Часть # 17: Задача макета поплавка
Вот и вызов этого курса. В нем вам будет предложено создать следующий макет, используя свойства float. Позже в скринкасте Эрик научит вас, как это сделать, если вы столкнетесь с какими-либо трудностями.
Часть # 18: Свойство позиции
В этом уроке мы создадим простую страницу статьи, на которой будем использовать доступные свойства позиционирования. Мы будем работать с div, текстовым содержимым, диапазоном и нижним колонтитулом.
В конце этого урока вы сможете создать такой макет:
Часть # 19: Псевдоклассы / элементы
На последнем уроке мы узнаем о псевдоклассах и элементах. Мы используем псевдоклассы, чтобы сделать выбор некоторых элементов HTML на продвинутом уровне. Это очень полезный метод, когда мы имеем дело со сложными веб-страницами, имеющими несколько элементов и условных стилей.
/* unvisited link */
a:link {
color: aqua;
}
/* visited link */
a:visited {
color: orange;
}
Например, в приведенном выше фрагменте кода мы применяем различные классы к тегу привязки, используя его состояние - был ли он посещен или нет. Есть тысячи других вариантов использования псевдоклассов, и этот урок поможет вам понять основную концепцию их использования.
Часть №20: Что дальше?
В этом последнем скринкасте курса Эрик подводит итоги того, что вы узнали в ходе курса, и дает вам советы по продолжению вашего учебного пути.
CSS - обширная тема, и это еще много возможностей, которые нужно изучить, помимо того, что было рассмотрено в этом курсе!
Если вы дойдете до конца, то сможете похвалить себя по плечу. Вы сделали большой шаг к тому, чтобы научиться создавать и проектировать веб-сайты, а это очень ценный навык.
Так что вперед и пройдите бесплатный курс уже сегодня! Ваше будущее будет вам за это благодарно :)
