Блочные и строчные тэги

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,…,<h6>, <hr>,<ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.

Для блочных элементов характерны следующие особенности.

• Блоки располагаются по вертикали друг под другом.
• На прилегающих сторонах элементов действует эффект схлопывания отступов.
• Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>.
• По ширине блочные элементы занимают всё допустимое пространство.
• Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
• Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
• На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
• Текст по умолчанию выравнивается по левому краю.

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

Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др., а также элементы, у которых свойство displayустановлено как inline. В основном они используются для изменения вида текста или его логического выделения.

По аналогии с блочными элементами перечислю их характерные особенности.

• Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
• Эффект схлопывания отступов не действует.
• Свойства, связанные с размерами (width, height) не применимы.
• Ширина равна содержимому плюс значения отступов, полей и границ.
• Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
• Можно выравнивать по вертикали с помощью свойства vertical-align.

Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

Каскадная таблица стилей CSS

Для вёрстки строчные элементы применяются реже, чем блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры <div>, <p> и подобные широко распространённые теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц

Каскадные таблицы стилей (Cascading Style Sheets) предоставляют дополнительные возможности для разметки html-документа и свободу по созданию уникального дизайна для веб-страниц.

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

Стили по умолчанию

Когда браузер обрабатывает HTML-код, он использует встроенный по умолчанию стиль представления HTML-элементов на веб-странице. Чтобы понять, что такое «стиль по умолчанию» рассмотрим в качестве примера элементы <h1> — <h6>: заголовки являются блочными элементами, занимают всю доступную ширину в родительском элементе, имеют разрыв строки до и после элемента, текст заголовка отображается жирным начертанием и имеет определённый размер, в зависимости от уровня заголовка, всё это вместе является встроенным стилем для заголовков.

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

Что такое CSS?

• CSS — Каскадные Таблицы Стилей(Cascading Style Sheets)
• Стиль — правило, описывающее форматирование отдельного элемента на странице
• Стили были добавлены для решения проблемы оформления веб-страниц
• Стили можно хранить в отдельных документах, что уменьшает размер HTML-кода

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

HTML и CSS

CSS и HTML — это два разных языка для разных целей.

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

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

Добавление CSS-стилей к HTML-документу

Таблицы стилей бывают двух видов — внутренние и внешние — в зависимости от того, где определены стили: непосредственно на самой странице или во внешнем файле, связанном с веб-страницей.

Внешняя таблица стилей

Внешняя таблица стилей — обычный текстовый файл, содержащий весь CSS-код. В его содержимое не должны входить никакие HTML теги, поэтому тег <style> там указывать не нужно, при сохранении текстового файла со стилями надо установить расширение «.css», имя файла может быть любым.

Для подключения внешней таблицы стилей, вам нужно прикрепить ее к HTML-документу с помощью тега <link>, который должен располагаться внутри тега <head> или с помощью встроенного в CSS правила @import.

Подключение стилей с помощью тега <link>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

тег <link> должен содержать три атрибута:

• rel=»stylesheet» — указывает тип ссылки; в данном случае это ссылка на таблицу стилей
• type=»text/css» — указывает тип файла, на который ссылается тег
• href=»styles.css» — определяет путь к внешнему CSS-файлу, который может отличаться в зависимости от того, где вы его храните

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

Подключение стилей с помощью правила @import

В отличие от тега <link>, правило @import используется внутри тега <style>. Для подключения внешней таблицы стилей после ключевого слова @import используется url(), в скобках указывается путь к внешнему CSS-файлу, который может быть заключен в кавычки: url(«main.css»);. Использование url() для указания пути к CSS-файлу необязательно, можно просто написать: @import «путь_к_файлу»;, в этом случае путь обязательно должен быть указан в кавычках.

Используя правило @import можно подключить любое количество внешних таблиц:

<style>
  @import url(main.css);
  @import url(каталог/main2.css);
</style>

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

<style>
  @import url(main.css);
  @import url(каталог/main2.css);
  p { color: red;}
</style>

Примечание: правило @import не обязательно должно располагаться в теге <style>, его так же можно включать во внешние таблицы стилей.

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

Внутренняя таблица стилей

Внутренняя таблица стилей — набор стилей, который является частью кода веб-страницы, которая всегда должна находиться внутри элемента <style> в теле тега <head>:

<head>
  <style>
    hr { color: sienna; }
    p { margin-left: 20px; }
    body { background-image: url("images/back40.gif"); }
  </style>
</head>

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

Совет: если веб-страница имеет внутреннюю таблицу стилей, а вы хотите использовать внешнюю таблицу стилей, то всего лишь вырежьте CSS-код, расположенный между тегами <style> (без самих тегов). Потом создайте новый текстовый документ и вставьте в него CSS-код. Сохраните файл с расширением .css, например styles.css, и подключите его к вашей веб-странице, используя тег <link> или правило @import.

Встроенный стиль

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

<div style="border: 1px solid red; background-color: yellow;">Элемент div</div>

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

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

Синтаксис CSS

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

Правила CSS

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

• Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.

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

• Далее следует блок объявлений, который начинается с открывающей фигурной скобки { и заканчивается закрывающей }, между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем.
• Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание «;» можно только в конце последнего объявления перед закрывающей фигурной скобкой.
• Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.

Пробельные символы

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

В примере представлен CSS-код, в котором используются пробельные символы:

p {
  color: blue;
  font-size: 12px;
}

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

p{color:blue;font-size:12px;}

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

CSS комментарии

Комментарий в CSS начинается с символов /* и заканчивается символами */ и может занимать несколько строк, его содержимое не влияет на работу кода и игнорируется браузерами.

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

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

/*Это комментарий.*/
             
p {
  color:green; /*это свойство задает зеленый цвет текста*/
}
 
/*
  это
  многострочный
  комментарий
*/

...
/*
p {
  color: red; /* цвет текста в абзацах - красный */
  background-color: black;
}
*/
...

Cелекторы СSS

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

Любой селектор может состоять более чем из одного простого селектора. К простым селекторам относятся:

• селектор типа
• универсальный селектор
• селекторы атрибутов
• селектор идентификатора
• селектор класса
• псевдо-классы

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

Селектор идентификатора позволяет применить стиль к определённому элементу на странице, в котором указан необходимый идентификатор. Определение селектора идентификатора начинается с символа решётки «#», далее указывается имя идентификатора.

#myid { color: blue; }

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

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

Селектор идентификатора имеет некоторые особенности:

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

Пример:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #myname { color:red; }
    </style>
  </head>
 
  <body>
    <h1> Добро пожаловать! </h1>
 
    <div>
      <p id="myname"> Меня зовут Арни. </p>
      <p> Я играю в онлайн игры. </p>
    </div>
    <p> Моего кота тоже зовут Арни. </p>
 
  </body>
</html>

Результат данного примера:

.myClass { color: blue; }

<p class="myClass">Текст абзаца.</p>

<p class="className1 className2 className3">Текст абзаца.</p>

