Содержание

Часть 1. HTML / Хабр

Вашему внимание предлагается достаточно большой отрывок статьи «Levels of HTML knowledge», написанной Роджером Йоханссеном 30 Мая 2006 года.

Прим. переводчика: Изначально я опубликовал этот пост в виде юмористических выдержек из трех статей, написанных тремя разными авторами и озаглавленных схожим образом: «Уровни владения HTML», «Уровни владения CSS» и «Уровни владения Javascript». Что, конечно же, было довольно глупой затеей. Осознание допущенной ошибки пришло через 5 минут и два минуса к посту и карме. Исправляюсь. Перевод «Уровней владения CSS» ждите завтра.

Уровень 0

Xэ–тэ–мэ–чаго?

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

Типичное высказывание:

Уровень 1

HTML? Это такие штучки для того, чтобы делать текст жырным или курсивом?

Эти люди пользуются Интернетом достаточно давно и догадываются о том, что происходит за кулисами просматриваемого ими в данный момент веб-сайта. При попытке что-либо опубликовать в сети самим они беспомощны без какого-нибудь WYSIWYG-редактора. Это может быть Photoshop, Dreamweaver, Frontpage, или редактор, встроенный в CMS, которой им сказали пользоваться.

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

Уровень 2

Странички, которые я делаю в Macromedia Dreamweaver’е, отлично работают в Internet Explorer’е. Зачем мне вообще смотреть на этот HTML?

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

Разработчики второго уровня так же состоят из программистов, которые предпочитают безопасность Visual Studio или любой другой IDE, которую они используют. Они думают, что HTML — это слишком просто для них, и что их среда разработки достаточно продвинута, чтобы разобраться во все сама. Многие программисты второго уровня являются целевой аудиторией разработчиков CMS.

Уровень 3

Да, да. Я слышал об этих новых тэгах: ul, li и все такое. Но я отлично обхожусь своими любимыми table, img, br.

Многих веб-разработчиков старой школы, которые трудятся в индустрии с конца 90-х годов, можно найти на этом уровне. Вплоть до конца прошлого века эти люди писали HTML вручную, так что они знают все о вложенных таблицах и однопиксельных GIF-ах. С тех пор WYSIWYG-редакторы (такие как GoLive и Dreamweaver) улучшились до такой степени, что разработчики третьего уровня не видят никаких причин знать больше об HTML. Сейчас большая часть их работы, связанной с HTML, выполняется в дизайнерском режиме их редактора, поэтому они предпочли бы потратить свое время на изучение конкретного приложения, нежели вникать в то, что происходит за его кулисами.

Уровень 4

Слышь, а как можно сделать табличку с данными только div’ами и span’ами, не используя table?!

На этом уровне люди начинают сознательно использовать doctype-ы. На первом этапе это почти всегда переходный (transitional) doctype, чаще — XHTML 1.0 Transitional. Все таки XHTML является более поздней спецификацией чем HTML, так что наверное он лучше, правда? Люди на этом уровне являются также большими фанатами XHTML 1.1, наивно полагая, что более старшая версия подразумевает какие-то улучшения.

Услышав от кого-то, что использовать таблицы для разметки нельзя, многие программисты четвертого уровня используют div-ы для воссоздания таблицеподобных типов структуры. Так бывшие повара тег-супов становятся divоманами, которые денно и нощно производят тонны презентационной разметки с незамысловатами именами классов (red, blue, bigRedText и т.д.) и инлайновым CSS (атрибут style).

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

Уровень 5

Интересно, использование какого типа списка будет семантически более корректным в этом отрывке документа?

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

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

Уровень 6

Я считаю спецификации HTML 4.01 и XHTML 2.0 семантически ограниченными. Поэтому я сейчас работаю над собственным языком разметки.

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

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

Читайте продолжение про CSS в следующей части.

10 способов проверить знания HTML/CSS

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

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

Итак, предлагаем вам десять способов протестировать себя на знание HTML и CSS и стать более профессиональным веб-разработчиком.

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

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

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

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

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

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

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

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

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

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

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

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

10 вопросов, на которые должен ответить каждый, кто знает HTML

Скрытые возможности CSS: 10 полезных советов

Начинаем работу с HTML + CSS

Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое
изучение CSS в первый раз.

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

В конце данной статьи Вы создадите HTML файл который будет
выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при
помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и
CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца
обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul>
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h2>My first styled page</h2>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

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

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы
можете изучить Начало работы с HTML. Но сначала пару слов о
структуре нашей HTML страницы.

  • Тэг “ul” — список состоящий из одной ссылки на каждый элемент
    списка. Эта структура послужит нам “навигацией” по нашему сайту
    связывая с нами другие страницы нашего гипотетического сайта .
    Предполагается, что все страницы нашего сайта будут иметь схожее
    или идентичное меню.

  • Элементы “h2” и “p” задают содержимое уникальное каждой
    страницы, в то время как подпись (“address”) снизу снова будет
    повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в
XHTML), можно опускать закрывающие тэги </li> и </p>,
что я и сделал в данном случае, для того чтобы было проще текст.
Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые
    говорит о том, к какой части документа применить правило;

  2. свойство (в нашем примере свойствами являются
    ‘color’ и ‘background-color’), которое указывает что именно мы
    устанавливаем у данного элемента, выбранного селектором;

  3. и значение (‘purple’ и ‘#d8da3d’), которое
    устанавливает значение атрибута.

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

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

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

Теперь браузер показывает страницу к которой мы добавили цвет.

В CSS
можно задавать цвета несколькими способами. Наш пример показывает
два из них: по имени (“purple”) и по шестнадцатиричному коду
(“#d8da3d”). Существует порядка 140 имен цветов и 16
шестнадцатиричных значений. Добавляя прикосновение стиля
объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие
разных элементов на странице. Давайте напишем шрифтом “Georgia”
весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том,
какие шрифты установлены на компьютерах посетителей, мы добавим
альтернативные способы отображения: если Georgia не найдена, то мы
будем использовать Times New Roman или Times, а если и он не
найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы
можем попробовать использовать Geneva, Arial или SunSans-Regular
поскольку они очень похожи по начертанию, ну а если у пользователя
нет таких шрифтов, то браузер может выбрать любой другой шрифт без
засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то
у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки
в нем не работают, потому что наш “сайт” пока что состоит только из
одной страницы, но это неважно в данный момент. Конечно же, на
настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

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

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст
переместился направо а навигация налево

Свойство ‘position: absolute’ говорит что элемент ul расположен
независимо от любого текста который предшествовал или будет
следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают
это расположение. В нашем случае это 2em сверху и 1em от левого
края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего
шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em
будет равняться 24 пунктам. `em` очень полезная единица измерения
в CSS, поскольку может адаптироваться автоматически к шрифту,
используемому браузером. Большинство браузеров имеют возможность
изменять размеры шрифта: вы можете попробовать увеличить или
уменьшить размер и увидеть, что меню будет изменяться в
зависимости от размера шрифта, чего бы не случилось, если бы мы
указали отступ в пикселях

ШАГ 5: украшаем ссылки

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

Мы так же не сказали какими должны быть цвета ссылок, так что
давайте добавим и это свойство: синими будут ссылки которые
пользователь еще не смотрел, пурпурными — те которые он уже
посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

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

В HTML гиперссылки создаются тэгами <a> поэтому для
указания цвета нам надо создать правило в CSS для “a”. Для того,
чтобы различать посещенные и непосещенные ссылки, CSS
предоставляет два “псевдо-класса” (:link и :visited). Они
называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в
нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой
пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню
«Файл» в редакторе , для создания пустого файла. (Если вы
используете TextEdit, не забудьте сделать его текстовым снова,
используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из
HTML в это новое окно. Не копируйте элементы разметки <style>
и </style>. Они принадлежат HTML коду, а не CSS. В новом окне
у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h2 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той
же директории/папке что и файл mypage.html, и сохраните таблицу
стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.

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

Конечный резульат

Следующий шаг — положить оба файла mypage.html и mystyle.css на
ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…)
Как положить файлы на сайт зависит от вашего интернет провайдера.

HTML с CSS | Учебник HTML



CSS — Каскадные Таблицы Стилей.

CSS экономит много времени. Он может управлять макетом нескольких веб страниц одновременно.

Манипуляция Текстом

Цвета,
 Боксы


Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб страницы.

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

Совет: Слово cascading означает, что стиль, примененный к родительскому элементу,
будет также применяться ко всем дочерним элементам внутри родительского элемента.
Таким образом, если вы установите цвет основного текста на «blue», все заголовки,
параграфа и другие текстовые элементы внутри тела также получат тот же цвет (если вы не укажете что-то еще)!


HTML Стили с помощью CSS

CSS — Cascading Style Sheets (Каскадные Таблицы Стилей).

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

CSS экономит много времени. Он может контролировать макет нескольких страниц одновременно.

CSS может быть добавлен к элементам HTML 3 способами:

  • Встроенный — с помощью атрибута style в HTML элементы
  • Внутренний — с помощью элемента <style> в разделе <head>
  • Внешний — с помощью внешнего CSS файла

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

Совет: Вы можете узнать гораздо больше о CSS в CSS Учебнике.


Встроенный CSS

Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента.

Встроенный CSS использует атрибут стиля элемента HTML.

В данном примере задается синий цвет текста элемента <h2>:



Внутренний CSS

Внутренний CSS стиль используется для одной HTML страницы.

Внутренний CSS определяется в разделе <head> HTML страницы,
в элементе <style>:

В следующем примере задается цвет текста всех элементов <h2>
(на этой странице) до синего цвета, а цвет текста всех элементов <p>красный.
Кроме того, страница будет отображаться с помощью фона "powderblue":

Пример

body {background-color: powderblue;}
h2   {color: blue;}
p    {color: red;}

<h2>Это заголовок</h2>
<p>Это параграф.</p>

</body>
</html>

Редактор кода »


Внешний CSS

Внешняя таблица стилей используется для нескольких HTML страниц.

Чтобы использовать внешнюю таблицу стилей, нужно добавить ссылку на файл в разделе <head> HTML страницы:

Внешняя таблица стилей может быть написан в любом текстовом редакторе. Файл не должен содержать HTML код, и должен быть сохранен с расширением .css.

Вот как выглядит внешний файл "styles.css" :

body {
    background-color: powderblue;
}
h2 {
    color: blue;
}
p {
    color: red;
}

Совет: С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб сайта, изменив один файл!


CSS Colors, Fonts и Sizes

Здесь мы продемонстрируем некоторые часто используемые свойства CSS. Вы узнаете о них больше позже.

CSS свойство color определяет цвет текста, который будет использоваться.

CSS свойство font-family определяет семейство шрифтов, который будет использоваться.

CSS свойство font-size определяет размер шрифта, который будет использоваться.

Пример

h2 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}

<h2&gtЭто заголовок</h2>
<p&gtЭто параграф.</p>

</body>
</html>

Редактор кода »


Свойство Border

CSS свойство border определяет границы вокруг элемента HTML:

Совет: Вы можете определить границу почти для всех HTML элементов.


Свойство Padding

CSS свойство padding определяет отступ (пробел) между текстом и рамкой:

Пример

Использование свойств CSS border и padding:

p {
    border: 1px solid powderblue;
    padding: 30px;
}

Редактор кода »


Свойство Margin

CSS свойство margin определяет поля (пространства) вне границы:

Пример

Использование свойств CSS border и margin:

p {
    border: 1px solid powderblue;
    margin: 50px;
}

Редактор кода »


Ссылка на внешний CSS

Внешние таблицы стилей могут указать полный URL адрес или относительный путь к текущей веб странице.

Пример

В этом примере используется полный URL адрес для ссылки на таблицу стилей:

<link rel=»stylesheet» href=»https://schoolsw3.com/html/styles.css»>

Редактор кода »

Пример

Это пример ссылки на таблицу стилей находится в папке HTML на данном веб сайте:

<link rel=»stylesheet» href=»/html/styles.css»>

Редактор кода »

Пример

Это пример ссылки на таблицу стилей находится в одной папке на той же странице:

<link rel=»stylesheet» href=»styles.css»>

Редактор кода »

Подробнее о файлах узнаете в главе HTML Путь к Файлам.


Краткое содержание

  • Используйте HTML атрибут style для определения встроенного стиля
  • Используйте HTML элемент <style> для определения внутреннего CSS
  • Используйте HTML элемент <link> для ссылки на внешний файл CSS
  • Используйте HTML элемент <head> для сохранения <style> и <link> элементов
  • Используйте CSS свойство color для цвета текста
  • Используйте CSS свойство font-family для текста шрифтов
  • Используйте CSS свойство font-size для размера текста
  • Используйте CSS свойство border для границ
  • Используйте CSS свойство padding для пространства внутри границы
  • Используйте CSS свойство margin для пространство снаружы границы

Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.


HTML Упражнения


HTML Стиль тегов

ТегОписание
<style>Определяет информацию о стиле для HTML документа
<link>Определяет связь между документом и внешним ресурсом

Насколько хорошо вы знаете CSS? (+ мини-тест) / Хабр

Отличие между успешным использованием CSS и мучительными попытками справиться с ним, зачастую зависит от мелких деталей. На самом деле, в CSS очень много нюансов. Одна из наиболее часто встречающихся областей, где я часто замечаю такую борьбу — это стилизация макетов. Лично мне нравится изучать CSS-паттерны. Я заметил, что склонен использовать небольшое их количество для решения большинства проблем с макетом. Эта статья про те CSS-паттерны, которые я использую для преодоления проблем в вёрстке. Ситуации будут рассматриваться независимо от используемой CSS-методологии: будь то SMACSS, BEM или даже горячая тема CSS-in-JS, потому что все они сфокусированы на самих CSS-свойствах, а не на архитектуре, организации или стратегии.


Ради забавы, начнем с теста

Мы будем использовать разработанную мною платформу, которая называется Questionable.io и я использовал её для создания теста, к которому перейдем ниже. Не беспокойтесь, никакие персональные данные не собираются, результаты анонимны и это абсолютно бесплатно.

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

Тест состоит из 10 вопросов и должен занять не более 10 минут

От переводчика:

в конце статьи на Хабре добавлен опрос про количество набранных очков в тесте.

ПРОЙТИ ТЕСТ

Примечание: если не хотите тратить время, вот ссылка на вопросы с правильными ответами.

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

Вопрос 1: Блочная модель

Изучение блочной модели должно быть приоритетным в списке любого FrontEnd-разработчика. Может статья «The CSS Box Model» немного и старовата, не стоит недооценивать её ценность и актуальность для современного CSS. Блочная модель является основой почти для каждого вопроса, относящегося к CSS-макетам.

Этот конкретный вопрос проверяет, как узнать ширину с учетом принципов блочной модели. Блок имеет явно заданную ширину через свойство width: 100px, но оказывается, что правила блочной модели по умолчанию, применяют свойства width к слою «content» данного блока. Итоговая ширина (насколько широким блок отрисовывается на странице) является суммой слоёв content, padding и border. Именно по этой причине ответ — 112px.

.box {
  width: 100px; /* Take this */
  height: 50px;
  padding: 5px; /* Plus this x2 for left and right */
  border: 1px solid red; /* Plus this x2 for left and right */
  background-color: red;
  /* = 112px of computed width */
}

Если вы сталкивались с ситуацией, в которой последняя колонка или вкладка в интерфейсе переносится вниз на следующую строку, хотя вы указали для всех width: 20%; и были уверены, что они поместятся в 100% родительского элемента, вероятно, это становилось проблемой. Пять колонок шириной по 20% помещаются в 100%, но если у них дополнительно задан padding и/или border, это увеличит ширину каждой, оставив недостаточно места в текущей строке для последней колонки.

Когда был представлен CSS3, появился новый инструмент под названием box-sizing. Он позволяет нам управлять тем, к какому слою блочной модели мы хотим применять свойство width. Например, мы можем указать box-sizing: border-box. Это означает, что мы хотим, чтобы любые правила width применялись к внешнему слою «border» вместо слоя «content». В вопросе из теста, если бы было применено свойство box-sizing: border-box, итоговая ширина блока составила 100px.

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

Существует целый ряд статей про блочную модель и про то, как использовать свойство box-sizing в качестве сброса, чтобы применить его сразу ко всему проекту. Box Sizing и Inheriting box-sizing Probably Slightly Better Best-Practice — две хорошие статьи с сайта CSS-Tricks, с которыми можно ознакомиться.

Вопрос 2: Границы элемента

Второй тестовый вопрос отчасти можно рассматривать как продолжение первого. Помните, одно дело прочитать: «Блочная модель имеет слои (content, padding, border) и все они влияют на итоговую ширину и высоту элемента», другое дело — уметь распознать проблемы блочной модели в реальной ситуации. Эта конкретная проблема является чем-то вроде классики среди тех, кто уже некоторое время работает с CSS. Она вытекает из того факта, что рамки займут определенное дополнительное пространство и оттолкнут окружающие элементы, поскольку являются частью блочной модели. Добавление рамок во время изменения состояния элемента, такого как :hover, будет значить, что блоки станут больше и тогда оттолкнут идущие следом блоки вниз. Это может раздражать:
Из всех возможных решений, указанных в тестовом вопросе, добавление border: 2px solid transparent к изначальному состоянию (без наведения курсора) является единственным возможным решением проблемы. box-sizing не решает эту проблему, потому что мы явно не задаём высоту. Если бы мы сделали это, рамка стала частью общей высоты элемента и сдвиг не происходил, но это не наш случай.

Существуют другие решения, которые мы не упомянули в вариантах ответа. Один из них — это добавление псевдо-рамки с помощью свойства box-shadow или использование outline вместо border. Каждый из них не будет приводить к смещению, так как не является слоем блочной модели. Вот другая статья на CSS-Tricks, где можно больше почитать про подобные решения.

Примечание:

Помните, что outline не поддерживает border-radius

Вопрос 3: Позиционирование — absolute против fixed

Помимо понимания того, когда использовать каждый из типов и как они отличаются в визуальном представлении, также очень важно знать правила того, как каждый из методов позиционирования привязывается к родительскому элементу с помощью свойств top, right, bottom или left.

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

1) Для абсолютных элементов. Содержащий блок — это ближайший предок, у которого позиционирование не static. Например, когда элемент абсолютно позиционирован, и содержит свойства top, right, bottom или left, они будет позиционироваться относительно любого родителя, который имеет позиционирование absolute, relative, fixed или sticky.
2) Для фиксированных элементов. Содержащий блок — это область просмотра, несмотря на наличие любых родительских элементов с позиционированием, отличным от static. Кроме того, поведение прокрутки отличается от абсолютно позиционированных элементов. Фиксированные элементы остаются «зафиксированными» в области просмотра, отсюда и название.

