15kb CSS — это все, что вам понадобится


Содержание материала:

О normalize.css

30 октября 2015

Это перевод статьи Николаса Галахера — «About normalize.css».

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

В настоящее время normalize.css используется в Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и во многих других фреймворках, инструментах и сайтах.

Обзор

Normalize.css является альтернативой CSS Reset. Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер, @necolas и Джонатан Нил, @jon_neal.

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

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

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

Нормализовать или сбрасывать?

Стоит понимать более подробно, в чём отличие normalize.css от традиционного reset.css.

Normalize.css сохраняет полезные настройки по умолчанию

Reset.css накладывает однородный визуальный стиль, выравнивая стили по умолчанию почти для всех элементов. В отличие от этого, normalize.css сохраняет многие полезные стили браузеров по умолчанию. Это значит, что не требуется повторно объявлять стили для всех стандартных элементов типографики.

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

Normalize.css исправляет популярные ошибки

Он исправляет основные баги на мобильных и десктопных устройствах, которые не затрагивает reset.css. Это включает в себя параметры отображения элементов HTML5, исправление font-size для предварительно отформатированного текста, отображение SVG в IE9, и многие другие баги, связанные с отображаемым в разных браузерах и операционных системах.

Например, вот как normalize.css делает HTML5-элемент формы с типом search кроссбраузерным и стилизованным.

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

Normalize.css не мешает вашим инструментам отладки

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

Частый вид окна инструментов разработчика браузера при использовании reset.css

Такая проблема не возникает с normalize.css из-за целенаправленных стилей и умеренного использования множественных селекторов в наборе правил.

Normalize.css модульный

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

Normalize.css имеет подробную документацию

Код normalize.css основан на детальном кроссбраузерном методичном тестировании. Подробно документированный файл вы можете найти на GitHub. Это значит, что вы можете узнать, что делает каждая строка кода, зачем она добавлена, какие различия существуют между браузерами. Также вы легко можете провести собственные тесты.

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

Как использовать normalize.css

Сперва установите или скачайте normalize.css с GitHub. Есть два способа как можно его использовать.

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

Второй способ: используйте normalize.css нетронутым и, основываясь на нём, переопределяйте стили в своём CSS при необходимости.

Заключение

Normalize.css значительно отличается от reset.css. Стоит попробовать его, чтобы увидеть, соответствует ли он вашему подходу и предпочтениям в разработке.

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

Заключение. Рекомендации по CSS

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

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

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

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

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

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:

По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :

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

Группирование стилей

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

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

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

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

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

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

Вы можете придумать другой удобный для себя вариант оформления комментариев, главное, следите за тем, чтобы комментарий начинался с символов /* и заканчивался символами */ , и между ними не было такой же комбинации символов (во избежание ошибок).

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

Теперь, когда веб-страница будет загружаться, браузер загрузит файл styles.css , который, в свою очередь, скажет браузеру загрузить три остальные таблицы стилей.

Препроцессоры CSS

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

Среди преимуществ препроцессоров стоит выделить:

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

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

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

Самые распространенные препроцессоры

, а на другой — тег

Существуют и другие модели организации кода: BEM, SMACSS, Atomic CSS и т. д. У каждого из этих подходов есть свои преимущества и недостатки. Какой из них выбрать — решать вам как разработчику, опираясь на собственный опыт и предпочтения. Кроме того, ничто не мешает вам выработать свой способ организации CSS. Быть может, именно придуманный вами вариант позволит веб-разработке подняться на новый уровень!

Завершение

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

Знаю основы HTML CSS, но верстать не получается. Как преодолеть баръер?

«Ты в начале крив, косой,
а потом уж Лев Толстой».

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

«Боже, я никогда не научусь верстать как они 🙁 . »
«Блин эти ребята так круто делают, видимо у меня нет дара. »
«Наверно это не мое, лучше пойду я отсюда. »

КОНКРЕТНО О ПРАКТИКЕ НОВИЧКА

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

