Изучение HTML5 и CSS3 — Верстка html, css, аудит сайта и SEO бесплатно

Пробел в html коде

Andrej — Sat, 30 Apr 2020 20:34:48 +0000

Очень часто приходится сталкиваться с вопросами людей изучающими верстку html и css, которые звучат примерно так:

как поставить пробел в html?
как вставить пробел в html?
как сделать пробел в html?

Сейчас я постараюсь подробно дать ответ на эти вопросы. Но для начала давайте уясним, что же такое пробел в html верстке и какие виды «пробелов» вообще бывают.

html неразрывный пробел

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

Здесь какой-то там текст и много пробелов

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

…текст…

. Рассмотрим очередной пример:

──────▄▌██▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█*
* ───▄▄██▌██████ФУРА С ДИЗЛАЙКАМИ ПРИЕХАЛА████*
* ▄▄▄▌▐██▌███████████████████████████████*
* ███████▌███▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█*
* ▀▀(@)▀▀▀▀▀▀▀(@)(@)▀▀▀▀▀▀▀▀▀▀▀▀▀▀(@) (@)▀▀▀▀

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

символы

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

, как пробельный отступ на строку вниз

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

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

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

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

Дополнительные пробелы внутри параграфа

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

сейчас покажу пример с использованием пробелов в html и не оставляя параграф за бортом, смотрим на пример:

Немного текста      много пробелов...     снова пару пробелов
       
       перенос строки два раза

Что я сделал, а все довольно просто, обернул параграф

параграф

в тег

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

html пробельный символ

Разберем еще один очень простой способ получить пробел в html при помощи специального символа, который выглядит вот так: . Чтобы его поставить переведите раскладку клавиатуры на английский и зажав Shift нажмите на цифру 7, то есть сочетание Shift+7 вы поставите символ & – амперсанд, а далее печатаем nbsp и вы получаете пробел.

Немного текста много пробелов пробелов

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

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

Запись Пробел в html коде впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

HTML5 и веб формы

Andrej — Thu, 08 Oct 2020 14:35:41 +0000

Сегодня поговорим о новых свойствах и возможностях веб форм в языке разметке HTML5. Посмотрим, как можно их видоизменять и чего нового появилось со времен html4 и css2.

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

Простая форма на html


    
        
        Веб формы
        
    
    
		
  Пожалуйста, заполните форму. Обязательные поля помечены *
  
    Контактная информация
      Имя *
      

	  
      Телефон
      

      Email *
      

  
  
    Персональная информация
      Возраст*
      

      Пол
      

      Перечислите личные качества
      
  

  
    Выберите сферы ваших знаний
     Верстка
     Javascript
     PHP
     jQuery
     Ajax
     Pyton
     SQL
     Design

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

body {
  font-family: 'Palatino Linotype', serif;
  max-width: 600px;
  padding: 0px 30px;
}

h1 {
  margin-bottom: 0px;
}

p {
  margin-top: 0px;
}

fieldset {
  margin-bottom: 15px;
  padding: 10px;
}

legend {
  padding: 0px 3px;
  font-weight: bold;
  font-variant: small-caps;
}

label {
  width: 110px;
  display: inline-block;
  vertical-align: top;
  margin: 6px;
}

em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}
input, textarea {
  width: 249px;
}

textarea {
  height: 100px;
}

select {
  width: 254px;
}

input[type=checkbox] {
  width: 10px;
}

input[type=submit] {
  width: 170px;
  padding: 10px;
}

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

С примера в html вы можете заметить данный атрибут в поле ввода имени и телефона, попробуйте в сменить значение (подсказку) на свою, ощутите, как все просто поддается правке.

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

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

Давайте в стили добавим значение для этого псевдокласса:

input:focus {
  background: #996;
}

А теперь попробуйте активировать поле ввода, заметили фон? Вот то-то и оно ))

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

Я это применю в поле с именем:

Вы уже догадались, что это атрибут autofocus? Кстати у него нет привычной нам записи атрибутов с =»», а просто имя, потому, что имя атрибута равно его значению и мы пишем это сокращенно.

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

Проверка вводимой информации в веб форме

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

Итак предположим, что после с именем не может быть пустым, то есть имеет пометку *, что говорит о его 100% заполнении. Устроить такую проверку можно при помощи специального атрибута required. Давайте добавим этот атрибут в поле имени и телефона и попробуем не вводя данные нажать отправить.

Имя *


Телефон

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

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

Вот таким простым атрибутом мы снимем все проверки.

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

Это делается при помощи простых псевдоклассов:

input:required:invalid {
	border:1px solid red;
}

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

Новые типы ввода в HTML5

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

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

