Веб-сайты выглядели бы скучно без CSS, поскольку этот язык стилей отвечает за стиль текста, размер, цвет и расположение на веб-странице.
Оглавление
Что такое CSS?
Каскадные таблицы стилей, сокращенно CSS, — это язык, описывающий, как HTML-элементы должны отображаться на экране или бумаге. CSS был создан Консорциумом World Wide Web (W3C) в 1996 году.
Элементы HTML не были предназначены для использования тегов, которые могли бы помочь в форматировании веб-страницы, и от разработчиков требовалось только написать разметку для страницы. Введение тегов, таких как , при запуске HTML 3.2 создало новые проблемы для разработчиков.
Поскольку веб-страницы имеют цветной фон, разные шрифты и множество стилей, переписывание кода стало дорогим и болезненным. Школы W3C представили CSS для решения этих проблем, и он продолжал развиваться на протяжении многих лет.
Почему CSS?
№1. CSS эффективен
CSS избавляет нас от необходимости добавлять теги, такие как шрифт, выравнивание элементов, граница, цвет, стиль фона и размер на каждой веб-странице.
№ 2. Экономьте время
Вы можете легко изменить внешний вид всего веб-сайта, изменив внешний файл CSS.
№3. Совместимость с несколькими устройствами
Современные веб-пользователи заходят на сайты с гаджетов с разным размером экрана, таких как ПК, планшеты и смартфоны. CSS упрощает создание веб-страниц, реагирующих на размеры экрана.
№ 4. Простое обслуживание приложений
Современные веб-приложения постоянно развиваются. CSS позволяет легко изменять отдельные компоненты или даже весь веб-сайт без изменения кодовой базы.
Как CSS используется с HTML для создания веб-сайтов?
HTML — это стандартный язык разметки, используемый для создания веб-страниц. С другой стороны, CSS описывает, как отображаются веб-страницы (созданные с использованием HTML). Веб-страница, созданная с использованием HTML и CSS, в идеале должна иметь файл HTML с текстом, ссылками на изображения и тегами HTML.
Этот файл HTML может иметь либо отдельный файл CSS, связанный с ним с помощью тега ссылки, либо использовать внутренние или встроенные стили CSS. Файл HTML может иметь заголовок, например
, и абзац, обозначенный
. Вы можете использовать CSS, чтобы указать браузеру отображать все содержимое абзаца жирным шрифтом или даже сделать содержимое заголовка размером 50 пикселей и зеленым цветом.
В следующем разделе мы продемонстрируем, как работают HTML и CSS.
Типы CSS
№1. Внешний CSS
Чтобы CSS был классифицирован как внешний, должен быть файл HTML и отдельный файл CSS с расширением .css. Например, style.css. Файл CSS связан с файлом/документом HTML с помощью тега ссылки.
Пример внешнего файла CSS:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
Файл CSS можно связать со следующим HTML-документом:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Тег link связывает внешнюю таблицу стилей с HTML-документом, а атрибут href указывает местоположение внешней таблицы стилей.
Окончательная веб-страница будет выглядеть следующим образом:
Внешний CSS — это наиболее рекомендуемый подход, поскольку он упрощает создание повторно используемых компонентов и внесение универсальных изменений в кодовую базу.
№ 2. Внутренний CSS
Внутренний CSS идеален, когда у вас есть один HTML-документ, который вы хотите оформить уникальным образом. Набор правил стиля записывается в HTML-документе в разделе заголовка.
Это пример внутреннего CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Визуализированная веб-страница будет выглядеть следующим образом:
Внутренний CSS не идеален в большинстве случаев, так как он делает код в HTML-документе слишком большим, что влияет на скорость загрузки.
№3. Встроенный CSS
Встроенный CSS содержит стиль CSS внутри тела. Например, вы можете стилизовать абзац, заголовок или даже блок с помощью встроенного CSS.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Визуализированный документ будет выглядеть следующим образом:
Встроенный CSS не идеален, если вы хотите масштабировать свое веб-приложение, так как добавление свойства CSS к каждому тегу HTML требует времени.
Изучите некоторые из лучших онлайн-курсов и книг, чтобы освоить CSS.
Создавайте адаптивные веб-сайты с помощью HTML и CSS
Этот курс по созданию адаптивных веб-сайтов реального мира учит, как создавать адаптивные веб-сайты с использованием HTML5 и CSS3. Вам не нужны какие-либо предварительные знания в области веб-разработки, чтобы изучить этот курс, в котором рассматриваются такие понятия, как блочная модель, разрешение конфликтов селекторов, схемы позиционирования и наследование.
Это также идеальный курс, если вы хотите научиться проводить мозговой штурм, планировать, делать наброски, программировать, тестировать и оптимизировать профессиональный веб-сайт.
Продвинутый CSS и Sass
Расширенный курс CSS и Sass знакомит вас с тем, как CSS работает за кулисами, исследуя такие темы, как каскадность, специфичность и наследование.
В курсе есть много современных методов CSS для создания мощных, отзывчивых веб-страниц. Курс знакомит с Saas и с тем, как использовать его в проектах при разработке CSS, глобальных переменных и управлении медиа-запросами.
Это также идеальный курс, если вы хотите изучить анимацию CSS, поскольку он затрагивает @keyframes, анимацию и переход.
Изучайте CSS
Learn CSS от Codecademy учит, как использовать CSS для визуального преобразования HTML в привлекательные веб-сайты. Курс разбит на 8 уроков и имеет 6 проектов для проверки вашего понимания.
Основные вещи, которые вы узнаете из этого курса, — это добавление стилей к элементам HTML, подключение файлов HTML и CSS и создание уникальных макетов для веб-страниц.
Создайте свою первую веб-страницу с помощью HTML и CSS
Курс создания вашей первой веб-страницы учит, как использовать HTML5 и CSS3 для создания адаптивных веб-сайтов. Этот бесплатный курс представлен в 4 модулях и требует около 10 часов для прохождения. Вам не нужны какие-либо предварительные знания в области программирования, чтобы изучить этот курс.
Основы CSS
Основы CSS созданы W3Cx. Некоторые из вещей, которые вы узнаете в этом курсе; лучшие практики в веб-дизайне, основные селекторы CSS и способы выбора свойств CSS. Курс разделен на 5 модулей; вам нужно около 5 недель, чтобы пройти его при обучении 5-7 часов в неделю.
Введение в CSS3
Этот курс по CSS3 знакомит с каскадными таблицами стилей. Курс подготовлен Мичиганским университетом и учит, как писать правила CSS, формировать хорошие привычки программирования и тестировать код. Вам потребуется около 12 часов, чтобы пройти этот курс, по окончании которого выдается общий сертификат.
Введение в HTML и CSS
Этот вводный курс по HTML и CSS учит, как создавать стилизованные и хорошо структурированные веб-сайты с использованием HTML и CSS. Курс учит слушателей создавать веб-сайты с использованием древовидной структуры, а затем стилизовать их с помощью CSS.
Этот бесплатный курс подходит для начинающих и использует модель самостоятельного обучения. Вам нужно около 3 недель, чтобы пройти этот курс, который преподают эксперты отрасли.
Учебник по CSS
Учебник по CSS — это бесплатный курс на W3schools. Курс разбит на главы для удобства понимания. В каждой главе приведены примеры и упражнения. На платформе есть онлайн, где вы можете поэкспериментировать с разными концепциями через кнопку «Попробуйте сами».
CSS: полное руководство
Книга CSS: The Definitive Guide полезна, если вы хотите изучить основы CSS, от селекторов и специфики до каскада. В книге также подробно описаны трюки с флексбоксом, позиционированием и плаванием.
Эту книгу также стоит заказать, если вы хотите научиться использовать CSS для создания 2D- и 3D-преобразований, переходов и анимации. Полное руководство доступно как в версии для Kindle, так и в мягкой обложке.
Отзывчивый веб-дизайн с HTML5 и CSS
Эта книга об адаптивном веб-дизайне с использованием HTML5 и CSS учит, как создавать ориентированные на будущее адаптивные веб-сайты с использованием HTML5 и CSS.
Изучив приемы из этой книги, созданные вами веб-сайты будут безупречно работать на настольных компьютерах, планшетах и мобильных телефонах. Книга написана в удобном для восприятия формате и доступна в мягкой обложке и в формате Kindle.
HTML и CSS: дизайн и создание веб-сайтов
Эта книга по HTML и CSS идеальна для всех, будь вы любителем, студентом или профессионалом.
Автор передает содержание этой книги с помощью информационной графики и фотографий образа жизни, чтобы облегчить понимание различных концепций. Ресурс представлен в уникальной структуре, позволяющей легко просматривать все главы.
Современный CSS
Эта книга «Современный CSS: овладение ключевыми понятиями CSS для современной веб-разработки» учит CSS с помощью примеров кода, диаграмм и снимков экрана.
В первых главах книги представлены цвета, селекторы, блочные модели, комбинаторы и особенности. Затем в книге представлены стили текста, позиционирование, градиенты, границы, Z-индекс и контексты наложения. Вы также изучаете сложные темы, такие как переходы, анимация, преобразования, flexbox и сетки CSS.
Заключительные слова
Роль CSS на современных веб-сайтах невозможно переоценить. Помимо визуальной привлекательности веб-страниц, CSS упрощает навигацию по различным веб-страницам.
Изучение CSS может быть легким, если вы используете ресурсы, перечисленные выше. Некоторые из этих курсов бесплатные, а другие платные.
Далее вы можете ознакомиться со шпаргалками по CSS для разработчиков и дизайнеров.