Многие разработчики думают, что абсолютно позиционированные элементы ищут лишь ближайший родительский элемент с относительным позиционированием position: relative. Это заблуждение стало распространённым просто потому, что position: relative чаще всего указывают в паре с position: absolute, чтобы сделать содержащий блок. Причина, по которой это часто используется в том, что относительное позиционирование родительского блока оставляет его в потоке, что зачастую является предпочтительным. Встречаются ситуации, когда родитель абсолютно позиционированного элемента сам является абсолютно позиционированным. Это совершенно нормальное явление. Если все родители статичные, тогда абсолютно позиционированный элемент будет прикрепляться к области просмотра — но так, чтобы прокручиваться вместе с областью просмотра.

Существует малоизвестное дополнение к правилам, указанным выше: в ситуациях, когда родительский элемент имеет свойство transform (помимо прочих) со значением, отличным от none, он становится содержащим блоком для абсолютно и фиксированно позиционированных элементов. Подтверждение этому можно увидеть в CodePen, где элемент с текстом «Notice!» — это фиксированный элемент, а родитель имеет свойство transform, но только когда на него наведен курсор мыши (в состоянии :hover)

Вопрос 4: Схлопывание margin родительского и дочерних элементов

Это одна из тех CSS мелочей, которая может доставить немало проблем, если вы не знаете, как она работает. Существует концепция, называемая схлопыванием margins и много людей знакомы с проявлением этого, называемым Схлопыванием margins смежных сестринских элементов. Тем не менее, существует и другая форма, называемая Схлопыванием margins родительского и первого/последнего дочернего элемента, которая менее известна. Ниже приведена демонстрация обоих случаев:
Каждый тег параграфа имеет верхний и нижний margin, равный 1em, что стилизуется браузером. Пока это самая легкая часть ситуации. Но почему промежуток между параграфами не 2em (сумма верхнего и нижнего)? Это называется схлопыванием margins смежных сестринских элементов. Margins перекрываются таким образом, что больший из двух margin будет составлять размер разрыва, таким образом, в данном случае разрыв будет равен 1em.