Поддержка новых типов данных основными браузерами
Тип данных	IE	Firefox	Chrome	Safari	Opera	Safari iOS	Android
email	—	4	10	5	10.6	—	—
url	—	4	10	5	10.6	—	—
search (без проверки)
tel (без проверки)
number	—	—	10	5	—	—	—
range	—	—	6	5	11	—	—
datetime, date, month, week, time	—	—	10	—	11	—	—
color	—	—	—	—	11	—	—

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

Тип email — Адреса электронной почты
Тип url — применяется для полей ввода URL-адресов
Тип search — применяется для полей поиска
Тип данных tel — применяется с целью обозначения полей для ввода телефонных номеров
Тип number — предназначен для обычных чисел
Тип range — числовой тип в виде ползунка
Тип date — ввод даты
Тип color — выбор и ввод цвета

Для числовых значений можно применять дополнительные атрибуты min и max, давайте взглянем на примере:

Возраст*



Возраст*

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

Запись HTML5 и веб формы впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

Гибридная верстка и изображения

Andrej — Tue, 14 Jul 2020 08:13:57 +0000

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

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

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

В папке, которую вы скачали выше, есть изображение, которое мы сейчас поставим вместо всего содержимого в блоке aside. И как результат картинка игнорирует наши размеры в процентах и выходит за пределы видимой области. Это и не удивительно она ведь 500px, а не 300, которые были там ранее.

А теперь самое интересное, в наших стилях идем в место, где описаны правила для главного блока с шириной в 90% и добавляем свойство display: table; Тем, кто не знает, что это нам даст я поясню, это свойство даст нам поведение всех блоков нашей страницы, как ячейки таблицы. А значит ячейка начнет принимать ширину самого изображения, ибо ячейки таблицы подстраиваются под свое содержимое.

Но на этом наши манипуляции не заканчиваются, нам нужно остальным блокам задать также свойство display, только со значением table-cell, ну и вот вам готовый код в стилях, каким он выходит после всех манипуляций:

* {
    margin: 0;
    padding: 0;
}
 
body {
    font: 100%/1.5em Arial, Helvetica, sans-serif;
    color: #000;
}
.container {
    background: #e2e2e2;
    width: 90%;
    margin: 0 auto;
    display: table;
}
h2 {
    font-size: 1.875em;
}
section {
    display: table-cell;
}
aside {
    background: #d1d1d1;
    display: table-cell;
}
footer {
    display: table-row;
};

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

Запись Гибридная верстка и изображения впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

Гибкая разметка при верстке

Andrej — Tue, 14 Jul 2020 08:04:06 +0000

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

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

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

Мета тег X-UA-Compatible управляет режимом отображением страниц в браузерах IE8+. Тег должен находиться в секции head страницы перед всеми остальными элементами, за исключением title и других мета-элементов. В противном случае он игнорируется!

Далее идет мета тег вьюпорта:

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

Еще вас скорее всего интересует вот эта часть кода:

Это часть кода специально для IE-8 чтобы он читал все теги с HTML5. Здесь подключаются две библиотеки, которые добавляют возможность в будущем использовать новые элементы и конечно медиа запросы, к которым мы еще придем в последующих занятиях.

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

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

Формулы перерасчета абсолютных величин в относительные

Цель/контекст=результат
24px/16px=1.5em

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

Этапы замены размеров верстки

Наш основной блок, у которого ширина 960px заменяем на относительную ширину в 90%. Что это нам даст, а даст следующее, какой бы размер не был браузера, наш контент будет иметь одинаковые отступы с лева и права по 5%. Это мы задали размер глобальному блоку в котором все содержимое страницы, теперь время посмотреть на блоки с размерами 650px и 300px.

Обращаем внимание на формулу: цель/контекст=результат, цель — это блок с 650px, а контекст, ранее взятые 960px, которые сейчас уже 90% и в результате мы получаем такую запись: 650/960*100=67,70833333333333 — это и есть ширина в процентах нашего блока.

Аналогичным образом заменяем размеры и второму блоку с 300px на процентное соотношение используя все ту же формулу: 300/960*100=31.25%. Как видите ничего сложного, все довольно просто и понятно.

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

Что такое контекст в нашей формуле

Контекстом выступает всегда родитель, в первом случае, это глобальный размер 960px или как сейчас некоторые верстают 1140px, это и есть контекст. Но если мы допустим хотим наш блок, который имел 650px (67,70833333333333) поделить скажем еще на две части, тогда контекстом для етих частей уже будет размер 67,70833333333333% и так везде. Обратно же, это если вы будете переверстывать готовый шаблон под отзывчивый дизайн, а так можно просто написать 50%, и это будет половина от размера родителя.

Вторая формула перерасчета размеров шрифта

Перед обращением непосредственно к самой формуле давайте обратимся к записи в css, а именно к этому участку кода:

body {
    font: 100%/1.5em Arial, Helvetica, sans-serif;
}

Так как 960px признано стандартом ширины фиксированной страницы, так стандартом признано 16px величина шрифта по умолчанию на сайте. И наша формула записи шрифта в стилях говорит, что 100% — это размер шрифта, который равен 16px, а 1.5em — расстояние между строками (line-height) текста в окне браузера. Такую запись вы найдете в 95% всех адаптивных сайтов.

Ну и для закрепления понятия и проверки формулы на практике давайте ее применим на наших заголовках. У нас есть заголовок второго уровня h2, в стилях задайте ему размер в 30px. Применив формулу мы высчитаем его размер в относительной величине: 30px/16px=1,875em. После сохранения никакого изменения вы не увидите ибо 30px это и есть 1,875em, все просто и доступно и не нужно заканчивать академии.

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

Запись Гибкая разметка при верстке впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

История адаптивной верстки

Andrej — Tue, 14 Jul 2020 07:40:02 +0000

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

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

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

Сам адаптивный дизайн можно разделить на три основные составные части:

Отзывчивый дизайн
Mobile First
Progressive Enhancement

Отзывчивый дизайн впервые появился в мире май 2020 года упомянутый неким Итаном Марком в его статье, а позже этот же парень написал книгу с четким названием «Responsive web design», которая не утратила свою актуальность и по сегодняшний день. Суть такого дизайна заключалась в трех техниках способствующих вашему сайту быть отзывчивым:

Fluid grid — отзывчивая сетка макета
Flexible media — гибкие медиа (изображения, видео, флеш вставки и т.д.)
Media queries — медиа запросы

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

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

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

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

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

Запись История адаптивной верстки впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

Что такое веб формы их создание

Andrej — Thu, 09 Jul 2020 14:14:02 +0000

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

Первый элемент, парный тег, который указывает браузеру на дальнейшее использование форм и пишется он вот так:


Элементы формы

Это основной элемент имеющий один обязательный атрибут и несколько не обязательных. Обязательным атрибутом есть:

action=“http://site.ru/handler/” (обязательный)
method=“GET”
enctype=“application/x-www-form-urlencoded”
target=“_blank”

В атрибуте action указываем, куда отправляются данные с нашей формы, другими словами указываем адрес обработчика. Атрибут method указывает каким методом можно отправить форму, их есть два get и post. От методов зависит то, где будут передаваться данные. Атрибут enctype говорит, что за данные отправляются. Ну и target, который говорит, что после отправленной формы откроется новое какое-то окно.

Текстовые поля и кнопки

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

type — задает тип элементу input
name — задает имя элементу input
maxlength — ограничение на количество символов
value — значение по умолчанию

Какие же есть типы в элемента input? Вот их перечисление:

text — текстовое поле
password — поле ввода пароля
submit — кнопка отправки формы
reset — кнопка сброса данных в полях ввода
button — специальная, кастомизированная кнопка для каких либо целей (привязка скриптов)
image — кнопка в виде заданной картинки
checkbox — так называемый флажок
radio — множественный выбор чего-то

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

Тип checkbox

Элемент input с типом checkbox отправляет значение по умолчанию on или off, если галочка стоит — on, если нет — off. Но мы может подставить свое значение и задается оно атрибутом value=»12″ и внутри указываем желаемое значение для режима on. Еще есть один атрибут не обязательный, который по умолчанию делает чекбокс уже отмеченным. Здесь маленький нюанс, если имя атрибута и его значение совпадают, мы можем просто указать одно слово без значения.

Тип radio

Тип радио задает возможность множественного выбора, выглядит он по умолчанию, как чекбокс, только с круглой формой. Но здесь должен быть отмечен один элемент как минимум, то есть сделать так, чтобы ничего не было отмечено не получится. Если мы задаем несколько таких вариантов, то здесь нужно использовать одно имя (name) для всех вариантов, а вот значения (value) разные. Ну и мы уже можем с помощью атрибута checked значение активной любому выбору.

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

 Apple

 Samsung

 HP

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

 Apple

 Samsung

 HP

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

Здесь есть еще один интересный момент, этот текст в теге label можно перемещать внутри таблицы куда угодно и все будет работать.

Списки в таблице

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

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

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

Что делать, если мы хотим вместо одного видимого значения сделать несколько, в таком случае нашему элементу select задаем атрибут size в котором указываем значение 2, 3 или любое нужное вам. По умолчанию браузеры показывают size со значением 1.

