Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 7154 сообщений
Cообщения с меткой

css - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

Дайджест свежих материалов из мира фронтенда за последнюю неделю №225 (22 — 28 августа 2016)

Воскресенье, 28 Августа 2016 г. 22:06 (ссылка)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда





















Веб-разработка
CSS
Javascript
Браузеры
Новости и занимательное


Веб-разработка



CSS





JavaScript





Браузеры





Новости и занимательное





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





Дайджест за прошлую неделю.

Материал подготовили dersmoll и alekskorovin.
Original source: habrahabr.ru.

https://habrahabr.ru/post/308698/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Из песочницы] 15 ошибок или советов HTML и CSS

Воскресенье, 28 Августа 2016 г. 17:19 (ссылка)

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.



1. W3C Validator



Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:




  • не закрыт тег;

  • не рекомендованные символы в ссылках;

  • используется не рекомендованный тег;

  • не указан обязательный атрибут;

  • и другое.



2. Вёрстка в формате UTF-8



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



Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).



Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:






3. Одинаковые id у нескольких элементов



Значение атрибута id в HTML-коде не должно повторяться.












4. Спрайты



Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.



Пример спрайта



image



Пример на JSFiddle



Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.



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



5. Много селекторов



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



/* не рекомендуется, большая вложенность */
.page .item .title a {}

/* можно сократить */
.page .item a {}


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



Если есть возможность, то выборку рекомендуется сокращать до одного селектора:



/* рекомендуется */
.form-submit a {}

/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}


6. Стили в HTML



HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.




Ошибка в коде




Ошибка в коде




7. Неправильное названия классов



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



Текст сообщения




Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс .green и заменять его на .blue.



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




Текст сообщения




Текст сообщения




8. Пиксели в дробных значениях



Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».



p {
/* не правильно */
letter-spacing: 1.5px;

/* правильно */
letter-spacing: .005em;
}


9. Использование классов вместо id



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



#modal a {
color: blue;
}

/* цвет ниже не получится переопределить,
т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
color: #333;
}

/* в этом случае придётся добавить #modal */
#modal .modal-header a {
color: #333;
}


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



10. Меню



Меню должно быть оформлено как список.




Главная Новости О компании







11. Пропущенный alt у картинок



В тегах надо указывать атрибут alt (можно пустой).







Картинка



12. Теги



На странице должен быть только один заголовок в теге

. В основном, в этом теге находится название страницы.



13. Транскрипция



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



/* неправильно */
.tovar {}
.stranica {}
.zapros {}

/* правильно */
.product {}
.page {}
.query {}


14. Clearfix



Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.



Класс .clearfix надо указывать в родительском теге, а не ставить рядом.

















15. HTML — язык программирования



Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.
Original source: habrahabr.ru.

https://habrahabr.ru/post/308680/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Трёхпозиционный checkbox (aka tristate) без скриптов и смс

Четверг, 18 Августа 2016 г. 13:04 (ссылка)

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



Пример элемента на gmail:







Беглое гугление не выдало мне готового решения без JavaScript. Точнее, я нашёл парочку, но они предлагали для изменения состояния кликать в конкретное место на переключателе, что совсем неудобно. Хотя в основном предлагают использовать либо свойство DOM indeterminate у чекбокса, либо написание компонента на скриптах, начиная с jQuery, заканчивая Angular. Но мне как-то не хотелось ради такой простой задачи подключать JS вообще.



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



Как я это реализовал? В основе — обычные радио-инпуты спозиционированые абсолютно в верхний левый угол. А вся магия заключается в изменении z-index в зависимости от текущего выбранного элемента. Кусочек из CSS:

.tristate > input[type="radio"]:checked + input[type="radio"] {
z-index: 10;
}


Иконка и текущий лейбл стилизуется подобными правилами:

.tristate > input[type="radio"]:checked + i + label,
.tristate > input[type="radio"]:checked + i + label + label {
display: none;
}

.tristate-checkbox > input[type="radio"]:checked + input[type="radio"] + i {
/* ... */
}


Осталось всё немного застилизовать, и получаем два симпатичных UI-компонента, как на картинке к посту:



Демо на CodePen



Работоспособность проверял в FF, Chrome, IE9+.
Original source: habrahabr.ru.

https://habrahabr.ru/post/308034/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
CssNet

Читы для CSS мультихак unihsck для v34

Среда, 17 Августа 2016 г. 21:29 (ссылка)
cssnet.ru/load/chity_dlja_c...44-1-0-291


Мульти чит UniHacK для 34 версии игры Counter Snrike Source. В чите много функций и настроек, также Aim для css.

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[recovery mode] CSS наших дней

Вторник, 16 Августа 2016 г. 06:29 (ссылка)

