Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Css самоучитель: Самоучитель CSS | htmlbook.ru

Содержание

Выучить CSS — Веб учебники

На сайте нет рекламы



CSS — язык, описывает стиль документа HTML.

CSS описывает то, как элементы HTML должны быть отображены.

Этот учебник научит Вас от начального до продвинутого.

Примеры в каждой главе

Учебник CSS содержит сотни примеров в CSS.

С помощью редактора онлайн, Вы можете редактировать CSS и при нажатии на кнопку «Посмотреть» увидеть результат.

Пример CSS

body{
   background-color: lightblue;
}

h2{
   color: white;
   text-align: center;
}

p{
   font-family: verdana;
   font-size: 20px;
}

Редактор кода »

Нажмите на кнопку «Редактор кода», чтобы увидеть, как это работает.

Начать изучение CSS бесплатно, сейчас!


Примеры CSS

Посмотреть еще 300 примеров! С помощью онлайн редактора, вы можете редактировать CSS, при нажатии на кнопку «Посмотреть» Вы увидете результат.

Перейти к примерам CSS!


Бесплатные шаблоны CSS

Мы создали несколько отзывчивые W3.CSS шаблоны для вас, чтобы использовать их в интернете.

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

Бесплатные шаблоны CSS!


Упражнения и викторина CSS

Вы можете проверить свои навыки CSS в SchoolsW3!

Начать CSS упражнения!

Начать CSS викторину!


Справочник CSS

На SchoolsW3 вы найдете полный справочник CSS всех свойств, селекторов, синтаксисов с примерами, поддержкой браузером и многое другое.


CSS Экзамен — получить диплом!

SchoolsW3 онлайн сертификат

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

Уже выдано более 10 000 сертификатов!

Получите Ваш Сертификат »

HTML Сертификат документы на ваши знания HTML.

CSS Сертификат документы на ваши знания новейших CSS.

JavaScript Сертификат документы на ваши знания JavaScript и HTML DOM.

jQuery Сертификат документы на ваши знания jQuery.

PHP Сертификат документы на ваши знания PHP и SQL (MySQL).

XML Сертификат документы на ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документы на ваши знания Bootstrap фреймворк.


Самоучитель, справочник html, css, javascript и php

Сеть Интернет уже давно стала для нас чем-то необходимым, каждодневным и универсальным. В сети каждый находит для себя что-то нужное, интересное или даже необходимое. Обилие Интернет сайтов, сервисов социальных сетей, форумов и многих других, полезных и не очень, ресурсов просто поражает. В сети можно найти все: от списка ресторанов и кинотеатров, куда бы вы хотели пойти, до подробного описания принципа работы адронного коллайдера, с подробными примерами и чертежами по его созданию.

Но как это работает, что нужно сделать, чтобы построить свой собственный сайт?

Если вас интересуют именно эти вопросы — вы зашли по адресу. Сайт www.puzzleweb.ru – это универсальный самоучитель и справочник по HTML 5, CSS, JavaScript и PHP, на страницах которого вы сможете не только узнать, как работают интернет сайты, но и научитесь создавать их самостоятельно.

Как пользоваться сайтом?

Для удобства восприятия и изучения материала сайт разделен на четыре основных раздела, в каждом из которых вы найдете всю необходимую информацию по интересующей вас теме:

HTML

Самоучитель HTML – это подробное руководство по языку разметки HTML, включая все обновления и дополнения к языку в версии HTML 5. Полезно знать, что на каком бы языке программирования ни был бы написан сайт, для браузера пользователя его структура всегда подается в виде HTML. Справочник html также поможет вам свободно ориентироваться в данном языке.


CSS

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


JavaScript

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


PHP

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


Для кого создан сайт www.puzzleweb.ru?

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

Учебник CSS для начинающих. Что такое CSS?

Введение

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

CSS (Cascading Style Sheets) — Каскадные таблицы стилей — это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу — элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

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

HTML в чистом виде имеет весьма ограниченный набор инструментов не позволяющий решать те или иные дизайнерские и функциональные задумки веб-мастера. Ну вот хотя бы, к примеру, взять больной вопрос всех начинающих веб-ремесленников «Как убрать подчеркивание ссылки?» или «Как сделать чтобы наведя курсором на эту самую ссылку она меняла цвет и подсвечивалась?» с помощью одного HTML этого никак не сделать!! А сколько их еще таких «больных вопросов»? — тьма.. Тут то и приходит на помощь CSS, который решает большинство задач касающихся дизайна сайта.

Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки <h2> делать красным цветом, параграфы <p> писать курсивам, ссылки <a> не подчёркивать 🙂 фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги <h2> и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента <h2> на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.

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

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