Помимо видимых значений для выбора указанных через атрибут size мы может еще задать элементу select атрибут позволяющий выбирать несколько значений одновременно. Но понятно, что для этого нужно и область видимости делать побольше с помощью size. Этот атрибут пишется вот так: multiple=»multiple» и как видим значение равно имени атрибута, а значит можно просто написать сокращенно multiple.

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

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

Другие элементы форм

Элемент textarea

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

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

cols — Указывает количество видимых символов по горизонтали
rows — количество видимых строк

Файловый input

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

Визуальные украшения формы

Есть у меня задача сделать вот так, как указанно в настройка Windows на скриншоте:

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


Выбор производителя:
 Apple

 Samsung

 HP

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

Дополнительные атрибуты форм

disabled=“disabled” — запрещает использовать данный элемент в форме
readonly=“readonly” — присваивается только элементам, которые могут содержать текст, аналог disabled
tabindex=“1” — переопределяет порядок перехода по элементам формы с помощью Tab
accesskey=“q” — присвоение горячих клавиш для определенного элемента формы

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

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

Запись Что такое веб формы их создание впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

Свойства box-sizing, visibility, hidden

Andrej — Tue, 07 Jul 2020 11:34:30 +0000

Хочу еще обратить ваше внимание на такие моменты, которые возникают при работе с margin или padding при работе с вложенными элементами. Итак разберем две ситуации, когда вложенные элементы имеют width: auto и 100%.

Если ширина вложенного элемента задана auto (значение по умолчанию), тогда при заданном margin либо padding сожмется сам вложенный элемент на размер заданные этими свойствами. Но если ширина задана 100%, то произойдет выползание области элемента за родителя, а это весьма неприятная ситуация.

Из-за такой особенности было внедрено еще одно свойство box-sizing: border-box | content-box (значение по умолчанию).

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

Свойства visibility и display

Итак, в продолжение занятия 6, сегодня рассмотрим очень интересные свойства, которые частенько используются при верстке и облегчают нам жизнь. Давайте создадим 5 блочных элементов, указав им фон и размеры, чтобы визуально мы их могли увидеть в окне браузера. Так как это блочные элементы, они выстроятся друг под друга, давайте второму зададим свойство и значение visibility: hidden, а четвертому display: none, смотрим на результат в окне браузера.

Итак свойство visibility со значением hidden прячет элемент, но держит его место, не сдвигает выше последующие элементы. А вот свойство display со значением none убирает все, точнее он не показывает ни содержимого ни самого места, где оно было.

У свойства visibility усть всего два свойства visible | hidden, первое по умолчанию и никак не влияет на отображение элементов.

У свойства display есть вот такие значения: none | block | inline | inline-block | inline-table и мы сейчас о них поговорим.

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

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

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

Запись Свойства box-sizing, visibility, hidden впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

Свойства margin, padding, border

Andrej — Thu, 25 Jun 2020 11:25:37 +0000

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

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

Границы элементов

Разберем значение границы области любого с элементов на странице, которое задается свойством border и должно в себе содержать три значения:

величина — px или %
тип — none | solid | dotted | dashed | double | groove | ridge | inset | outset
цвет — любой цвет

Все это записывается одной строкой вот такого вида border: 1px solid black;здесь мы указали рамку вокруг элемента в 1 пиксель, задали ей тип сплошной линии и черный цвет.

С размером и цветом все понятно, давайте разберем значения типов нашей рамки:

none — нет типа ( по умолчанию)
solid — сплошная линия
dotted — точечная линия
dashed — пунктирная линия
double — двойная линия
groove — двухцветная с изгибом
ridge — аналогично предыдущей с инвертированием
inset — две стороны темные, две темные
outset — как предыдущий только меняются стороны

Мы указывали всему элементу рамку, когда писали свойство border, но можно задавать рамку какой-то одной стороне элемента, и пишется это следующим образом:

border-top: 10px solid black;
border-right: 10px dotted green;
border-bottom: 10px groove gold;
border-left: 10px dashed orange;

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

Закругленные края границы элемента

Помимо рамки элементу можно задавать закругленность углам. Можно задавать значения как одному углу, так и всем сразу.

border-top-left-radius: величина | %
border-top-right-radius: величина | %
border-bottom-left-radius: величина | %
border-bottom-right-radius: величина | %

Выше мы задаем значение закругленности всем четырем углам по отдельности, а вот так можно это сделать более сокращенной записью:border-radius: 20px. Помимо такого задания значения можно еще задавать вот так: border-radius: 20px 10px. Но будьте внимательны, первая часть значения (20px) это два угла верхний левый и нижний правый, то есть работает по диагонали, а вот вторая часть значения (10px) это верхний правый и нижний левый.