Лучшие практики стилизации элементов сейчас можно выразить следующими тезисами:




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

  2. Используйте пространства имён, чтобы минимизировать вероятность конфликтов правил относящихся к разным элементам. Это приводит к длинным именам, но избавляет от кучи проблем в будущем.



Итак, какие возможности для привязки стилей к элементам у нас есть сейчас? У любого элемента есть следующие характеристики:




  1. Имя элемента

  2. Идентификатор

  3. Набор классов

  4. Набор атрибутов

  5. Набор свойств



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



Имя элемента





Write HTML
1 hour


Write CSS
2 hours


Write JS
10 hours



my-task-list {
display: flex;
flex-direction: column;
}

my-task-card {
display: inline-flex;
margin: .5rem;
padding: .5rem;
border: 2px solid gray;
border-radius: .5rem;
}

my-task-card-title {
margin: .5rem;
font-weight: bolder;
flex: 1 1 auto;
}

my-task-card-estimate {
margin: .5rem;
font-weight: lighter;
}


http://liveweave.com/XjrwY5



Как видим, код CSS получился довольно простым, но длинные имена тегов весьма перегружают HTML. Кроме того, имена элементов отлично подходят для указания имени блока, но совершенно не позволяют добавлять элементу модификаторов (например, чтобы как-то выделить завершённые или важные задачи). Но самая главная проблема кастомизированных имён элементов в том, что иногда имя элемента должно быть строго определённым. Например, элемент video для вставки видео на страницу, или элемент a для создания гиперссылки.



Данный способ стилизации почти не используется ввиду упомянутых ограничений. Лишь новички и энтузиасты от web components практикуют эту технику.



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





#my-task-list {
display: flex;
flex-direction: column;
}

#my-task-card {
display: inline-flex;
margin: .5rem;
padding: .5rem;
border: 2px solid gray;
border-radius: .5rem;
text-decoration: inherit;
color: inherit;
}

#my-task-card-title {
margin: .5rem;
font-weight: bolder;
flex: 1 1 auto;
}

#my-task-card-estimate {
margin: .5rem;
font-weight: lighter;
}


http://liveweave.com/ccrFOf



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



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



Классы





.my-task-list {
display: flex;
flex-direction: column;
}

.my-task-card {
display: inline-flex;
margin: .5rem;
padding: .5rem;
border: 2px solid gray;
border-radius: .5rem;
text-decoration: inherit;
color: inherit;
}

.my-task-card_important {
border-color: red;
}

.my-task-card_completed {
opacity: .5;
}

.my-task-card-title {
margin: .5rem;
font-weight: bolder;
flex: 1 1 auto;
}

.my-task-card-estimate {
margin: .5rem;
font-weight: lighter;
}


http://liveweave.com/qZDyzV



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



99% кода сейчас в вебе написано на классах, тем не менее есть решение лучше..



Атрибуты





[my-task-list] {
display: flex;
flex-direction: column;
}

[my-task-card] {
display: inline-flex;
margin: .5rem;
padding: .5rem;
border: 2px solid gray;
border-radius: .5rem;
text-decoration: none;
color: inherit;
}

[my-task-card~=important] {
border-color: red;
}

[my-task-card~=completed] {
opacity: .5;
}

[my-task-card-title] {
margin: .5rem;
font-weight: bolder;
flex: 1 1 auto;
}

[my-task-card-estimate] {
margin: .5rem;
font-weight: lighter;
}


http://liveweave.com/8ddncZ



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



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



Свойства



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



[my-task-card]:hover {
border-color: steelblue;
box-shadow: 0 0 .5rem rgba(0,0,255,.25);
opacity: 1;
}


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



[my-task-card]:not([my-task-card~=current]):hover {
border-color: steelblue;
box-shadow: 0 0 .5rem rgba(0,0,255,.25);
opacity: 1;
}

[my-task-card~=current] {
background: #eee;
border: none;
}


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



[my-task-card~=hover] {
border-color: steelblue;
box-shadow: 0 0 .5rem rgba(0,0,255,.25);
opacity: 1;
}

[my-task-card~=current] {
background: #eee;
border: none;
}






http://liveweave.com/1GJrUM



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



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


Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/307824/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
bo4kov

Бесплатно | Видеокурс - Верстка сайта | Михаил Русаков | Web-программирование, Дизайн сайтов

Суббота, 13 Августа 2016 г. 09:18 (ссылка)
info-kurs.net/product/verstka-sayta/


Бесплатный видеокурс - Верстка сайта - научит вас создавать макет сайта на html и css языках программирования.

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

HTML и CSS для владельцев сайтов. Верстка для не программистов

