4 CSS техники, которые вы должны знать


Содержание

10 способов протестировать свои навыки в HTML и CSS

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

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

1. Запустить проект

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

2. Участвуйте в битве

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

3. Присоединитесь к сообществу

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

4. Программный симулятор

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

5. Наблюдайте за скринкастами

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

6. Головоломки и викторины

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

7. Играйте в игры

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

8. Найдите сайт с тестами

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

9. Дисциплинируйте себя

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

10. Общайтесь со специалистами со всего мира

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

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

6 новых методов, которые должен знать каждый веб-разработчик.

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

Медиа запросы CSS3

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

Например, код ниже показывает, как применить определенный стиль, только если клиентский дисплей менее чем 767px.

Изменение размеров шрифта благодаря REM

CSS3 включает несколько новых единиц, включая единицу REM.

Em единица определяется относительно размера шрифта родителя, т.е. наследуется. К примеру, Вы определили для заголовка шрифт размером 2em, что соответствует 20px, а для текста ссылки находящейся в заголовке шрифт размером 1em (100% от размера шрифта родителя). Тогда текст заголовка будет одного размера (простой ли это текст или ссылка), однако если использовать rem единицу, то размер шрифта устанавливается для каждого элемента свой, наследование отменяется.

Cache страницы для офлайнового использования

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

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

После следует создать файл offline.manifest, со следующими директивами:

И наконец, необходимо связать .manifest файл с html документом:

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

HTML5 drag & drop

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

Чтобы создать элемент draggable, Вы просто должны добавить это draggable = «true» атрибут, как показано в примере:

Конечно, после того, как Вы создали элемент draggable, Вы должны использовать JavaScript, чтобы осуществить эффект drag & drop. Я собираюсь объяснять это чуть позже, в одной из статей.

Подсказка: Если вы хотите, предотвратить перетаскивание текстового содержимого, просто примените следующие правила CSS:

Формы в HTML5

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

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

form >
label for = «range-slider» > Sl > label >
input type = «range» name = «range-slider» >= «range-slider» min = «0» max = «20» step = «1» value = «0» >

label for = «numeric-spinner» > Numeric spinner label >
input type = «number» name = «numeric-spinner» >= «numeric-spinner» value = «2» >

label for = «date-picker» > Date picker label >
input type = «date» name = «date-picker» >= «date-picker» value = «2010-10-06» >

label for = «color-picker» > Color picker label >
input type = «color» name = «color-picker» >= «color-picker» value = «ff0000» >

label for = «text-field» > Text field with placeholder label >
input type = «text» name = «text-field» >= «text-field» placeholder = «Insert your text here» >

label for = «url-field» > Url field label >
input type = «url» >= «url-field» name = «url-field» placeholder = «http://net.tutsplus.com/» required >

label for = «email-field» > Email field label >
input type = «email» >= «email-field» name = «email-field» placeholder = «contact@ghinda.net» required >

button type = «submit» role = «button» aria — disabled = «false» >
span > Submit form span >
button >
form >

CSS анимация

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

Следующий пример показывает, как произвести цветовое изменение фона. Как Вы можете видеть, мы должны (пока) использовать некоторые собственные свойства, такие как-moz-keyframes.

#logo <
margin : 15px 15px 0 15px ;
background : red ;
float : left ;

/* Firefox 4+ */
-moz-animation-name : colour-change ;
-moz-animation-timing-function : linear ;
-moz-animation-iteration-count : infinite ;
-moz-animation-duration : 30s ;

/* Webkit */
-webkit-animation-name : colour-change ;
-webkit-animation-timing-function : linear ;
-webkit-animation-iteration-count : infinite ;
-webkit-animation-duration : 30s ;
>

Теперь создайте блок div и посмотрите что произойдет.

5 нововведений в CSS4.

Всем привет! В этой статье мы рассмотрим 5 нововведений, которые должны появиться в новой спецификации CSS4.

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

Конечно же, появятся новые селекторы. Давайте рассмотрим несколько интересных.

1. :NOT()

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

:not(p, h1, div) // то же самое, что и :not(p):not(h1):not(div)

2. :HAS()

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

div:has(img) // любой блок, в котором есть картинка
p:has(h1, h2) // любой параграф, имеющий заголовки первого или второго типов
p:has(:not(h1)) // любой параграф, не имеющий заголовок первого типа

Помните, как нам приходилось писать что-то вроде этого:

a:link, a visited <>

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

4. :placeholder-shown

Этот псевдо-класс выбирает элементы ввода, когда показывается текст, заданный в placeholder:

input:placeholder-shown <
outline: 1px solid blue;
>

5. :drop и :drop()

Первый псевдо-класс выбирает любой элемент, который перетаскивается пользователем. Второй – похож на первый, но имеет дополнительные возможности сортировки:

div:drop(active || valid || invalid) <
// active: перетаскиваемый объект
// valid: сработает, если цель перетаскивания действительна для объекта, который в настоящее время перетаскивается
// invalid: наоборот, если цель перетаскивания недействительная для объекта, который в настоящее время перетаскивается
>

А на этом сегодня все. Спасибо за внимание и следите за новостями!


Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    HTML5 особенности, подсказки и техники, которые вы должны знать

    Новый Doctype

    По-прежнему используете старый тип документа ( doctype ), который невозможно запомнить?

    Если так, зачем? Переходите к новому HTML5 типу документа (doctype).

    Фактически, вы можете вообще не указывать doctype для HTML5. Однако тип документа требуется для текущих и старых браузеров. Браузеры, не понимающие новый тип документа, интерпретируют разметку в стандартном режиме. Итак, можете смело использовать новый HTML5 doctype .

    Элемент figure

    Рассмотрим следующую разметку для изображения:

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

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

    Нет больше types для скриптов и ссылок

    Вы, возможно, все еще добавляете атрибут type в ваши ссылки и скрипты.

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

    Ставить кавычки или нет?

    Вот в чем вопрос. Помните, HTML5 не XHTML. Вам не обязательно заворачивать атрибуты в кавычки, если вы этого не хотите. Если отсутствие кавычек упрощает вам жизнь, можете их не ставить.

    Определите свое мнение на этот счет. Если вы предпочитаете структурированный документ упрощенному документу, кодируйте с кавычками.

    Цукерберг рекомендует:  Нужны ли руки, чтобы кодить

    Сделайте ваш контент редактируемым

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

    Или, как мы изучили ранее, вы можете писать так:

    Прошли те дни, когда разметка выглядела примерно так:

    Элементы типа div , по своей природе, не семантические, даже, несмотря на то, что вы используете уникальные идентификаторы. В HTML5 мы получили доступ к элементам и . Приведенная выше разметка может быть заменена на следующую разметку:

    Internet Explorer и HTML5

    К сожалению, IE вызывает много нареканий при работе с новыми элементами HTML5.

    Необходимо гарантировать правильное отображение блочных элементов HTML5, для этого понадобится следующий стиль:

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

    Как ни странно данный код ‘образумит’ IE. К слову, Remy Sharp создал ява-скрипт, при помощи которого IE понимает новые элементы. HTML5 shiv расположен на Google-хостинге.

    hgroup

    Вообразите, у меня на сайте присутствует заголовок (

    ), за которым сразу следует подзаголовок (

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

    Элемент output

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

    В качестве простого примера рассмотрите нижеприведенный код: по нажатию кнопки submit , элемент output , при помощи javascript, выведет сумму чисел.

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

    Элемент output может использовать атрибут for для связи с другим элементом формы.

    8 хитрых приёмов, реализуемых с помощью одного лишь CSS

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

    1. Подсказки (tooltips)

    Многие сайты до сих пор используют JavaScript для создания подсказок, но самом деле на CSS их сделать гораздо проще. Самым лёгким решением будет прописать текст подсказки в data-атрибуте HTML-кода, например, data-tooltip=»…» . Теперь можно использовать CSS для отображения текста подсказки в функции attr() :

    Всё предельно просто. Конечно, для стилизации нужно больше кода, но, к счастью, для этого есть прекрасная библиотека Hint.css.

    2. Использование data-атрибутов и функции attr()

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

    Теперь вы можете использовать функцию attr() для отображения заголовка и описания:

    Вот рабочий пример с анимацией, срабатывающей при наведении:

    3. CSS-счётчики

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

    See Can I Use css-counters? Data on support for the css-counters feature across the major browsers from caniuse.com.

    Счётчики не стоит использовать для списков (

      ), но они прекрасно подойдут для пагинации или отображения чисел в галерее. Также можно считать количество выбранных элементов, для чего нужно на удивление мало кода (а JavaScript и вовсе не нужен):

    CSS-счётчики также прекрасно подходят для отображения динамически изменяющихся чисел в списках, которые можно пересортировать перетаскиванием:

    4. Эффект “замерзшего стекла” при помощи CSS-фильтров

    Ещё в iOS 7 Apple добавила эффект “замерзшего стекла” — полупрозрачные, размытые элементы. Этот эффект становится весьма популярным. Реализовать его раньше было не так уж и просто — до того, как появились CSS-фильтры, изображения приходилось искажать. Теперь же всё стало намного легче.

    See Can I Use css-filters? Data on support for the css-filters feature across the major browsers from caniuse.com.

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

    5. Используем HTML-элементы в качестве фона

    Обычно в качестве фона вы используете JPEG- или PNG-файл или градиент. Знали ли вы, что при помощи функции element() вы можете использовать

    See Can I Use css-element-function? Data on support for the css-element-function feature across the major browsers from caniuse.com.

    Возможности почти безграничны, что демонстрирует пример с MDN.

    6. Улучшенная сетка при помощи calc()

    Гибкие сетки — это очень полезная штука, но при работе с ними возникают различные проблемы, связанные в основном с разметкой и размерами блоков. Даже flexbox не справится с этой задачей в одиночку. Но функция calc() , которую можно использовать в качестве значения, может принести много пользы. В этом руководстве приведены примеры использования этой функции. Используя препроцессор наподобие Sass и функцию calc() , создать удобную сетку будет совсем несложно. Кроме того, эта функция поддерживается почти всеми браузерами.

    See Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.

    7. Выравнивание фиксированных элементов

    Функцию calc() также можно использовать для выравнивания элементов с фиксированным положением. Например, если у вас есть обёртка с полями переменного размера слева и справа и вам нужно точно выровнять элемент внутри обёртки, то вам придётся поломать голову, выбирая правильный размер отступа. С calc() вы можете сочетать абсолютные и относительные величины для идеального выравнивания:

    8. Анимации при помощи cubic-bezier()

    Для того, чтобы сделать пользовательский интерфейс сайта или приложения более привлекательным, вы можете использовать анимации. К сожалению, базовые варианты весьма скудны: например, «linear» или «ease-in-out» . Всякие подвижные анимации вообще не входят в стандартный набор. Но с функцией cubic-bezier() вы можете анимировать элементы именно так, как захотите.

    cubic-bezier() можно использовать двумя способами — понять её математическую основу и написать самому или использовать генератор. Думаю, второй вариант предпочтительнее.

    Заключение

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


    Что нужно знать относительно CSS

    С развитием технологий Веб, не исключая тот факт, что браузеры «обучаются» воспроизведению всё более сложного кода, мир постепенно приближается к цели, которая заключена в разработке универсальных стандартов для всех платформ и компьютеров. Люди не просто станут тратить меньше времени на разработку блока, который будет нормально отображаться в IE6, но будет создана цельная зрелая атмосфера для инноваций и реализации фантазий, без применения сторонних «хаков» или без путаницы в километрах кода.

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

    Сделано для сети Интернет

    Функции CSS3 (border-radius, box-shadow и text-shadow) постепенно набирают обороты в браузерах WebKit (Safari, Chrome и т.д.) и Gecko (Firefox). Эти функции значительно облегчают страницы, не говоря уже о привлекательности внешнего вида. Но и стоит также отметить, что это всего лишь «иголка в стогу сена», говоря о возможностях CSS3.

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

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

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

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

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

    Некоторые интересные и полезные функции трансформации (с поддержкой):

    * rotate – функция позволяет вам вращать объекты, меняя значения градуса.
    * scale – возможность увеличения и уменьшения объекта за счет указания значений.
    * translate – перемещение элемента посредством координат X и Y.

    Давайте подробнее рассмотрим каждую функцию.

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

    Не забывайте, что в для IE8 (если в не стандартном режиме) вам потребуется использовать «ms-filter» вместо «filter» в коде CSS.

    Поддержка для трансформации: вообще, функция rotate довольно широко распространена. В CSS-сниппете, представленном выше, мы ориентируется на -webkit- и -moz-, и вращаем элемент #nav на -90 градусов.

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

    К счастью, даже у IE есть специальный фильтр: фильтр трансформации изображений. Он распознает 4 значения вращения: 0, 1, 2 и 3. Вряд ли вы сможете добиться такого же контроля, как в WebKit или Gecko, но ваш дизайн сохранит свою консистенцию в старых браузерах (даже в IE6).

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

    Положительные значения, соответственно, увеличивают объект.
    Отрицательные значения, однако, не уменьшают его, а разворачивают вспять, а затем уменьшают соответствующим образом. Также Вы можете использовать десятичные значения (т.е. *.01, *.5) для уменьшения или увеличения элемента.

    Масштабирование поддерживается в Firefox, Safari и Chrome, но при этом, ни в одной версии IE. Вообще, масштабирование – это сугубо личный выбор каждого. Но его можно применять с дополнениями, типа :hover, что может значительно улучшить внешний вид.

    Название данной функции, вероятно, вводит вас в заблуждение. В общем, это позиционирование элементов с указанием значений X и Y.

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

    Функция поддерживается в Firefox, Safari и Chrome, когда Вы применяете расширения -moz- и -webkit-.

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

    Эти трансформации можно использовать вместе, что повысит эффективность Вашего кода CSS:

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

    Основа перехода представляет собой обращение к значению CSS, которое определяет и перемещает элемент с его неактивного положения (например, темно-синий фон) в его активное положение при наведении (например, светло-синий фон).

    Переходы можно скомпоновать с трансформациями (и прикрутить события типа :hover или :focus) для создания иллюзии анимации. С переходами CSS также можно добиться эффекта затемнения фона, скольжения блока или вращения объекта.

    Так как эта функция очень крутая, она поддерживается только в браузерах семейства WebKit. -moz-transition уже поддерживается в последней версии Firefox 3.7. К тому же, вы можете добавить -moz-transition в код CSS просто для дальнейшей перспективы усовершенствования.

    Анимация – это, пожалуй, тот момент, когда CSS3 на самом деле работает! Вы можете совместить все описанные выше функции со значениями animation-duration, animation-name и animation-timing-function для того чтобы с помощью CSS реализовать анимацию, похожую на Flash.

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

    К сожалению, пока что поддержка анимации на CSS крайне ограничена. Двухмерная анимация CSS работает в Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira и других браузерах семейства Webkit. Safari 4 (Snow Leopard) поддерживает трехмерную анимацию.

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

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

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

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Что основное мне нужно знать из html,css, чтобы начать верстать?

    Опции темы

    Html Я более менее знаю. Мне посоветовали в CSS изучить следующее:
    display:[block,inline-block,inline]; box-sizing; padding; margin; float. Сказали, что это минимальная база, чтоб начать верстать!
    Кто занимается веб-программированием, чем ещё можете дополнить?

    чтобы вы понимали html и css это далеко не веб-программирование.
    Веб-программирование — это знание и умение писать код на php и javascript

    Вам на htmlbook — там достаточно инфы, которую нужно изучить.
    Начните верстать.
    А еще на ваши вопросы уже отвечали не однократно на тостер.ру

    ———- Сообщение добавлено 16:49 ———- Предыдущее 16:48 ———-

    ога. Я кстати успел летом на кодекадеми. Хотя там и сейчас остались бесплатные курсы некоторые.

    Бутстрап нужен тем, кто либо не умеет верстать, либо нет дизайна и нужно сделать более-менее презентабельный сайт (админка, например). Учить его — дело 2-х часов. У меня жена, которая в верстке ни в зуб ногой собрала на бутстрапе довольно не плохой интерфейс для своей задачи за пару часов (я только базу подготовил). На большинстве проектов все элементы из него не используются. А если используются то не все. Да, можно сгенерировать под нужные элементы, но когда пройдет какое-то время и заказчик попросит что-то новое добавить, а вышла уже новая версия — сводить их то еще удовольствие :) Плавали, знаем.
    Учите голый html, css и js, а потом сами поймете чего не хватает с опытом.

    Спасибо сказали:

    sultanova, еще медиа-запросы (используются для отзывчивой верстки)

    Спасибо сказали:

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

    Цукерберг рекомендует:  Программирование - Изучите X за Y минут

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

    Если уж хочется чего то прям поизучать — то через какое-то время придёт и понимание этого. Будет очевидно что вам нужно читать и изучать. А для начала и хтмлбука хватит за глаза

    Последний раз редактировалось redeyer; 24.01.2020 в 21:36 .

    Спасибо сказали:

    redeyer,Спасибо за рекомендацию. К сожалению данная методика мне не совсем подходит. Раньше так же рассуждала. Уже не раз рисовала шаблон в фотошопе, начинала верстать и при возникающих вопросах гуглить. Всё, на этом моменте стопорилось.

    ———- Сообщение добавлено 23:53 ———- Предыдущее 23:52 ———-

    StelS,У жены наверно неплохие базовые знания :)?

    ———- Сообщение добавлено 23:54 ———- Предыдущее 23:53 ———-

    feuer81,Нет смысла учить php, не узнав как следует html+php. Я тому живое подтверждение .

    Немного о CSS для начинающих

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

    Один из таких ресурсов – всевозможные вебинары крупных разработчиков и IT-компаний, среди которых, на мой взгляд, особого внимания заслуживает школа разработчиков Яндекса, лекции которой я периодически изучаю и делаю для себя пометки.

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

    Существует огромное количество ресурсов, которые стоит изучить и прочитать. В первую очередь, конечно, необходимо читать и изучать основные спецификации (например, здесь https://www.w3.org/Style/CSS ). Тут вам потребуется знание английского языка, с ним гораздо проще понимать и вникать в стандарты как CSS, так и HTML. Хотя там и бывают иногда переведённые отрывки на русском языке, но лучше все же изучать английский. Также в помощь сайт https://www.webplatform.org , куда заливается множество описаний спецификаций, в формате Вики, или же сайт http://stackoverflow.com , где можно задать вопросы знатокам, на которые ответят оперативно, скорее всего, в тот же день. Лично меня не раз выручал сайт htmlbook.ru, который сейчас медленно, но верно переезжает на новый домен https://webref.ru , но это скорее справочник по свойствам и значениям, где тоже, кстати, можно задать вопрос, и обычно ребята там оперативно друг другу подсказывают. И, конечно, этот сайт очень полезен в процессе практики, когда у вас хоть тресни, но что-то не работает — часто помогают, и проблема разрешается. Также довольно мощный ресурс по самостоятельному обучению — https://htmlacademy.ru/ .

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

    Также сейчас огромное количество специализированной литературы, обучающей в том числе. Лично я учусь в основном по книгам серии Head First, и самый первый опыт в создании сайта я получила, следуя руководству этого издания www.headfirstlabs.com/books/hfhtml. И уже в качестве дополнения изучала такие книги, как http://www.ozon.ru/context/detail/id/3881079 , http://www.ozon.ru/context/detail/id/24493075 .

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

    Теория, это конечно, полезно и без нее ну никуда, но без постоянной практики трудно научиться делать что-то действительно стоящее.

    Сейчас есть большое количество таких сайтов, «песочниц». На них приходишь, там есть что-то вроде textarea, куда вводишь свой код, и он моментально отображается на экране. То есть не нужно вбивать все в редакторе, обновлять браузер и так по кругу – правишь-обновляешь. Здесь сразу применяешь свойство и видишь, как оно работает. Примеры сайтов http://cssdesk.com , http://dabblet.com , http://jsbin.com , https://jsfiddle.net – как видно из названия, они предназначены не только для CSS, но и для HTML/JS. Если интересно, о последнем можете почитать здесь https://habrahabr.ru/post/126910 . Кстати, не пренебрегайте Хабром https://habrahabr.ru/interesting , здесь тоже много полезной информации. А таком сайте, как http://codepen.io вы можете поделиться своим кодом другими ( http://www.internet-technologies.ru/articles/article_1663.ht. — вот руководство по последнему, если интересно).

    2.2. Браузерные инструменты или свойства разработчика

    Если песочницы отлично выполняют свою функции потыкать/поиграть/попробовать, то, когда вы будет делать свой проект, то, конечно, захотите что-то подправить именно в нем, и посмотреть, как эти изменения работают в браузере. Для каждого браузера есть свои инструменты. Если кто-то не знает, то работает это так: открываем любую страницу, правой кнопкой мыши щелкаем — далее «Просмотреть код», и видим внизу или слева открывшееся окно. Нажав на любой элемент слева, видим его в окне браузера. Справа же есть все css-свойства, примененные к этому элементу, и если мы хотим что-то быстренько посмотреть-поменять, то прямо в свойствах разработчика меняем, или вообще отключаем свойство, и смотрим результат.

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

    2.3. Редакторы кода.

    Ну, это наш основной инструмент практики. В общем то, редакторы могут быть любыми. Начиная от банального Notepad+ и заканчивая такими мощными штуками как Sublime Text, DreamViewer, Web Storm. Отчасти, все эти редакторы похожи по принципу работы, главное, чтобы редактор поддерживал подсветку синтаксиса или какие-то сниппеты/автодополнения, которые могут облегчить вам работу. Важно также, чтобы редактор поддерживал автообновление страниц, чтобы сразу видеть изменения в браузере. Имеют механизм «живого обновления» страницы такие приложения, как Live Reload, Code Kit, Grunt. Чтобы определиться, что подходит лично вам для разработки, стоит самим покопаться в многообразии средств и выбрать то, что больше всего удовлетворяет вашим потребностям.

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

    Самые известные из них – SASS, LESS, Stylus, Roole. SASS, пожалуй, самый старый из них и распространенный. LESS – самый простой и имеет меньше всего возможностей. Но начинать с препроцессоров, пожалуй, не стоит. Имеет смысл писать чистый CSS, смотреть, как он работает (можно в «песочницах», чтобы не заморачиваться первое время), но позже стоит посмотреть и попробовать препроцессоры и выбрать для себя тот, который вам нравится и подходит вам по задачам.

    Существует огромное количество фреймворков, т.е. готовых наборов CSS и HTML, написанных и в том числе с помощью препроцессоров. Например, «бутстрапы» (самый известный из них – Twitter Bootstrap) — наборы уже готовых классов с CSS-свойствами, чтобы быстренько сделать какую-то определенную страничку, которая выглядит нормально и стандартно. При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния. Фреймворков очень много, и начинать с них тоже не советуется, поскольку код в них довольно специфичен и заточен под определенные задачи. Лучше делать свой код и учиться на своих ошибках, нежели копипастить код из готовых фреймворков.

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

    Просьба к опытным товарищам Пикабу — не ругайте сильно, если мои рекомендации в чём то ошибочны. Критикуя — предлагай! Буду рада конструктивной критике и я, и наверняка те, кому полезна эта статья.

    Основы CSS — Руководство для самых маленьких

    Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

    Часть 1. Основы CSS


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

    Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

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

    1.1 Использование CSS в HTML документах

    CSS довольно просто использовать в HTML документах. Его можно:

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

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

    Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

    Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

    Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

    Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

    1.2 CSS синтаксис

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

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

    Просто, не правда ли?

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

    Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

    Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

    1.3 Каскадирование, наследование и приоритет

    Понять принцип каскадирования несложно. Давайте взглянем на пример:

    Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

    Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

    Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

    1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
      Пример использования !important:
    2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
    3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
    4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
    5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
      В результате тег

    , находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

    И т.д. по логической цепочке.

    И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

    В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

    Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

    Часть 2. CSS свойства

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

    Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

    CSS Свойство

    Частота использования

    Описание

    color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

    Часть 3. Медиа-запросы

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

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

    Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

    Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

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

    Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

    Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

    Часть 4. Рекомендации

    Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

    1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
    2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

    Премиум уроки от WebDesign Master

    Создание контентного сайта на Jekyll от А до Я

    Создание современного интернет-магазина от А до Я

    Я — фрилансер! — Руководство успешного фрилансера

    30 CSS селекторов, которые вы должны запомнить

    Russian (Pусский) translation by Dmitriy Troy (you can also view the original English article)

    Итак, вы изучили принцип наследования и основные селекторы: id и class — и думаете, что готовы к бою? Но, поверьте, вы очень многое упустили. Несмотря на то, что многие из описанных в этой статье селекторов являются частью спецификации CSS3, и поддерживаются только современными браузерами, вы просто обязаны их знать.

    Начнём с самого простого.

    Универсальный селектор соответствует любому элементу на странице. Часто разработчики используют его для обнуления свойств margin и padding . Это допустимо в тестовом режиме, но я не рекомендую использовать этот селектор в рабочих проектах. Он слишком нагружает браузер.

    Универсальный селектор * также можно использовать для стилизации всех потомков элемента.

    В данном примере стиль применится ко всем потомкам элемента #container div . Но, повторюсь, не стоит использовать эту технику слишком часто, а лучше вообще её не использовать.

    Совместимость

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Использование символа решётки позволяет обратиться к уникальному идентификатору элемента id . Но старайтесь не злоупотреблять использованием идентификаторов.

    Спросите себя: мне действительно нужно использовать id для этого элемента?

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

    Совместимость

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

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

    Совместимость

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    4. X Y

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

    Совет — Если ваш селектор выглядит так: X Y Z A B.error , то вы совершаете ошибку. Старайтесь избегать таких длинных вложений.

    Совместимость

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Что вы будете делать, если вам понадобится выбрать только элементы определённого типа ? В этом случае вы не сможете использовать id или class . И вам на помощь придёт селектор по типу элемента. Если вам нужны все несортированные списки, просто используйте ul <> .

    Совместимость

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Мы используем псевдокласс :link для стилизации ссылок, на которые пользователь ещё не нажимал.

    Также нам доступен псевдокласс :visited для стилизации только тех ссылок, на которые пользователь нажал.

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    7. X + Y

    Это соседний селектор. Он поможет нам выбрать только тот элемент, который следует сразу же за указанным элементом. В этом примере мы выберем только первый параграф текста, следующий сразу за тэгом ul .

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    8. X > Y

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

    Селектор #container > ul выберет только тот элемент ul , который является прямым потомком элемента div с id равным container . Он не выберет, например, элемент ul , являющийся потомком первого элемента li .

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

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Этот селектор похож на X + Y , но он менее строгий. Соседний селектор ( ul + p ) выберет только первый элемент, следующий сразу же за указанным элементом. Селектор X

    Y выберет все элементы p , расположенные после элемента ul .

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    10. X[title]

    Это селектор атрибутов. Он выберет только те ссылки, у которых имеется указанный атрибут title . Но что, если вам нужно что-то более конкретное? Что же.

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari

    • Opera

    11. X[href=»foo»]

    Указанный выше код выберет все ссылки, указывающие на http://net.tutsplus.com. Они окрасятся в зелёный цвет. Стиль остальных ссылок останется без изменений.

    Не забудьте, что значение атрибута нужно заключать в кавычки. Особенно внимательны будьте при использовании JavaScript.

    Этот метод отлично работает, но он слишком строгий. Что, если ссылка указывает на Nettuts+, но путь прописан как nettuts.com? В этом случае мы можем использовать синтаксис регулярных выражений.

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    12. X[href*=»nettuts»]

    Вот то, что нам нужно. Звёздочка означает, что указанное значение должно быть частью указанного атрибута. Поэтому этот селектор выберет и nettuts.com, и net.tutsplus.com,, и даже tutsplus.com.

    Но помните, что этот способ слишком обширен. Что, если у вас будет ссылка, не указывающая на tuts+, но имеющая в адресе слово tuts? Для составления более строго правила используйте ^ и $ , указывающие на начало и конец строки соответственно.

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    13. X[href^=»http»]

    Вам было интересно как на некоторых сайтах реализован показ иконки возле внешних ссылок? Уверен, вы встречали подобное. Иконка напоминает, что это внешняя ссылка, которая переведёт вас на другой сайт.

    Это как раз случай использования символа ^ . В регулярных выражениях он используется для указания начала строки. Если мы хотим выбрать все ссылки, начинающиеся с http , то мы можем использовать код из примера сверху.

    Учтите, что мы не ищем http:// . В этом нет необходимости.

    А что, если мы хотим стилизовать все ссылки, указывающие, например, на фото? В этом случае нас интересует конец строки.

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    14. X[href$=».jpg»]

    Мы используем символ из регулярных выражений $ , который указывает на конец строки. В этом случае мы ищем все ссылки на фото, т.е. путь в них должен заканчиваться на .jpg . Учтите, что это не сработает для файлов gif и png .

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    15. X[data-*=»foo»]

    Как же нам выбрать все типы изображений, включая png , jpeg, jpg , gif ? Мы можем создать такой селектор:

    Но это очень громоздкая и неэффективная конструкция. Другой вариант — использовать пользовательские атрибуты. Мы можем добавить атрибут data-filetype к каждой ссылке, указывающей на изображение.

    Теперь мы можем использовать селектор атрибутов для выбора только этих ссылок.

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    16. X[foo

    Вот пример, который поразит ваших коллег. Этот трюк известен очень немногим. Символ тильда (

    ) позволяет выбрать атрибут, в котором есть значения, разделённые пробелом.

    Теперь мы можем создать атрибут data-info и использовать в нём любые значения, разделяя их пробелами. Для примера укажем, что ссылка у нас внешняя и ведёт на изображение.

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

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    17. X:checked

    Данный псевдокласс выберет только отмеченные элементы пользовательского интерфейса: радиокнопки или чекбоксы. Вот так просто.

    Совместимость

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    18. X:after

    Псевдоклассы before и after сейчас очень популярны. Каждый день разработчики находят новые оригинальные способы их использования. Эти псевдоклассы позволяют нам сгенерировать контент вокруг указанного элемента.

    Многие впервые знакомятся с этими псевдоклассами при изучении хака clear-fix.

    Этот хак использует псевдокласс :after для добавления пробела после элемента. Обязательно занесите этот трюк в свою копилку знаний. Он особенно полезен там, где нельзя использовать overflow: hidden; .

    Ещё один интересный пример использования этих псевдоклассов: советы по созданию теней.

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

    Совместимость

    • IE8+
    • Firefox
    • Chrome
    • Safari
    • Opera

    19. X:hover

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

    Помните, что старые версии Internet Explorer не распознают :hover , если он используется не на ссылках.

    Чаще всего вы будете использовать этот селектор для стилизации ссылок ( border-bottom ) при наведении кусора.

    Совет — border-bottom: 1px solid black; выглядит гораздо лучше чем text-decoration: underline; .

    Совместимость

    • IE6+ (в IE6, :hover может применяться только к ссылкам)
    • Firefox
    • Chrome
    • Safari
    • Opera

    20. X:not(selector)

    Псевдокласс отрицания бывает очень полезен. Представьте, что вам нужно выбрать все тэги div, кроме одного с id равным container . Код выше сделает именно это.

    Или, например, если я хочу выбрать каждый элемент на странице (не делайте так), кроме тэгов p.

    Совместимость

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    21. X::pseudoElement

    Мы можем использовать псевдоэлементы (отделённые символом :: ) для стилизации части элемента: первой строки параграфа или первой буквы. Помните, что псевдоэлементы будут работать только с блоковыми элементами.

    Псевдоэлемент отделяется символом ::

    Выберем первую букву параграфа

    Этот код найдёт все параграфы на странице и выберет из них только первые буквы.

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

    Выберем первую строку параграфа

    Псеводэлемент ::first-line , как вы уже догадались, выберет только первую строку указанного элемента.

    «Для совместимости с уже существующими стилями, браузеры поддерживают старый синтаксис написания псевдоэлементов, задекларированный в спецификациях CSS 1 и 2 ( :first-line, :first-letter, :before и :after). Но для новых псевдоэлементов такой синтаксис не поддерживается.» — Источник

    Совместимость

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    22. X:nth-child(n)

    Помните деньки, когда у нас не было возможности выбрать конкретный элемент в стеке? Псевдокласс nth-child решает эту проблему!

    Помните, что nth-child принимает в качестве параметра число, но отсчёт ведётся не от нуля. Если вам нужен второй по счёту элемент, используйте li:nth-child(2) .

    мы можем использовать этот псевдокласс для выбора нескольких элементов. Например, li:nth-child(4n) позволит нам выбрать каждый четвертый элемент списка.

    Совместимость

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari

    23. X:nth-last-child(n)

    Представьте, что у вас есть огромный список ul , а вам нужно выбрать только третий элемент с конца? Вместо того, чтобы делать li:nth-child(397) , вы можете использовать псевдокласс nth-last-child .

    Этот метод работает аналогично nth-child , Отличие в том, что отсчёт элементов ведётся с конца.

    Совместимость

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

    24. X:nth-of-type(n)

    Бывает, что вместо наследников child вам нужно выбрать элементы по их типу.

    Представьте, что у вас на странице есть пять списков. И вам нужно стилизовать только третий список. И у него нет уникального id . Тут вам и пригодится псевдокласс nth-of-type(n) . В примере выше только у третьего списка будет рамка.

    Совместимость

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari

    25. X:nth-last-of-type(n)

    Да, как в предыдущих примерах, мы можем использовать nth-last-of-type для отсчёта элементов с конца.

    Совместимость

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

    26. X:first-child

    Этот псевдокласс позволит нам выбрать только первый дочерний элемент. Чаще всего он используется для устранения рамок вокруг первого и последнего элемента списка.

    Например, у вас есть какое-то количество строк, каждая из которых имеет border-top и border-bottom . В этом случае первая и последняя строка будут выглядеть не очень красиво.

    Многие дизайнеры используют классы first и last для устранения дублирующихся рамок. Но лучше использовать эти псевдоклассы.

    Совместимость

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    27. X:last-child

    В отличие от first-child , last-child выберет последний дочерний элемент.

    Пример

    Давайте рассмотрим пример использования этих псевдоклассов. Создадим список.

    Markup

    Ничего особенного, просто список.

    Мы задали фон, убрали дефолтные отступы, добавляемые браузером, и добавили верхний и нижний бордер для каждого элемента li .

    Для добавления глубины списку используйте border-bottom для каждого элемента li на пару оттенков темнее, чем цвет фона. Далее добавьте border-top на пару оттенков светлее.

    Есть одна проблема: первый и последний элементы списка выглядят не очень. Давайте исправим это с помощью :first-child и :last-child .

    Совместимость

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Да, IE8 поддерживает :first-child , но не поддерживает :last-child .

    28. X:only-child

    Честно говоря, вряд ли вы будете использовать псеводкласс only-child очень часто. Но он существует, и знание о нём вам точно не повредит.

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

    Давайте рассмотрим такой пример.

    В этом случае текст во втором элементе div останется без изменений. Только текст в первом div станет красным. Если у элемента более одного наследника, псевдокласс only-child не действует.

    Совместимость

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    29. X:only-of-type

    Этот псевдокласс можно использовать довольно оригинальными способами. Он выберет дочерний элемент, только если он единственный у родителя. Например, давайте выберем все списки ul , имеющие только один элемент списка.

    Как мы можем решить эту задачу? Можно использовать ul li , но тогда мы выберем все элементы списка. Единственным решением будет использовать only-of-type .

    Совместимость

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

    30. X:first-of-type

    Псевдокласс first-of-type выбирает первого наследника указанного типа.

    Для лучшего усвоения давайте пройдём тест. Скопируйте этот код в свой текстовый редактор:

    Теперь, не читая дальше, попробуйте выбрать только элемент «List Item 2». Читайте дальше после того, как решите задачу (или сдадитесь).

    Решение 1

    Есть несколько способов решения этой задачи. Начнём с использования first-of-type .

    Этот код говорит «найди первый несортированный список, затем найди его прямого наследника, который является элементом списка. Далее выбери второй элемент».

    Решение 2

    Другой способ — использование соседних селекторов.

    Здесь мы находим список ul , следующий сразу же за тэгом p , а потом находим его последний дочерний элемент.

    Решение 3

    С этими селекторами мы можем делать практически что угодно.

    Здесь мы выбираем первый список ul , затем находим первый элемент списка с конца! :)

    Совместимость

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

    Заключение

    Если вам приходится поддерживать старые браузеры, такие как Internet Explorer 6, то будьте осторожны с использованием новых селекторов. Но пусть это не станет поводом отказаться от их изучения. Этим вы сослужите себе плохую службу. Следите за списком совместимости браузеров. Также вы можете использовать великолепный скрипт IE9.js, написанный Дином Эдвардом. Он добавляет поддержку новых селекторов в IE9.

    Если вы используете в работе библиотеки JavaScript, такие как jQuery, то всегда старайтесь по возможности использовать нативные CSS3 селекторы вместо предлагаемых библиотекой методов. Это ускорит вашу работу, так как вы снимете с библиотеки нагрузку по обработке селекторов, переложив ее на плечи браузера.

    Спасибо за внимание, надеюсь вам пригодятся советы, описанные в этой статье!

    Цукерберг рекомендует:  Обучение - javascript settimer
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих