Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

Магия HTML и CSS

CSS
В этом уроке я хочу рассказать вам некоторую тайну Html и CSS. Это такое вот магическое понятие, которое, на самом деле, мой мозг лично перевернуло. Я совершенно по-другому стал относиться к HTML и CSS. Я понял, как это работает и с чем это едят. Думаю, что если я вам сейчас расскажу, то у вас тоже всё более-менее устаканится в голове и станет более понятно, чем до этого.
Текстовый вариант урока

В этом уроке я хочу рассказать вам некоторую тайну Html и CSS. Это такое вот магическое понятие, которое, на самом деле, мой мозг лично перевернуло. Я совершенно по-другому стал относиться к HTML и CSS. Я понял, как это работает и с чем это едят. Думаю, что если я вам сейчас расскажу, то у вас тоже всё более-менее устаканится в голове и станет более понятно, чем до этого.

Для этого мы кликаем правой кнопкой мыши и нажимаем «Посмотреть код».

И немножечко поразбираемся с этим окном. Дело в том, что у любого тега, который заготовлен нашей системой, которую я вам рассказывал, есть заготовленные CSS-свойства. У «html», например,  в стандартных свойствах стоит «display: block».

«display: block» - это блочный элемент, это вот как «div», у «div’ов» тоже стоит «display: block».

«Head» - у него стоит «display: none».

Вы наверняка замечали, что «head» мы никогда не видим на странице, а всё потому что «display» стоит со значением «none». Это значит, что объект невидимый.

Если посмотреть все теги, которые находятся в «head’е», у них стоит «display: none» по стандарту, они не отображаются нам никогда.

У «body» стоит «display: block» и маргин 8px.

То есть, если вы замечали, то, если мы что-то пишем на странице, то у текста появляется такой небольшой отступ. Это из-за того, что есть маргин 8px у «body», поэтому, когда  вы будете создавать страницы, то можете маргин прописать 0, и тогда отступы эти исчезают.

body{
  margin: 0px;
}

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

Посмотрим на тег «b».С ним все просто и понятно.

Но если посмотреть на тег «b», то у него стоит «font-weight bold».

Помните, мы в CSS изучали свойство «font-weight», мы задавали жирность с помощью «bold». Так вот, тег «b» стандартно просто имеет при себе «font-weight: bold». Если мы поставим тег «i», то у него появляется свойство «font-style: italic».

Об этом я вам тоже говорил. У тега «u» есть свойство «text-decoration: underline».

Об этом я вам тоже говорил в CSS. Большинство CSS-свойств, которые я вам говорил, заложены в стандартных свойствах большинства тегов.

Давайте посмотрим более сложный тег – это «ul» и списки. Напишем 1, 2, 3, 4.

  • 1
  • 2
  • 3
  • 4

Посмотрим, какие здесь есть заготовки. Переходим к «ul’у».

У него тут паддиинги и маргины. Сверху и снизу маргины 16px, слева у него паддинг 40px. Видите всякие стандартные и нестандартные свойства, но теме не менее, вот, видите, паддинг 40, маргин 0, маргин 0, тут есть ещё маргин 1em – это и есть как раз-таки 16, то есть сверху снизу. А теперь мы посмотрим на «li-шки».

У них стоит «display: list-item», а у «ul» есть «list-style: disc», эти свойства отвечают за тип маркеров, в данном случае это будут точечки. 

Поэтому, если вы хотите сбросить все свойства «ul-а», для этого мы пишем следующее: 

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

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

Давайте теперь перейдём к «input’у». Для этого мы напишем, собственно говоря, «input» и посмотрим, что же у него есть такого интересного. А у «input’а» есть следующее:

Маргинов у него нет, у него есть «border» в 2px. Вот видите рамочка? Это и есть тот самый «border» в 2px. Есть «padding» в 1px. Есть размер 125 на 13, стандартный.  У него «background-color» «white» стоит.  Так, «text-shadow» здесь не стоит «display» стоит «inline-block», то есть это строчный элемент, а не блочный. Маргины сброшены, «text-align: start». «font-size» 11px стоит изначально.

Поэтому, если мы хотим визуализировать «input», ему нужно все эти стандартные свойства сбрасывать. 