CSS | MDN

Cascading Style Sheets (CSS) — это язык иерархических правил (таблиц стилей (en-US)), используемый для представления внешнего вида документа, написанного на HTML или XML (en-US) (включая различные языки XML, такие как SVG (en-US) и XHTML). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.

CSS является одним из основных языков свободной веб-разработки, который стандартизован спецификацией W3C. Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а CSS3, разбитый на более мелкие модули, развивается на пути стандартизации.

  • Справочник по CSS

    Исчерпывающий справочник для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.

  • Самоучитель по CSS

    Пошаговое руководство для помощи начинающим программистам CSS. Содержит все необходимые основы.

  • Примеры CSS3

    Набор примеров представляющий новейшие технологии CSS в действии: толчок к креативности.

Ключевые понятия CSS
Описание синтаксиса и внешнего вида языка (en-US) и введение в фундаментальные понятия такие как специфичность (en-US), наследование(каскадирование) (en-US), блочная модель(box-model) и схлопывание отступов(margin-collapse (en-US)), наложение (en-US) и контекст форматирования(Block formatting context (en-US)), начальное(initial (en-US)), вычисленное(computed (en-US)), используемое(used (en-US)) и актуальное(actual (en-US)) значения. Кроме того, описана краткая форма записи (en-US) свойств CSS.
Руководство разработчика CSS (en-US)
Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.
Распространённые вопросы по CSS
Ответы на часто возникающие вопросы о CSS.

CSS | Flexberry PLATFORM Documentation

Краткое описание

CSS (от англ. Cascading Style Sheets — «каскадные таблицы стилей») — это язык иерархических правил (таблиц стилей), используемый для представления внешнего вида документа, написанного на HTML или XML (включая различные языки XML, такие как SVG и XHTML). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.

CSS3 — это последнее эволюционное изменение языка CSS, которое направлено на расширение CSS 2.1. Оно привносит давно ожидаемые новшества, такие как закруглённые углы, тени, градиенты, переходы или анимация, а также новые макеты, такие как макет из нескольких колонок, «резиновый» дизайн или сеточный макет.

LESS — препроцессор языка CSS, позволяющий использовать переменные, функции, циклы и другие технологии для упрощения работы со стилями. «Препроцессор» в данном случае означает, что мы имеем дело с динамическим языком стилей, который преобразуется (компилируется) в CSS.

SASS (от англ. Syntactically Awesome Stylesheets — «синтаксически великолепные таблицы стилей») — еще один популярный препроцессор языка CSS.

Пример использования

body {
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}
h2 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 24pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста  */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселах */
  margin-right: 10px; /* Отступ справа в пикселах */
  border-left: 1px solid #999; /* Параметры линии слева */
  border-bottom: 1px solid #999; /* Параметры линии снизу */
  padding-left: 10px; /* Отступ от линии слева до текста  */
  padding-bottom: 10px; /* Отступ от линии снизу до текста  */
}

«Для тех, кто предпочитает один раз увидеть»

Программное обеспечение

Ресурсы

Перейти

Самоучитель CSS. CSS — это каскадные таблицы стилей.

CSS — аббревиатура от Cascading Style Sheets — каскадные таблицы стилей, CSS — это простой язык для создания стилей веб-страницы.

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

Что понимается под стилем страницы? Сюда входят свойства текста (размер, красная строка, межстрочный интервал, начертание, шрифты, цвет и т.д.), свойства списков и таблиц (цвета фона, маркеров и т.д.), взаимное расположение элементов документа и другие. Изменяя эти свойства можно делать удивительные вещи, например работая со списками можно создавать оригинальные меню, а используя позиционирование элементов можно создавать макет сайта.

Связь CSS и HTML с точки зрения порядка изучения

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

Для создания простого сайта достаточно использовать только язык HTML, но вот одного языка CSS недостаточно для создания сайта. Технология CSS работает только со стилями существующего HTML документа.

Так что, если вы не знаете HTML, то изучать CSS нет смысла.

