Изучите CSS за один час

izuchite css za odin chas
2JzvFPRiXR-0mdeHA9QVJAopOF577dOvFazI
Нажмите здесь, чтобы перейти к курсу.

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

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

Менее чем через час Эрик подведет вас с нуля к знанию CSS!

Давайте посмотрим как организованный курс.

Часть №1: Введение

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

Часть №2: Документы CSS и каскад

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

1*iMZI_APohllftaOWzZF26w

Часть №3: Селекторы, свойства и значение CSS

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

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

h1 {  
   color: 'red';  
}

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

Часть №4: Классы и идентификаторы

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

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

<h1 class="heading">This is the heading tag</h1>

<p class="paragraph">This is a paragraph tag</p>

Приведенный выше фрагмент состоит из an h1 (заголовок) и а p (абзац) тег. Мы дали h1 элемент класса heading и наши p элемент с идентификатором paragraph.

В нашем CSS-файле мы выбираем класс заголовка и придаем ему свойство цвета. Позже мы выбираем идентификатор абзаца и придаем ему свойства цвета и размера шрифта:

.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: Ширина и высота

В этом уроке вы узнаете, как применять ширину и высоту для управления форматированием и потоком страницы.

1*xHqvKfUZPOtuDD5DGzyw9A

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

Часть №7: Единицы длины

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

Есть два типа единиц длины:

  1. Абсолютные единицы
  2. Относительные единицы.

Абсолютные единицы — это единицы фиксированной длины, и выражающаяся в любой из них длина будет отображаться именно таким размером. Например, 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; */ 
}

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

Часть №10: Границы

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

1*WntPLYFZ2mhDzzixJsVcvg

Возьмите пример коробки на рисунке выше и обратите внимание на границы вокруг него разных цветов и ширины.

Часть №11: Поля

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

.container {  
   margin: 10px;  
   /* margin-left: 10px;  */
   /* margin-right: 10px;  */
   /* margin-top: 5px;  */
   /* margin-bottom: 5px;  */
}

Часть №11: Модель коробки

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

https://www.w3schools.com/css/css_boxmodel.asp

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

Часть №13: Наглядность

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

.hidden {  
   display: none:  
}

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

Часть №14: Шрифты

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

1*POhzHtwY6mLoxze0OIFxfA

На рисунке выше текст Hello World содержит font-family с Black Han Sans’, arial, sans-serif и font-size с 30px. Таким же образом мы можем применить разные свойства, чтобы сделать наш текст более привлекательным и красивым.

Часть №15: Поток элементов

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

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

1*-pL6xqjpAAHVYFWz8nouHQ

Часть №16: Float & Clear

На уроке вы узнаете о float и clear свойства. Они очень полезны, если мы хотим контролировать расположение элементов HTML, чтобы они плавали налево или направо друг от друга.

1*0mteoomCow29RxDdDFYHcw

Часть №17: Float Layout Challenge

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

1*5qYKDrMQSjdDcBkQ8bJ0Uw

Часть №18: Свойство позиции

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

В конце этого урока вы сможете создать макет, подобный этому:

1*DEYQgPYCFINopCArk89V0Q

Часть №19: Псевдоклассы / Элементы

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

/* unvisited link */  
a:link {  
    color: aqua;  
}

/* visited link */  
a:visited {  
    color: orange;  
}

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

Часть №20: Что дальше?

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

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

1*eyw8VxOKZ9wpffC3QkFBPA

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

Итак, пройдите бесплатный курс уже сегодня! Ваше будущее «я» будет благодарен вам за это 🙂

Спасибо, что прочли! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

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

Добавить комментарий

Ваш адрес email не будет опубликован.