Однако происходит еще кое-что странное. Вы заметили, что верхний margin первого параграфа не создает промежуток между ним и голубым контейнером div? Вместо разрыва, он будто вкладывает margin в родительский div, как если бы div имел верхний margin. Это называется Схлопывание margins родительского и первого/последнего дочерних элементов. Этот тип схлопывания margins не будет происходить при определенных обстоятельствах, если родительскому элементу свойственно следующее:

  • Присутствует верхний/нижний padding больший нуля
  • Присутствует верхний/нижний border больший нуля
  • Задан Блочный контекст форматирования, который может быть создан с помощью overflow: hidden или overflow: auto
  • Задано свойство display: flow-root (плохая поддержка браузерами)

Когда я с удовольствием объясняю людям эту небольшую CSS-деталь и решаю это с помощью padding или border, ответ почти всегда: «А что насчет padding или border, равных 0?». Ну, это не работает, потому что значение должно быть целым положительным числом.

В предыдущем примере, padding размером в 1px позволяет нам переключиться между использованием схлопывание и предотвращением схлопывания margins родителя и дочернего элемента. Промежуток, который отображается между первым/последним параграфом и родительским элементом, это padding размером 1px, но теперь margin считается внутренней частью контейнера, поскольку слой padding создаёт барьер, предотвращающий схлопывание margins.

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