span.alert { font-weight: bold; }

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .myclass { color: blue; }
    </style>
  </head>
   <body>
    <h1> Добро пожаловать! </h1>
 
    <p class="myclass"> Меня зовут Арни. </p>
    <p class="myclass"> Я играю в онлайн игры. </p>
    <p> Моего кота тоже зовут Арни. </p>
 
  </body>
</html>

Наследование и каскадность

Наследование

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

Например, все элементы расположенные внутри элемента <body> являются его дочерними элементами и потомками. Если в стиле для <body> задать с помощью свойства color красный цвет текста, то цвет текста всех его дочерних элементов и потомков тоже станет красным.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color: red; }
    </style>
  </head>
  <body>
 
    <h1>Цвет текста заголовка красный</h1>
    <p>Цвет текста абзаца тоже красный.</p>
 
  </body>
</html>

Попробовать »Наследуемые свойства можно переопределить, применив индивидуальное правило для нужного элемента.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color: red; }
      h1 { color: blue; } /* переопределили цвет текста внутри элементов h1 */
    </style>
  </head>
  <body>
    <h1>Цвет текста заголовка синий</h1>
    <p>Цвет текста абзаца красный.</p>
  </body>
</html>

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

Вычисление специфичности (приоритета) селекторов

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

Специфичность селекторов (selector’s specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. Для вычисления специфичности селектора используются три группы чисел (a, b, c), расчёт производится следующим образом:

• Считается число идентификаторов в селекторе (=a)
• Считается число селекторов классов, атрибутов и псевдо-классов в селекторе (=b)
• Считается число селекторов типа и псевдо-элементов в селекторе (=c)
• Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора
• Универсальный селектор (*) и комбинаторы не участвуют в вычислении веса селектора

В примере селекторы расположены в порядке увеличения их специфичности:

*               /* a=0 b=0 c=0 -> специфичность =   0 */
li              /* a=0 b=0 c=1 -> специфичность =   1 */
ul li           /* a=0 b=0 c=2 -> специфичность =   2 */
ul ol+li        /* a=0 b=0 c=3 -> специфичность =   3 */
h1 + *[rel=up]  /* a=0 b=1 c=1 -> специфичность =  11 */
ul ol li.red    /* a=0 b=1 c=3 -> специфичность =  13 */
li.red.level    /* a=0 b=2 c=1 -> специфичность =  21 */
#x34y           /* a=1 b=0 c=0 -> специфичность = 100 */
#s12:not(p)     /* a=1 b=0 c=1 -> специфичность = 101 */

Самый высокий приоритет имеет число из группы (a), число группы (b) имеет средний приоритет, число из группы (c) имеет наименьший приоритет. Числа из разных групп не суммируются в одно общее, т.е. возьмём из примера последнюю строку со специфичностью селектора (101) — это не означает число «сто один», это значит, что был использован один селектор из группы «a» (идентификатор) и один селектор из группы «c» (селектор типа).

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #one { color: red; }
      #two { color: blue !important; }
    </style>
  </head>
  <body>
 
    <p id="one" style="color: yellow;">Первый абзац</p>
    <p id="two" style="color: yellow;">Второй абзац.</p>
 
  </body>
</html>

Попробовать »

Каскадность

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p { color: yellow; }
      p { color: red; }
      p { color: green; } /* для элемента будет установлен зелёный цвет текста */
    </style>
  </head>
  <body>
    <p>Цвет текста абзаца зелёный.</p>
  </body>
</html>

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

h1 {
  color: gray;
  font-family: sans-serif;
}
 
h1 { border-bottom: 1px solid black; }

Код, расположенный в примере выше, равносилен коду в примере ниже, в котором все три свойства указаны в одном правиле.

h1 {
  color: gray;
  font-family: sans-serif;
  border-bottom: 1px solid black;
}

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

h1, h2, h3 {  /* одинаковый стиль для трёх элементов */
  color: gray;
  font-family: sans-serif;
}
/* дополнительное правило для заголовков второго уровня */
h2 { border-bottom: 1px solid black; }

---

Блочная модель CSS

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

• Margin (внешний отступ) — пустое пространство (поле), которое отделяет один элемент от другого. Самый простой пример внешнего отступа — промежуток между абзацами, идущими друг за другом. Область внешнего отступа прозрачна и не может иметь свой цвет и других эффектов оформления.
• Border (рамка элемента) — граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны. Используя рамку можно просто красиво оформить элемент или визуально отделить содержимое текущего элемента от других элементов страницы.
• Padding (внутренний отступ) — пустое пространство между содержимым элемента и его рамкой. Область внутреннего отступа прозрачна и не может иметь свой цвет или другие эффекты оформления.
• У большинства элементов есть область содержимого, в которой располагается всесодержимое элемента (текст, вставляемые изображения или другие элементы).

Рамка

Рамка представляет собой обычную линию, которая отображается вокруг стилизуемого элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой строны элемента. Например, если добавить рамку только с нижней строны блочного элемента, то она будет производить тот же эффект, что и элемент <hr> (горизонтальная линия), выступая в качестве разделителя.

Каждая рамка имеет три свойства, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:

• border-width — задает ширину рамки. Для установки ширины можно использовать пиксели или ключевые слова: thin, medium, thick.
• border-style — определяет стиль рамки с помощью одного из восьми возможных значений: solid, dotted, dashed, double, groove, ridge, inset и outset.
• border-color — указывает цвет рамки.

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

Попробуйте сами:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.one {
        border-style: solid;
        border-width: 5px;
      }
      p.two {
        border-style: solid;
        border-width: medium;
        border-color: red;
      }
      p.three {
        border: 3px dashed #ffffff;
        background-color: #0000FF;
        color: #ffffff;
      }
    </style>
  </head>
 
  <body>
    <p class="one">Первый абзац.</p>
    <p class="two">Второй абзац.</p>
    <p class="three">Третий абзац.</p>
  </body>
</html>

Попробовать »Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:

• border-top — верхняя рамка
• border-left — левая рамка
• border-right — правая рамка
• border-bottom — нижняя рамка

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

Внешний и внутренний отступы

Внутренний отступ — пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding.

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

Свойства padding и margin могут принимать от одного до четырех значений:

padding: 10px 15px 22px 18px;
margin: 10px 15px 22px 18px;

Где значения устанавливаются по часовой стрелке, начиная с верхнего:

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

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

Попробуйте сами:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p {
        border: 3px dashed #ffffff;
        background-color: #0066FF;
        color: #ffffff;
        padding: 15px; /*внутренний отступ для всех сторон*/
        margin: 25px;   /*внешний отступ для всех сторон*/
      }
    </style>
  </head>
 
  <body>
    <p>Обычный абзац.</p>
  </body>
</html>

Попробовать »Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-top, padding-right, padding-bottom и padding-left. Внешние отступы регулируются свойствами: margin-top,margin-right, margin-bottom и margin-left.

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

Ширина и высота элемента

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

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство heightвысоту области содержимого:

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

Попробуйте сами:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.first {
        width: 150px;
        height: 100px;
        background-color: #B2FFCC;
        padding: 0px;  /*обнуляем внутренние отступы*/
      }
      p.second {
        width: 150px;
        height: 100px;
        background-color: #C2FFFF;
        border: 5px ridge #0066FF;
        padding: 10px;
        margin: 5px;
      }
    </style>
  </head>
 
  <body>
    <p class="first">Для данного абзаца зададим только ширину и высоту.</p>
    <p class="second">Этот абзац содержит, кроме ширины и высоты,
     внутренний отступ, рамку и внешний отступ.</p>
  </body>
</html>

Попробовать »В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца — 150x100px, а размеры второго — 180x130px (с учетом внутреннего отступа и рамки).

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

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

Попробуйте сами:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div {
        width:150px;
        height:200px;
        border: 1px solid black;
        overflow:auto;
      }
    </style>
  </head>
 
  <body>
    <div><img src="tree.png"></div>
  </body>
</html>

Попробовать »

float:left

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

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

Clear- Запрет на обтекание.

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

Синтаксис

clear: none | left | right | both | inherit

Значения

None — Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.

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

Left — Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.

Right — Отменяет обтекание с правой стороны элемента.

Inherit — Устанавливает значение родителя.

 

---

 

Блочная верстка или основы анатомии скелета сайтов

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

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

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css(каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

• Отделение стиля элементов от кода html;
• Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
• Лучшая индексация поисковиками;
• Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
• Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

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

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

Как происходит блочная верстка?

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

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

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

Полный код примера index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div id="container">
  <div id="header">
  <h2>Шапка</h2>
  </div>
     
  <div id="navigation">
  <h2>Блок навигации</h2>
  </div>
     
  <div id="menu">
  <h2>Меню</h2>
  </div>
     
  <div id="content">
  <h2>Контент</h2>
  </div>
     
  <div id="clear">
     
  </div>
                 
  <div id="footer">
  <h2>Подвал сайта</h2>
  </div>
</div>
     
</body>
</html>

Содержимое файла style.css:

body {
            background: #f3f2f3;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            background:#99CC99;
            margin: 30px auto;
            width: 900px;
            height: 600px;
}
 
#header {
            background: #66CCCC;
            height: 100px;
            width: 900px;
}
 
#navigation {
            background: #FF9999;
            width: 900px;
            height: 20px;
}
 