Не нужно сразу пытаться сверстать весь сайт, научись верстать отдельные кусочки. Уверен, ты каждый день сидишь в VK. Поставь себе цель — Сверстать страницу регистрации VK например за три дня. Сегодня например сверстай шапку (без перфекционизма). Начни с малого. Со временем одной левой сможешь верстать то, что сейчас тебе кажется тяжелым. Да будет не так, да многое из головы вылетит. Не беда, гугл всему голова. У любого профи есть самый главный Шаолиньский скилл — «Мастерство великого гугления». Не все его постигают в начале пути, но многие все равно придут к нему однажды.

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

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

Топ-пост этого месяца:  Платформа Яндекс.Видео полностью переходит на HTTPS

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

Очередной блог фрилансера

коротко и полезно о веб-разработке

HTML 5 и CSS3: Техники, которые мы скоро будем использовать

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

Что мы собираемся создавать

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

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

HTML 5

HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.

Основная структура

Прежде чем мы создадим разметку страницы, нужно представить общую структуру:

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

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

  • В HTML 5, есть только один doctype . Он объявляется в начале страницы через . Он просто сообщает браузеру, как интерпретировать HTML-документ.
  • Новый тэг header , является контейнером для вступительных элементов, таких как заголовок или логотип. Он также может содержать оглавление или поисковую форму. Каждый заголовок обычно содержит теги заголовков от

