Практическое задание 2

1. Откройте файл shablon . html . Сохраните его под новым именем ploshady . html в папке public_html .

2. Напишите между тегами новый заголовок «Площади домов».

3. В содержимое скопируйте текст из файла Площади домов.txt из папки html _ ccs _2 .

4. Стили будем писать в том же файлеstyle . css , который у нас создан в предыдущем уроке. Поэтому в файле ploshady . html установите связку с этой таблицей стилей, вставив между тегами и (рисунок 12)

Рисунок 12

5. Отформатируйте заголовки тегом

и присвойте каждому заголовку свой класс (рисунок 13).

Рисунок 13

Ваш файл ploshady . html сейчас должен выглядеть следующим образом (рисунок 14).

Рисунок 14

6. В таблице стилей style . css создайте следующую запись (рисунок 15)

Рисунок 15

7. Проверьте web-страницу в браузере. Результат на рисунке 16.

Рисунок 16

8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt. Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):

Рисунок 17

Практическое задание 3

Под каждый заголовком в файле ploshady . html есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:

Рисунок 18

5. ID-стиль для специфического элемента

Уроки CSS включают изучение так называемых id-стилей.

Любому элементу можно присвоить идентификаторid , а затем поставить в соответствие этому элементу какой-либо стиль, используя id .

Например:

Запись в файле таблиц стилей будет следующая

# test { color :#00 ffff }

Теперь можно поставить этот стиль в соответствие любому элементу в документе html:

...

...

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

Практическое задание 4

Сделаем заготовку для будущего меню нашего сайта.

1. Откройте файл shablon . html и сохраните его под новым именем menu . html в папке public_html.

2. В содержимое страницы файла menu . html внесите текст из файла menu . txt из папкиhtml _ css _2 .

3. Средствами html-тегов отформатируйте файл следующим образом:

• для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег

  ;