#menu {
            background: #99CC99;
            float: left;
            width: 200px;
            height: 400px;
}
 
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: #0066FF;
            height: 80px;
            width: 900px;
}

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

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

---

 

Заключение

1. Блочные и строчные тэги

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

<address>,<blockquote>,<div>,<fieldset>,<form>,<h1>,…,</h1>,<h6></h6>,<hr />,<ol>,<ul>,</ol>,</ul>,<pre>,</pre>,</form></fieldset>,</div></blockquote>,</address>

<img alt="" />, , <a>, <q>, <code> и др.

2. Каскадная таблица стилей CSS

Подключение стилей с помощью тега <link>

<link rel="stylesheet" type="text/css" href="styles.css">

тег <link> должен содержать три атрибута:

• rel=»stylesheet» — указывает тип ссылки; в данном случае это ссылка на таблицу стилей
• type=»text/css» — указывает тип файла, на который ссылается тег
• href=»styles.css» — определяет путь к внешнему CSS-файлу, который может отличаться в зависимости от того, где вы его храните

3.Правила CSS

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

p{color:blue;font-size:12px;}

4. Селекторы CSS

• селектор типа
  

  элемент

  span

  Выбор всех элементов <span>.

  1

• универсальный селектор 
  

  *

  *

  Выбор всех элементов.

  2

• селектор класса 
  

  .class

  .myclass

  Выбор всех элементов с class=»myclass».

  1

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

  #id

  #main

  Выбор элемента с id=»main».

  1

Содержание:

• Ссылки
• Псевдоклассы
• фон

Ссылки

HTML тег a

С помощью html тега <A> создаются ссылки на сайте. Причем как внешние, так и внутренние. Тег a встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать вручную.

Синтаксис тега <A>

<a class="имя класса" target="параметр" title="подсказка" href="URL">анкор</a>

Обязательным параметром у ссылки является только href=»URL», т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки.

Пример. Html код:

<body>
<a href="http://zarabotat-na-sajte.ru/">как заработать на своем сайте</a>
</body>

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

Атрибуты тега a

1) Атрибут target=»параметр», который может принимать следующие значения:

→ _blank — открывает страницу в новом окне

→ _self — загружает страницу в текущее окно

→ _parent — загружает страницу во фрейм-родитель

→ _top — отменяет все фреймы и загружает страницу в полном окне браузера

Пример

<body>
<a target="_blank" href="http://iboard.kz/">доска бесплатных объявлений в Казахстане</a>
</body>

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

2) Атрибут title=»подсказка» позволяет прописать подсказку, которая высветится при наведении курсора на ссылку.

Пример

<body>
<a title="Подсказка для ссылки на главную страницу сайта" href="http://iboard.kz">как заработать на своем сайте</a>
</body>

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

3) Атрибут class=»название класса» задает класс для ссылки со стилями. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия.

Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например
изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти
свойства можно определять по-разному, в зависимости от того, посетили уже ссылку,
активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить
интересные эффекты на ваш web-сайт. Для этого используются так называемые
псевдоклассы.

Что такое псевдокласс?

Псевдокласс позволяет учитывать различные условия или события при определении
свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>.
В CSS мы также можем использовать a в качестве селектора:

a {
color: blue;
}

Ссылка может иметь разные состояния. Например, её уже посетили/visited или
ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых
и непосещённых ссылок.

a:link {
color: blue;
}

a:visited {
color: red;
}

Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель — над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с
объяснениями.

Псевдокласс: link.

Псевдокласс :link используется для ссылок на страницы, которые
пользователь ещё не посещал.
В примере кода непосещённые ссылки — синие.

a:link {
color: #6699CC;
}

Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы,
которые пользователь посетил.
В примере кода посещённые ссылки — фиолетовые.

a:visited {
color: #660099;
}

Псевдокласс: active

Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.

a:active {
background-color: #FFFF00;
}

Псевдокласс: hover

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

a:hover {
color: orange;
font-style: italic;
}

Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.

Пример 1a: Расстояние между буквами
Расстояние между
символами можно установить свойством letter-spacing. Это можно
применить для ссылки:

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Пример 1b: UPPERCASE и lowercase
Свойство text-transform может переключать символы с верхнего на нижний регистр. Это также можно
использовать для создания эффектов на ссылке:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

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

Удаление подчёркивания ссылок

Обычный вопрос — как удалить подчёркивание ссылок?Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт. 

Вообще-то удалить подчёркивание ссылок очень просто. Свойство text-decoration
можно использовать для определения подчёркивания текста. Для удаления
подчёркивания просто установите в text-decoration значение none.

a {
text-decoration:none;
}

Альтернативно можно также установить text-decoration, наряду с
другими свойствами, для всех четырёх псевдоклассов.

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

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

Цвет — color

В течение предыдущих уроков мы все время использовали свойство цвета — color. Это свойство задает цвет текста внутри элемента. Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас имеется html-страница со следующим кодом:

<html>
<head>
<title>css color (цвет)</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Здесь текст параграфа</p>
Здесь просто текст
</body>
</html>

Зададим стиль для элемента body:

body{
color:green;
}

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

body{
color:green;
}
h1{ 
color:red; 
}

Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего «предка» — элемента body. Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента «предка». Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано. Дерево элементов — структура всех элементов html-страницы, отражающая их вложенность друг в друга. Схематично дерево элементов для нашего примера выглядит так:

В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.
Значениями свойства color могут быть именные цвета (red, blue…), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)). Итак, задать цвет текста для элемента можно тремя способами:

body{
color:green;
}
h1{ 
color:red; 
}
h2{ 
color:rgb(255,0,0); 
}

Фон

Фон — background На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу. Пусть у нас есть html-страница с таким кодом:

<html>
<head>
<title>css background (фон)</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Здесь содержимое документа
</body>
</html>

Рассмотрим группу свойств

background: background-color — задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.
Пример:

body{
background-color:#243CED;
color:yellow;
}

Сейчас наша страница в браузере выглядит так:

background-image — задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.

Пример:

body{
background-image:url(picture.gif);
background-color:#243CED;
color:yellow;
}

Сейчас наша страница в браузере выглядит так:

В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif (об относительной адресации читайте на странице абсолютная и относительная адресация). Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое изображение будет лежать поверх фонового цвета.

background-repeat — задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:

repeat — повторять изображение по горизонтали и вертикали.
repeat-x — повторять изображение только по горизонтали.
repeat-y — повторять изображение только по вертикали.
no-repeat — не повторять изображение.
По умолчанию используется значение repeat, как мы и убедились в предыдущем примере.

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

body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
color:yellow;
}

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

body{
background-image:url(picture.gif);
background-repeat:repeat-x;
background-color:#243CED;
color:yellow;
}

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

body{
background-image:url(picture.gif);
background-repeat:repeat-y;
background-color:#243CED;
color:yellow;
}

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

background-attachment — указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:

scroll — фон прокручивается вместе с текстом. Это значение используется по умолчанию.

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

Пример:

body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:#243CED;
  color:yellow;
}

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

background-size

background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

<значение>

Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.

<проценты>

Задает размер фоновой картинки в процентах от ширины или высоты элемента.

auto

Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

cover

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

contain

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

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

background-position — задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Рассмотрим на примерах:

body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  background-position:10% 30%;
  color:yellow;
}

Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали. Следует заметить, что это свойство по-разному воспринимается разными браузерами. Например, в IE7 наш пример будет выглядеть так:

А в Opera так:

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

body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  background-position:50px 50px;
  color:yellow;
}

Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали:

body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  background-position:center top;
  color:yellow;
}

Изображение будет выровнено по горизонтали — по центру, а по вертикали — по верхнему краю страницы:

Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова: left (по левому краю), center (по центру) и right (по правому краю). Для выравнивания по вертикали (второй параметр): top (по верхнему краю), center (по центру) и bottom (по нижнему краю).

 Сокращенная запись свойства background

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

body{
  background:url(picture.gif) no-repeat #33CCFF center top;
  color:yellow;
}

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

OPACITY

Краткая информация

Версии CSS

Описание

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

Синтаксис

opacity: значение

Значения

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>opacity</title>
  <style>
   .semi {
    opacity: 0.5; /* Полупрозрачность элемента */
   }
  </style>
 </head>
 <body>
 <p>
 <img src="images/igels.png" alt="Обычный рисунок">
 <img src="images/igels.png" alt="Полупрозрачный рисунок" class="semi">
 </p>
 </body>
</html>

Результат данного примера:

Браузеры

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100

Задание:

Используя функцию сжатия изображений из урока 9  и форму загрузки изображений из задания к уроку 5(исключить отправку уведомления на почту), выполнить сжатие загружаемого изображения и в ответе об успехе вывести все 3 размера изображения

1. s_my_first_uploaded_image.jpg
2. l_my_first_uploaded_image.jpg
3. my_first_uploaded_image.jpg

[spoiler title=»Решение»]

index.php

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Загрузка файла</title>
</head>
<body>
 <form action="upload.php" method="post" enctype="multipart/form-data">
 <input type="file" name="fileToUpload" id="fileToUpload">
 <input type="submit" value="Загрузить изображение" name="submit">
 </form>
</body>
</html>

upload.php

<?
  $type = explode('/', $_FILES['fileToUpload']['type'])[1];
  if($type == "jpeg" or $type == "png" or $type == "bmp" or $type == "gif") {
    $filename = 'my_first_uploaded_image.' . $type;
    $uploaddir = 'uploads/';
    $uploadfile = $uploaddir . $filename;
    $uploadfile_s = $uploaddir .'s_'. $filename;
    $uploadfile_l = $uploaddir .'l_'. $filename;
    if(!file_exists($uploaddir)) {
      mkdir($uploaddir);
    }
    if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
      if(compress($uploaddir, $filename)) {
        echo "Файл корректен был сжат и успешно загружен. <a href='index.php'>Вернуться.</a><br>";
        echo "<img src='$uploadfile'>";
      } else {
        echo "Файл корректен и был успешно загружен. <a href='index.php'>Вернуться.</a><br>";
        echo "<img src='$uploadfile_s'><br>";
        echo "<img src='$uploadfile_l'><br>";
        echo "<img src='$uploadfile'><br>";
      }
    } else {
        echo "Во время загрузки произошла ошибка! <a href='index.php'>Попробуйте снова.</a>";
    }
  } else {
    echo "Неверный тип изображения, проверьте загружаемый файл и <a href='index.php'>попробуйте снова.</a>
    <br>Типы файлов которые могут быть загружены:<br> JPEG, JPG, PNG, BMP, GIF";
  }

  function compress($path,$file) {
  $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
  //error_reporting(0);
  ini_set('memory_limit', '512M');
  if($ext=='jpg' || $ext=='jpeg'|| $ext=='png') {
    $sfile=$path."s_".$file;
    $lfile=$path."l_".$file;
    $fullfile=$path.$file;
    if(!($im = imagecreatefromjpeg($fullfile)))
    $im = imagecreatefrompng($fullfile);
    if($im) {
      $iw = imagesx($im); $ih = imagesy($im);
      $k = 650 / $iw;
      if($k>1)$k=1;
      $sx = floor($iw * $k); $sy = floor($ih * $k);
      $im_m = imagecreatetruecolor($sx, $sy);
      imagealphablending( $im_m, false );
      imagesavealpha( $im_m, true );
      $transparent = imagecolorallocatealpha($im_m, 255, 255, 255,255);
      imagefilledrectangle($im_m, 0, 0, $sx, $sy, $transparent);
      imagecopyresampled($im_m, $im, 0, 0, 0, 0, $sx, $sy, $iw, $ih);
      $r_l = imagejpeg($im_m,$lfile);
      $iw = imagesx($im); $ih = imagesy($im);
      $k = 100 / $iw;
      if($k>1)$k=1;
      $sx = floor($iw * $k); $sy = floor($ih * $k);
      $im_m = imagecreatetruecolor($sx, $sy);
      imagealphablending( $im_m, false );
      imagesavealpha( $im_m, true );
      $transparent = imagecolorallocatealpha($im_m, 255, 255, 255, 127);
      imagefilledrectangle($im_m, 0, 0, $sx, $sy, $transparent);
      imagecopyresampled($im_m, $im, 0, 0, 0, 0, $sx, $sy, $iw, $ih);
      $r_s = imagejpeg($im_m,$sfile);
    }	else {
      copy($fullfile, $lfile);
      copy($fullfile, $sfile);
    }
  }
  error_reporting(1);
}
?>