У первого элемента с классом .comment (без класса .moderator) происходит схлопывание margins. Даже без просмотра кода мы можем увидеть, что у элемента с классом .moderator есть рамка, а у элемента без этого класса нет. В этом вопросе фактически было три ответа, которые считались правильными.Каждый из них на самом деле, уже применен в исходнике CodePen, они просто закомментированы.

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

Вопрос 5: Процент от чего?

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

В примере ниже мы можем видеть, что 50% принимают два разных значения в зависимости от контекста. Первый красный блок имеет свойство margin-left: 50%, а второй красный блок использует transform: translateX(50%).

Вопрос 6: Блочная модель наносит новый удар…

Только вы подумали, что мы закончили говорить о блочной модели…
Проблема проявляется из-за того, что мы используем width: 100% для футера и одновременно с этим добавляем padding. Ширина контейнера равняется 500px, что значит, что слой content футера (будучи 100%) также равняется 500px еще до того, как к этому размеру добавятся paddings.

Проблема может быть исправлена одной из двух распространенных техник:

  1. Использовать свойство box-sizing для футера напрямую или через сброс, который упоминался раньше
  2. Удалить у элемента свойство width и вместо него применить свойства left: 0 и right: 0. Это хороший пример одновременного использования свойств left и right. Такой подход позволит избежать проблем блочной модели, потому что свойство width будет использовать своё значение по умолчанию auto, чтобы заполнить любое доступное пространство между padding и borders, когда установлены left: 0 и right:0.

Примечание: одним из вариантов было удаление padding у футера. Технически это исправило бы проблему, потому что слой content был бы 100% и не имел padding или border, чтобы расшириться за пределы ширины контейнера. Но я думаю, это решение является неправильным подходом, потому что мы не должны менять наш интерфейс, чтобы приспособиться к проблемам блочной модели, которые и без этого легко исправляются.