Немного подробнее про CSS

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

По сравнению с HTML, язык CSS более сложен, но и его использование открывает гораздо более широкие возможности для разработчика.

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

Более подробную вводную информацию читайте в статье: «CSS — это».

Порядок изучения CSS

Итак, в статье: «CSS — это» вы узнаете как в html-документ добавить стиль CSS. Теперь нужно начинать шаг за шагом осваивать этот язык программирования.

Сначала читаем самые основы — «Синтаксис CSS», возможно в этой статье вы увидете много того, что уже освещалось в прошлой, но одно из правил моего учебника: каждая статья является самодостаточной и раскрывает тему полностью. Если человек пришёл с поисковика на конкретную статью, то она должна полностью удовлетворить его запрос. Так что повторения некоторых моментов будут и в дальнейшем. Следующий шаг — статья «Комментарии в CSS», тут рассмотрен пример ошибки при составлении комментариев, который даёт большее понимание синтаксиса CSS в целом.

После изучения этих основ, читайте статью «Работа с текстом в CSS». В ней представлены свойства CSS для работы с текстом. Хотя в статье много примеров, но обязательно пишите много своих примеров. Когда вы пишите свои примеры, включаются другие типы памяти, а не только зрительная. Это повышает запоминаемость материала.

Есть статья «Единицы измерения в CSS», тут мало примеров и поэтому она может показаться сложна для понимания, но это нужно понять хоть на поверхностном уровне. С набором опыта в написании стилей придёт понимание всех особенностей этой темы.

Статья «Цвета в CSS» учит понимать как управлять цветами в CSS. Цвет можно присвоить тексту, фону текста, фону документа, рамкам блоков и т.д.

Далее читайте статью «Блочная модель CSS». Этот основа основ в CSS, с этого момента последующего материалы будут содержать большое число примеров. Всегда пишите свои примеры, исправляйте готовые примеры, экспериментируйте. Практика — это основа обучения программированию.

При написании этого учебника CSS я старался использовать как можно больше примеров.

Рецепты CSS

Веб Учебник, Самоучитель CSS: Самоучитель по CSS OnLine.


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


CSS — это каскадные таблицы стилей(Cascading Style Sheets), содержащие в себе набор правил для описания внешнего вида документов, таких как: HTML(гипертекстовый язык разметки), XML(расширенная разметка текста), XHTML(расширенный гипертекстовый язык разметки) и других.

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

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


Но прежде чем мы продолжим я хочу расставить точки на свои места, изучать CSS без знания HTML или более сложных языков нет смысла, т.к. CSS всего лишь дополняет их. И с моей точки зрения использовать(учить) CSS можно лишь когда поймешь что языки разметки, какими бы они не были «продвинутыми», все равно не являются «мечтой вебмастера».


Мой самоучитель по CSS OnLine периодически будет предоставлять вам информацию, которая на первый взгляд не понятно для чего. Но если звезды зажигают, значит это кому-то нужно. Вот с одной такой «непонятки» мы и начнем:


Чтобы CSS коректно работал нужно определить типы документа для каскадных таблиц стилей.
Единицы измерения в CSS позволяют управлять размерами объектов.