Также можно одной строкой записать значения для всех четырех сторон вот таким образом: border-radius: 20px 10px 20px 10px, где значения идут с верхней левой стороны и по часовой. Со скругленными углами я думаю мы разобрались, приступим к другим не менее важным свойствам элементов.

Внутренние отступы в элементах страницы

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

padding-top: величина | %
padding-right: величина | %
padding-bottom: величина | %
padding-left: величина | %

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

А теперь проведем небольшой эксперимент, давайте создадим параграф с количеством текста на три строки в браузере и во второй строке по средине любое слово возьмем в span и зададим ему некий id, после этого в стилях пропишем этому span цвет фона, рамку и внутренний отступ в 20px, сохраняемся и смотрим в браузере на результат.

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

Давайте просмотрим второй вариант записи внутреннего отступа для элементов: padding: 20px 10px. Первое число отвечает за вертикаль (верх и низ), а второе за горизонталь (лево и право).

Еще одним значением может быть трех числовая запись: padding: 20px 15px 10px, где первое значение 20px — верх (top), второе значение 15px — лево и право, а третье значение 10px — это низ (bottom).

Ну и последнее значение, которое состоит с четырех частей: padding: 20px 10px 20px 10px, ну и здесь все просто, по часовой стрелке начиная с верху — top, right, bottom, left.

Внешние отступы margin

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

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

Давайте в наших стилях проделаем следующее, зададим вот такое значение: *{margin: 0;}, это указывает нашему браузеру, что каждый элемент не имеет внешних отступов совсем. Посмотрите, что с этого выходит на странице, все как бы слиплось друг с другом.

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

margin-top: величина | % | auto
margin-right: величина | % | auto
margin-bottom: величина | % | auto
margin-left: величина | % | auto

Здесь все понятно, для каждой из сторон мы задаем свое значение отступов. А вот такая запись: margin: 20px задает отступы со всех сторон на одинаковое расстояние. Ну и для напоминания:

margin: 20px 10px — вертикаль — горизонталь
margin: 20px 15px 10px — top горизонталь bottom
margin: 20px 10px 20px 10px — по часовой с верху
margin: 20px auto — по вертикали 20px, а по горизонтали по центру

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

Работа со свойством overtflow

Есть ситуации, в которых содержимое какого-либо фиксированного по ширине и высоте элемента не помещается в нем и тогда происходит вытекание этого содержимого за пределы элемента. В таком случае есть у нас свойство задающее следующие значения: overflow: visible | hidden | scroll | auto. По умолчанию стоит значение visible, что говорит показывай все, даже все то, что не помещается внутри. Значение hidden говорит свойству overflow обрежь все под чистую.

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

Но помимо этого всего можно задавать значения принудительно по осям x и y:

overflow-x: visible | hidden | scroll | auto
overflow-y: visible | hidden | scroll | auto

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

Применение свойства float

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

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

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

Чтобы вам проще было понять принцип этой работы предлагаю следующее. Представьте себе документ в ворде, вся страница — это body, картинка на странице, это зеленый div, а текст на странице — синий. Мы указываем, что текст (содержимое) будет обтекать картинку с права, а она сама прижмется к левой стороне. Теперь мы уже не можем печатать текст над картинкой, нам доступно все что с права и внизу картинки.

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

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

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

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

На изображении выше я привел простой пример, когда находясь в одном родителе три элемента div влияют друг на друга через float. Первому и второму я задал свойство float:left и они выровнялись по левому краю, но третий ушел частично под них и здесь я применил второе свойство clear:both, которое говорит обтекать не справа предыдущий элемент, а начинать под ним, как и заметно на правой части картинки.

Свойство позиционирования position

position: static | relative | absolute | fixed — вот так пишется это свойство и имеет свои четыре значения.

static — идет по умолчанию в данного свойства
relative — относительное смещение с того места, где он был до этого (top, left, right, bottom)
absolute — абсолютное позиционирование относительно родителя, !ноесли он сам(родитель) имеет позиционирование
fixed — позиционирование сугубо с учетом окна браузера и при этом намертво фиксируя свое положение

Relative

Давайте немного поговорим о всем этом деле. Со static все понятно, он и в Африке статик ))), а вот как же работает relative? Здесь нет высшей математики, все довольно таки просто. Когда мы задаем любому элементу position:relative, тогда происходит его позиционирование относительно самого себя при помощи дополнительных свойств (top, left, right, bottom), которые уже указывают расстояние и точку отсчета этого позиционирования.

