Рубрики
Самоучитель по CSS

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами. Модуль flexbox позволяет решать […]

 
Рубрики
Самоучитель по CSS

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов; SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS. Sass – это один из наиболее […]

 
Рубрики
Самоучитель по CSS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS. LESS — это продукт с открытым исходным кодом. Его первая версия была написана […]

 
Рубрики
Самоучитель по CSS

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные решения самых насущных проблем – разметку, интерфейсы, адаптивность. Классический CSS фреймворк – набор базовых стилей для вёрстки веб-страницы: сетка; иконки; таблицы; элементы форм и кнопок; типографика; интерфейсные паттерны, например, карточки […]

 
Рубрики
Самоучитель по PHP

Создание системы регистрации и авторизации на PHP

В этой статье мы создадим систему регистрации и авторизации. Что нам понадобиться для написания такой системы: Язык программирования PHP; Библиотека RedBeanPHP для соединения с базой данных; Язык гипертекстовой разметки (HTML); Каскадные стили таблиц (CSS); Фреймворк Bootstrap; Функции API для хеширования паролей; Локальный сервер XAMPP; 1. Создание базы данных Создаем базу данных в интерфейсе “phpAdmin“. Базу […]

 
Рубрики
Самоучитель по CSS

Фреймворк Bootstrap

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его […]

 
Рубрики
Самоучитель по CSS

Специфичность свойств.

Представим что существует два или более конфликтующих правила CSS, относящихся к одному и тому же элементу, то для определения более приоритетного, браузеры используют определенные критерии отбора. Например если есть несколько одинаковых CSS селекторов, то селектор, декларированный позднее других, имеет более высокий приоритет: p { color: red; } p { color: blue; } В данном случае […]

 
Рубрики
Самоучитель по CSS

Дополнительные правила.