[/spoiler]

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Блочная верстка</title>
  </head>
  <body>
  <div class="wrapper">
    <div id="header">
      <div class="logo"><a href="index.html">Ikurs</a></div>
    </div>
    <div id="nav">
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="#">Услуги</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>
    </div>
    <div id="content">
      <div class="col-4"><img class="blur" src="images/webmaster.jpg"></div>	
      <div class="col-4"><img class="op" src="images/webmaster.jpg"></div>	
      <div class="col-4"><img src="images/webmaster.jpg"></div>	
      <div class="col-4"><img src="images/webmaster.jpg"></div>

      <div class="col-3"><img src="images/webmaster.jpg"></div>
      <div class="col-3"><img src="images/webmaster.jpg"></div>
      <div class="col-3"><img src="images/webmaster.jpg"></div>			
    </div>
    <div id="sidebar">sidebar</div>
    <div id="footer">footer</div>
    <div class="sqr"><a href="#">up</a></div>
  </div>	
  </body>
</html>

/*Универсальный селектор 0 б*/
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:Calibri,sans-serif;
  background:pink url(images/symphony.png) repeat;
  background-position:100% 50%;
}
img{
  max-width:100%;
  width:auto;
}
/*Селекторы тегов (элементов) 2 б*/

.wrapper{
  max-width:960px;
  margin:0 auto;
}
#header,#footer,#nav{
  width:100%;
  float:left;
  background: rgba(0, 0, 0, 0.70);
  padding:10px 20px;
  border-bottom:#fff solid 2px;
}
#header{
  position:fixed;
  max-width:960px;
  width:100%;
  z-index:1;
}
#nav{
  position:fixed;
  max-width:960px;
  width:100%;
  top:60px;
  z-index:1;
}
#content{
  margin-top:120px;
  width:calc(100% - 300px);
  float:left;
  background:#eee url(images/webmaster.jpg) no-repeat;
  background-size:cover;
  background-position: 50% 50%;
  background-attachment:fixed;
  padding:10px 20px;
  height:700px;
  
}
#sidebar{
  margin-top:120px;
  width:300px;
  float:left;
  background:#ddd;
  padding:10px 20px;
}
/*Селекторы классов 10 б*/
.logo{
  text-align:center;
}
.logo a{
  color:#fff;
  font-size:30px;	
  text-decoration:none;
}
#nav li{
  float:left;
  margin: 10px 0;
}
#nav a{
  color:#000;
  padding:10px;
  text-decoration:none;
  background:#fff;
  border:2px transparent solid;
  
}
#nav a:hover{
  /*background:#fff;*/
  border:2px #333 solid;
}
#content{
  position:relative;
}
.sqr{
  width:50px;
  height:50px;
  background:red;
  position:fixed;
  right:0%;
  bottom:0;
  z-index:999;
}
.col-4{
  width:25%;
  float:left;
  padding:10px;
}
.col-3{
  width:33.3%;
  float:left;
  padding:10px;
}
.blur{
  filter: blur(5px);
   -webkit-filter: blur(5px);
  -o-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
}
.blur:hover{
  -webkit-filter: blur(0px);
}
.op{
  opacity:0.5;
}
.op:hover{
  opacity:1;
}



/*Селекторы идентификаторов 100 б*/

Содержание:

• @keyframesanimation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-delay
• animation-fill-mode

Свойство animation позволяет анимировать элементы страницы.

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

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

@keyframes

Сама анимация задается внутри блока @keyframes. После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.

Шаги можно задавать через проценты или с помощью ключевых слов from и to. При этом в шагах можно менять тип анимации (animation-timing-function):

/* Современные браузеры, кроме Chrome, Opera, Safari */
@keyframes go-left-right {   /* назовём анимацию: "go-left-right" */
  from {
    left: 0px;               /* от: left: 0px */
  }
  to {
    left: calc(100% - 50px); /* до: left: 100%-50px */
  }
}

/* Префикс для Chrome, Opera, Safari */
@-webkit-keyframes go-left-right {
  from {
    left: 0px;
  }
  to {
    left: calc(100% - 50px);
  }
}