Введение в CSS Как использовать каскадные таблицы стилей.
Что такое Правила в CSS Из чего оно состоит правило для CSS и что такое селектор и объявление?
Виды класов селекторов Селектор типа, универсальные селекторы, классы селекторов, идентификаторы селекторов
Классы селекторов Селекторы потомков, дочерние селекторы тегов, смежные селекторы(родственники).
Селекторы атрибутов При наличии атрибута, при точном совпадении значения атрибута, при частичном совпадении, при частичном совпадении символов.
ПсевдоКлассы селекторов :first-child, псевдоклассы гиперссылки , динамические псевдоклассы и другие.
Наследование в CSS краткая информация о наследовании в каскадных таблицах стилей.
Что такое боксы в CSS В каскадных таблицах стилей все есть BOX , т.е. все элементы(теги) в css всего лишь объекты прямоугольной формы.
Отступы в боксах Внешние и внутрение.
Бордюры в боксах Как задать цвет, стиль и размер бордюра в боксах.
Модели боксов Визуальное представление моделей бокса.
позиционирование в css Как управлять позициями боксов.
Размеры бокса. Как задать размеры бокса и из чего они состоят.
Высота строк в CSS Правила для управления строками в каскадных таблицах стилей.
Взуальные эффекты в CSS Управление полосой прокрутки и другое.
Генерируемое содержимое Как использовать псевдоклассы :before и :after.
Нумерация и счетчики Что такое счетчики в CSS? Как создать и сбросить счетчик.
Списки и их маркировка Как маркировать списки в CSS. Как создаются маркеры.
Как задать цвет фона и текста в CSS Как задать цвет текста средствами CSS. Как задать цвет фона в каскадных таблицах стилей.
как задать шрифт в CSS Что такое глиф и шрифт. Свойство спецификации шрифтов в CSS.
Как использовать шрифт с сайта в CSS Как использовать внешний шрифт.
Правила для текста в CSS. + Декоративные эфекты к тексту в CSS и другое.
Модели элементов таблиц в CSS. Не таблиц стилей, а обычных таблиц например HTML.
Правила CSS для визуального представление таблиц это продолжение предыдущей страницы.
Как изменить интерфейс пользователя задать курсор, использовать системные цвета пользователя и другое.
Каскадные таблицы стилей для звуковых браузеров , как задать громкость, изменить паузу между элементами и использовать звуковые иконки.
Звуковые таблицы стилей, продолжение как управлять звуковыми эффектами.
Характеристика голоса управляют произношением слов, например женским или мужским, высотой голоса и многоим другим.
Типы носителей в CSS что такое типы носителей и как их использовать
Патчи для стилей Патчи и хаки в CSS для различных видов браузеров.
CSS-3 раздел в который помещено все то что появилось только в каскадных таблицах стилей третего уровня.
Несколько слов в завершение Рекомендации по CSS или разговор не о чем.

Learn CSS

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

Добро пожаловать в Learn CSS! #

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

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

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

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

Вот что вы узнаете:

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

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

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

Этот модуль более подробно рассматривает специфичность, ключевую часть каскада.

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

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

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

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

Flexbox — это механизм макета, предназначенный для размещения групп элементов в одном измерении. Узнайте, как его использовать, в этом модуле.

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

Логические свойства и значения, относящиеся к потоку, связаны с потоком текста, а не с физической формой экрана. Узнайте, как воспользоваться этим новым подходом к CSS.

Узнайте, как выбрать лучший метод размещения элементов, принимая во внимание метод компоновки, который вы используете, и компонент, который вам нужно построить.

Псевдоэлемент похож на добавление или нацеливание на дополнительный элемент без необходимости добавления дополнительного HTML. У них множество ролей, и вы можете узнать о них в этом модуле.

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

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

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

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

В этом модуле вы узнаете, как управлять порядком, в котором элементы накладываются друг на друга, с помощью z-индекса и контекста наложения.

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

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

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

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

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

Дополнительные ресурсы, которые помогут вам сделать следующие шаги.

Итак, вы готовы изучать CSS? Давайте начнем.

Учебники по CSS — GeeksforGeeks

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

Ниже приведены три типа CSS:

  • Встроенный CSS
  • Внутренний или встроенный CSS
  • Внешний CSS

Почему мы изучаем CSS?
Стиль уже много десятилетий является неотъемлемой частью любого веб-сайта.Это повышает стандарты и общий вид веб-сайта, что упрощает взаимодействие с пользователем. Веб-сайт не может быть создан без CSS, поскольку стиль ДОЛЖЕН, поскольку ни один пользователь не захочет взаимодействовать с унылым и убогим веб-сайтом. Итак, чтобы разбираться в веб-разработке, необходимо изучение CSS.

  • База для веб-разработки: HTML и CSS — это базовые навыки, которые должен знать каждый веб-разработчик. Это базовый навык, необходимый для создания веб-сайта.
  • Делает ваш веб-сайт привлекательным: Скучный и простой веб-сайт, скорее всего, не привлечет пользователя, поэтому добавление некоторого стиля обязательно сделает ваш веб-сайт презентабельным для пользователя.
  • Делает дизайн живым: Веб-разработчик несет ответственность за создание дизайна, предоставленного ему как живого продукта. CSS используется для стилизации при разработке дизайна веб-сайта.
  • Повышает удобство работы пользователей с веб-сайтом: Веб-сайт с простым, но красивым пользовательским интерфейсом поможет пользователям легко перемещаться по веб-сайту. CSS используется для улучшения пользовательского интерфейса.
  • Больше возможностей для карьерного роста: Поскольку CSS является основным требованием при изучении веб-разработки, для него есть множество возможностей карьерного роста.Как фрилансер вы тоже можете участвовать во многих проектах.