top: величина | % | auto
right: величина | % | auto
bottom: величина | % | auto
left: величина | % | auto

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

Absolute

Теперь посмотрим на элемент со свойством absolute. Итак любой элемент, к которому применено свойство position:absolute и указаны координаты при помощи все тех же (top, left, right, bottom), перемещается в заданное место.НО!!! это в случае, когда родитель данного элемента имеет тоже любое позиционирование. Если же родитель его не имеет, то координаты начнут свой отсчет от дедушки, если и у него нет позиционирования, то уже у самого body. Другими словами отсчет начнет идти от любого элемента имеющего позиционирование и являющимся каким то прародителем данному элементу. Надеюсь это понятно.

Запись Свойства margin, padding, border впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

Разбор селекторов, псевдоклассы и псевдоелементы

Andrej — Tue, 23 Jun 2020 10:01:55 +0000

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

Группировку селекторов производят чисто из-за удобства, то есть без нее можно обойтись, но иногда она упрощает нам жизнь, вот простой пример группировки:

h1, h2, h3{ background: yellow }
h1 { color: red }
h2 { color: green }
h3 { color: blue }
em, i, cite { background: #CCC }
* { color: #000 }

Значение * обозначает правило для всех элементов страницы, то есть в данном случае любой цвет на странице будет черный.

Псевдоклассы и псевдоэлементы

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

Не посещенная — синия
Посещенная — фиолетовая
Активная — красная

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

a:link { color: blue }
a:active { color: red }
a:visited { color: green }
a:hover { background: yellow }

Здесь такой момент, псевдокласс hover можно применить к любому элементу, к тому же div, p, strong. Но на практике мы применяем только на ссылках. Все выше, это псевдоклассы, но давайте пару моментов с псевдоэлементов рассмотрим.

p:first-letter { color: red }
p:first-line { color: green }
p:after { content: “ The end” }
p.new:before { content: “New. ” }

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

Свойства шрифтов

Свойство font-family задает тип шрифта либо его семейство, а мы с вами знаем, что все шрифты объединяются в семейства характеризующие их вид.

Семейство шрифта

font-family: семейство шрифта | тип шрифта
font-family: Arial, Geneva, sans-serif

Во второй строке указаны два шрифта Arial и Geneva, если их не будет на компьютере пользователя, тогда взять любой шрифт из семейства шрифтов sans-serif.

Размер шрифта

Теперь рассмотрим свойство font-size, которое задает размер шрифта. Можно указать в значении как величину, так и соотношение в процентах. Можно задать в px или em.

Жирность шрифта

Помимо размера шрифта, можно задать ему жирность с помощью свойства font-weight, это свойство имеет следующие значения: normal | bold | bolder | lighter | [100-900]. Укажите вашему любому элементу это свойство и проставьте какое-либо значение из перечисленных выше.

Стиль шрифта

Также шрифту можно задать стиль через свойство font-style, и здесь применимо два значения normal и italic, второе делает его курсивом, как тег i ранее.

Вариант шрифта

Есть еще такое свойство, как вариант шрифта и пишется оно вот так font-variant, ну и имеет два значения, по умолчанию normal, но можно задать и small-caps. Работает следующим образом К примеру есть у нас большая и маленькая буква B b, так вот при small-caps еще одна большая B будет по размерам с маленькую.

Все эти свойства шрифтов можно еще записать одной строкой вот в таком виде: font: style (|) variant (|) weigth (|) size family. То есть пишем свойство font и начинаем перечислять для него значения, последовательность должна быть именно такой, как я написал выше. Значений может быть не 5, а меньше, но два с них обязательны: size и family.

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

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

Выравнивание текста

Мы уже с вами на первых занятиях рассматривали атрибут align для тегов, теперь пришло время рассмотреть его при помощи css. Свойство выравнивания текста задается так text-align и имеет 4 значения, которые вам уже знакомы: left | right | center | justify. Давайте на примере зададим любому с наших абзацев выравнивание по правому краю и посмотрим на результат.

Декорация текста

Свойство декорации текста задается text-decoration и содержит в себе 4 значения:

none — обычный (по умолчанию)
overline — надчеркнутый текст
underline — подчеркнутый текст
line-through — перечеркнутый текст

Попробуйте любой ссылке задать свойство text-decoration со значением none и вы увидите, что у ссылки пропадет подчеркивание. Вот так оно работает. В большинстве случаем данное свойство мы будем применять при работе с ссылками.

Красная строка

Есть в документах, особенно в работе с Word понятие красной строки, это задание отступа с лева на право первой строке в любом абзаце. Ну и в css это свойство также есть и пишется следующим образом text-indent, а значение задается величиной либо процентами.

Трансформация текста

Еще одним замечательным свойством есть text-transform, который имеет четыре значения:

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

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

Буквенное расстояние

Как и в обычном наборе текста, так и в верстке можно задать расстояние между буквами свойством letter-spacing, а значение либо нормальное (normal по умолчанию) либо величина (px).

Но еще можно задать расстояние и между словами с помощью свойства word-spacing, и в нем аналогичные два значения — нормальное состояние и величина.

p{letter-spacing:5px; word-spacing:15px;}

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

Вертикальное выравнивание

Работает по принципу надстрочный и подстрочный индекс. Свойство задается так vertical-align и имеет два значения:

sub — подстрочный индекс
super — надстрочный индекс

Вот пример:


     H2O

     183=5832

Как видите работает на отлично, вот как оно выглядит в браузере:

H2O

183=5832

Межстрочный интервал

Задается свойством line-height и значения имеет следующие: нормально (normal), величина и процентное соотношение. В верстке частенько используется для задания расстояний в определенных участках верстки.

Свойства цвета и фона

Цвет и фон мы с вами уже изучили, эти два свойства задаются colorи background-color и в значениях указываются цвета. О цветах более подробно можно прочесть в интернете, как они строятся по модели RGB, какие цвета можно задать в значением именем цвета и т.д.

Фоновое изображение

Фон при верстке можно задавать любому элементу, начиная с body и до строчного элемента span, свойство это пишется вот так: background-image и либо имеет в значении путь к изображению, либо значение none, то есть без фона. После задания фона, по умолчанию картинка начинает свое повторение с верхнего левого угла и повторяется (дублируется) до тех пор, пока не заполнит все окно браузера.

Позиция картинки

Чтобы задать вот это самое повторение картинки с другого места существует свойство background-position, оно и определяет откуда будет идти это самое повторение. Значений есть несколько: top | bottom | left | right | center | величина | %, как видите можно с низу, с права и даже задать в пикселях откуда начнется повторение.

Повторение фона

Что делать, если нам это повторение не нужно вовсе? Здесь вступает в силу еще одно свойство фоновых изображений, а именно background-repeat, и уже в его значении мы указываем необходимые параметры:

repeat — повтор (по умолчанию)
repeat-x — повтор только по x (горизонтально)
repeat-y — повтор только по y (вертикально)
no-repeat — не повторять

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

Фиксированный фон

Вы уже наверное заметили, что при большой странице документа фон чередуется везде, даже если мы его скролим немного вниз, но этот фон движется вместе с содержимым самой страницы, можно его зафиксировать и здесь вступает в силу еще одно свойство background-attachment, которое имеет два значения: fixed и scroll. Значения и так понятны.

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

body {background: blue url(../images/fon.jpg) fixed;}

Используя свойство background мы можем перечислять в нем все значения доступные свойствам, которые мы только что рассмотрели, при этом в отличие от свойства шрифта, здесь не важна последовательность и количество. Вы помните, что в третьем занятии мы к этому свойству писали лишь фон!

Применение css в списках

Мы с вами уже создавали списки нумерованные, маркированные и вложенные, а теперь поговорим о стилях, которые можно применять к этим спискам. Первый стиль можно применять как к нумерованному, так и к маркированному, это свойство пишется вот так: list-style-type, а в значении мы пишем как раз то, что задавали в атрибутах ранее при создании списка.

То есть для маркированного списка (ul) мы можем задать четыре значения для свойства list-style-type:

none — нет марок в списке
disc — кружочки
circle — пустые кружочки
square — квадратики

А для нумерованного списка в таком же свойстве list-style-type имеются следующие значения:

none — нет цифр в списке
decimal — значение по умолчанию
lower-alpha — латинские буквы нижнего регистра
upper-alpha — латинские буквы верхнего регистра
lower-roman — римские маленькие цифры
upper-roman — римские большие цифры

Разберем еще несколько свойств, которые относятся к спискам: list-style-position: outside | inside Значение outside идет по умолчанию, но можно задать еще значение inside. На что же это влияет, а влияет это как раз на отношение символов, которые рядом со списком. Чтобы понять это на практике, давайте зададим нашим

какой-то цвет, а потом для ul укажем свойство list-style-position.

li{background: red;}
ul{list-style-position: inside;}

И сохранив посмотрите на результат.

Очень интересным моментом есть то, что вместо вот этих всех кружочков, квадратиков можно указать свое изображение с помощью свойства list-style-image в значении которого и указываем путь к картинке, ну и как без примера:


    Главная
    О нас
    Сервис
    Контакты

пример работы такой вставки можно наблюдать у меня в блоге во всех списках))). Как и в шрифтах и изображениях можно использовать сокращенное написание, так и в списках есть такая возможность и выглядит эта запись вот так: list-style: none inside url(‘point.gif’). Свойство list-style, и три значения: тип, позиция и изображение маркировки.

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