Четверг, 11 Августа 2016 г. 12:39 (ссылка)

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











Введение в HTML





Основа любого сайта – это HTML код. Чтобы посмотреть, как он выглядит, откройте браузер Chrome (здесь и далее мы будем смотреть все в нем), нажмите правой кнопкой мыши по странице и в контекстном меню выберите пункт «Просмотр кода страницы» (View Page Source).



1



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



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



Это выглядит примерно так:

<объект1>
<объект2> …
<объект3>
<объект4> …






Знаки табуляции здесь только для примера, вложенность объектов зависит только от «открытия» и «закрытия» тега.



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



Так правильно:

  




Так ошибка:

  




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



Основные теги



Каждый тег выполняет определенную команду. Сейчас мы рассмотрим основные из них.



– это служебные теги, обозначающие начало страницы. Они, обычно, не отображают никакой информации в браузере. Они используются для того, чтобы внутри с помощью других тегов указать SEO параметры (keywords, description), заголовок страницы (title), Favicon, подключить файлы CSS и т.п. Если нужно отредактировать указанные параметры, то искать их нужно именно в части .



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



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

Так правильно:



Так ошибка:





– тег для ссылки. Текст (или картинку), который вы хотите сделать ссылкой, нужно разместить после открывающего тега и перед закрывающим .

Например:

Digistr.ru


В браузере отобразится текст «Digistr.ru», который будет ссылкой на страницу «http://digistr.ru/».



– тег заголовка H1. Когда сайт находится в продвижении, требуется, чтобы он был на странице, причем в единичном экземпляре. Это самый главный заголовок страницы. Остальные заголовки могут находится в тегах от h2 до h6. Чем больше номер, тем, стандартно, меньше заголовок.



– это текстовый тег для создания абзаца текста. Каждый абзац размещается между тегами

.




– тег переноса строки. В HTML коде переносы строк игнорируются. Чтобы разделить текст на абзацы используется тег

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

Правильно:

Строка 1

Строка 2.


Ошибка:

Строка 1

Строка 2.




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



Практически все теги (кроме body, head и, желательно, h1) можно использовать в любых количествах на странице. Из этих тегов и создается структура страницы.



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



a, b, br, button, div, em, embed, form, h1-h6, i, img, input, label, ul или ol c li, p, select, small, span, strong, table, tr, td, textarea, u. Всего около 30 штук.




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



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



Перейдем теперь к оформлению.





Введение в CSS



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




В параметре href указывайтся путь к файлу со стилями.



CSS конструкции имеют следующий вид:

Название_объекта_для_оформления {
Параметр_оформления1 : значение параметра ;
Параметр_оформления2 : значение параметра ;
}




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



Тогда CSS код для такого оформления будет следующим:

p { color: red;}




Если мы хотим сделать заголовок

красным, тогда код такой:

h1 {color: red;}




Так мы указываем тег и его оформление. Здесь мы использовали параметр оформления — color, который позволяет редактировать цвет элемента. Как указывать цвет, смотрите здесь. Чаще всего используется шестнадцатеричный код через решетку. Для красного цвета это будет так:

h1 {color: #FF0000;}




Классы и идентификаторы



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



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



Классы указываются так:








Так у нас есть возможность указать отдельное оформление для тегов

, у которых указан класс green-text.



Для этого в CSS нужно указать, какой объект мы оформляем через точку.

.green-text {
color: green;
}




Для идентификаторов используется решетка в CSS и параметр id для тега.

HTML:




CSS:

#logo {
width: 100px;
}




А вот так будет неправильно:








Потому что id должен быть один на странице, а здесь два «green-text». Вот так правильно, так как разных ID может быть много на странице:






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



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


Содержание страницы






Наследование и переопределение CSS стилей



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

Пример:

h1 {color: red;}
h2 {color: green;}
h1 {font-size: 32px;}




В этом случае объекту H1 применится два параметра – color и font-size. Несмотря на то, что они указаны в разных блоках. То есть второй блок дополняет стили первого, или наследует стили первого блока. Так H1 унаследовал свойство red из предыдущего блока.



Но во втором блоке можно и переопределить стили первого блока. Например:

h1 {color: red;}
h2 {color: green;}
h1 {font-size: 32px; color: yellow;}




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



Именно этот принцип позволяет нам «перекрашивать и двигать» дизайн сайта. В конце файла стилей мы можем дописать свои стили, которые переопределят предыдущие стили тега.



Вложенность тегов и объектов в CSS, селекторы



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

, нужно указать больший размер шрифта.



Именно для этого страница, обычно, делится на разные логические части в HTML.

Например, у нас есть такой код:



Абзац 1


Абзац 2








Если мы, как и ранее, укажем такой стиль:

p {font-size: 32px;}




То у нас все элементы будут шрифтом в 32px. Но нам нужно, чтобы только телефон был такого размера.



Для этого в CSS мы можем использовать указание тегов с учетом вложенности. Например:

#header .phone p {font-size: 32px;}




Таким образом, размер шрифта изменится только у тега

, который находится в классе .phone, который, в свою очередь находится в элементе с id равным header. И наоборот, CSS будет искать сначала элемент #header, в нем должен быть элемент .phone, а далее элемент p. Параметры объектов указываются через пробел.

Развернутый пример:

#header .phone p {font-size: 32px;}
#content p {color: silver;}
#footer .copyright {font-size: 10px;}




Здесь телефон будет размером 32px, абзацы в содержании страницы будут серого цвета, а копирайт будет шрифтом в 10px.



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



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

Например:

#content p, #footer .copyright {color: silver;}
#footer .copyright {font-size: 10px;}


В этом случае копирайт будет серого цвета (наследуется из правила выше) и размером шрифта в 10px.



Популярные CSS параметры



margin, border, padding – внешние отступы от объекта, граница объекта и отступы внутри объекта, соответственно.

Выглядит это примерно так.

2

Здесь черной рамкой и оформлением border выделен сам объект, margin – это отступ вокруг него, а padding – внутри него.

HTML:




CSS:

#header {
background: #F8CB9C;
padding: 1px;
}
#logo {
margin: 10px;
padding: 20px 30px;
background: #C1CD89;
border: 3px solid black;
}
#logo img {
border: 1px dashed black;
}






Здесь зеленый отступ создан за счет padding в элементе #logo. Весь элемент залит зеленым цветом, но его содержание начинается не от края за счет padding, получилась рамка для наглядности. У этого же элемента #logo указан margin по 10px со всех сторон, что и растянуло внешний блок, получился второй отступ из-за margin. У самого же элемента #logo черная рамка в 3px создается параметром border.



display – способ отображения элемента. Наиболее популярные значения:


  • none – не отображать элемент. Используется, когда нужно что-то «спрятать/отключить» на странице.

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

  • inline-block – элемент будет такого размера, который требуется для содержимого этого элемента, в строку можно будет расположить несколько таких элементов (зависит от размера строки и элементов). Кроме этого, к такому объекту можно применить свойства margin и padding, аналогично типу block.

  • inline – отображать элемент как строчный. Строчные элементы не имеют отступов. Например, слова в предложении можно считать строчными элементами. Они имеют размер равный своему содержимому, переносятся по строкам и следуют друг за другом. Верхние margin и padding к таким элементам применить нельзя.







position – позиционирование элемента. Имеет следующие популярные варианты:


  • absolute – абсолютное. Отсчет позиции начинается с начала страницы, либо относительно объекта, в который он вложен, если у него свойство position равно relative. Чаще всего используется в связке именно с relative внешним объектом. Например

    HTML:


    Распродажа!




    CSS:

    .product-photo {
    position: relative;
    }
    .label-sale {
    position: absolute;
    top: 0px;
    right: 0px;
    }


    Элемент .label-sale будет позиционироваться относительно .product-photo, так как у него позиционирование relative. Top – указывает, чтобы отсчет велся сверху. 0 – значит, что элемент будет в самом верху. Аналонично «right: 0px» – справа. Так делаются подписи новинок, распродаж и прочего в списках товаров. Каждый label-sale находится справа вверху именно у своего товара.

    Для отчета снизу используется параметр bottom, слева – left. Чаще всего, используется bottom или top, right или left. То есть указывается только один способ отсчета по горизонтали и вертикали (слева или справа и сверху или снизу, соответственно).

  • relative – относительное. Позиционирование элемента относительно того, где он расположен в данный момент. Используется, когда элемент нужно немного «подвинуть».

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







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

background, border, clear, color, display, float, font-family, font-size, font-style, font-weight, height, left, margin, overflow, padding, position, right, text-align, text-decoration, top, width.




Как быстро редактировать стили



В браузере Chrome кликните на любой элемент страницы правой кнопкой мыши, в появившемся меню выберите «Просмотрет код» или «Инспектировать элемент».

Внизу откроется панель, где будет виден HTML код страницы. В нем будет подсвечена строка с элементом, по которому кликали (1).



4



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



Справа будут видны селекторы (2) которые работают для этого элемента и его стили. При прокрутке блока стилей будет видно, какие стили наследует элемент от каких классов.



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



5



Здесь мы переписали свойство color, добавили background и margin-top (который заменил верхнее описание). Это изменило вид кнопки и подняло ее вверх за счет уменьшения внешнего верхнего отступа.