Реальность для меня заключается в том, что у меня всегда выставлено свойство box-sizing: border-box, как часть моего общего сброса стилей. Если вы поступаете так же, скорее всего редко сталкиваетесь с этой проблемой. Но мне все равно нравится приём с одновременной установкой свойств left:0 и right:0, потому что, как показывается время, он более надежен (во всяком случае, судя по моему опыту), чем решение проблем блочной модели, возникающих из-за ширины 100%.

Вопрос 7: Центрирование абсолютных и фиксированных элементов

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

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

Вопрос 8: Центрирование элементов в нормальном потоке

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

.parent { display: flex; }
.child { margin: auto; }

https://codepen.io/bradwestfall/pen/GPNmbM
Примечание: заметьте, что у flex-элементов margin: auto применяется к верху, низу, правой и левой стороне, чтобы центрировать элемент вертикально и горизонтально. Раньше вертикальное центрирование не работало для блочных элементов, поэтому достаточно распространена запись margin: 0 auto;

Вопрос 9: Расчеты с разными единицами измерения

Использование функции calc() прекрасно, когда нужно работать с двумя единицами измерения, которые мы не можем сложить самостоятельно или когда нам нужно сделать дроби более простыми для восприятия. Этот тестовый вопрос предлагает нам выяснить, каким будет результат выражения calc(100% + 1em), отталкиваясь от того факта, что ширина элемента div равна 100px. Это могло немного запутать, потому что на самом деле, не имеет значения, что ширина элемента div равняется 100px. Проценты всегда отталкиваются от ширины родителя, поэтому правильным ответом был: «100% содержащего (родительского) блока плюс 1em».

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

Особенность здесь в том, что мы хотим сделать выпадающее меню, которое может быть использовано вместе с вызывающими его элементами разного размера (в этом случае, два разных размера кнопок). Мы не знаем, какая будет высота элемента, вызывающего это меню, но мы знаем, что top: 100% разместит верхний край выпадающего меню у нижнего края вызывающей кнопки. Если каждое меню должно быть у нижнего края соответствующей кнопки, плюс 0.5em, этого можно добиться с помощью calc(100% + 0.5em). Конечно, мы также могли использовать top: 110%, но эти дополнительные 10% зависели бы от высоты вызывающей кнопки и контейнера.

Вопрос 10: Отрицательные margins

В отличие от положительных margins, которые отталкивают сестринские элементы, отрицательные margins притягивают их ближе друг к другу без смещения сестринских элементов. Этот финальный вопрос теста предлагает два решения, оба из которых технически приводят к устранению двойной рамки в нашей группе кнопок, но я настоятельно предпочитаю технику отрицательного margin, потому что удаление рамок сделало бы более сложным выполнение определенных приёмов, таких как эффект наведения мыши.
Получившийся эффект представляет собой «общую границу», которая отображается между кнопками. На самом деле, кнопки не могут иметь общую границу, поэтому нам нужно использовать приём с отрицательным margin, чтобы одна рамка перекрывала другую. Потом я использую z-index, чтобы устанавливать, какую рамку я хочу поместить выше другой, основываясь на состоянии наведения мыши. Обратите внимание, что z-index полезен здесь даже без использования абсолютного позиционирования, но пришлось задать position: relative. Если бы я использовал технику удаления левой рамки у второй кнопки, этот эффект было бы гораздо сложнее реализовать.

Всё это имеет смысл

Я хочу показать вам еще одно последнее демо, которое использует много приёмов, которые мы обсуждали до этого. Задача — создать плитки, которые расширяются до левого и правого края контейнера с учетом отступов. Под плитками я подразумеваю возможность иметь список блоков, которые переносятся на следующую строку, когда места по ширине не хватает. Наведите на плитки, чтобы увидеть результат:
Препятствием при выполнении этой задачи являются отступы. Без отступов было бы просто получить плитки, прилегающие к левому и правому краю контейнера. Проблема в том, что отступы будут созданы с помощью margins, а когда мы добавляем margins со всех сторон плитки, мы создаем две проблемы:

  1. Наличие трёх плиток с шириной 33.33% в совокупности с margin не смогут поместиться в строке. Хотя box-sizing позволяет нам иметь padding и borders у элемента .tile и умещаться в 33.33%, это не поможет нам в случае с margins — а это значит, что рассчитываемая ширина трёх плиток будет больше 100%, что вынудит последнюю плитку перенестись на следующую строку.
  2. Крайняя левая и правая плитки больше не будут прилегать к краю контейнера.

Первая проблема может быть решена с помощью calc((100% / 3) - 1em). Что значит 33.33% минус левый и правый margins каждой плитки. Схлопывание смежных сестринских элементов здесь происходить не будет, так как оно возможно только у верхнего и нижнего margin. В результате горизонтальное расстояние между двумя плитками — это сумма двух margins (1em). В этом случае схлопывание также не применится к верхним и нижним margins, потому что первая и последняя плитка технически не являются смежными, даже если визуально одна находится под другой.

