Css3 руководство разработчика: «CSS3 Руководство разработчика» Питер Гастон: рецензии и отзывы на книгу | ISBN 978-5-7502-0413-7

Разное 

Содержание

наиболее полное руководство разработчика (и не только), часть 4 / Хабр

что еще нового в IE9 PP3, кроме canvas и video? Огромное описание, масса картинок.

23 июня строго по графику (период 8 недель) вышла третья тестовая сборка IE9. На Хабре уже успели написать про этот релиз и в самых общих словах обрисовать нововведения. Кроме того, тут же на Хабре успели сравнить производительность canvas в IE9 и Chrome.

Этот пост раскроет значительно больше деталей третьей тестовой версии Internet Explorer 9 и расскажет о нововведениях в браузер, которые будут важны для разработчиков.

Это четвертая статья из серии статей про нововведения в IE9 для разработчиков. Ознакомится с предыдущими частями можно здесь: часть 1 (CSS3, HTML5, DOM), часть 2 (SVG, GPU), часть третья (профили ICC, форматы изображений, JavaScript).

HTML5/CSS3/DOM/SVG/XHTML

В IE9 Platform Preview 3 обновлены или реализованы следующие элементы, которые были не до конца реализованы в предыдущих версиях или которые отсутствовали вовсе:

HTML5
  • обработка свободного места согласно правилам HTML5 (HTML5-conformant whitespace handling).