Теперь скопируйте этот блок CSS кода и вставьте его в конец своего .css файла, либо замените на него существующий блок с данным селектором. В нашем случае это блок «.tp-static .btn.btn-border.btn-warning». Его нужно найти в .css файле и заменить на код из браузера. Так наши изменения сохранятся в странице.





Популярные задачи



Поиграться со шрифтами



Чтобы заменить шрифт для всех элементов, нужно найти в .css файлах все свойства font и font-family. В стилях, обычно, через запятую перечисляется несколько шрифтов. Если первый не установлен на компьютере, в котором открывается сайт, то используется второй. Нужно заменить указанные названия шрифтов на свои. Если название шрифта с пробелом, то его нужно указывать в кавычках.

Например, было, CSS:

body, input, textarea, select {font-family: Arial, Verdana, Tahoma;}
.title { font-family: Verdana, Tahoma;}


Стало, CSS:

body, input, textarea, select {font-family: 'Open Sans', sans-serif;}
.title { font-family: 'Open Sans', sans-serif;}




Теперь все шрифты будут Open Sans. Это нестандартный шрифт (не у всех установлен на компьютере). Его и другие шрифты можно найти на fonts.google.com. Справа в фильтре нужно выбрать Languages=Cyrillic для текстов без спецсимволов (для заголовков, например) или Cyrillic Extended для шрифтов, которые используются для произвольных текстов (1). В списке найденных шрифтов выберите нужный и нажмите на плюсик, который станет минусиком (2). Внизу появится панель с выбранным шрифтом (3).



6



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



После выбора шрифта, на вкладке Embed скопируйте код (1) и разместите его в своего сайта перед файлом стилей, в котором он используется (2).



7



Теперь, если шрифт не установлен на компьютере, он загрузится из коллекции шрифтов Google. На странице все будет отображаться корректно.



Это немного подвинуть



Ключевое слово здесь «немного». На 1-2 сантиметра, редко больше. Это делается с помощью CSS параметров margin, padding или position.



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



HTML код такой, допустим:






Главное – это определить селектор и указать ему нужные стили. В нашем случае это «#logo img». Иерархия читается справа налево: картинка img, которая находится в элементе #logo. Наоборот (слева направо) – в блоке #logo должна быть картика img, вот ее и нужно двигать.

Способ 1. Через margin двигаем вправо и вниз.

#logo img {
margin-top: 10px; /* Отступ вверху двигает вниз */
margin-left: 20px; /* Отступ слева двигает вправо */
width: 100px; /* Указываем нужное значение параметру «чуть меньше» */
}




Способ 2. Через padding тоже двигаем вправо и вниз.

Только padding – это внутренний отступ, поэтому нам нужно делать этот отступ для элемента, в котором находится картинка. То есть внутри блока #logo должен быть отступ. Значит наш селектор уже «#logo».

#logo {
padding-top: 10px; /* Верхний отступ в элементе сдвинет все вниз */
padding-left: 20px; /* Отступ слева двигает все вправо */
}


В данном случае нам понадобится еще отдельный блок стилей для изменения размера логотипа:

#logo img {
width: 100px;
}


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



Способ 3. Через position.

Нам понадобится position со значнием relative, так как нужно подвинуть логотип немного относительно текущего его положения.

#logo img {
position: relative;
top: 10px;
left: 20px;
width: 100px;
}




Это поменять местами, тут добавить



Здесь понадобится перемещение HTML кода по странице и, возможно, корректировка стилей. Например, у нас есть такой код.




Код CSS такой для нашей задачи.

.header-center .phone {
font-size: 24px;
}




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






Но при открытии страницы мы увидим, что стиль телефона изменился. Он уже не будет 24 размером шрифта. Это связано с тем, что телефон ищется в блоке «.header-center». Поэтому, нам нужно исправить стили в соответствии с новой версткой, чтобы селектор находил телефон в новом блоке. Для стилей телефона .header-center в CSS заменить на .header-right.

.header-right .phone {
font-size: 24px;
}




Если бы изначальные стили имели такой вид:

.phone {
font-size: 24px;
}


То есть без привязки к внешнему блоку (.header-center), который изменился (на .header-left), тогда правки в стилях не потребуются.



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



Это перекрасить



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

Допустим, у нас есть такой код.




Нам нужно сделать телефон красным, а ссылку заказа звонка – синей. При наведении ссылка должна быть зеленой.

#header .phone {
color: #FF0000;
}

/* Отдельно нужно указать цвет и для ссылки */
#header .phone a.callback {
color: #0000FF;
}
#header .phone a.callback:hover {
color: #00FF00;
}


Здесь через двоеточие указывается так называемый псевдокласс hover. Он добавляется элементу при наведении на него курсора. Подробнее про такие классы здесь.