С помощью приёма с calc(), три плитки могут поместиться в строке, но они все еще не прикасаются к краям контейнера. Для этого мы можем использовать отрицательные margins в размере, равном левому и правому margin каждой плитки. Зеленая точечная линия в примере — это контейнер, где мы применим отрицательные margins, чтобы нарисовать плитки, соответствующих краю окружающего содержимого. Мы можем видеть, как они прилегают к области padding родительского элемента. Это нормально, потому что отрицательные margins не отталкивают окружающие соседние элементы.

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

Существует много способов сделать плитки (и обычно они имеют свои преимущества и недостатки). Например, существует довольно элегантное решение с использованием CSS Grid, над которым рассуждал Хейдон Пикеринг. Данное решение реализуется с использованием техники, которая имитирует запросы к контейнерам (но с помощью магии Grid). В конечном счете, его решение с использованием Grid лучше, чем flexbox, которое я продемонстрировал, но имеет худшую поддержку браузерами.

Резюме

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

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

  • Box Alignment Cheatsheet — отличный материал с визуальными элементами, которые подчеркивают различные свойства, которые влияют на то, как элементы выравниваются либо сами по себе, либо относительно других элементов
  • Jen Simmons Labs — множество полезных публикаций, демо и экспериментов с использованием современных методов разметки.

Учебник CSS

CSS — это язык, который мы используем для стилизации HTML-документа.

CSS описывает, как должны отображаться элементы HTML.

Это руководство научит вас CSS от начального до продвинутого.

Начните изучать CSS прямо сейчас »


Примеры в каждой главе

Это руководство по CSS содержит сотни примеров CSS.

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

Пример CSS

тело
{
цвет фона: голубой;
}

h2
{
цвет белый;
выравнивание текста: центр;
}

п.
{

семейство шрифтов: вердана;
размер шрифта: 20 пикселей;
}

Попробуй сам »

Щелкните кнопку «Попробуйте сами», чтобы увидеть, как это работает.


Примеры CSS

Учитесь на более чем 300 примерах! С помощью нашего редактора вы можете редактировать CSS и нажимать на
кнопку, чтобы просмотреть результат.

Перейти к примерам CSS!


Использование меню

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

Если у вас большой экран, меню всегда будет слева.

Если у вас маленький экран, откройте меню, щелкнув значок верхнего меню ☰.


Шаблоны CSS

Мы создали для вас несколько адаптивных шаблонов W3.CSS.

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

бесплатных шаблонов CSS!



CSS-упражнения и викторина

Проверьте свои навыки CSS в W3Schools!

Начните упражнения по CSS!

Начать викторину по CSS!


Ссылки CSS

На W3Schools вы найдете полные ссылки CSS всех свойств и селекторов с синтаксисом, примерами, поддержкой браузера и многим другим.


Экзамен CSS — Получите свой диплом!

Интернет-сертификация W3Schools

Идеальное решение для профессионалов, которым необходимо совмещать работу, семью и карьеру.

Уже выдано более 25 000 сертификатов!

Получите сертификат »

Сертификат HTML документирует ваши знания HTML.

Сертификат CSS свидетельствует о ваших знаниях в области CSS.

Сертификат JavaScript документирует ваши знания JavaScript и HTML DOM.

Сертификат Python документирует ваши знания Python.

Сертификат jQuery подтверждает ваши знания о jQuery.

Сертификат SQL документирует ваши знания SQL.

Сертификат PHP подтверждает ваши знания PHP и MySQL.

Сертификат XML документирует ваши знания XML, XML DOM и XSLT.

Сертификат Bootstrap документирует ваши знания о среде Bootstrap.

.

Руководство по стилям HTML и правила кодирования


Последовательный, чистый и аккуратный HTML-код помогает другим людям читать и понимать ваш код.

Вот несколько рекомендаций и советов по созданию хорошего HTML-кода.


Всегда объявлять тип документа

Всегда указывайте тип документа как первую строку в вашем документе.

Правильный тип документа для HTML:


Использовать имена элементов в нижнем регистре

HTML позволяет смешивать прописные и строчные буквы в именах элементов.

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

  • Смешение прописных и строчных имен выглядит плохо
  • Разработчики обычно используют строчные имена
  • Строчные буквы выглядят чище
  • В нижнем регистре писать легче

Хорошо:

Это абзац.

Плохо:

<ТЕЛО>

Это абзац.




Закрыть все элементы HTML

В HTML нет необходимости закрывать все элементы (например, элемент

).

Однако мы настоятельно рекомендуем закрыть все элементы HTML, например:

Хорошо:

Это абзац.

Это абзац.

Плохо:

Это абзац.

Это абзац.


Использовать имена атрибутов в нижнем регистре