Запись Разбор селекторов, псевдоклассы и псевдоелементы впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.

Каскадные таблицы стилей css

Andrej — Wed, 17 Jun 2020 08:44:07 +0000

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

Основные понятия css

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

Набор деклараций принято называть правилами. Чтобы было проще понять принцип работы со стилями рассмотрим два простые и очень часто используемые свойства. Итак работать будем со свойством цвета текста и цвета фона, а именно свойство — color и свойство — background.

Когда мы выбрали свойства для применения стал открытым вопрос, куда и где и как применить эти цвета? Правила применяются к селекторам, такое интересное слово)))

Селектор это часть CSS-правила, которая определяет элемент или элементы, к которым будет применён блок объявлений (стиль), содержащий форматирующие свойства.

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

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

Псевдо-элементы - это виртуальные элементы...

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

На практике рекомендую использовать этот вариант только в случае большой надобности. Ибо самим правильным использованием будет последний способ. А сейчас перейдем ко второму способу применения стилей к документу.

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

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

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

Как и в html в css есть комментарии и имеют они следующий вид:

/*p{ color: orange; background: black;}
    h2{ color: white; background: black;}
    h3{ color: red; background: green;}
*/

То есть начинаются они с /* и заканчиваются */.

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

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

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

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

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

Наследование в стилях

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