CSS3
  • Полная поддержка модуля CSS3 Values & Units
    • deg: degrees (angle unit)
    • grad: grads (angle unit)
    • rad: radians (angle unit)
    • turn: turns (angle unit)
    • ms: milliseconds (time unit)
    • s: seconds (time unit)
    • rem: font size of the root element (relative length unit)
    • vw: viewport width (relative length unit)
    • vh: viewport height (relative length unit)
    • vm: smaller of viewport width or height (relative length unit)
    • ch: zero-width (width of the zero glyph in the rendering font; relative length unit
    • Добавлено свойство calc(), которое позволяет высчитывать значения CSS-элементов.
  • Полная поддержка модуля CSS3 Namespaces
  • Полная поддержка модуля CSS3 Background & Borders, кроме того поддержка SVG-кода как фона в том числе для множественных фонов.
  • Поддержка CSS3 Fonts: включение в @font-face форматов TrueType, OpenType, Open Font Format. Пока остаются не реализованными свойства CSS3 Fonts: font-size-adjust и некоторые другие.

Кроме того реализована поддержка цветовых моделей HSL и HSLA.

DOM
  • полная поддержка DOM L2/L3 Events;
  • полная поддержка DOM Style;
  • в DOM Core добавлены функции и свойства: adoptNode, compareDocumentPosition, CDATASection, importNode, inputEncoding, isDefaultNamespace, isEqualNode, isSameNode, isSupported, lookupNamespaceURI, lookupPrefix, replaceWholeText, textContent, xmlEncoding, xmlStandalone, xmlVersion, wholeText.
SVG
  • реализованы элементы: gradients, patterns, masking, clipping, markers, linking & views;
  • внедрение SVG в <embed>, <iframe>, <img>;
  • поддержка файлов .SVGZ с удаленного сервера;
  • поддержка манипуляций SVG Text: Fill, stroke, positioning (x,y,dx,dy,rotate).

Новые возможности SVG в IE9 добавляют массу интересного, например градиенты:

XHTML/XSLT и документы “text/xml”, “application/xml”
  • XML-документы отображают SVG и XHTML-содержимое;
  • XML-движок обновлен с MSXML3 до MSXML6;
  • XSLT может применяться к SVG и XHTML-документам.
Демонстрации

Разработчики добавили пару демонстраций изменений CSS3 и DOM:

Анимированный логотип IE, который строится на одних только элементах border-radius.

Увы, Opera 10.6 Beta из-за багов в реализации свойств CSS3 отображает логотип неверно, а анимацию проводит рваную и дерганную.

DOM Traversal Gallery

Данная демонстрация показывает возможности работы механизма DOM Traversal по фильтрации элементов DOM.

ACID3

IE9 PP3 проходит тест ACID3 на 83 балла из 100. Предыдущие тестовые версии набирали 55 и 68 балла соответственно. Прогресс очевиден.

Веб-шрифты

В IE9 Platform Preview 3 добавлена поддержка встраиваемых шрифтов WOFF, TrueType и OpenType. Так же поддерживается стандарт EOT.

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

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

ECMAScript 5 и производительность JavaScript

В новой тестовой версии IE9 в очередной раз увеличили производительность JavaScript:

Обновленная версия IE9 содержит массивное обновление поддержки стандарта ECMAScript 5. Новые элементы представлены в следующем списке:

  • для Object:
    • Object.defineProperty, Object.defineProperties, Object.create, Object.getPrototypeOf, Object.getOwnPropertyDescriptor, Object.getOwnPropertyDescriptor, Object.keys, Object.seal, Object.freeze, Object.isSealed, Object.isFrozen, Object.preventExtensions, Object.isExtensible;
  • для Array:
    • indexOf, lastIndexOf, forEach, every, some, map, filter, reduce, reduceRight;
  • другие полезные методы:
    • String.prototype.trim, Date.prototype.toISOString, Date.parse, Date.now, Array.isArray, Function.prototype.bind

Кроме того частично реализован биндинг событий через конструкцию ‘::’.

Разработчики добавили несколько демонстраций новых возможностей ECMAScript 5:

  • ECMAScript 5 Arrays – работа с новым API массивов;
  • ECMAScript 5 Game – игра построенная на разных API ECMAScript похожая на легендарный Bejeweled.

По поводу реализации ECMAScript 5 Internet Explorer 9 занял лидирующую позицию. Тесты показывают следующие результаты:

Многих не устраивает то, что эти тесты отправлены в W3C самим Microsoft, наверное, лень перейти по ссылке и убедиться в тесте самостоятельно, благо исходные материалы доступны всем и каждому.

Тем не менее, если вам нужно “независимое” мнение, то пожалуйста, ознакомьтесь с независимым тестированием, которое показывает полную поддержку объектов стандарта ECMAScript 5 браузером IE9:

window.msPerformance

Разработчики Internet Explorer 9 добавили в третью тестовую версию поддержку Perfomance API который является частью спецификации W3C Web Timing. С помощью этого инструмента можно протестировать ваши веб-сайты с некоторой тестовой нагрузкой. API может быть изменен со временем, поэтому пока имеет приставку “ms”. Посмотреть на работу этого API можно на специальной странице.

HTML5 Video/Audio

Самая ожидаемая новая функция IE9 PP3 – это HTML5 Video. О ней, в отличии от canvas было известно заранее. Работу с видео в IE9 показывали еще в ходе конференции MIX, но ни в первой тестовой версии ни во второй поддержки не было.

Третья версия IE9 принесла поддержку HTML5 Video и, конечно, воспроизведение видео ускоряется через GPU (но пока только в Windows 7, не в Vista).

В данный момент реализована поддержка воспроизведение видео с кодеком H.264. Поддержка WebM будет реализована позднее, вероятно в первой бета-версии IE9, которая ожидается в августе.

Кроме тега video добавлена поддержка тега audio. Для этого тега поддерживаются кодеки MP3 и AAC. Разработчики предупреждают о известном баге: в Windows Vista файлы MP3, которые кодированы с помощью LAME могут проигрываться неправильно.

Разработчики подготовили пару интересных демонстраций.

IMDb Video Panorama

При поддержке IMDB.com запущена демонстрация с рядом трейлеров на популярные вышедшие и ожидаемые фильмы. Измеритель FPS покажет производительность вашего браузера.

HTML5 Audio XML Playlist

Для демонстрации тега audio разработчики подготовили проигрыватель музыки со списком и горячими клавишами.

Canvas

Большим сюрпризом этого выпуска IE9 стала поддержка HTML5 Canvas. Слухи о поддержке canvas однажды просачивались в интернет, но подтверждения не получили.

В IE9 PP3 полностью поддерживается Canvas Element API и большая часть Canvas 2D Context API. Работа с canvas полностью ускоряется через GPU и это заметно на демонстрациях.

Ниже представлен список того, что в canvas IE9 реализовано не полностью:

  • пока нет поддержки атрибута globalCompositeOperation;
  • пока нет поддержки Canvas 2D Context DOM Exceptions;
  • нет поддержки drawFocusRing() и API управления фокусом.

Разработчики подготовили массу красивых и интересных демонстраций использования canvas. Рассмотрим их:

Amazon Shelf

Работа с каталогом бестселлеров книг с Amazon, при выборе книга приближается и ее можно полистать. В IE9 все операции происходят моментально с FPS = 60.

FishIE Tank

Демонстрация, которая уже стала знаменитой. Ее цитируют на множестве сайтов и показывают в многочисленных роликах. В аквариуме плавают рыбки, число которых можно увеличивать. Выше скриншот в 1000 рыбок, рыбки плавают достаточно хорошо. В Opera 10.6 Beta при этих условиях – 2 FPS. Про Chrome 6 говорить не приходится, смотрите видео с независимым тестом от Download Squad.

Mr. Potato Gun

Помните видео с высокоскоростным Chrome и картофелем? Команда IE9 ответила тестом с картошкой. Попробуйте, такой ли быстрый Chrome в этом тесте?

Asteroid Belt

Следующий тест – это астероидное облако с некоторым количеством сателлитов у одного из них. Сателлиты вращаются по орбите и вы можете увеличить их количество и посмотреть как это отразится на производительности. На IE9 увеличение не сказывается вообще никак.

Deep Zoom

Следующая демонстрация показывает реализацию технологии DeepZoom, которая ранее работала либо на Ajax либо на Silverlight, на базе canvas.

Перед вами гигапиксельная панорама по которой можно свободно перемещаться приближая и отдаляя интересующие вас детали.

Canvas Pad

Последняя демонстрация – это небольшой каталог реализованных функций canvas с демонстрацией. Например, на скриншоте демонстрируется анимация на canvas:

Тесты

Разработчики IE9 создали для W3C еще 118 новых тестов по множеству параметров реализации стандартов. Плюс к этому было создано еще 1309 тестов реализации ECMAScript 5. Текущая ситуация по этим тестам такова:

Как можно убедиться, IE9 сам проходит не все тесты. Ознакомится более подробно с ними и проверить каждый тест самостоятельно можно на этой странице.

Инструменты разработчика

Обновились и инструменты разработчика IE9:

  • вернулась вкладка Profiler для профилирования скриптов, DOM и встроенных функций;
  • во вкладке Network появилась колонка Initiator, которая показывает что именно вызвало загрузку контента;
  • ошибки парсинга XML теперь отображаются в консоли инструментов.

Дополнительно

Дополнительно доступны видео на канале Channel 9:

  • Internet Explorer 9 Platform Preview 3: A Look at the New Demos
  • Internet Explorer 9 Platform Preview 3: A Look at ECMAscript 5
  • Internet Explorer 9 Platform Preview 3: A Look at Canvas
  • Internet Explorer 9 Platform Preview 3: A Look at HTML5 Video Support
  • Internet Explorer 9 Platform Preview 3: A Look at Canvas and Amazon.com

В блоге разработчиков Internet Explorer большой пост с описанием нововведений.

Обширное официальное руководство разработчика IE9 на английском языке.

За бортом

За бортом IE9 по прежнему остаются такие вещи как геолокация, web workers, web sockets, css3-трансформации, WebGL и прочие стандарты, многие из которых еще не выбрались из статуса черновиков. Вероятно, что что-то из этого мы увидим в августе в бета-версии IE9. Будем ждать сюрпризов, как в случае с canvas.

Заключение

Как можно убедиться, в третьей тестовой версии IE9 добавлено очень много новых возможностей, функций, API, новых стандартов.

Разработка IE9 движется полным ходом. Во многих местах IE9 догнал, а то и обогнал своих конкурентов. Будем надеятся, что темп останется прежним и финальная версия IE9 будет еще лучше.

Список литературы

Список литературы

Список литературы

  • Аналитика

    • Карл Вигерс «Разработка требований к программному обеспечению»
    • Алан Купер «Психбольница в руках пациентов. Проектирование взаимодействия»
    • Расс Унгер, Кэролайн Чандлер «UX-дизайн. Практическое руководство по
    • проектированию опыта взаимодействия»
    • Уильям Зиснер «Как писать хорошо. Классическое руководство по созданию
    • нехудожественных текстов»
    • Алистер Коберн «Современные методы описания функциональных требований к системам»
    • BABOK 3 версии

  • Менеджмент проектов

    • Том Де Марко «Deadline. Роман об управлении проектами»
    • Алан Купер «Психбольница в руках пациента»
    • Джейсон Фрайд и Дэвид Хайнемайер Хенссон «Getting Real», «Rework. Бизнес без предрассудков», «Remote. Офис не обязателен»
    • Джеф Сазерленд «Scrum. Революционный метод управления проектами»
    • Григорий Бакунов (Бобук) о ненасильственном управлении творческими
      коллективами
    • Курс «Web-технологии»
    • Базовые курсы по HTML, CSS и JavaScript на htmlacademy.ru

  • Frontend

    • Брюс Лоусон «Изучаем HTML5. Библиотека специалиста. 2-е издание»
    • Бен Хеник «HTML и CSS Путь к совершенству»
    • Эрик. А. Майер «CSS — Каскадные таблицы стилей. Подробное руководство»
    • Питер Гастон «CSS3. Руководство разработчика»
    • Дэвид Флэнаган «JavaScript. Подробное руководство»
    • Николас Закас «JavaScript для профессиональных веб-разработчиков»
    • Джон Резиг, Беэр Бибо «Секреты JavaScript ниндзя»
    • Стоян Стефанов «JavaScript. Шаблоны»
    • Современный учебник JavaScript
    • ru. bem.info
    • htmlacademy.ru

  • PHP

    • Зандстра М. «PHP. Объекты, шаблоны и методики программирования»
    • Эрик Фримен, Элизабет Фримен «Паттерны проектирования»
    • Р. Мартин «Чистый код»
    • М. Фаулер «Рефакторинг. Улучшение существующего кода»
    • R. Osherove «The art of unit testing»
    • Таненбаум, Уэзеролл «Компьютерные сети»

  • Тестирование

    • Книга «Тестирование программного обеспечения. Базовый курс»
    • ISTQB Программа обучения Базового уровня
    • Lee Copeland. A practitioner’s guide to software test design
    • Портал Software Testing
    • Приложение Apache JMeter
    • Learning Selenium Testing Tools with Python
    • Алан Купер «Психбольница в руках пациентов»

  • Дизайн

    • Алан Купер «Психбольница в руках пациентов. Проектирование взаимодействия»
    • Дэвид Огилви «Огилви о рекламе»
    • Артемий Лебедев «Ководство»
    • Илья Бирман «Пользовательский интерфейс»
    • Уолтер Айзексон «Стив Джобс»
    • Apple Human Interface Guidelines
    • Google Material Design Guidelines
    • Виктор Папанек «Дизайн для реального мира»

  • . NET

    • Эндрю Троелсен «Язык программирования C# и платформа .NET»
    • Герберт Шилдт «C#. Полное руководство»
    • Джеффри Рихтер «CLR via C#»
    • Адам Фримен «ASP.Net с примерами на C#

  • Android

    • Bert Bates, Kathy Sierra «Head First Java»
    • Брюс Эккель «Философия Java»
    • Герберт Шилдт «Java SE 8»
    • Дмитрий Жемеров, Светлана Исакова «Kotlin in action»
    • Учебник по Android для начинающих и продвинутых Start Android
    • Developer Guides

  • IOS

    • Б. Керниган, Д. Ритчи «Язык программирования С»
    • М. Далримпл, С. Кнастер «Objective-C 2.0 и программирование для Mac»
    • «The Swift Programming Language»
    • Swift Book на русском
    • Д.Марк, Д. Наттинг, Д. Ламарш «Разработка приложений под iPhone, iPad, iPod touch с использованием iOS SDK»
    • Набор туториалов. Для начала хорошо подойдут вот эти 3: первый, второй, третий
    • Официальная документация

  • Системное администрирование

    • Эви Немет, Гарт Снайдер и Трент Хейн Unix и Linux «Руководство системного
    • администратора»
    • Таненбаум Э. , Бос X. «Современные операционные системы»
    • Питер В. Аллен «Linux. Полное руководство»
    • nginx: A Practical Guide to High Performance
    • Межсетевой экран iptables
    • Сети для самых маленьких, 0 — 9 выпуски
    • Статья «Как стать системным администратором»
Обзор первых шагов

CSS — Изучите веб-разработку

CSS (каскадные таблицы стилей) используются для оформления и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервалов вашего контента, разделения его на несколько столбцов. или добавьте анимацию и другие декоративные элементы. Этот модуль обеспечивает плавное начало вашего пути к мастерству CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.

Хотите стать веб-разработчиком?

Мы подготовили курс, который включает в себя всю необходимую информацию, необходимую для работайте над своей целью.

Начало работы

Перед тем, как приступить к этому модулю, вы должны иметь:

  1. Базовые навыки использования компьютеров и пассивного использования Интернета (т. е. смотреть на него, потреблять контент.)
  2. Настройка базовой рабочей среды, как описано в разделе «Установка базового программного обеспечения», и понимание того, как создавать файлы и управлять ими, как описано в разделе «Работа с файлами».
  3. Базовое знакомство с HTML, как обсуждалось в модуле «Введение в HTML».

Примечание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать собственные файлы, вы можете попробовать (большинство) примеров кода в онлайн-программе кодирования, такой как JSBin или глюк.

Этот модуль содержит следующие статьи, которые познакомят вас со всей базовой теорией CSS и предоставят вам возможность проверить некоторые навыки.

Что такое CSS?

CSS (каскадные таблицы стилей) позволяет создавать великолепные веб-страницы, но как это работает внутри? В этой статье объясняется, что такое CSS, на простом примере синтаксиса, а также рассматриваются некоторые ключевые термины, касающиеся языка.

Начало работы с CSS

В этой статье мы возьмем простой HTML-документ и применим к нему CSS, попутно изучая некоторые практические аспекты языка.

Структура CSS

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

Как работает CSS

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

Следующее задание проверит ваше понимание основ CSS, описанных в руководствах выше.

Оформление страницы биографии

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

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Что такое CSS? Руководство веб-разработчика на 2023 г.

Просматривая Интернет, вы, вероятно, задавались вопросом, почему одни веб-сайты визуально намного привлекательнее других.

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

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

  1. Как создается веб-страница?
  2. Что такое CSS?
    • Что означает CSS?
    • HTML и CSS
    • CSS и JavaScript
  3. Как работает CSS?
  4. Типы CSS
    • Внешний CSS
    • Внутренний CSS
    • Встроенный CSS
  5. Как начать работу с CSS 90 016
  6. Почему CSS важен?

1. Как создается веб-страница?

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

Теперь веб-страница представляет собой гипертекстовый документ, подключенный к всемирной паутине. Доступ к нему открывается, когда ваш браузер вводит URL-адрес, на котором размещена страница. Веб-сайт — это набор веб-страниц, размещенных на домене. Каждая веб-страница состоит из трех аспектов: содержания, представления и поведения.

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

Презентация — это визуальное представление элементов на странице. Здесь на помощь приходит CSS. 

Раньше стиль писался непосредственно в элементах HTML. Давайте посмотрим, как это выглядит:

Пример кода для веб-страницы, использующей для стиля HTML вместо CSS.

При таком способе стилизации непосредственно в HTML вы можете увидеть, как может получиться беспорядок, если стилей много. Стиль должен быть добавлен к каждому тегу HTML для согласованности. Каждая новая страница также требует написания стиля, даже если это такой же заголовок и т. д. Не говоря уже о том, насколько длинным он может стать!

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

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

 Давайте посмотрим, как подобный стиль будет выглядеть в CSS:

Пример кода веб-страницы с использованием CSS для установки стилей.

В этом примере видно, что разделение стиля на CSS стало более читабельным.

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

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

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

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

2. Что такое CSS?

CSS — это язык, который помогает разработчикам оформлять веб-сайты. Он используется для добавления элементов дизайна, таких как цвета, стили шрифта и интервалы.

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

Итак, когда вы посещаете веб-сайт и видите разные цвета, стили шрифтов и макеты, вероятно, для этого используется CSS.

Что означает CSS?

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

CSS используется специально для языков разметки, в данном случае HTML. Язык разметки используется для применения структуры к веб-сайту или текстовому документу. «Разметка» в данном случае — это набор тегов, используемых для обозначения структуры и формата страницы.

«Каскадная» часть его имени относится к тому, как стили наследуются и применяются к различным элементам на веб-странице в зависимости от их взаимосвязи друг с другом в документе HTML. Стили можно применять к родительскому элементу, которые будут передаваться его дочерним элементам.

HTML против CSS

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

HTML означает язык гипертекстовой разметки. Он использует теги, чтобы дать представление о структуре веб-сайта. Подобно нашему примеру HTML ранее, вот обычный HTML-код без стилей:

Пример HTML-кода без стилей.

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

для основного заголовка,

для абзаца,

для подзаголовка,

    для обозначения списка и
  • для каждого элемента списка.

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

    Допустим, мы хотим, чтобы все подзаголовки

    были серыми и подчеркнутыми на этой странице.

    Мы могли бы сделать это, написав код CSS для элементов h3, например:

    Пример кода CSS, применяющего стиль к элементам h3.

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

    CSS против JavaScript

    Мы рассмотрели, что делает CSS для веб-сайта, он обрабатывает представление и стили. Чем это отличается от JavaScript?

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

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

    3. Как работает CSS?

    Мы рассмотрели основы CSS — что такое CSS и как он связан с HTML и JavaScript. Теперь давайте рассмотрим, как браузер берет HTML и CSS и превращает их в веб-страницу.

    Когда вы впервые загружаете веб-страницу, ваш браузер просматривает HTML-код и загружает его. После этого HTML преобразуется в DOM (объектная модель документа). Так компьютер хранит информацию в своей памяти.

    DOM имеет структуру дерева. Каждый компонент языка разметки (например, HTML) — каждый элемент, атрибут и слово — становится узлом DOM в древовидной структуре. Отношения между узлами и другими узлами DOM определяют узлы. У некоторых элементов есть дети, а у детей есть братья и сестры.

    После сохранения DOM браузер извлекает все ресурсы, связанные с этим HTML-документом. Это ваши изображения, видео и в данном случае…CSS! CSS анализируется и разделяется на основе различных типов селекторов (например, ваших

    ,

    и т. д.), различных классов и идентификаторов. Затем он выясняет, какие правила должны применяться к каким элементам, и прикрепляет к ним стиль.

    После этого вы видите стиль на экране.

    4. Типы CSS

    Давайте рассмотрим несколько различных способов, которыми разработчики могут структурировать свой CSS в своих проектах:

    Внешний CSS

    Это следует принципу разделения контента и презентации. При использовании внешнего CSS ваш стиль будет находиться в отдельном файле CSS или таблице стилей. Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе каждой HTML-страницы, например:

    Пример кода, показывающий, как создать ссылку на внешнюю таблицу стилей.

    Внутренний CSS

    При использовании внутреннего CSS CSS определяется в теге