В этой статье рассмотрим дополнительные правила в CSS. Дополнительные правила инкапсулируют набор правил CSS и применяют их к чему-нибудь конкретному. 1. Типы средств визуального отображения Дополнительное правило @media позволяет применять заданный набор стилей с определенным типом средств визуального отображения. Например: @media projection { body { font-size: 10pt; } #navigation { display: none; } } Существуют […]

 
Рубрики
Самоучитель по CSS

Бестабличная компоновка страницы.

Позиционирование Свойство position используется для определения расположения элемента относительно других элементов. Оно может быть абсолютным (absolute), относительным (relative), статичным (static) и фиксированным (fixed). Значение static – это значение по умолчанию. Оно формирует позицию элемента в нормальном порядке, так, как элемент появляется в коде HTML. Значение relative похож на static, однако при этом элемент может быть […]

 
Рубрики
Самоучитель по CSS

Фоновые изображения.

CSS-фон — свойства, добавляющие фон для любого HTML-элемента. Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением. В качестве изображения может выступать градиент или картинка. Для одного элемента можно задать несколько фоновых изображений. Фон не отображается у пустых элементов с нулевой высотой. Свойства фона не наследуются, но фон родительского […]

 
Рубрики
Самоучитель по CSS

Краткая запись свойств CSS.

Некоторые CSS свойства допускают использование строки значений, что устраняет необходимость в некоторых индивидуальных свойствах. Строка значений представляет собой набор определенных значений, разделенных пробелами. Это и называется сокращенная форма записи свойств CSS. Сокращённой формой записи обладают следующие css-свойства: background margin padding border font list-style outline Рассмотрим их подробнее: background Свойство background собирается из следующих CSS-свойств: background-attachment, […]

 
Рубрики
Самоучитель по CSS

Валидация в CSS.

Валидация — это проверка страниц или всего сайта в целом на правильность и соблюдение всех норм web стандартов. Все такие стандарты прописаны на W3C (https://www.w3.org), который соответственно и проводит валидацию сайта. Через данный сервис можно осуществить проверку на HTML ошибки и CSS ошибки. Совершая вёрстку шаблона, нужно обязательно проверять код на валидность так как именно […]

 
Рубрики
Самоучитель по CSS

Адаптивная вёрстка.

Адаптивная вёрстка сайта позволяет web-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Она предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов. С помощью медиазапросов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов […]

 
Рубрики
Самоучитель по CSS

Каскадирование в CSS.

Под каскадированием понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты. Каскадность работает следующим образом: если в таблице стилей для […]

 
Рубрики
Самоучитель по CSS

Наследование в CSS.

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются. Например, пусть у на web-странице есть заголовок и параграф, которые должны иметь текст красного цвета. Мы можем отдельно к параграфу и заголовку применить соответствующий стиль, который установит нужный цвет шрифта: […]

 
Рубрики
Самоучитель по CSS

Группирование селекторов в CSS.

Разные селекторы можно комбинировать между собой, что в итоге позволяет сократить код и нацелить стиль на выбранные элементы, основываясь на их положении относительно друг друга. Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. Рассмотрим пример где стили прописаны для каждого селектора: h1 { […]

 
Рубрики
Самоучитель по CSS

Псевдоэлементы в CSS.

Псевдоэлементы в CSS позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Псевдоэлемент — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Синтаксис: Селектор:Псевдоэлемент { Описание правил стиля } Вначале следует имя селектора, затем пишется двоеточие, после которого идёт […]

 
Рубрики
Самоучитель по CSS

Псевдоклассы в CSS.

Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору. Псевдокласс будет определять только определённое состояние этого селектора. Синтаксис: селектор:псевдокласс { } Как и с обычными классами, псевдоклассы можно совмещать вместе в одном селекторе любое число псевдоклассов. […]

 
Рубрики
Самоучитель по CSS

Селекторы атрибутов в CSS.

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. 1. Простой селектор атрибута Селекторы атрибутов позволяют выбрать нужные элементы и установить для них стиль по наличию определённого атрибута или его значения. Рассмотрим синтаксис: [] { Описание правил стиля } E[] { Описание правил стиля } Стиль применяется к тем элементам, внутри которых […]

 
Рубрики
Самоучитель по CSS

Соседние, родственные и дочерние селекторы в CSS.

Соседние селекторы Соседними называются элементы web-страницы, когда они следуют непосредственно друг за другом в коде документа. Синтаксис: P + H { Описание правил стиля } Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами P и H. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу H, […]

 
Рубрики
Самоучитель по CSS

Контекстные селекторы в CSS.

Контекстные селекторы в CSS используются при наличии вложенных тегов. Их применение позволяет определить стили тега, который вложен в какой-то конкретный тег. Схема контекстного селектора выглядит следующим образом: селектор селектор { css-свойства: значения; } Например: текст тега <i> должен быть красным только тогда, когда он находится внутри тега <li>. Рассмотрим пример контекстного селектора в CSS: <html> […]

 
Рубрики
Самоучитель по CSS

Идентификаторы в CSS.

Идентификаторы (id селекторы), весьма схожи с классами, и отличаются тем, что идентификатор может иметь одно единственное уникальное имя во всем документе. Идентификаторы, как правило, применяются в том случае, если возникает необходимость управлять стилем элемента динамически с помощью скрипта, обращаясь к его индивидуальному имени. Синтаксис применения идентификатора следующий: #Имя идентификатора { свойство1: значение; свойство2: значение; … […]

 
Рубрики
Самоучитель по CSS

Классы в CSS.

Классы применяют, когда необходимо определить стиль для одного или нескольких элементов web-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class. Пример определения класса: <p class=”important”>…</p> <p class=”help”>…</p> Классы CSS являются одним из основных составляющих стандарта CSS и придают ему дополнительную […]

 
Рубрики
Самоучитель по CSS

Рамки элементов.

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина. Синтаксис свойства border: border: Ширина Тип Цвет; Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%). Цвет можно задать либо […]

 
Рубрики
Самоучитель по CSS

Отступы и поля

В этой статье мы подробно поговорим о полях (свойство margin) и отступах (свойство padding) элемента. margin Поле (margin) – устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с […]

 
Рубрики
Самоучитель по CSS

Селекторы тегов.

В статье “Базовый синтаксис CSS” мы говорили о селекторах. Если вы не знаете что такое селектор, тогда советуем изучить данную статью. В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде: Тег { свойство1: значение; свойство2: значение; … } Вначале […]

 
Рубрики
Самоучитель по CSS

Значения стилевых свойств.

В CSS значения стилевых свойств бывают в виде: строк, чисел, процентов, размеров, цвета, адреса и ключевого слова. Рассмотрим их подробнее. 1. Строки Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой слэш. Пример: ‘Сайт “it-black.ru”‘ “Сайт ‘it-black.ru'” […]

 
Рубрики
Самоучитель по CSS

Базовый синтаксис CSS.

В CSS основным понятием выступает селектор — это шаблон, который используется для выбора одного или нескольких элементов HTML и применения к ним параметров форматирования. Общий способ базового синтаксиса CSS выглядит следующим образом: Селектор – указывает на тег, класс или идентификатор к которому применяются стилевые параметры. Свойство – указывает, какое стилевое свойство применять к данному селектору […]

 
Рубрики
Самоучитель по CSS

Как использовать цвета.

CSS позволяет использовать почти 16.777.216 цветов. Они могут быть представлены либо именем, либо функциональным значением rgb (red/green/blue), либо шестнадцатеричным кодом. Пример использования цвета: // разные написания красного цвета: red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 Существует 17 предопределенных имен цветов. Это aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white […]

 
Рубрики
Самоучитель по CSS

Преимущества и недостатки стилей.

Стили являются удобным, практичным и эффективным инструментом при вёрстке web-страниц и оформления текста, ссылок, изображений и других элементов. В статье “Введение в CSS” мы коротко говорили об основыных преимуществах CSS, а в этой статье мы хотим подробно описать все преимущества и недостатки стилей. 1. Преимущества стилей 1.1. Универсальность Все современные браузеры способны работать с таблицами […]

 
Рубрики
Самоучитель по CSS

Подключение CSS.

В этой статье мы разберем различные способы подключения CSS стилей в HTML документ. Существует четыре способа подключения. 1. Встроенные стили Встроенные стили используются для определения стилей элементов целой web-страницы. В теге <head> определяется тег style, в котором задаются все стили для web-страницы. Пример подключения: <head> <title>Пример CSS</title> <style type=”text/css”> p { color: green; } a […]

 
Рубрики
Самоучитель по CSS

Введение в CSS.

В этой статье поговорим о CSS и его преимуществах. Давайте еще раз вспомним что такое CSS: CSS (Cascading Style Sheets, Каскадные Таблицы Стилей) — это формальный язык, созданный для управления стилями внешнего вида веб-страниц. Пример страницы web-документа без CSS: Пример страницы web-документа оформленный с помощью CSS: На примерах видно, что один и тот же сайт […]

 
Рубрики
Самоучитель по CSS

Краткая история создания CSS.

CSS (Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида web-документа, созданного при помощи языка разметки (HTML). CSS – это широкий спектр технологий, который одобрен консорциумом W3C (World Wide Web Consortium (Консорциума Всемирной Паутины)) и получил такое название, как «Web Стандарты». В 1990 г. возникла необходимость стандартизировать их в какие-то определенные единые […]