WebReference

Web Name: WebReference

WebSite: http://www.webref.ru

ID:339212

Keywords:

WebReference

Description:


WebReference

Руководства по веб-технологиям

Руководство по тёмному режиму

Давайте изучим тёмный режим в контексте веб-сайтов. Мы рассмотрим разные варианты и подходы к реализации дизайна тёмного режима, а также связанные с ним технические аспекты. Попутно мы коснёмся и некоторых советов по дизайну.

Gulp для новичков

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

Руководство по Bootstrap 4

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

Руководство по флексбоксам

Флексбоксы (Flexbox, от flexible box— гибкие блоки) дают веб-разработчикам контроль над расположением элементов, их выравниванием и размерами внутри контейнера.

Руководство по JSON

JSON (JavaScript Object Notation, Нотация объектов JavaScript) — это человекочитаемый текстовый формат, который облегчает обмен данными между различными языками программирования.

Структурные псевдоклассы

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

Учебные курсы

Изучаем селекторы CSS

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

селекторами элемента;классами;идентификаторами;универсальным селектором.

Блочная модель

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

Разделы веб-страницы

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

float в теории и на практике

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

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

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

Позиционирование элементов

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

Рекомендуемое прохождение курсов

HTML. Уровень 1

Введение в ИнтернетОсновы HTMLСодержимое в HTML

HTML. Уровень 2

Самоучитель HTMLРазделы веб-страницыФормы в HTML

CSS. Уровень 1

Основы CSSТекст в CSSБлочная модель в CSSПозиционирование в CSSПродвинутый CSS

CSS. Уровень 2

Блочная модельБлочные и строчные элементыfloat в теории и на практикеПозиционирование элементов

Самоучитель HTML

Установите наше приложение под Android для самостоятельного изучения HTML.

Паблик WebReference

Читайте наш паблик ВКонтакте.

Видеоуроки

Новые задачи из Практики

Сердце Мигающий текст Прозрачность при наведении Масштабирование картинки при наведении 2 Масштабирование картинки при наведении Сдвиг при наведении Поворот на 360° при наведении Масштабирование кнопки Плавное изменение цвета Обложка видео Зацикливание видео Автовоспроизведение видео

Задача для самостоятельного решения

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

Рис. 1

Перейти к задаче

Новые рецепты

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

Элементы HTML

<!-- --><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><bgsound><big><blink><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><command><comment><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1><h2><h3><h4><h5><h6><head><header><hgroup><hr><html><i><iframe><img><input><ins><isindex><kbd><keygen><label><legend><li><link><listing><main><map><mark><marquee><menu><menuitem><meta><meter><multicol><nav><nobr><noembed><noframes><noindex><noscript><object><ol><optgroup><option><output><p><param><picture><plaintext><pre><progress><q><rp><rt><rtc><ruby><s><samp><script><section><select><small><source><spacer><span><strike><strong><style><sub><summary><sup><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video><wbr><xmp>

Свойства CSS

!important::-ms-browse::-ms-check::-ms-clear::-ms-expand::-ms-fill::-ms-fill-lower::-ms-fill-upper::-ms-reveal::-ms-thumb::-ms-ticks-after::-ms-ticks-before::-ms-tooltip::-ms-track::-ms-value::after::backdrop::before::first-letter::first-line::placeholder::selection:active:blank:checked:default:disabled:empty:enabled:first-child:first-of-type:focus:focus-within:fullscreen:hover:in-range:indeterminate:invalid:lang:last-child:last-of-type:link:not:nth-child:nth-last-child:nth-last-of-type:nth-of-type:only-child:only-of-type:optional:out-of-range:placeholder-shown:read-only:read-write:required:root:target:valid:visited@charset@document@font-face@import@keyframes@media@page@supports@viewportalign-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeblock-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-colorclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-familyfont-kerningfont-sizefont-stretchfont-stylefont-variantfont-weightheighthyphensimage-renderinginline-sizejustify-contentleftletter-spacingline-clampline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmarksmax-heightmax-widthmin-block-sizemin-heightmin-widthmix-blend-modeobject-fitopacityorderorientorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originplace-contentpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-orientationtext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom

Руководства

AngularJS Bootstrap Bower Corona SDK CSS3 Express Grunt Gulp Haml HTML5 JavaScript Jekyll jQuery JSON Less Lua Node.js Sass Yeoman

Метки

3D AngularJS Bootstrap Bower Canvas Corona SDK CSS3 Express Firefox OS flexbox Grunt Gulp Haml HTML5 JavaScript jQuery JSON Less Lua Node.js Sass SCSS автофокус адаптивный дизайн анимация аудио вёрстка вкладки градиент изображения иконки кнопки ниспадающее меню нумерация страниц переходы препроцессоры CSS псевдоэлементы рамки списки спойлер спрайты ссылки таблицы текст тень трансформация фон формы хлебные крошки цвет шрифт

Гл. редактор: Влад Мержевич

vlad@webref.ru

О сайте

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

Связи

RSS JSFiddle GitHub ВКонтакте Google Диск Google Play YouTube Форум

Разделы сайта

Справочники Вёрстка Веб-технологии Мобильные приложения Рецепты Учебные курсы Практика Самостоятельная Тесты

Популярное

Помощь по сайту

АвторыОбозначенияТерминологияЖаргонНаши приложенияСкачать

Сайт WebReference.ru использует VPS от компании Beget.

Все материалы сайта доступны по лицензии Creative Commons «Attribution-NonCommercial» («Атрибуция — Некоммерческое использование») 4.0 Всемирная, если не указано иное.

TAGS:WebReference

<<< Thank you for your visit >>>

Websites to related :

ads

Hot Websites