Базовый формат: Это основная структура веб-страницы HTML, и мы используем стиль CSS внутри веб-страницы. На веб-странице мы используем внутренний CSS (т.е. добавляем код CSS внутри тега кода HTML).


 

    
     
 
    
    

 

    

 

 

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




    <название>
        Простая веб-страница HTML в стиле CSS
    

    
    <стиль>
        тело {
            выравнивание текста: центр;
        }

        h2 {
            цвет: зеленый;
        }
    



    

Добро пожаловать в GeeksforGeeks

Портал информатики для гиков

Вывод:

Подробнее о HTML:

CSS Полные ссылки:

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

Последние статьи по CSS

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

The Ultimate CSS Tutorial для начинающих программистов

Интернет сильно изменился с момента своего появления. Одно из самых больших отличий? Как это выглядит.

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

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

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

В этом руководстве вы узнаете все, что вам нужно знать, чтобы начать читать и писать CSS, в том числе:

Прежде чем продолжить, вы должны понять основы HTML. Мы будем много говорить об элементах, тегах, классах и идентификаторах — убедитесь, что они у вас есть!

Что такое CSS?

CSS — это язык, который определяет дизайн и верстку веб-страниц.Другими словами, CSS контролирует, как выглядят веб-страницы при загрузке в браузере. Мы называем этот дизайн и верстку «стилем» страницы. CSS — стандартный язык для стилизации и обычно работает вместе с HTML (языком, определяющим содержимое веб-страниц).

CSS — это каскадные таблицы стилей. «Таблицы стилей» относятся к самому документу CSS, а «Каскадные» относятся к тому, как правила стиля применяются к элементам страницы. Позже я объясню, что это означает, более подробно, но давайте сначала узнаем, что делает CSS.

Для чего используется CSS?

Без CSS Интернет, каким мы его знаем, не выглядел бы так, как сегодня. Чтобы проиллюстрировать это, возьмите это сообщение в блоге HubSpot:

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

Отодвигая завесу CSS, мы видим, насколько это улучшает пользовательский опыт.

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

Ура. Меня не волнует, насколько информативен этот пост — он выглядит очень плохо.

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

В чем разница между HTML и CSS?

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

HTML (язык гипертекстовой разметки) определяет содержимое веб-страницы, включая текст, ссылки, изображения, видео и т. Д. В файле HTML перечислены все «вещи» на странице, но не указано, как эти вещи смотреть при отображении в браузере.

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

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

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

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

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

Преимущества CSS

Как оказалось, отделение кода содержимого от кода стиля дает множество преимуществ. К ним относятся:

  • Меньше кодирования: Разработчики могут использовать CSS для применения одного и того же стиля к нескольким страницам и элементам страниц на веб-сайте, что экономит огромное количество времени и снижает вероятность ошибок.Для изменения стиля на уровне всего сайта нужно изменить только фрагмент кода.
  • Дополнительные варианты стилей: С CSS можно многое, гораздо больше, чем было разрешено исходной системой стилей HTML. Имея четкое видение, ноу-хау CSS и немного терпения, вы можете настроить веб-сайт в точности по своим предпочтениям.
  • Стандартизация: Поскольку CSS — это единый язык для стилизации веб-страниц, разработчик или дизайнер может понять стиль любого веб-сайта, просмотрев файлы CSS.
  • Лучшая производительность: CSS сокращает количество повторяющегося кода стилизации. Меньше кода означает меньшие файлы, а меньшие файлы — более быстрое время загрузки страницы.

Как писать CSS

Мы выяснили, почему язык CSS работает и почему он важен (кроме того, что означает «каскадирование» — мы еще доберемся до этого, поверьте мне). А теперь давайте напишем код.

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

Правило в CSS выглядит так:

Вы увидите четыре основных компонента: селектор, объявления, свойства и значения. Давайте разберем каждую из них.

Что такое селектор CSS?

Правило CSS всегда начинается с селектора. Селектор указывает часть документа, где применяется правило. При обработке кода CSS браузер использует селектор для «выбора» целевых элементов и применения к ним правил стиля.Селектор сопровождается одним или несколькими объявлениями в фигурных скобках.