• для списка «Категории проектов» используйте нумерованный список
  ;
  1. для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список

     4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif ). Результат должен совпасть с рисунком 19.

     

     Рисунок 19

     5. Для этого меню сделаем отдельную таблицу стилей под именем style _ menu . css . Установите связку между файлом menu . html и таблицей стилей style _ menu . css , вставив запись между тегами и в файле menu . html .

     6. Создайте чистый документ и сохраните его под именем style _ menu .css в своей папке.

     7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue . Т.е. код будет выглядеть следующим образом (рисунок 20):

     

     Рисунок 20

     8. В файле style _ menu . css стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):

     Рисунок 21

     9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown . Т.е. код будет выглядеть следующим образом (рисунок 22):

     

     Рисунок 22

     10. В файле style _ menu . css стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):

     Рисунок 23

     11. И добавим еще цвет фона файлу menu.html (рисунок 24)

     Рисунок 24

     12. В результате получим следующую web-страницу (рисунок 25)

     

     Рисунок 25

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

     • style . css
       
     • style _ menu . css
     • ploshady . html
       
     • menu . html
       

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

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

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

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

     My-class {
     /* My awesome styles here */
     }

     My-class.custom {
     /* Specific styles to .my-class only if it only has the .custom class */
     }
     Таким образом, класс.custom сам по себе ничего не значит, но если вы примените его к элементу.my-class, то сможете немного изменить стили.my-class. Вы понимаете, что мы имеем в виду?

     Теперь вы понимаете суть, и давайте перейдем к паттернам. А начнем мы с элементов блочного уровня (block-level).

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

     Элементы блочного уровня

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

     Разметка

     Здесь для всего раздела мы взяли разделение с классом block-level и применили дополнительные классы. Вы, конечно же, можете сделать здесь то, что захотите, так как это ведь элемент блочного уровня. Если вы хотите применить один из этих стилей к изображению, не забудьте добавить к нему параметр display: block.

     
     Базовый CSS

     В демо мы применили несколько строк кода CSS к нашему маленькому div-элементу:

     Block-level {
     width: 120px;
     height: 120px;
     margin: 20px;
     position: relative;
     float: left;
     }
     Вы можете обнаружить больше стилей для шрифта, но это только лишь для демонстрации. Давайте сосредоточимся на основных стилях.

     Тени

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

     

     
     Суть заключается в том, чтобы задать совсем незначительные тени блочному элементу. Не стоит применять толстую темную тень, которая как будто бы кричит «ХЕЙ, Я ТУТ, ПОСМОТРИ!». Нужно что-то утонченное.

     Drop-shadow {
     background: #9479fa;
     }

     Drop-shadow.top {
     box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4)
     }

     Drop-shadow.right {
     box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4)
     }

     Drop-shadow.bottom {
     box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4)
     }

     Drop-shadow.left {
     box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4)
     }
     Посмотрите, как мы используем значение отрицательного распространения тени для того, чтобы придать глубины самой тени. Таким образом она выглядит более реалистично. Нам так кажется, по крайней мере.

     Примечание : цвет, использованный в объявлении box-shadow может варьироваться в зависимости от background-color вашего элемента. Чем светлее блок, тем светлее должна быть тень для того, чтобы контраст был несильным.

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

     

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

     Div {
     background: #69D2E7;
     }

     Emphasize-dark {
     box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
     }

     Emphasize-light {
     box-shadow: 0 0 0 10px rgba(255,255,255,.25)
     }

     Emphasize-inset {
     box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5)
     }

     Emphasize-border {
     box-shadow: inset 0 0 0 7px rgba(255,255,255,.5)
     }
     

     

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

     Div {
     background: #8ec12d;
     color: #333;
     }

     Embossed-light {
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
     }

     Embossed-heavy {
     border: 1px solid rgba(0,0,0,0.05);
     box-shadow:
     inset 0 2px 3px rgba(255,255,255,0.3),
     inset 0 -2px 3px rgba(0,0,0,0.3),
     0 1px 1px rgba(255,255,255,0.9);
     }
     Градиенты

     

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

     Div{
     background-color: #DEB8A0;
     box-shadow: 0 0 0 1px #a27b62;
     }

     Gradient-light-linear {
     background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     }

     Gradient-dark-linear {
     background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
     }
     В целом, техника заключается в том, чтобы добавить слой с градиентом от прозрачного до более прозрачного поверх вашего элемента. Примерно так же, как это делается в Photoshop. Довольно просто.

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

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

     Gradient-light-radial {
     background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
     }

     Gradient-dark-radial {
     background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
     }
     За исключением того факта, что нам пришлось проверять наш синтаксис каждый раз, когда нам хотелось добавить радиальный градиент, все прошло довольно просто, не так ли?

     Закругленные углы

     

     
     Замечали ли вы, что уже много лет шла борьба за возможность иметь параметр border-radius без префикса для всех современных браузеров, и теперь, когда они у нас есть, тенденция стремится к тому, что закругленные углы больше никому не нужны?

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

     Div {
     background: #fca1cc;
     }

     Light-rounded {
     border-radius: 3px;
     }

     Heavy-rounded {
     border-radius: 8px;
     }

     Full-rounded {
     border-radius: 50%;
     }

     Barrel-rounded {
     border-radius: 20px/60px;
     }
     Наша теория о border-radius (в зависимости от размера элемента):

     * На 0px у нас будут острые углы.

     * Между 1 и 4px у нас получатся слегка закругленные углы. Большинство людей даже не скажут, что эти углы закругленные, но они точно не подумают, что эти углы остры как нож!

     * Между 5 и 10px у вас получатся, по нашему мнению, ужасные углы. Они выглядят так, как будто вы пытались последовать инстинкту «делаем, потому что можем сделать». К тому же, как мы уже сказали ранее, мода на закругленные углы почти прошла.

     Есть два параметра, которые вам следует запомнить при использовании параметра border-radius:

     * border-radius: 50% дает нам идеальный круг, если вы оформляете квадратный элемент. Если это прямоугольник, то он превратится в эллипс.

     * Для того чтобы достичь border-radius в стиле иконки, то идеальное соотношение будет 6.4, если следовать совету . Так что, если у вас будет квадрат 100*100 пикселей, и вы захотите превратить его в иконку, то нужно будет применить border-radius со значением 16 пикселей (100/6.4=15.625).

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

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

     Разметка

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

     
     This is some dummy text to show an inline link.
     
     Link
     Строчные ссылки

     

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

     Inline-link-1 {
     display: inline-block;
     margin: 0 0.2em;
     padding: 3px;
     background: #97CAF2;
     border-radius: 2px;
     /* Font styles */
     text-decoration: none;
     font-weight: bold;
     color: white;
     }

     Inline-link-1:hover {
     background: #53A7EA
     }

     Inline-link-1:active {
     background: #C4E1F8
     }

     Inline-link-1:visited {
     background: #F2BF97
     }
     Важно : не забудьте добавить состояние visited к строчным ссылкам. Некоторые люди любят знать о том, какие ссылки они уже посещали. Здесь мы применили вращение на 180 градусов по окружности палитры оттенков. Это позволяет нам легко отличить стандартные ссылки от посещенных.

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

     Это был «сложный» пример. Давайте рассмотрим нечто более простое, основанное на стандартных стилях ссылок.

     

     
     .inline-link-2 {
     display: inline-block;
     border-bottom: 2px dashed rgba(0,0,0,0.9);
     /* Font styles */
     text-decoration: none;
     color: #777;
     }

     Inline-link-2:hover {
     border-bottom-style: dotted;
     }

     Inline-link-2:active {
     border-bottom-style: solid;
     }

     Inline-link-2:visited {
     border-bottom: 2px solid #97CAF2;
     }
     Суть заключается в том, чтобы сделать пунктирную линию для стандартного состояния. Когда вы наводите на ссылку, линия становится точечной, а если вы кликните по ней, она станет полностью подчеркнутой.

     

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

     Inline-link-3 {
     display: inline-block;
     position: relative;
     padding-left: 6px;
     /* Font styles */
     text-decoration: none;
     color: #6AB3EC;
     text-shadow: 0 1px 1px rgba(255,255,255,0.9);
     }

     Inline-link-3:hover {
     color: #3C9CE7;
     }

     Inline-link-3:before {
     content: "25BA";
     font-size: 80%;
     display: inline-block;
     padding-right: 3px;
     pointer-events: none;
     }

     Inline-link-3:hover:before {
     color: #F2BF97;
     }
     Блочные ссылки

     Теперь давайте рассмотрим пример с блочными ссылками. В большинстве случаев, когда пользователь может взаимодействовать с вашим сайтом или приложением, они должны быть оборудованы кнопкой. Кнопкой подтверждения комментария, перехода на другую страницу, авторизации и многого другого. Каким бы ни был элемент, который вы используете для этого («a», «input type="submit"», «button» и т.д.), возможно вам захочется применить некоторые интересные стили для привлечения пользователей.

     

     
     Первый пример самый-самый простой. Тем не менее, в некоторых дизайнах он очень хорошо смотрится. Здесь мы, конечно же, имеем в виду Windows 8.

     Metro {
     display: inline-block;
     padding: 10px;
     margin: 10px;
     background: #08C;
     /* Font styles */
     color: white;
     font-weight: bold;
     text-decoration: none;
     }

     Metro:hover {
     background: #0AF
     }
     Итак, давайте оставим тот же фундамент, но используем трехмерный эффект. Вы, вероятно, узнаете этот эффект, если следите за материалами на CSS-Tricks. Мы даже используем дочерний класс.

     Metro.three-d {
     position: relative;
     box-shadow:
     1px 1px #53A7EA,
     2px 2px #53A7EA,
     3px 3px #53A7EA;
     transition: all 0.1s ease-in;
     }

     Metro.three-d:active {
     box-shadow: none;
     top: 3px;
     left: 3px;
     }
     Разве выглядит не круто? Особенно в активном состоянии. Итак, на тему metro достаточно.

     

     
     Давайте попробуем что-нибудь полегче. Этот пример будет прозрачным с плотной границей и незначительной тенью.

     Bordered-link {
     display: inline-block;
     padding: 8px;
     border: 3px solid #FCB326;
     border-radius: 6px;
     box-shadow:
     0 2px 1px rgba(0, 0, 0, 0.2),
     inset 0 2px 1px rgba(0, 0, 0, 0.2);
     /* Font styles */
     text-decoration: none;
     font-size: 14px;
     text-transform: uppercase;
     color: #222;
     }

     Bordered-link:hover {
     border-color: #FDD68B
     }

     Bordered-link:active {
     border-color: #FEE8BD
     }
     

     

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

     Modern {
     display: inline-block;
     margin: 10px;
     padding: 8px 15px;
     background: #B8ED01;
     border: 1px solid rgba(0,0,0,0.15);
     border-radius: 4px;
     transition: all 0.3s ease-out;
     box-shadow:
     0 2px 2px rgba(0,0,0,0.3),
     0 0 4px 1px rgba(0,0,0,0.2);
     /* Font styles */
     text-decoration: none;
     text-shadow: 0 1px rgba(255,255,255,0.7);
     }

     Modern:hover {
     background: #C7FE0A
     }
     Мы даже можем добавить немного более сложные тени блока посредством следующего класса:

     Embossed-link {
     box-shadow:
     inset 0 -3px 2px rgba(0,0,0,.17),
     0 0 4px 1px rgba(0,0,0,.1),
     0 3px 2px rgba(0,0,0,.2);
     }

     Modern.embossed-link {
     box-shadow:
     inset 0 1px 0 rgba(255,255,255,0.5),
     0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2),
     inset 0 3px 2px rgba(255,255,255,.22),
     inset 0 -3px 2px rgba(0,0,0,.15),
     inset 0 20px 10px rgba(255,255,255,.12),
     0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2);
     }

     Modern.embossed-link:active {
     box-shadow:
     inset 0 -2px 1px rgba(255,255,255,0.2),
     inset 0 3px 2px rgba(0,0,0,0.12);
     }
     Последнее, но не менее важное, это класс, который добавляет псевдо-элемент, который позволяет нам сделать все так, как будто кнопка является частью фона.

     Socle {
     position: relative;
     z-index: 2;
     }

     Socle:after {
     content: "";
     z-index: -1;
     position: absolute;
     border-radius: 6px;
     box-shadow:
     inset 0 1px 0 rgba(0,0,0,0.1),
     inset 0 -1px 0 rgba(255,255,255,0.7);
     top: -6px;
     bottom: -6px;
     right: -6px;
     left: -6px;
     background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
     }
     Возможно, вам захочется изменить значение параметра border-radius, чтобы он соответствовал вашим требованиям. В зависимости от border-radius у кнопки, он может выглядеть странно.

     Элементы ввода

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

     Разметка

     
     CSS-код

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

     

     
     .simple-input {
     display: block;
     padding: 5px;
     border: 4px solid #F1B720;
     border-radius: 5px;
     color: #333;
     transition: all 0.3s ease-out;
     }

     Simple-input:hover {
     border-radius: 8px
     }

     Simple-input:focus {
     outline: none;
     border-radius: 8px;
     border-color: #EBD292;
     }
     Поля ввода – это довольно странные элементы, поэтому мы выставляем display:block для того, чтобы все облегчить. Отступы здесь для того, чтобы оставить контенту немного пространства.

     Вам когда-нибудь хотелось воссоздать поля ввода из iOS?

     

     
     .mac {
     display: block;
     border: none;
     border-radius: 20px;
     padding: 5px 8px;
     color: #333;
     box-shadow:
     0 0 4px rgba(0,0,0,0.1);
     }

     Mac:focus {
     outline: none;
     box-shadow:
     inset 0 2px 0 rgba(0,0,0,.2),
     0 0 4px rgba(0,0,0,0.1),
     0 0 5px 1px #51CBEE;
     }
     

     

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

     Depth {
     display: block;
     border: 1px solid rgba(255,255,255,0.6);
     background: linear-gradient(#eee, #fff);
     transition: all 0.3s ease-out;
     box-shadow:
     inset 0 1px 4px rgba(0,0,0,0.4);
     padding: 5px;
     color: #555;
     }

     Depth:focus {
     outline: none;
     background-position: 0 -1.7em;
     }
     

     

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

     Line {
     display: block;
     border: none;
     color: #333;
     background: transparent;
     border-bottom: 1px dotted black;
     padding: 5px 2px 0 2px;
     }

     Line:focus {
     outline: none;
     border-color: #51CBEE;
     }
     Подытожим

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

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

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

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

     Внимание! У вас нет прав для просмотра скрытого текста.

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

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

     Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

     Вот как это выглядит для элемента

     :

     Способы добавления CSS стилей

     Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

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

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

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

       Заголовок

       Текст первый

       Текст второй

       Текст третий

       Заголовок

       Текст первый

       Текст второй

       Текст третий

       В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

       : color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

       : font-size:20px; color:red; text-align:center .

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

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

       Параграф

       Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

       Заголовок

       Текст первый

       Текст второй

       Текст третий

       Задачи

       • Выравнивание текста по центру

         Используя встроенный стиль к параграфу выровняйте текст по центру.

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

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

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

       Объявление стиля состоит из двух частей: селектора и объявления . В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

       Рис. 1. Структура объявления

       Хотя приведенный пример пытается влиять только на пару свойств, необходимых для рендеринга HTML-документа, он сам по себе квалифицируется как таблица стилей. В сочетании с другими таблицами стилей (одна фундаментальная особенность CSS заключается в том, что таблицы стилей объединяются), правило будет определять окончательное представление документа.

       Виды каскадных таблиц стилей и их специфика

       1. Виды таблиц стилей

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

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

       К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

       Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

       1.2. Внутренние стили

       Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

       ...

       1.3. Встроенные стили

       Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

       Обратите внимание на этот текст.

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

       1.4. Правило @import

       Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

       Правило @import также используется для подключения веб-шрифтов:

       @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

       2. Виды селекторов

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

       2.1. Универсальный селектор

       Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

       2.2. Селектор элемента

       Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

       2.3. Селектор класса

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

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

       .headline { text-transform: uppercase; color: lightblue; }

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

       Инструкция пользования персональным компьютером

       2.4. Селектор идентификатора

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

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

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

       #sidebar { width: 300px; float: left; }

       2.5. Селектор потомка

       Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

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

       p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

       p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

       First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

       2.6. Дочерний селектор

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

       2.7. Сестринский селектор

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

       h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

       , не затрагивая остальные абзацы;

       h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

       2.8. Селектор атрибута

       Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

       [атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

       селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

       селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

       селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

       селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

       селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

       селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

       селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

       2.9. Селектор псевдокласса

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

       :hover — любой элемент, по которому проводят курсором мыши;

       :focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

       :active — элемент, который был активизирован пользователем;

       :valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

       :invalid — поля формы, содержимое которых не соответствует указанному типу данных;

       :enabled — все активные поля форм;

       :disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

       :in-range — поля формы, значения которых находятся в заданном диапазоне;

       :out-of-range — поля формы, значения которых не входят в установленный диапазон;

       :lang() — элементы с текстом на указанном языке;

       :not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

       :target — элемент с символом # , на который ссылаются в документе;

       :checked — выделенные (выбранные пользователем) элементы формы.

       2.10. Селектор структурных псевдоклассов

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

       :nth-child(odd) — нечётные дочерние элементы;

       :nth-child(even) — чётные дочерние элементы;

       :nth-child(3n) — каждый третий элемент среди дочерних;

       :nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

       :nth-child(n+2) — выбирает все элементы, начиная со второго;

       :nth-child(3) — выбирает третий дочерний элемент;

       :nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

       :first-child — позволяет оформить только самый первый дочерний элемент тега;

       :last-child — позволяет форматировать последний дочерний элемент тега;

       :only-child — выбирает элемент, являющийся единственным дочерним элементом;

       :empty — выбирает элементы, у которых нет дочерних элементов;

       :root — выбирает элемент, являющийся корневым в документе — элемент html .

       2.11. Селектор структурных псевдоклассов типа

       Указывают на конкретный тип дочернего тега:

       :nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

       :first-of-type — выбирает первый дочерний элемент данного типа;

       :last-of-type — выбирает последний элемент данного типа;

       :nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

       :only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

       2.12. Селектор псевдоэлемента

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

       :first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

       :first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

       :before — вставляет генерируемое содержимое перед элементом;

       :after — добавляет генерируемое содержимое после элемента.

       3. Комбинация селекторов

       Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

       img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

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

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

       H1, h2, p, span { color: tomato; background: white; }

       5. Наследование и каскад

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

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

       Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

       Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

       Принудительное наследование

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

       Как задаются и работают CSS-стили

       1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

       2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

       3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.

       
       Рис. 2. Режим разработчика в браузере Google Chrome

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

       div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

       5.2. Каскад

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

       Правило!important

       Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

       Специфичность

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

       для id добавляется 0, 1, 0, 0 ;
       для class добавляется 0, 0, 1, 0 ;
       для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
       для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
       универсальный селектор не имеет специфичности.

       H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

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

       Порядок подключённых таблиц

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