Содержание статьи
Краткое руководство по языку дизайна в Интернете.
CSS (каскадные таблицы стилей) – это то, что делает веб-страницы красивым и привлекательным видом. Это неотъемлемая часть современной веб-разработки и обязательный навык для любого веб-дизайнера и разработчика.
В этой статье я дам вам краткое введение, которое поможет вам начать работу с CSS.
Мы также запустили бесплатный полноценный курс CSS по Scrimba. Щелкните здесь, чтобы проверить это.
Я предполагаю, что у вас есть базовое понимание HTML, но кроме этого нет никаких предпосылок для этого учебника.
Начинаем
Начнём с того, как мы можем включить CSS в наши проекты. Обычно мы это делаем тремя способами.
1. Встроенный CSS
Во-первых, мы можем включить CSS прямо в наши элементы HTML. Для этого мы используем style атрибут, а затем мы придаем ему свойства.
<h1 style="color: blue"> Hello world! </h1>
Здесь мы придаем ему свойство colorи установив значение blueчто приводит к следующему:
Мы также можем установить несколько свойств внутри style тег, если мы хотим. Однако я не хочу продолжать этот путь, поскольку все начинает запутаться, если наш HTML переполнен большим количеством CSS внутри.
Вот почему был введен второй способ включения CSS.
2. Внутренний CSS
Другим способом включения CSS является использование style элемент в head раздел HTML-документа. Это называется внутренним стилем.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
В элементе style мы можем предоставить стиль нашим элементам HTML, выбрав элемент(ы) и предоставив атрибуты стиля. Так же, как мы применилиcolorсобственность до h1 элемент выше.
3. Внешний CSS
Третий и наиболее рекомендуемый способ включения CSS – это использование внешней таблицы стилей. Мы создаем таблицу стилей с помощью a .css расширение и включить его ссылку в HTML-документ, например:
<head>
<link rel="stylesheet" href="
</head>
В код выше мы включили ссылку style.css файл с помощью link элемент. Затем мы записываем весь наш CSS в отдельную таблицу стилей под названием style.css чтобы им было легко управлять.
h1 {
color: blue;
}
Эту таблицу стилей можно также импортировать в другие HTML файлы, поэтому это отлично подходит для повторного использования.
CSS-селекторы
Как мы обсуждали ранее, CSS – это язык дизайна, используемый для стилизации элементов HTML. А для того чтобы стилизовать элементы, сначала нужно их выбрать. Вы уже видели, как это работает, но давайте немного глубже погрузимся в селекторы CSS и рассмотрим три разных способа выбора элементов HTML.
1. Элемент
Первый способ выбрать HTML-элемент – это просто использовать имя, что мы и сделали выше. Давайте посмотрим, как это работает:
h1 {
font-size: 20px;
}
p {
color: green;
}
div {
margin: 10px;
}
Приведенный выше пример практически сам по себе разъясняется. Мы выбираем разные элементы, как h1, p, div и предоставление им разных атрибутов стиля. The font-size контролирует размер текста, color устанавливает цвет текста и margin добавляет расстояние вокруг элемента.
2. Класс
Другим методом выбора частей HTML является внедрение атрибута class. В HTML мы можем назначить разные классы нашим элементам. Каждый элемент может иметь несколько классов, и каждый класс также применим к нескольким элементам.
Давайте посмотрим на это в действии:
<div class="container">
<h1> This is heading </h1>
</div>
.container {
margin: 10px;
}
В коде выше мы назначили класс container к элементу div. В таблице стилей мы выбираем наш класс с помощью .className форматирование и предоставление ему a 10px моржа.
3. ID
Как и классы, мы можем также использовать идентификаторы для выбора элементов HTML и применения стилей к ним. Единственная разница между классом и идентификатором заключается в том, что один идентификатор можно назначить только одному элементу HTML.
<div>
<p id='para1'> This is a paragraph </p>
</div>
#para1 {
color: green;
font-size: 16px;
}
В приведенном выше примере показано, как мы назначаем идентификатор элемента абзаца, а позже используем селектор идентификатора в таблице стилей, чтобы выбрать абзац и применить к нему стиль.
Шрифты и цвета
CSS предоставляет нам буквально сотни вариантов для того, чтобы поиграть со шрифтами и цветами и сделать наши элементы HTML красивыми. Мы можем выбрать из двух типов названий семейства шрифтов:
1. Родовая семья: группа семейств шрифтов с подобным видом (например, Serif или Monospace)
2. Семейство шрифтов: конкретное семейство шрифтов (например, «Times New Roman» или «Arial»)
Для цветов мы можем использовать предварительно определенные названия цветов или RGB, HEX, HSL, RGBA, HSLA.
<div class="container">
<h1 class="heading1">
CSS is Coooooool!!!!
</h1>
</div>
.container {
width: 500px;
height: 100px;
background-color: lightcyan;
text-align: center;
}
.heading1 {
font-family: 'Courier New';
color: tomato;
}
Как вы можете видеть в приведенном выше примере, у нас есть элемент div с классом container. Внутри этого div есть h1 тег с текстом внутри.
В таблице стилей выбираем класс контейнера и устанавливаем его width, height, background-colorи text-align.
Наконец, выбираем .heading1 класс — применяемый к h1 тег — и дайте ему атрибуты font-family и color.
Вывод
Вы можете почувствовать, что вся эта информация немного ошеломлена, но не волнуйтесь.
Просто ознакомьтесь с нашим бесплатным курсом Intro to CSS на Scrimba, и вы станете ниндзя веб-дизайна менее чем через час.
Спасибо, что прочли! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.