input{
  padding: 0;
  border: none;
  outline: inherit;
  font-size: 16px;
  font-family: MyFont;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
  border-radius: 0px;
}

Я дополнительно сбросил box-shadow и border-radius, дело в том, что этим свойства иногда добавляются инпутам на мобильных устройствах. 

То есть какой вывод мы делаем из всего этого? Если вы ставите какой-то тег и у него есть свойства, которые вы не планировали видеть, как бы они по дизайну не подходят, то просто  открываете его в инспекторе, смотрите, какие у него есть стандартные свойства: «border’ы», «margin’ы», «padding’ы», какие-то ещё штуковины, и просто с помощью CSS сбрасываете их на собственные, которые вам нужны, и, таким образом, используете так, как необходимо.

И давайте уточню ещё один элемент. Получается, что любой тег – это есть просто пустой объект, не зависимо от того, как он называется, просто объект, просто его назвали каким-то образом. И у этих объектов есть заготовки в виде CSS-свойств и каких-то действий. То есть, если мы говорим про «meta», то у него, в зависимости от того, какой атрибут, могут быть разные действия.

Допустим, если «charset: utf-8», то мы задаём кодировку.

У тега «title» есть стандартное действие – брать значение, которое находится внутри и переносить в название вкладки.

У тега «link» есть стандартное действие – это брать файлик, который находится по ссылке и внедрять его в нашу страницу.

У тега «input» стандартное действие – это возможность ввода данных в это поле.

Таким образом, мы можем теперь создавать собственные теги, просто мы их будем прописывать в наших CSS-файлах, а не где-то на уровне ядра. Допустим, мы придумаем тег «bold» и в нём напишем текст.

<bold>Текст</bold>

То есть стандартно это будет просто написан обычный текст. Но мы в CSS прописываем для тега «bold» «font-weight: bold», и, получается, текст становится жирным.

bold{
  font-weight: bold;
}

И, по сути, это аналог нашего тега «b». Всё будет отображаться абсолютно так же с единственной разницей, что мы могли писать всё заранее, допустим придумывать свои названия тегов, писать в CSS-свойства значение, которое он будет нести за собой, или же просто написать тег «b». Результат будет абсолютно точно такой же, но опять же либо мы делаем какие-то действия заранее, либо используем уже заготовленные куски кода, которые делают какие-то заготовленные действия.

Стоит учитывать, что, названия тегов используются при CEO-продвижении, то есть, когда Яндекс, Goggle анализируют вашу страницу, они увидят тег «b» и поймут, что текст жирный, если они увидят тег «bold», они не поймут, что это такое, потому что они «bold» не знают, а «b» знают. Допустим, теги «h1» - «h6» вы можете в принципе написать свои теги. Кстати, давайте посмотрим, какие свойства несет за собой тег «h1».

У него стандартно стоит «display: block», «font-size: 2em», то еть это 32px, есть маргины сверху и снизу по 21.440px. Соответственно, вы можете создать собственный тег «h1», например, назвать его «title1», задать вышеуказанные свойства, и он будет отображаться точно так же, но, если страницу просмотрит Яндекс или Google, они не увидят ваш заголовок. Они будут искать «h1», а его нет, а «title1» они не знают. Поэтому не нужно изгаляться и придумывать собственные теги, но чисто для понимания, как это всё работает, запомните, что есть пустышки – какие-то теги, которые изначально из себя ничего не представляли, но им заранее в систему заложили какие-то стандартные CSS-свойства и стандартные действия, которые они делают. Именно поэтому всё работает так, как работает.

Надеюсь, что это как-то немножечко упростило понимание html и CSS, дало какой-то революционный толчок в дальнейшем продвижении. На этом мы полностью заканчиваем курс по Html и CSS. Теперь мы окончательно утвердились в том, как это всё работает, какие есть теги, какие CSS-свойства, и теперь мы переходим к урокам по вёрстке, по Photoshop’у и начинаем изучать, как сайты верстать, как использовать макеты в Photoshop’е, как открывать эти макеты, как верстать, чтобы дизайнер мог дать какой-то макет, а вы могли бы его сверстать, сделать из картинки готовый рабочий сайт. Об этом мы будем разговаривать в следующих двух курсах.

Предыдущий урок Следующий урок
Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

Политика конфиденциальности   Пользовательское соглашение