HTML позволяет смешивать прописные и строчные буквы в именах атрибутов.

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

  • Смешение прописных и строчных имен выглядит плохо
  • Разработчики обычно используют строчные имена
  • Средство для чистки строчных букв
  • В нижнем регистре писать легче

Хорошо:

Посетите наше руководство по HTML

Плохо:

Посетите наше руководство по HTML


Всегда указывать значения атрибутов

HTML допускает значения атрибутов без кавычек.

Однако мы рекомендуем указывать значения атрибутов в кавычках, потому что:

  • Разработчики обычно указывают значения атрибутов
  • Цитированные значения легче читать
  • НЕОБХОДИМО использовать кавычки, если значение содержит пробелы

Хорошо:

<таблица >

Плохо:

Очень плохо:

Это не сработает, потому что значение содержит пробелы:


Всегда указывать высоту, ширину и высоту для изображений

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

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

Хорошо:

HTML5

Плохо:


Пробелы и знаки равенства

HTML допускает пробелы вокруг знаков равенства.Но без пробела легче читать и
группирует объекты лучше вместе.

Хорошо:

Плохо:

<ссылка rel = "stylesheet" href = "styles.css">


Избегайте длинных строк кода

При использовании редактора HTML НЕ удобно прокручивать вправо и влево для чтения кода HTML.

Старайтесь избегать слишком длинных строк кода.


Пустые строки и отступы

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

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

Для удобства чтения добавьте два пробела отступа. Не используйте клавишу табуляции.

Хорошо:

Знаменитые города

Токио

Токио — столица Японии,
центр Большого Токио,
и самый
густонаселенный мегаполис в мире.
Это
резиденция правительства Японии и Императорский дворец,
и дом японской императорской семьи.

Плохо:

Знаменитые города

Токио

Токио — столица Японии,
центр Большого Токио,
и самый
густонаселенный мегаполис в мире.
Это
резиденция правительства Японии и Императорский дворец,
и дом японской императорской семьи.

Хорошая таблица Пример:

Имя Описание
A Описание A
B Описание Б

Хороший список Пример:

  • Лондон
  • Париж
  • Токио


Никогда не пропускайте элемент </span></h3><p> Элемент <code><title> </code> обязателен в HTML.</p><p> Содержание заголовка страницы очень важно для поисковой оптимизации.<br /> (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка<br /> при включении страниц в результаты поиска.</p><p> Элемент <code><title> </code>:</p><ul><li> определяет заголовок на панели инструментов браузера</li><li> предоставляет заголовок для страницы, когда она добавляется в избранное</li><li> отображает заголовок страницы в результатах поисковой системы</li></ul><p> Итак, постарайтесь сделать заголовок максимально точным и содержательным:</p><p><title> HTML<br /> Руководство по стилю и правила кодирования


Пропуск и?

HTML-страница будет проверяться без и
теги:

Пример

Заголовок страницы

Это заголовок

Это абзац.

Попробуй сам »

Однако мы настоятельно рекомендуем всегда добавлять и
тегов!

Отсутствие может привести к ошибкам в старых браузерах.

Без и
может также привести к сбою программного обеспечения DOM и XML.


Отсутствует?

Тег HTML также может
опускаться.

Браузеры добавят все элементы перед к значению по умолчанию
элемент.

Пример

Заголовок страницы

Это заголовок

Это абзац.


Попробуй сам »

Однако мы рекомендуем использовать тег .


Закрыть пустые элементы HTML?

В HTML закрывать пустые элементы необязательно.

Разрешено:

<мета charset = "utf-8">

Также разрешено:

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


Добавить атрибут lang

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

Пример

Заголовок страницы

Это
заголовок

Это абзац.


Попробуй сам »


Метаданные

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




Заголовок страницы


Настройка области просмотра

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

Вы должны включить следующий элемент на все свои веб-страницы:

Это дает браузеру инструкции о том, как
для управления размерами и масштабированием страницы.

Часть width = device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

Часть initial-scale = 1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :

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


Комментарии HTML

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

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

Это пример длинного комментария.Это
пример длинного комментария.
Это
пример длинного комментария. Это пример с длинным комментарием.
->

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


Использование таблиц стилей

Используйте простой синтаксис для связи с таблицами стилей (
тип
атрибут не нужен):

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

п.intro {font-family: Verdana; font-size: 16em;}

Длинные правила CSS должны быть записаны в несколько строк:

корпус {
background-color: светло-серый;
font-family: «Arial»
Черный «, Helvetica, без засечек;
размер шрифта: 16em;
цвет:
черный;
}

  • Разместите открывающую скобу на той же линии, что и селектор
  • Используйте один пробел перед открывающей скобкой
  • Используйте два пробела для отступа
  • Используйте точку с запятой после каждой пары «свойство-значение», включая последний
  • Используйте кавычки вокруг значений, только если значение содержит пробелы
  • Поместите закрывающую скобку на новую строку без пробелов в начале

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (
тип
атрибут не нужен):