Это убрать



Аналогично перекраске, нужно определить селектор и скрыть этот элемент через параметр display, например:

#header .cart {
display: none;
}




Исправление ошибок



Все ошибки – в коде. Если верстка явно «поехала», значит где-то некорректный код. Чаще всего бывает два вида «съездов».



1. Когда блоки сильно сместились



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

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













Так видно, что теги все указаны корректно и ровно. А ошибки, обычно, возникают, в таких ситуациях.












Здесь не закрыт первый тег div.













Здесь он закрыт позже, чем нужно. Два блока пересеклись.



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



2. Когда оформление не такое, как ожидается



В этом случае некорректно указан селектор. Если блок был перенесен из другого блока, то убедитесь, что в селекторе не указан старый блок. Как было выше в примере с .header-center .phone и .headre-left .phone. Поскольку стили наследуются, то нужно убедиться, что все селекторы, которые ранее применялись к элементу, применяются и при новой структуре блоков. Для этого используйте инструмент «Инспектировать элемент», который показывает в правой части все применяемые стили элемента.



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





Заключение



Надеемся, данная инструкция поможет вам вносить правки в существующий дизайн сайта самостоятельно,

либо говорить с помощниками на одном языке.

Возможно, эта инструкция станет отправной точкой в изучение HTML и CSS с сайта Htmlbook.



Легкости в редактировании своих сайтов!
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/307590/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Альтернатива для .clearfix

Вторник, 09 Августа 2016 г. 23:33 (ссылка)

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

Для начала рассмотрим, что же происходит с элементами и родительским элементом когда к ним добавляется свойство float: right и left. Рассмотрим небольшой пример:






  • первый

  • второй

  • третий


Какой-то текст



В примере LI имеют свойство float: left; и, как и следовало ожидать, выстраиваются в ряд один за другим и "Какой-то текст" прицепляется следом. Что же, это классическое поведение float. Но давайте посмотрим на родителя, ведь у нас еще есть UL: куда же делся он? Ему мы float не ставили, и по умолчанию это элемент блочный, почему же после него нет переноса?



А случилось следующее: для отображения float-элементов на странице браузер как бы "вырывает их из общего потока", помещает в нужное место, благодаря чему получается обтекание текстом и другими элементами. Именно для отключения обтекания было введено свойство clear, чтобы отключить его с нужной стороны выбранного блока.



Что же произойдет, если для родительского блока поставить clear: both;? Ровным счетом ничего, ведь, как я уже заметил ранее, float родителю мы не ставили и соответственно его ничто не обтекает, его как бы совсем нет, его содержимое было "вырвано из потока".



Давайте рассмотрим как с этим справится .clearfix:






  • первый

  • второй

  • третий


Какой-то текст



С задачей .clearfix справился. Как же он это делает? Он добавляет после выбранного элемента псевдоэлемент, который огибает все float элементы, расположенные ниже. Ниже именно потому, что родительский элемент в потоке пустой, его почти нет, и поэтому :after помещает элемент физически в самое начало, и браузеру приходится просчитывать, когда же все элементы закончат флоатиться, чтобы остановиться.



А вот вариант без использования .clearfix:






  • первый

  • второй

  • третий


Какой-то текст



Свойство display: inline-block; для родительского элемента. Результат такой же, отличие лишь в том, что .clearfix оставляет родительский элемент блочным, либо таким, каким он был определен ранее. Как этим воспользоваться — решайте сами. И для классических решений эти способы практически равноценны.



Но если сам родительский элемент (и элементы внутри него) флоатится, а относительно него нужно расположить другие блоки, может возникнуть ситуация, когда .clearfix использовать нельзя. Родительский элемент будет занимать 0 размер (содержимое и он сам "вырваны из потока"). И чтобы спозиционировать в его окружении другие элементы, нужно будет либо прописывать фиксированную высоту (а она может быть непостоянной), либо "играться" с position: absolute; (что тоже не всегда можно предусмотреть непостоянством контента). В ряде случаев, добавляя в такие "узлы" на сайте дополнительный контент, может понадобиться пересмотреть всю концепцию верстки и переверстывать весь "узел".



Использование свойства display облегчит диагностику верстки средствами разработки (firebug или другими встроенными в браузеры средствами инспектирования), именно тогда, когда .clearfix применить не получается. Ведь если не сделать эту операцию, то родительский элемент найти инспектором не получится (если у него нет отступов), и под его содержимое не будет отведено место при рендэринге страницы (это хорошо заметно в примере 1 при инспектировании). display: inline-block; как раз и поможет избежать этих проблем.