. В данном случае заголовок используется только для представления страницы, немного позднее мы добавим его в различные секции страницы.
  • Тэг nav используется для содержания навигационных элементов, таких как основная навигация сайта или более специализированная навигация, как ссылки на следующую/предыдущую страницы.
  • aside – используется для обертывания содержимого, связанного с основным контентом страницы, которое всегда находится на одном месте. В данном случае мы используем его для сайдбара.
  • Тэг section используется для обозначения секции документа. Он может содержать все виды разметки, и множество секций могут быть вложены друг в друга.
  • Тэг footer должен содержать дополнительную информацию об основном контенте, такую как информацию об авторе, копирайты, ссылки на похожие документы и тому подобное.
  • Вместо того чтобы использовать тэг

    Разметка для Навигации

    Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav .

    Разметка для Вступления

    Мы уже описали новую секцию документа, используя тег section . Теперь просто добавим немного контента.

    Мы добавили ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Мы используем тэг header , для заключения элемента h2 . Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.

    Разметка Основного контента

    Наш контент содержит три секции: запись, комментарии и форму отправки комментариев. Используя наши знания о новой структуре тэгов в HTML 5, сделать разметку будет очень легко .

    Разметка для Записи


    Посмотрите разметку, и я расскажу о новых элементах ниже.

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

    Элемент header , используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

    Год, затем тире (знак минус)

    1. Месяц, затем тире
    2. Дата
    3. Прописная T, для определения того, что мы собираемся указывать местное время
    4. Местное время в формате hh:mm:ss
    5. Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

    Разметка для Комментариев

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

    Разметка для Формы Комментирования

    В HTML 5 был представлен ряд усовершенствования для форм. Вам больше не нужно заботиться о валидации необходимых полей на клиентской стороне. Браузер все сделает за вас.

    Появилось два новых типа input-ов, email и url . Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required , пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

    Разметка Сайдбара и Подвала

    Разметка сайдбара и подвала очень простая. Несколько секций, с некоторым контентом, внутри соответствующих тэгов aside и footer .

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

    Стилизация с CSS 3

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

    Основные настройки

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

    Сначала мы, простым правилом, обнуляем значения свойств margin — и padding -.

    Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

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

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

    Стилизация Навигации

    Обязательно обратите внимание, что ширина у body задана 940 px , и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

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

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

    Стилизация Предисловия

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

    Мы использовали два новых свойства. Первое, это background — size , которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

    Второе новое свойство это – border — radius , которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22 px , для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

    К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Background — size поддерживается в последней версии Safari , Opera и Konqueror . Border — radius поддерживается в последней версии Safari и Firefox .

    После того как мы указали свойство background — color , можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background — size , таких как Firefox . Теперь нам нужно стилизовать заголовок и текст.

    Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS 3, для секции # intro .

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

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

    Стилизация Контента и Сайдбара

    Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float , но в CSS 3 это можно сделать с помощью таблиц!

    «Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS 3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div , чтобы сгруппировать секции, более логичным образом.

    Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside . С CSS 3 это очень легко:

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

    Стилизация Записи

    Стилизация заголовка записи вполне тривиальна, поэтому я пропущу ее и перейду к интересной части: многоколоночная раскладка.

    Множественные колонки

    Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS 3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div , для работы с текущими браузерами.

    Теперь мы можем добавить два простых свойства.

    Нам нужно создать 2 колонки с расстоянием 22 px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column — span , и написать всего лишь:

    Конечно, свойства column — count и column — gap поддерживаются только некоторыми браузерами, Safari и Firefox . Нам, пока что, придется использовать специальные расширения браузеров.

    Box-shadow

    Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS 3 и свойство box — shadow .

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

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

    Полосатые Комментарии

    Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript , затем прогон их в цикле и подсветка всех четных элементов. CSS 3 предоставляет псевдо-класс « nth — child », который делает это до смешного легко, без использования JavaScript . Мы используем его для полосатой раскраски комментариев.

    Таинственное значение «2 n +1», на самом деле очень простое, если вы понимаете что это значит:

    2 n – выбор каждого второго элемента списка. Если вы напишете 3 n , будет выбран каждый третий элемент, 4 n – четвертый, и так далее.

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

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

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

    Стилизация Формы отправки комментариев, Подвала и Сайдбара

    Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS 3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border — radius , для добавления закругленных углов различным секциям.

    Финальный Дизайн

    Смотрите результат нашей работы, со всеми стилями.

    Заключение

    Когда HTML 5 и CSS 3 однажды начнут поддерживать все браузеры, жизнь разработчика веб-сайтов станет гораздо проще. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого), терять значительное количество времени на написание JavaScript -кода, для масштабирования фоновых изображений, или полосатой раскраски таблиц.

    Рассказать друзьям

    Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

    «Вам понадобится новое приложение чтобы открыть этот ms-windows-store»

    Сведения о вопросе

    Ответы (8) 

    Этот ответ помог 3 польз.

    Это помогло устранить вашу проблему?

    К сожалению, это не помогло.

    Великолепно! Спасибо, что пометили это как ответ.

    Насколько Вы удовлетворены этим ответом?

    Благодарим за отзыв, он поможет улучшить наш сайт.

    Насколько Вы удовлетворены этим ответом?

    Благодарим за отзыв.

    Это помогло устранить вашу проблему?

    К сожалению, это не помогло.

    Великолепно! Спасибо, что пометили это как ответ.

    Насколько Вы удовлетворены этим ответом?

    Благодарим за отзыв, он поможет улучшить наш сайт.

    Насколько Вы удовлетворены этим ответом?

    Благодарим за отзыв.

    У меня Pro. По Домашней ничего не скажу.

    Ждём ответы других пользователей !

    Этот ответ помог 1 пользователю

    Это помогло устранить вашу проблему?

    К сожалению, это не помогло.

    Великолепно! Спасибо, что пометили это как ответ.

    Насколько Вы удовлетворены этим ответом?

    Благодарим за отзыв, он поможет улучшить наш сайт.

    Насколько Вы удовлетворены этим ответом?

    Благодарим за отзыв.

    Проверьте, что на вашей системе стоят правильное время, часовой пояс и местоположение.

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

    Попробуйте запустить следующие средства устранения неполадок:

    Центр обновлений Windows и приложения (оба только работают на Windows 10).

    Откройте командную строку от имени администратора и введите WSReset.exe

    Этот ответ помог 2 польз.

    Это помогло устранить вашу проблему?

    К сожалению, это не помогло.

    Великолепно! Спасибо, что пометили это как ответ.

    Насколько Вы удовлетворены этим ответом?

    Благодарим за отзыв, он поможет улучшить наш сайт.

    Немного о 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 в комплексе друг с другом – это отлично прокачивает ваши навыки.

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

    Урок 39 Основа языка CSS: это должен знать каждый блоггер

    CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык, позволяющий управлять внешним видом блога. Язык не так сложен для изучения, но мне хватает мизерных знаний по CSS. Изучение основы CSS позволит Вам вполне уверенно “владеть” дизайном Вашего блога.

    За внешний вид блога на WordPress отвечает файл style.css, находящийся в папке темы. И, как Вы, наверное, поняли, если захотите поменять шрифт или, к примеру, цвет фона нужно открыть style.css текстовым редактором Notepad++, найти нужную строку, изменить данные и сохранить. Результатом будет изменение внешнего вида блога.

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

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

    Теория по CSS

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

    Шрифт

    font-size — размер шрифта (font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)

    font-family – шрифт для элемента (font-family: имя_шрифта)

    font-weight – толщина шрифта (font-weight: bold или normal и т. п.)

    font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)

    font – объединение всех свойств для шрифта (font: стиль_шрифта (необязательно) размер семейство)

    Размер

    width – ширина элемента (width: значение в пикселях, процентах и т.п.)

    height – высота элемента (аналогично width)

    max-width – максимальная ширина элемента (по аналогии)

    min-width – минимальная ширина элемента (так же как и width)

    max-height – максимальная высота элемента;

    min-height – минимальная высота;

    Свойства текста

    text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д.)

    vertical-align – вертикальное выравнивание;

    line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д.) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:

    color – цвет текста (color: цвет). Цвета могут задавать по-разному:

    1. используя название (red, green, white и т.д.);
    2. по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки – #

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

    letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):

    text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)

    background – фон страницы (background: [background-attachment || background-color || background-image || background-position || background-repeat], ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):

    Выше приведен пример, где задан цвет фона, затем идет путь к фоновому изображению и по вертикали.

    background-position – стартовая позиция фона страницы (background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение]):

    background-color – цвет фона (background-color: цвет);

    background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)

    background-image – изображение фона (background-image: url(путь к файлу)):

    background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y )

    Позиции

    float — определение выравнивания объекта (float: left | right)

    Выше приведен пример обтекания по правому краю.

    visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):

    Границы

    border – рамка (граница) элемента (толщина стиль цвет_рамки):

    • solid – сплошная рамка
    • dotted – точечная
    • dashed – пунктирная

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

    border-top – верхняя рамка

    border-right – правая рамка

    border-bottom – нижняя рамка

    border-left – левая рамка

    Отступы

    margin – величина отступа (сверху, справа, снизу и слева соответственно);

    margin-top – верхний отступ;

    margin-right – правый отступ;

    margin-bottom – нижний отступ;

    margin-left – левый отступ;

    padding – свойства поля (сверху, справа, снизу и слева соответственно);

    padding-top – верхнее поле

    padding-right – правое поле

    padding-bottom – нижнее поле

    padding-left – левое поле

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

    :hover – стиль объекта при наведении мышкой (элемент:hover < . >)

    :visited – стиль посещенной ссылки (A:visited < . >)

    Более подробно изучить язык CSS Вы можете на htmlbook.ru

    Практика по CSS

    Итак, что же делать, если Вы вдруг решили поработать со шрифтом блога? Я предпочитаю делать следующее:

    1. Открываю блог, используя Mozilla Firefox и внутри нее подгружаю FireBug
    2. Нажимаю на стрелочку и выбираю объект на блоге (подробнее как это делать я рассказывал в предыдущем уроке)
    3. В правой части FireBug ищу код, который отвечает за шрифт (напомню это font-family):
    4. Как видите, в моем случае по умолчанию стоит шрифт Georgia. Честно, мне он не нравится. Пожалуй, я поставлю Tahoma. Для этого я просто дописываю слово Tahoma как первое слово после font-family:
    5. Размера шрифта я оставил 12px. Изменения в Firefox видны сразу, если меня все это устраивает, я просто открываю файл style.css нахожу там 14ую строку (в каком файле искать ее и в какой строке я указал стрелкой на рисунке выше). И в этой 14ой строке (вернее до куда она протягивается) дописал шрифт, который мне нужен (т. е. Tahoma):
    6. Сохранил файл и обновил на сервере. В результате теперь в статьях у меня стоит шрифт Tahoma.

    Аналогичным образом Вы можете изменить, что угодно на блоге. Использование дополнения FireBug для Firefox делает редактирование CSS очень удобной. Не нужно 50 раз редактировать style.css, обновлять на сервере и смотреть нравится ли так.

    Поэтому для редактирования CSS, сначала смотрите изменения в Firebug, только потом изменяете в style.css и обновляете на сервере. Таким образом, Вы сэкономите кучу времени.

    Мелкие изменения, которые я совершил на демонстрируемом блоге (если Вы активный читатель уроков WordPress, Вы знаете адрес того блога):

    1. Поменял шрифт в статьях с Georgia на Tahoma (как это сделать показал выше);
    2. Изменил цвет наведения на ссылки:
      1 прямоугольник был, и отвечает за цвет ссылки h1..
      2 прямоугольник я добавил: просто скопировал с первого и изменил следующее:
      3 – добавил двоеточие и слово hover, т.е. означает, что поменял стиль ссылки при наведении на него;
      4 – изменил цвет ссылки.

    Пожалуй, все. Будет еще пару уроков по изменению дизайна, по доработке, потом пойдут очень интересные уроки по дальнейшей жизни блога. Извиняюсь за то, что долго не писал, просто, являясь студентом, не находил времени на блог (сами понимаете – запара �� ).

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

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

    Как убрать стили браузера и зачем нужно сбрасывать CSS, файл reset.css

    Современные браузеры содержат свои базовые стили CSS для многих элементов, это можно заметить, открыв консоль разработчика и наведя на любой элемент — в консоли отобразятся его стили, даже если Вы ничего не прописывали. Помечаются они обычно надписью «user agent stylesheet». Это и есть родные стили браузера, которые он применяет к элементам. Зачем нужно их сбрасывать и всегда ли следует это делать?

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

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

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

    Как сбросить стили браузера, а точнее удалить их? Раньше часто можно было увидеть на многих сайтах подключение файлов reset.css, в которых содержались огромные перечисления элементов HTML, для которых перечислялись сбрасывающие свойства. Эти свойства по сути просто обнуляли отступы, дизайн и т.д. Но использование файла reset.css не самый лучший вариант, так как это подключение лишнего файла, а значит и замедление скорости загрузки сайта. Но это не все, на составление таких стилей придется потратить немало времени, а потом может выясниться, что этот файл только мешает и сбивает с толку при верстке.

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

    15kb CSS — это все, что вам понадобится

    Рассмотрим практичный пример с

    Например . Html код:

    Преобразуется на странице в следующее:

    Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов , но и для других. Например, для , и т.д. — для всех тегов, которые поддерживают параметр class.

    Выше разобранный пример можно сделать по-другому (не используя class):

    Результат будет таким же как и предыдущий пример.

    В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style =» color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class =» какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.

    Задание стилей для вложенных тегов
    Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:

    Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом

    Таблица стилей CSS

    Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

    В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:

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

    Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css , а там где нужно его применить писать .

    Плюсы при использовании таблицы стилей

    • Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
    • Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
    • Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.


    Использование стилей html через ID

    Теперь рассмотрим как можно использовать стили через ID . Для начала, необходимо в таблице стилей (назовем её primerid.css ) написать следующее:

    Обратите внимание, что сначала пишется название тега, далее # , далее название ID и потом аргументы стиля.

    Для использования ID, код html страницы должен содержать примерно следующее:

    Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.

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

    Аргументы и свойства в style

    1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.

    Аналогом является: background-color: цвет .

    Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.

    2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.

    3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:

    • repeat-x — повторять фоновое изображение только по горизонтали
    • repeat-y — повторять фоновое изображение только по вертикали
    • no-repeat — не повторять фоновое изображение

    4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:

    • dotted — рамка будет покрыта не сплошной линией, а точками
    • dashed — рамка будет покрыта тире, пробел, тире и т.д.
    • double — двойная рамка
    • groove — рифлёная 3D граница

    Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов

    Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:

    • border-bottom: 1px solid red; — линия будет только снизу
    • border-top: 1px solid red; — линия будет только сверху
    • border-right: 1px solid red; — линия будет только справа
    • border-left: 1px solid red; — линия будет слева

    Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border

    5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.

    6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:

    • Verdana (я пользуюсь этим шрифтом)
    • Times New Roman
    • Arial
    • Courier New
    • Comic Sans MS
    • Georgia
    • Impact

    Более подробно про шрифты и их выбор читайте в статьях:

    7. Свойство font-size: 15px; — задает размер текса, в данном случае 15px. Можете вместо px так же писать другие единицы размерности: em и om .

    8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:

    • bold — полужирное
    • bolder — жирное
    • lighter — светлое
    • normal — обычный

    Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight

    9. Свойство height: 100%; — задает высоту. Можно задавать в %, а можно в пикселях (px). Например: height: 100px .

    10. Свойство padding-top: 5px; — отступ сверху. Возможно задать значение auto . Аналогичный тег: margin-top с разницей, что padding — отступ внутри элемента, а margin — от других элементов.

    11. Свойство padding-right: 4px; — отступ справа. Возможно задать значение auto . Аналогичный тег: margin-right.

    12. Свойство padding-bottom: 5px; — отступ снизу. Возможно задать значение auto . Аналогичный тег: margin-bottom.

    13. Свойство padding-left: 4px; — отступ слева. Возможно задать значение auto . Аналогичный тег: margin-left.

    14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).

    15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:

    • visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины
    • hidden — отображается только область внутри элемента, остальное будет обрезано
    • scroll — всегда добавляются полосы прокрутки
    • auto — полосы прокрутки добавляются только при необходимости

    Более подробно читайте в статье: свойство CSS overflow

    16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:

    • left — по левому краю
    • right — по правому краю
    • center — по центру
    • justify — выравнивание по левому и правому краю
    • auto — автоматически
    • inherit — наследование значения предка

    Более подобно читайте в статье свойство CSS text-align

    17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:

    • left — по левому краю
    • right — по правому краю
    • none — отсутствует
    • inherit — наследование значения предка

    18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height

    19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:

    • normal — обычное значение
    • nowrap — пробелы не учитываются, переносы строк в коде HTML игнорируются
    • pre — текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
    • pre-line — пробелы не учитываются, текст автоматически переносится на следующую строку
    • pre-wrap — сохраняются все пробелы и переносы, автопереход на следующую строку
    • inherit — наследование значения предка

    Более подробно читайте в статье: свойство CSS white-space

    20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:

    • block — элемент показывается как блочный
    • inline — элемент отображается как встроенный
    • inline-block — создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
    • inline-table — элемент является таблицей
    • list-item — элемент выводится как блочный и добавляется маркер списка
    • none — временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
    • run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста
    • table — элемент является блочной таблицей
    • table-caption — задает заголовок таблицы подробно
    • table-cell — элемент представляет собой ячейку таблицы
    • table-column — назначает элемент колонкой таблицы
    • table-column-group — элемент является группой одной или более колонок таблицы
    • table-footer-group — используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
    • table-header-group — элемент предназначен для хранения одной или нескольких строк ячеек
    • table-row — элемент отображается как строка таблицы
    • table-row-group — создает структурный блок, состоящий из нескольких строк таблицы

    Более подробно читайте в статье: свойство CSS display

    21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:

    • blink — мигающий текст
    • line-through — перечеркнутый текст
    • overline — верхнее подчеркивание текста
    • underline — нижние подчеркивание текста
    • none — выводит обычный текст
    • inherit — наследуется у предка

    Более подробно читайте в статье: свойство CSS text-decoration

    22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.

    • capitalize — первый символ каждого слова в предложении будет заглавным
    • lowercase — перевод всего текста в нижний регистр
    • uppercase — перевод всего текста в верхний регистр
    • none — не менять ничего
    • inherit — наследование предка

    Более подробно читайте в статье: свойство CSS text-transform

    23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing

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

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

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

    Подборка самых популярных WordPress плагинов для любого сайта.

    Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

    Бесплатно скачать CSS3 наработки с различными эффектами анимации.

    Можно скачать файлы HTML5 с современными возможностями разработки.

    Множество различных free PSD объектов для WEB-дизайна.

    Колекция различных элементов form jQuery для вашего сайта.

    Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

    Коллекция всегда обновляющихся модальных окон на jQuery.

    Разные примеры jQuery validate собраны в одном месте сайта.

    Симпатичные варианты реализации ваших jQuery gallery.

    Большой сборник широкоформатных и адаптивных jQuery slider`ов.

    Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

    Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

    Интересные материалы на тему веб разработок, главные новости.

    Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

    Коллекция потрясающих примеров анимации для вашего сайта.

    Модернизация элементов форм, создание систем автозаполнения

    Плагины для выбора и настройки даты и времени в формах

    Предзагрузчики, анимация загрузки, перлоадеры и т.д.

    Компоненты, содержащие в себе реализацию параллакс-эффекта.

    Создание вкладок, оформление списков в удобную навигацию.

    Все, что касается таблиц с данными: фильтр, сортировка и т.д.

    Наработки SVG-графики и наложение на нее анимации. Просто красиво.

    Отрисовка элементов на веб-странице с помощью html5 canvas.

    Примеры элементов, которые реагируют при наведении на них.

    Плагины для фото и видео галерей, способные приблежать контент.

    Кнопки. Создание красивы и незабываемых кнопок для сайта.

    Все, что касается сортировки данных на странице. Плагины html5.

    Выборка данных. Множество примеров jQuery select.

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

    Дерево элементов. Построение множественных списков на странице.

    Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

    HTML 6 и CSS 4 — будущее веб-программирования

    Разработчики веб-приложений уже сейчас могут опробовать преимущества шестой версии HTML и возможности четвёртой версии CSS. Чем это станет для веб-программирования и какие перспективы откроет?

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

    HTML 6: перспектива создания одностраничных приложений без скриптов

    Оговоримся сразу, что как таковой «даты выхода HTML 6» никогда не будет в абсолютном понимании. Многие сейчас задаются вопросом: HTML 6 когда уже будет доступна? Инструменты для работы уже имеются: садись пиши! Но вот только кто это оценит сейчас и будет ли это целесообразно в настоящее время? Думаю, что нет. Даже если ВЫ готовы перейти на стандарт гипертекстовой разметки шестого поколения сию минуту, то БРАУЗЕРЫ не готовы. Да, топовые представители интернет-обозревателей уже сделали кое-какие шаги навстречу новым технологиям, но этого не достаточно. Об этом по порядку.

    Шестая версия HTML так же значительно отличается от пятой, как пятая — от четвёртой. Она стала ещё более унифицированной, обрела ещё больше черт сходства с XML и может стать идеальным инструментом для создания веб-приложений в ближайшем будущем.

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

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

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

    CSS 4: упрощение работы с псевдоэлементами

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

    Так, присоединённые элементы теперь можно выбрать с помощью селектора отношений, используя конструкцию вида: A /ATTR/ B. Таким образом уточняется, соответствует ли один элемент другому по ID. С помощью конструкции вида A! > B можно выбирать родительский элемент через обращение к дочернему, например при наведении указателя на дочерний элемент. Что касается табличных селекторов, то с ними разработчики веб-приложений уже знакомы по третьей версии, но там эти конструкции были достаточно громоздкими. Теперь же управлять столбцами и вообще работать с таблицами стало намного проще.

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

    Топ-пост этого месяца:  Урок 15. Фреймворк Bootstrap 4. Кастомизация Bootstrap
    Добавить комментарий
    25 мая 2010