Spread the love

Веб-сайты выглядели бы скучно без 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 для разработчиков и дизайнеров.

x