Итого: в вашем распоряжении — более одного способа решения данной задачи. Хорошо, когда есть выбор, пользуйтесь на здоровье!



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


Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/307374/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
kseniasamohina

Важная роль технической оптимизации сайта

Вторник, 09 Августа 2016 г. 15:40 (ссылка)
md-eksperiment.org/post/201...acii-sajta


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

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Распространенные ошибки начинающего HTML-верстальщика

Понедельник, 08 Августа 2016 г. 16:18 (ссылка)

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



Я взял один из своих проектов, в котором мы вместе с вами рассмотрим ошибки и исправим их. Все примеры я выложил на GitHub.



Верхняя панель с меню и поиском



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







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





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



.header{..}
#header{...}
#header .search_block{...}


Я не знаю, в каком состоянии я находился, делая CSS-каскады с использованием класса header и идентификатора header, но как говорится, "Из песни слов не выкинешь". Мало того, что в данном случае создание двух CSS-каскадов бессмысленно, так и использование id в CSS лишает вас возможности переиспользовать CSS, а это в свою очередь, ведет к его дублированию. Поэтому, мы будем использовать только класс header. Изменю наш код следующим образом:














.header{..}
.header .search_block{...}


Но, честно говоря, у меня большие сомнения, что это шапка сайта. Я больше склоняюсь к тому, что это верхняя панель. Поэтому, советую переименовать класс header в top-panel.














.top-panel{..}
.top-panel .search_block{...}


Верстка основного контейнера



Идем дальше по нашей структуре и встречаем div с классом wrapper:









И для полноты картины CSS:



.wrapper{
margin: 0 auto;
width: 940px;
padding: 0 10px;
}


Слово wrapper можно перевести как обертка. Не совсем понятно что она оборачивает? Да и этот блок вообще не обертка. Так что с этим классом я погорячился.



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









Меню



Теперь детальнее разберем меню, которое имеет следующую структуру:





И следующий CSS:



.menu_block{...}
.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}


Первым, что хочется спросить, смотря на этот код, это зачем происходит вложенность тега ul в div? Тег ul, как и тег div относятся к блочным элементам, поэтому в данном случае тег ul не требуется оборачивать тегом div.





Далее, у меня была очень вредная привычка добавлять к классам "пояснения" вроде _block, _list и т.п. Этот метод не помогает вашему коду быть прозрачнее. Это лишняя тавтология, которая бессмысленна и может легко сломаться. Поэтому, изменю код следующим образом:





.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}


Далее, посмотрим на ссылку с классом item. Данное название класса очень обобщенное. Если бы через полгода меня спросили для чего я использую этот класс, то я бы не ответил. Я бы не ответил даже тогда, когда верстал этот макет, если бы не посмотрел в HTML. Запомните, что название классов должно отражать смысл элемента.



Теперь изменим код:





.menu{...}
.menu__item{...}
.menu__link{...}
.menu__link:hover{...}


Вот теперь, если даже в 4 ночи позвонят мне и спросят зачем там класс menu__link, то я отвечу для стилизации ссылок в меню.



Поиск



Теперь рассмотрим поиск со следующей структурой:










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



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



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



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



Теперь изменим HTML.



 





Вроде теперь все хорошо… Но, стоп! У нас теперь абсолютно пустая кнопка! Это очень плохой тон в верстке. Если у нас не загрузится CSS или пользователь будет посещать сайт с использование электронных читалок, то они просто ее не увидят или не услышат. Поэтому нам нужно добавить слово "Найти", которое мы скроем используя свойство text-indent.



 





Теперь перейдем к CSS.



.top-panel .search{...}
.top-panel .search .search_field{...}
.top-panel .search .search_field:focus{...}
.top-panel .search .search_button{...}


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



Первое, мы привыкли с вами читать слева направо, и поэтому думаем, что браузер сначала найдет элемент с классом top-panel, а потом внутри него элемент с классом search. Но, на деле все наоборот! Браузеры читают CSS-селектор справа налево, поэтому, сначала он найдет элементы с классом search, а только потом у них отыщет предков с классом top-panel.



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



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



Для решения этой проблемы нам нужно изменить CSS следующим образом:



.search{...}
.search__field{...}
.search__field:focus{...}
.search__button{...}


Все просто! Теперь мы можем перемещать поиск, поле поиска и даже кнопку куда захотим.



Позиционирование меню и поиска



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



.top-panel{
background-color: #ededed;
min-width: 960px;
height: 40px;
}
.menu{
float: left;
}
.search{
float: right;
}