.progress {
  /* применить анимацию go-left-right */
  /* продолжительность 3s */
  /* количество раз: бесконечное (infinite) */
  /* менять направление анимации каждый раз (alternate) */
  animation: go-left-right 3s infinite alternate;
  -webkit-animation: go-left-right 3s infinite alternate;

animation: timing 5s infinite alternate;

<script>$(window).scroll(function() {
    $('.mov').each(function(){
      var imagePos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      if (imagePos < topOfWindow+200) {
        $(this).addClass('wobble');
      }
    });
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Задание к  третьему уроку HTML

Cверстать на выбор веб-дизайн или порода Японская Хаски

1. Скопируйте «2urok.html» и переименуйте его на 3urok.html. В title замените 2 урок на 3 урок
2. В самом конце документа создайте таблицу Плюсы и минусы профессии. В таблице создайте 4 строки и 2 столбца

   <table>
   <tr> <th>1 строка 1 заголовок столбца</th> <th>1 строка 2 заголовок столбца</th> </tr>
   <tr> <td>2 строка 1 столбец</td> <td>2 строка 2 столбец</td> </tr>
   <tr> <td>3 строка 1 столбец</td> <td>3 строка 2 столбец</td> </tr>
   <tr> <td>4 строка 1 столбец</td><td>4 строка 2 столбец</td> </tr>
   
   </table>

   Плюсы и минусы профессии

   1 строка 1 заголовок столбца	1 строка 2 заголовок столбца
   2 строка 1 столбец	2 строка 2 столбец
   3 строка 1 столбец	3 строка 2 столбец
   4 строка 1 столбец	4 строка 2 столбец

   После открывающегося тега <table> пропишите название таблицы используя парный тег <caption></caption> —  Плюсы и минусы профессии, и задайте следующие стили: размер шрифта — 20px, толщина текста — bold, фон — #FFDCF3;

   Объедините смежные ячейки строк первого столбца используется атрибут colspan=»2″

   Плюсы и минусы профессии

   1 строка 1 заголовок столбца		1 строка 2 заголовок столбца
   2 строка 1 столбец	2 строка 2 столбец	2 строка 3 столбец
   3 строка 1 столбец	3 строка 2 столбец	3 строка 3 столбец
   4 строка 1 столбец	4 строка 2 столбец	4 строка 3 столбец

   <table>
   <caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption>
   <th colspan="2">1 строка 1 заголовок столбца</th>
   <th>1 строка 2 заголовок столбца</th>
   </tr>
   <tr>
   <td>2 строка 1 столбец</td>
   <td>2 строка 2 столбец</td>
   <td>2 строка 3 столбец</td>
   </tr>
   <tr>
   <td>3 строка 1 столбец</td>
   <td>3 строка 2 столбец</td>
   <td>3 строка 3 столбец</td>
   </tr>
   <tr>
   <td>4 строка 1 столбец</td>
   <td>4 строка 2 столбец</td>
   <td>4 строка 3 столбец</td>
   </tr>
   </table>

   Объедините смежные ячейки столбцов  второго столбца используется атрибут rowspan=»2″ во втором столбце второй ячейке, удалив лишние элементы во втором столбце

   Плюсы и минусы профессии

   1 строка 1 заголовок столбца		1 строка 2 заголовок столбца
   2 строка 1 столбец	2 строка 2 столбец	2 строка 3 столбец
   3 строка 1 столбец	3 строка 2 столбец
   4 строка 1 столбец	4 строка 2 столбец

   <table>
   <caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption>
   <tr>
   <th colspan="2">1 строка 1 заголовок столбца</th>
   <th>1 строка 2 заголовок столбца</th>
   </tr>
   <tr>
   <td>2 строка 1 столбец</td>
   <td>2 строка 2 столбец</td>
   <td rowspan="3">2 строка 3 столбец</td>
   </tr>
   <tr>
   <td>3 строка 1 столбец</td>
   <td>3 строка 2 столбец</td>
   </tr>
   <tr>
   <td>4 строка 1 столбец</td>
   <td>4 строка 2 столбец</td>
   </tr>
   </table>
   
   

    

   Заполните таблицу следующим содержимым как на рис.1:

   Плюсы профессии:

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

   Минусы профессии:

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

   

    

    

   рис.1

   <table  border="" style="border-collapse:collapse;">
   <caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption>
   <tr><th colspan="2">Плюсы профессии:</th><th>Минусы профессии:</th></tr>
   <tr><td>постоянная востребованность на рынке труда,</td><td >работа не ограничивается пределами одной страны,</td><td rowspan="3">несовпадение (иногда) художественного видения заказчика и исполнителя, из-за чего приходится либо убеждать в необходимости конкретного дизайнерского решения, либо соглашаться с поправками.</td></tr>
   <tr><td>возможность удаленной работы,</td><td>широкие возможности профессионального роста,</td></tr>
   <tr><td>можно реализовать практически любую идею без денежных затрат,</td><td>достойная оплата труда.</td></tr>
   </table>

3. После таблицы вставте следующий текст в абзац

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

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

Требования к веб-дизайнеру

Основные требования к веб-дизайнеру таковы:

• Портфолио проектов (иначе говоря, опыт работы).
• Базовые знания HTML‚ CSS и начальные навыки верстки.
• Знание Photoshop, Illustrator, CorelDraw, Flash (изредка другие графические программы).
• Умение создавать иконки, иллюстрации и баннеры.

• <h3>Требования к веб-дизайнеру</h3>
  <ul>
  <strong>Основные требования к веб-дизайнеру таковы:</strong>
  
  <li>Портфолио проектов (иначе говоря, опыт работы).</li>
  <li>Базовые знания HTML‚ CSS и начальные навыки верстки.</li>
  <li>Знание Photoshop, Illustrator, CorelDraw, Flash (изредка другие графические программы).</li>
  <li>Умение создавать иконки, иллюстрации и баннеры.</li>
  </ul>

5. Используя ссылки создайте 3 якоря для заголовков второго уровня и к таблице: w1, w2, w3

<h2 id="w1" style="text-align:center;background: #F1C1FD;letter-spacing:0.3em;">Кто такой Web-дизайнер?</h2>	

<h2 id="w2" style="text-align:center; background: #FFDCF3;letter-spacing:0.3em;">Описание деятельности</h2>

<table id="w3" border="1" style="border-collapse:collapse;">

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

<a href="#w1"><img src="images/web_design.jpg" alt="Веб дизайнер" height="300px;"></a>
  <a href="#w2"><img src="images/colorwebdesign.jpg" alt="Веб дизайнер" height="300px;"></a>
  <a href="#w3"><img src="images/web_design3.png" alt="Веб дизайнер" height="300px;"></a>

6. После заголовка первого уровня создайте тег <nav>  и разместите в нем ссылки на, созданные вами на предыдущих занятиях, документы. При этом они должны открываться в новом окне

<nav style="text-align:center;"><a href="1.html" target="_blank">1 урок</a>  | <a href="2.html" target="_blank">2 урок</a> | <a href="3.html" target="_blank">3 урок</a></nav>

Вот что у вас должно получиться

<html>
<head>
 <title>3 урок-Профессия WEB-ДИЗАЙНЕР</title>
 <meta charset="utf-8">
 <meta name="description" content="Веб-дизайнер - профессия 21 века.Профессию web-дизайнера является перспективной в карьерном плане.Он специалист в области компьютерных технологий, который отвечает за то, как выглядит и воспринимается Интернет-сайт.">
 <meta name="keywords" content="Web дизайнер дизайн страниц графический дизайн интернет сайт компьтерные технологии баннер фриланс свободный график создание сайта web интерфейс художественное оформление сайта">
 <meta name="author" lang="ru" content="Жарова Салтанат" >
 <meta name="robots" content="index,follow">
</head>
<body style="font-family: Courier New,sans-serif;width:1200px;">
  <h1 style="text-align:center;background: #FFDCF3;">Профессия <span style="color:brown;">WEB-ДИЗАЙНЕР</span></h1>
  <nav style="text-align:center;"><a href="1.html" target="_blank">1 урок</a>  | <a href="2.html" target="_blank">2 урок</a> | <a href="3.html" target="_blank">3 урок</a></nav>
  
  <a href="#w1"><img src="images/web_design.jpg" alt="Веб дизайнер" height="300px;"></a>
  <a href="#w2"><img src="images/colorwebdesign.jpg" alt="Веб дизайнер" height="300px;"></a>
  <a href="#w3"><img src="images/web_design3.png" alt="Веб дизайнер" height="300px;"></a>
  <pre style="text-align: right;">
  «Цифровой дизайн похож на живопись, только краски никогда не сохнут».
                              Невилл Броуди (Neville Brody)</pre>
  <hr>
<h2 id="w1" style="text-align:center;background: #F1C1FD;letter-spacing:0.3em;">Кто такой Web-дизайнер?</h2>	
<p>Web-дизайн (от англ. Web design) - отрасль web-разработки и разновидность дизайна.<br> <strong>Web-дизайнер</strong> – это специалист в области компьютерных технологий, который отвечает за то, как выглядит и воспринимается Интернет-сайт.</p>
<h3 style="color:#FF00D2;">В обязанности Веб-дизайнера входит:</h3>
<ol>
<li>создание логотипов, баннеров и других элементов графики</li>
<li>продумывает навигацию по сайту</li>
<li>определяет, где следует разместить текст</li>
<li>учет времени загрузки сайта</li>
<li>проектирует пользовательский интерфейс</li>
</ol>

<p style="font-weight: bold; background: #FFDCF3;line-height: 2em;"> <i>Его задача:</i> помочь пользователю сориентироваться на веб-сайте, сделать работу пользователя с веб-сайтом легкой и приятной. В тоже время веб-дизайнер должен помнить, что он создает рекламный продукт, который должен соответствовать поставленным задачам (т.е. доносить некое рекламное сообщение до пользователя). </p>
<hr>
<img src="images/web_design2.jpg" alt="обязанности веб-дизайнера" >
<h2 id="w2" style="text-align:center; background: #FFDCF3;letter-spacing:0.3em;">Описание деятельности</h2>
<p>Основной сферой деятельности web-дизайнера является стилевая, визуальная и программная организация информации электронного формата, логичное и приятное оформление информации, графическое отображение её на страницах Интернета.</p>
<h3>Cредняя заработная плата</h3>

<p style="width: 500px;text-align: center;background: #9BEA9B;line-height: 3em;font-weight: bolder;font-size: 20px;">В Казахстане — 90-200 тысяч тенге</p>
<p style="text-align:right;"><em>Источник HeadHunter</em></p>


<table id="w3" border="" style="border-collapse:collapse;">
<caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption>
<tr><th colspan="2">Плюсы профессии:</th><th>Минусы профессии:</th></tr>
<tr><td>постоянная востребованность на рынке труда,</td><td >работа не ограничивается пределами одной страны,</td><td rowspan="3">несовпадение (иногда) художественного видения заказчика и исполнителя, из-за чего приходится либо убеждать в необходимости конкретного дизайнерского решения, либо соглашаться с поправками.</td></tr>
<tr><td>возможность удаленной работы,</td><td>широкие возможности профессионального роста,</td></tr>
<tr><td>можно реализовать практически любую идею без денежных затрат,</td><td>достойная оплата труда.</td></tr>
</table>
<p>Конечно, немного странно требовать от дизайнера верстать и программировать то, что он нарисовал. Для верстки существуют верстальщики, для программирования — php-программисты. Но сейчас многие компании ищут универсальных специалистов, которые могут закрыть в компании сразу несколько «дыр». За это, впрочем, и платят значительно лучше и берут на работу охотнее.</p>

<h3>Требования к веб-дизайнеру</h3>
<ul>
<strong>Основные требования к веб-дизайнеру таковы:</strong>

<li>Портфолио проектов (иначе говоря, опыт работы).</li>
<li>Базовые знания HTML‚ CSS и начальные навыки верстки.</li>
<li>Знание Photoshop, Illustrator, CorelDraw, Flash (изредка другие графические программы).</li>
<li>Умение создавать иконки, иллюстрации и баннеры.</li>
</ul>
</body>
</html>

https://ot7.ru/html/3.html

https://ot7.ru/1urok/

Задание:

Используя данный массив, вывести с помощью foreach блок div с классом block-info

<?
$info = [
 0 => [
 "name" => "Mercedes-Benz S 320",
 "info" => "Литые диски, тонировка, багажник, ксенон, дневные ходовые огни, омыватель фар, обогрев зеркал, кожа, дерево, алькантара, аудиосистема, встроенный телефон, CD, CD-чейнджер, MP3, ГУР, ABS, SRS, зимний режим, спортивный режим, турбонаддув, иммобилайзер, полный электропакет, центрозамок, климат-контроль, круиз-контроль, бортовой компьютер, мультируль, подогрев сидений, подогрев задних сидений, вентиляция сидений, память руля, парктроники, датчик света, пневмоподвеска, изменяемый клиренс, налог уплачен, техосмотр пройден.",
 "img" => "http://e.photos.kl.kcdn.kz/21/c360fff05b3eb217a41e20a6c9cbce/2-400x300.jpg"
 ],
 1 => [
 "name" => "Mercedes-Benz S 500",
 "info" => "Люк, ксенон, дневные ходовые огни, кожа, бесключевой доступ, камера заднего вида, налог уплачен, техосмотр пройден.<br>Не работают парктроники и дистроник. Торг.",
 "img" => "http://d.photos.kl.kcdn.kz/ef/bf2f4c5b672b76b0d0729e0c64d6ef/1-400x300.jpg"
 ],
 2 => [
 "name" => "Porsche Cayenne",
 "info" => "Панорамная крыша, алькантара, изменяемый клиренс.<br>аэродинамический обвес Sport Design, PASM (Porsche Active Suspension Management), PDCC (Porsche Dynamic Chassis Control). Porsche Cayenne GTS фирменного для этой модели цвета Carmine Red. Авто в отличном состоянии, обслуживается на официальном сервисе",
 "img" => "http://e.photos.kl.kcdn.kz/c2/de3895b8a2808c05c0a68c41a7da58/2-400x300.jpg"
 ],
 3 => [
 "name" => "Toyota Land Cruiser",
 "info" => "Новый авто 2015 года, без пробега абсолютно! Черный и белый. Максимальная комплектация 7 мест. Гарантия 2 года.",
 "img" => "http://d.photos.kl.kcdn.kz/ca/469c35e1e9e5c996f8713e1879336c/1-400x300.jpg"
 ],
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <style>
  .block-info {
    width: 500px;
    border: solid 1px #111;
    display: block;
    position: relative;
    padding-left: 120px;
  }
  .block-info img {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline;
    width: 100px;
  }
</style>
  <div class="block-info">
    <img src="http://d.photos.kl.kcdn.kz/ca/469c35e1e9e5c996f8713e1879336c/1-400x300.jpg" alt="Toyota Land Cruiser">
    <h3>Toyota Land Cruiser</h3>
    <p>Новый авто 2015 года, без пробега абсолютно! Черный и белый. Максимальная комплектация 7 мест. Гарантия 2 года.</p>
  </div>
</body>
</html>

[spoiler title=»Решение»]

<?
$info = [
  0 => [
    "name" => "Mercedes-Benz S 320",
    "info" => "Литые диски, тонировка, багажник, ксенон, дневные ходовые огни, омыватель фар, обогрев зеркал, кожа, дерево, алькантара, аудиосистема, встроенный телефон, CD, CD-чейнджер, MP3, ГУР, ABS, SRS, зимний режим, спортивный режим, турбонаддув, иммобилайзер, полный электропакет, центрозамок, климат-контроль, круиз-контроль, бортовой компьютер, мультируль, подогрев сидений, подогрев задних сидений, вентиляция сидений, память руля, парктроники, датчик света, пневмоподвеска, изменяемый клиренс, налог уплачен, техосмотр пройден.",
    "img" => "http://e.photos.kl.kcdn.kz/21/c360fff05b3eb217a41e20a6c9cbce/2-400x300.jpg"
  ],
  1 => [
    "name" => "Mercedes-Benz S 500",
    "info" => "Люк, ксенон, дневные ходовые огни, кожа, бесключевой доступ, камера заднего вида, налог уплачен, техосмотр пройден.<br>Не работают парктроники и дистроник. Торг.",
    "img" => "http://d.photos.kl.kcdn.kz/ef/bf2f4c5b672b76b0d0729e0c64d6ef/1-400x300.jpg"
  ],
  2 => [
    "name" => "Porsche Cayenne",
    "info" => "Панорамная крыша, алькантара, изменяемый клиренс.<br>аэродинамический обвес Sport Design, PASM (Porsche Active Suspension Management), PDCC (Porsche Dynamic Chassis Control). Porsche Cayenne GTS фирменного для этой модели цвета Carmine Red. Авто в отличном состоянии, обслуживается на официальном сервисе",
    "img" => "http://e.photos.kl.kcdn.kz/c2/de3895b8a2808c05c0a68c41a7da58/2-400x300.jpg"
  ],
  3 => [
    "name" => "Toyota Land Cruiser",
    "info" => "Новый авто 2015 года, без пробега абсолютно! Черный и белый. Максимальная комплектация 7 мест. Гарантия 2 года.",
    "img" => "http://d.photos.kl.kcdn.kz/ca/469c35e1e9e5c996f8713e1879336c/1-400x300.jpg"
  ],
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<style>
  .block-info {
    width: 500px;
    border: solid 1px #111;
    display: block;
    position: relative;
    padding-left: 120px;
  }
  .block-info img {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline;
    width: 100px;
  }
</style>
  <?foreach ($info as $inf) {?>
  <div class="block-info">
    <img src="<?=$inf['img']?>" alt="<?=$inf['name']?>">
    <h3><?=$inf['name']?></h3>
    <p><?=$inf['info']?></p>
  </div>
  <?}?>
</body>
</html>

[/spoiler]

Задание:

Написать функцию создания ссылки:

Пример использования:

$href = "https://ot7.ru/?p=545";
$text = "Lorem ipsum";
$class = "myhref";
my_href($href, $text, $class);

должны получить:

 <a href="https://ot7.ru/?p=545" class=".myhref">Lorem ipsum</a>

[spoiler title=»Решение»]

<?
$href = "https://ot7.ru/?p=545";
$text = "Lorem ipsum";
$class = "myhref";
my_href($href, $text, $class);
function my_href($href = "#", $text = 'ссылка', $class = 'link') {
  echo "<a href='$href' class='.$class'>$text</a>";
}
?>

[/spoiler]

Задание:

Написать функцию kirToLat($str) для замены входящего текста из кириллицы на транслит, используя готовый массив алфавита:

[spoiler title=»Готовый массив»]

$abc = ["А"=>"A", "а"=>"а", "Б"=>"B", "б"=>"b", "В"=>"V", "в"=>"v", "Г"=>"G", "г"=>"g", "Д"=>"D", "д"=>"d", "Е"=>"E", "е"=>"e", "Ё"=>"YO", "ё"=>"yo", "Ж"=>"J", "ж"=>"j", "З"=>"Z", "з"=>"z", "И"=>"i", "и"=>"i", "Й"=>"Y", "й"=>"y", "К"=>"K", "к"=>"k", "Л"=>"L", "л"=>"l", "М"=>"M", "м"=>"m", "Н"=>"N", "н"=>"n", "О"=>"O", "о"=>"o", "П"=>"P", "п"=>"p", "Р"=>"R", "р"=>"r", "С"=>"S", "с"=>"s", "Т"=>"T", "т"=>"t", "У"=>"U", "у"=>"u", "Ф"=>"F", "ф"=>"f", "Х"=>"H", "х"=>"h", "Ц"=>"C", "ц"=>"c", "Ч"=>"CH", "ч"=>"ch", "Ш"=>"SH", "ш"=>"sh", "Щ"=>"ScH", "щ"=>"sch", "Ъ"=>"'", "ъ"=>"'", "Ы"=>"I", "ы"=>"i", "Ь"=>"'", "ь"=>"'", "Э"=>"E'", "э"=>"e'", "Ю"=>"YU", "ю"=>"yu", "Я"=>"YA", "я"=>"ya",];

[/spoiler]

Обязательные условия:

1. Заменить символы используя цикл foreach. Урок 10. Использование цикла foreach
2. Функция должна возвращать полученную строку в транслите с помощью return. Урок 11. Написание своих функций

3. <?
   if(isset($_POST['str'])) {
     echo "<p><b>Первоначальная строка: </b>".trim($_POST['str'])."</p>";
     echo "<p><b>Полученная строка транслитом: </b>".kirToLat(trim($_POST['str']))."</p>";
   }
   ?>
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Перевод кирилицы в латиницу</title>
   </head>
   <body>
     <form action="" method="post">
       <input type="text" name="str" placeholder="Введите текст для перевода в кирилицу">
       <input type="submit" value="Перевести">
     </form>
   </body>
   </html>

Результат выполнения функции:

[spoiler title=»Решение»]

<?
function kirToLat($str) {
  $abc = ["А"=>"A",	"а"=>"а", "Б"=>"B", "б"=>"b", "В"=>"V", "в"=>"v", "Г"=>"G", "г"=>"g", "Д"=>"D", "д"=>"d", "Е"=>"E", "е"=>"e", "Ё"=>"YO", "ё"=>"yo", "Ж"=>"J", "ж"=>"j", "З"=>"Z", "з"=>"z", "И"=>"i", "и"=>"i", "Й"=>"Y", "й"=>"y", "К"=>"K", "к"=>"k", "Л"=>"L", "л"=>"l", "М"=>"M", "м"=>"m", "Н"=>"N", "н"=>"n", "О"=>"O", "о"=>"o", "П"=>"P", "п"=>"p", "Р"=>"R", "р"=>"r", "С"=>"S", "с"=>"s", "Т"=>"T", "т"=>"t", "У"=>"U", "у"=>"u", "Ф"=>"F", "ф"=>"f", "Х"=>"H", "х"=>"h", "Ц"=>"C", "ц"=>"c", "Ч"=>"CH", "ч"=>"ch", "Ш"=>"SH", "ш"=>"sh", "Щ"=>"ScH", "щ"=>"sch", "Ъ"=>"'", "ъ"=>"'", "Ы"=>"I", "ы"=>"i", "Ь"=>"'", "ь"=>"'", "Э"=>"E'", "э"=>"e'", "Ю"=>"YU", "ю"=>"yu", "Я"=>"YA", "я"=>"ya",];
  if(!$str or $str == "") {return false;} else {
    foreach ($abc as $rep_char => $char) {
      $str = str_replace($rep_char, $char, $str);
    }
    return $str;
  }
}
if(isset($_POST['str'])) {
  echo "<p><b>Первоначальная строка: </b>".trim($_POST['str'])."</p>";
  echo "<p><b>Полученная строка транслитом: </b>".kirToLat(trim($_POST['str']))."</p>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Перевод кирилицы в латиницу</title>
</head>
<body>
  <form action="" method="post">
    <input type="text" name="str" placeholder="Введите текст для перевода в кирилицу">
    <input type="submit" value="Перевести">
  </form>
</body>
</html>

[/spoiler]