Есть несколько способов написать селектор. Самым основным типом селектора CSS является селектор элементов, использованный в приведенном выше примере. Селектор элемента нацелен на элементы HTML по их именам (например, p , span , div , a ):

См. Селектор элементов пера Кристины Перриконе (@hubspot) на CodePen.

Также возможно нацелить элемент по его атрибуту class или id.Селектор класса записывается в виде точки (.), За которой следует имя класса. Селектор идентификатора записывается в виде решетки (#), за которым следует имя идентификатора.

См. Селекторы классов пера и идентификаторов Кристины Перриконе (@hubspot) на CodePen.

Чтобы указать конкретный дочерний элемент в пределах родительского элемента, запишите селектор как родительский элемент, за которым следует дочерний элемент (с пробелом между ними):

См. Раздел «Выбор родительского / дочернего пера» Кристины Перриконе (@hubspot) на CodePen.

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

См. Селектор группировки перьев Кристины Перриконе (@hubspot) на CodePen.

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

Что такое декларация CSS?

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

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

Что такое свойство CSS?

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

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

Вот почему страницы со ссылками на свойства CSS, подобные этой, включают раздел «Совместимость с браузером». Для каждого браузера в таблице ниже указан самый ранний совместимый выпуск (если доступен):

Источник изображения

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

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

Каждое свойство CSS имеет собственный набор значений. Значение определяет стиль свойства элемента. Вот некоторые общие свойства и их значения:

  • Свойства, связанные с цветом, могут принимать простые однословные значения, такие как синий и красный , а также шестнадцатеричные коды — # 33E0FF и # FF5733 — и значения RGB — rgb (51, 224, 255 ) и rgb (255, 87, 51) .
  • Свойство width может принимать значение длины — например, пикселей, (пикселей) — или процентное соотношение, определяющее размер элемента относительно ширины родительского контейнера. Например,
    внутри тега , установленного на 50% ширины , будет охватывать половину ширины области просмотра.
  • Семейство шрифтов Свойство принимает письменные имена веб-шрифтов, например Arial , Times New Roman или Courier .

См. «Значения CSS для пера» Кристины Перриконе (@hubspot) на CodePen.

Некоторые свойства принимают несколько значений. Свойство padding может принимать до четырех значений, которые задают пространство выше, справа, ниже и слева от содержимого элемента соответственно.

См. «Размах пера с заполнением» Кристины Перриконе (@hubspot) на CodePen.

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

Комментарии CSS

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

Чтобы оставить комментарий в CSS, введите / * , затем текст комментария и в конце введите * / .

  
/ * Я - комментарий в CSS! * /

Комментарии также можно использовать для проверки вашего CSS — чтобы отключить правило или объявление, просто закомментируйте код, затем «раскомментируйте» код, чтобы повторно активировать его:

См. Комментарии к CSS для пера Кристины Перриконе (@hubspot) на CodePen.

Как добавить CSS в HTML

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

Внешний CSS

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

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

  

…где style.css — имя вашего файла CSS. Правила в этом файле CSS будут применяться к любому файлу HTML, который ссылается на него с помощью элемента выше.

См. Внешний CSS-код Pen от Кристины Перриконе (@hubspot) на CodePen.

Внутренний CSS

Внутренний CSS — это код CSS, встроенный в документ HTML. Он написан внутри элемента

logo </ title > <g data-name = "Layer 2"> <g data-name = "Layer 1"> <g data-name = "Group 16"> <g data-name = "Group 15"> <g data-name = "Группа 12"> <path data-name = "Путь 35" d = "M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77, 0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54 , 13.09V2.23a.39.39,0,0,0-.39-.38Z "> </path> <path data-name =" Path 36 "d =" M40.25,27.84l-8.73,2.1a1. 57,1.57,0,0,1-1,23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0 , 0, .34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62, 4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z "> </path> <path data-name =" Path 37 "d =" M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8 а.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0, .34.63l10.66,7a1.53,1.53,0,0 , 0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0 , 0,0,40.25,50.52Z "> </path> </g> <path data-name =" Path 38 "d =" M30.86,41.29V30a1.63,1.63,0,0,0 ,. 66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1- .66,0V64a1.63,1.63,0,0,0, .66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0, .66,0l1.57-.38L30.86,7.28Z "> </ путь> <g data-name = "Группа 13"> <path data-name = "Путь 39" d = "M19.29,11.36a1.82,1.82,0,0,1, .6.23l10.4,6.8 a1.41,1.41,0,0,0, .57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6- .23Z "> </path> <path data-name =" Путь 40 "d =" M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39 , 0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0, .34.63l10.66,7a1.73,1.73,0,0,0, .57.22Z "> </path> <path data-name =" Путь 41 "d =" M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0, .34.63l10.66,7a1.58,1.58, 0,0,0, .57.22V30a1.43,1.43,0,0,1-.57-.23Z "> </path> </g> </g> </g> </g> </ g > </svg> </a> </code> </pre> </p> <p> Теперь, когда у нас есть логотип, нам нужно также создать пункты меню. Сразу после логотипа добавьте следующую разметку HTML: </p> <pre> <code> <div> <a href="#"> Дом </a> <a href="#"> Услуги </a> <a href="#"> портфолио </a> <a href="#"> Компания </a> <a href="#"> Контакт </a> </div> </code> </pre> </p> <p> Давайте сначала разберем значение первого элемента div и используемых классов: </p> <ul> <li> <strong> text-lg </strong> - применяет немного больший размер шрифта для текста внутри элемента (по умолчанию применяется <code> font-size: 1.125rem; </code>) </li> <li> <strong> text-gray-600 </strong> - применяет серый цвет к тексту внутри элемента (начинается с <code> text-gray-100 </code> до <code> text-gray-900 </code>, 100 - самый светлый цвет, а 900 - самый темный) </li> <li> <strong> скрыто </strong> - применяется <code> дисплей: нет; </code> к скрывающему его элементу </li> <li> <strong> lg: flex </strong> - это первый адаптивный класс в этом руководстве, мы рассмотрим его позже, но пока все, что вам нужно знать, это то, что он применяет display: flex для больших экранов </li> </ul> <p> Давайте теперь посмотрим, что означает каждый класс для фактических пунктов меню: </p> <ul> <li> <strong> блок </strong> - применяет <code> display: block; </code> в HTML-тег </li> <li> <strong> mt-4 </strong> - накладывает маржу на верхнюю часть элемента </li> <li> <strong> lg: inline-block </strong> - для больших устройств элемент станет встроенным элементом, в результате чего пункты меню останутся в одной строке </li> <li> <strong> hover: text-gray-700 </strong> - при наведении курсора на элемент он сделает цвет пункта меню немного темнее </li> <li> <strong> lg: mt-0 </strong> - для больших устройств верхнее поле не применяется (имеет смысл, потому что на мобильных устройствах пункты меню будут отображаться один под другим, тогда как на более крупных устройствах они все в одной строке) </li> <li> <strong> MR-10 </strong> - применяет поле к правой стороне элемента для правильного размещения пунктов меню между собой. </li> </ul> <p> Наконец, давайте добавим две кнопки <abbr title="Call To Action"> CTA </abbr> и покажем значок меню гамбургера для мобильных устройств с правой стороны панели навигации: </p> <pre> <code> <div> <div> <button> Войти </button> <button> Зарегистрироваться </button> </div> <div> <кнопка> <svg viewBox = "0 0 20 20" xmlns = "http: // www.w3.org/2000/svg "> <title> Меню

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

Вот полная разметка HTML для панели навигации на случай, если вы не уверены, правильно ли вы правильно поняли порядок:

 

<заголовок>
    

     
 

Построение секции героя

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

 
<основной>
    <раздел>
        
    

Первые два служебных класса полей из Tailwind CSS для тега

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

В теге

добавьте следующие элементы оболочки

, чтобы создать макет из двух столбцов для раздела героя:

 

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

Класс lg: w-1/2 эффективно устанавливает 50% ширины элемента, но только для больших устройств. По умолчанию он берет свойства из класса w-full , который добавляет к элементу стиль width: 100% . Ко второму элементу оболочки добавлен дополнительный класс lg: pl-24 , чтобы установить интервал между описанием и формой регистрации на более крупных устройствах.

Добавьте следующую разметку внутри первого элемента оболочки

, чтобы добавить текст описания раздела героя:

 

Решения для анализа рынка

Завоюйте свой рынок

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

Как видите, мы хорошо использовали классы размера, цвета, веса шрифта и интервалов, чтобы быстро создать красивое описание раздела героя.

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

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

Добавьте следующую разметку HTML во второй элемент оболочки

раздела:

 
<выберите необходимый>

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

  • focus: outline-none - удаляет стиль контура фокуса по умолчанию браузеров при фокусировке на элементе
  • граница - добавляет ширину границы в 1 пиксель к элементу
  • border-gray-200 - делает цвет рамки более светлым оттенком серого
  • bg-white - добавляет белый фон к элементу

Поздравляем! Теперь вы закончили страницу с адаптивной панелью навигации и раздел героя с формой регистрации с использованием Tailwind CSS.Следующие несколько разделов этого руководства будут посвящены настройке проекта с использованием файла конфигурации и уменьшению окончательного размера файла CSS путем его очистки на основе классов, используемых в ваших шаблонах HTML.

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

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

Чтобы изменить базовый шрифт вашего проекта, сначала вам нужно сделать шрифт доступным в вашем проекте. Нам нравится шрифт Nunito от Google Fonts, но вы можете выбрать другой, исходя из своих предпочтений или требований проекта. Включите шрифт в тег в файл index.html :

 

     
 

После этого не забудьте поменять местами значения по умолчанию для семейства шрифтов, используемых Tailwind CSS в tailwinding.config.js файл:

 
module.exports = {
    удалять: [],
    тема: {
        семейство шрифтов: {
        sans: ['Nunito', 'sans-serif'],
        отображать: ['Nunito', 'sans-serif'],
        body: ['Nunito', 'sans-serif']
        },
        продлевать: {}
    },
    варианты: {},
    плагины: [
        require ('tailwindcss'),
        требуется ('автопрефиксатор')
    ]
}
     
 

Если вы запустите следующую команду в своем терминале, она обработает вашу конфигурацию и файл main.css и обновите указанное вами семейство шрифтов:

 
npx tailwindcss build main.css -o output.css
     
 

Если вы обновите главную страницу, вы увидите, что шрифт был изменен на Nunito из Google Fonts.

Расширение CSS Tailwind пользовательскими цветами

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

Допустим, у вас есть два цвета, основанные на вашем бренде, и вам нужно уметь их использовать с помощью классов Tailwind. Все, что вам нужно сделать, это еще раз перейти к файлу tailwind.config.js и добавить следующие две строки к ключу расширения основного объекта:

 
продлевать: {
    цвета: {
        первичный: '# EA755E',
        вторичный: '# BD675F'
    }
}
     
 

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

Добавление свойств в ключ расширения основного объекта не отменяет текущий набор классов, а расширяет их. Предыдущий пример изменения шрифта фактически изменяет свойства классов по умолчанию, используемых Tailwind.

Уменьшите время загрузки и размер файла, удалив неиспользуемые классы из вашего CSS

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

Хорошая новость заключается в том, что вы можете легко уменьшить размер файла, удалив неиспользуемые классы CSS с помощью функции очистки в файле tailwind.config.js .

Добавьте в файл конфигурации следующую строку кода:

 
удалять: {
    включено: правда,
    содержание: [
        './**/*.html'
    ]
}
     
 

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

Вы можете больше узнать о функции Purge CSS в официальной документации.

Заключение и резюме

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

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

Руководство для начинающих по изучению CSS с примерами

Это руководство по CSS предназначено как для новичков, так и для профессионалов в изучении стилей веб-страниц. CSS контролирует дизайн, внешний вид и поведение веб-страницы.

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

Ключевые моменты CSS

  • Полная форма CSS - это каскадные таблицы стилей
  • Последняя версия CSS - CSS3
  • CSS определяет общее представление HTML-документа с помощью цветов и шрифтов.
  • Создателем CSS является Хакон Виум Ли в 1994 году.
  • Вы можете отображать одни и те же страницы по-разному на экранах разных размеров.
  • Может использоваться для создания анимации и эффектов перехода на веб-страницах.
  • Вы можете определить CSS во внешних файлах (с расширением .css) и добавить файл на HTML-страницы.

Что такое CSS?

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

Веб-дизайнеры используют CSS для создания красивых веб-сайтов для пользователей. Общий вид сайта зависит от CSS.

Простой пример CSS

Ниже приведен простой пример CSS, который применяет CSS к элементу HTML

. Он применяет CSS font-size и цвет к элементу абзаца.

Проверить это вживую