Первая строка
    Вторая строка
        Третья строка

Вот так это будет выглядеть в браузере:

Первая строка

Вторая строка

Третья строка

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

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

Единицы измерения

Относительные

Основные единицы измерения в css это:

px — пиксели
% — проценты
em — размеры шрифта (по умолчанию em = ширине букве m текущего шрифта)
ex — размеры шрифта (высота буквы ‘x’ используемого шрифта)

Абсолютные

cm — сантиметры
mm — миллиметры
in (2.54 cm) — дюймы
pt (1/72 in) — пункты
pc (12 pt) — пики

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

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

Указание цвета при помощи css есть несколько вариантов. Во первых много цветов имеют свои прямые названия, то есть указываем в значении свойства color соответствующее название и получаем цвет.

Шестнадцатеричная система

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

Каждый набор двух символов представляет номер от 0 до 255. Так первые два символа представляют красный (red) цвет, следующие два — зеленый (green) и последние два — синий (blue). В этом шестнадцатеричный код очень похож на RGB с тем отличием, что тут каждый цвет задан в шестнадцатеричной системе счисления вместо десятичной.

Здесь используются для указания цифры от 0 до 9 и латинские цифры a, b, c, d, e, f. Более детально о цветах и их строении можно прочесть в интернете, в данном курсе я лишь поверхностно называю применяемые цвета.

В формате RGB

rgb(0, 240, 125) — указание в точных числах в модели rgb
rgb(0%, 80%, 25%) — указание в процентном соотношение каждого из трех цветов.

Знакомство с селекторами

Вот в этом примере кода мы видим селекторы тегов p и h2, другими словами это набор правил примененных к определенным тегам html страницы:

p{ color: orange; background: black;}
h2{ color: white; background: black;}

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

Класс задается атрибутом для тега, вот пример задания класса тегу p и тегу h2.

А вот так он пишется в таблице стилей:

.par{color: green; background: blue;}

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

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

А теперь посмотрим, как задать стиль этому id в таблице стилей:

#psevdo{ text-align: center;}

Это селектор id, то есть есть селектор тега, селектор класса, а это селектор id.

Разберем еще такой вариант применения: к примеру есть у нас 4 параграфа и два абзаца, все они объединены классом standart:

Заголовок второго уровня №1

Первый абзац

Второй абзац

Заголовок второго уровня №1

Первый абзац

Второй абзац

И к примеру этому классу задан фон серый.

.standart{background: #bfbfbf;}

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

.standart{background: #bfbfbf;}
h2.standart{color: green;}

То есть указываем, что всем элементам h2 с классом .standart присвоить зеленый цвет текста. Заметьте это не распространяется на параграфы, они так и остались черного цвета.

И последний селектор, который я рассмотрю, это контекстный селектор. Задает применение определенного правила к элементу вложенному в другой элемент. Ну и как же без примера:

EM находится в DIV

Мы видим, что в блочном элементе div находятся два строчных элемента em и strong. К элементу em применим правило:

div em { color: gold }

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

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

Запись Каскадные таблицы стилей css впервые появилась Верстка html, css, аудит сайта и SEO бесплатно.