В чем же здесь ошибка? Из-за того что у элемента с классом top-panel задана высота в 40 пикселей, блоки выглядят как надо. Но, если мы проинспектируем элемент с классом main-container при помощи веб-инспектора, то увидим, что его высота равняется нулю. Это побочный эффект при использовании float-элементов. Что можно сделать с этим? По логике начинающего верстальщика, надо просто задать высоту. И таким образом появится что-то вроде этого:



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.top-panel .main-container{
height: 40px;
}


Основная проблема заключается даже не во вложенности каскада, а в том, что указано фиксированное значение для высоты элемента с классом main-container. В верстке высота блока должна подстраивается под контент элемента. Поэтому ее нельзя фиксировать.



Хорошо, нельзя задавать высоту, но как же исправить эту ситуацию? Есть очень простой и надежный способ. Это добавить элемент со свойством clear и значением both за float-элементами или в конец родительского блока, как в нашем случае.



Для добавления такого элемента воспользуемся псевдоэлементом :after.



.clearfix:after{
content: "";
display: block;
clear: both;
}


И HTML примет следующий вид:














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



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.menu{
float: left;
}
.search{
float: right;
}


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














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



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.top-panel__menu{
float: left;
}
.top-panel__search{
float: right;
}


Стилизация меню



Для стилизации блока я использую следующий CSS:



.top-panel__menu{
float: left;
}
.menu{
width: 620px;
padding: 12px 0;
list-style: none;
}
.menu__item{
display: inline-block;
}
.menu__link{
color: #353743;
font-size: 14px;
margin-right: 15px;
text-decoration: none;
}
.menu__link:hover{
text-decoration: underline;
}


Какие ошибки я здесь вижу.



Во-первых, у menu задан padding сверху и снизу равные в 12 пикселей. Это нужно для того, чтобы сделать отступы от края блока. Вроде все хорошо. Но, если мы посмотрим на верхнюю панель в целом, то увидим, что у поиска тоже есть отступ сверху. Поэтому, общий отступ лучше задавать родительскому блоку. Например, .top-panel. А у меню добавить не хватающие значения, используя уже margin, т.к это уже будет внешний отступ:



.top-panel{
background-color: #ededed;
min-width: 960px;
padding-top: 7px;
padding-bottom: 7px;
}
.top-panel__menu{
float: left;
}
.menu{
width: 620px;
margin-top: 5px;
margin-bottom: 5px;
list-style: none;
}


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



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



Измененный CSS меню теперь выглядит таким образом:



.top-panel{
background-color: #ededed;
min-width: 960px;
padding-top: 7px;
padding-bottom: 7px;
}
.top-panel__menu{
float: left;
}
.menu{
margin-top: 5px;
margin-bottom: 5px;
list-style: none;
}
.menu__item{
display: inline-block;
margin-right: 15px;
}
.menu__link{
color: #353743;
font-size: 14px;
text-decoration: none;
}
.menu__link:hover{
text-decoration: underline;
}


Стилизация поиска



Для стилизации блока я использую следующий CSS:



.top-panel__search{
float: right;
}
.search{
padding: 5px 0;
}
.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;
padding: 0 10px;

font-size: 12px;
transition: width 0.9s 0s;
vertical-align: middle;
}
.search__field:focus{
width: 200px;
outline: none;
}
.search_button{
position: relative;
right: 4px;
top: 1px;

background: none;
vertical-align: middle;
}


Из-за того, что я добавил padding к элементу с классом top-panel, у нас увеличилось расстояние от верхнего края панели до поиска. Поэтому, я удалю его из класса search.



Также, ранее, мы изменили верстку кнопки поиска, поэтому, на данном этапе она отличается от дизайна. Нам нужно задать размеры кнопки и добавить иконку лупы, используя свойство backgorund. Также требуется установить text-indent для скрытия текста:



.search_button{
width: 25px;
height: 25px;

position: relative;
right: 4px;
top: 1px;

text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


Теперь разберем ошибки. Первым, что бросается в глаза — это использование position в кнопке. Если мы отключим position: relative в веб-инспекторе, то увидим расстояние между полем ввода и кнопкой. Оно появилось, потому что и поле ввода, и кнопка являются строчно-блочными элементами.



Для решения это проблемы, я просто задам им свойство float со значением left и уберу position у кнопки:



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
vertical-align: middle;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


Далее, добавлю ранее созданный класс clearfix к элементу с классом search:



 





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



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
vertical-align: middle;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


В обоих классах есть свойство vertical-align, с помощью которого можно выровнять строчно-блочные элементы по вертикальной оси. Но! Сейчас у нас уже блочные элементы! Свойство float влияет на поток элементов и делает их блочными. Это нужно помнить всегда. Поэтому я удалю vertical-align у элементов.



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
}


Заключение



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


Original source: habrahabr.ru.

https://habrahabr.ru/post/307210/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<css - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda