Для чего нужен css – Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка | Дропшиппинг

Содержание

CSS :: Для чего нужен CSS?

В процессе изучения языка гипертекстовой разметки HTML мы уже упоминали о каскадных таблицах стилей, в частности отметили, что в то время как HTML используется главным образом для логической разметки html-документа, CSS отвечает за его внешний вид. Что же такое CSS?

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

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

Такое разделение весьма уместно и обладает рядом преимуществ, позволяющих более эффективно осуществлять разработку сайтов и веб-приложений. Действительно:

появляется возможность хранить коды HTML и CSS в разных местах или даже файлах, что значительно облегчает их разработку и последующую поддержку, а также позволяет разделить работу дизайнера и программиста;
хранение таблиц стилей CSS в отдельном файле несколько ускоряет загрузку страниц, т.к. при первом же использовании файл с таблицами кэшируется браузером (т.е. помещается в специально отведенное браузером место на локальном диске для быстрого последующего доступа к нему) и при последующем обращении к таблицам браузер не закачивает файл с ними заново по сети, а берет из кэша;
отпадает необходимость применения тегов HTML не по своему прямому назначению; например, для того, чтобы отобразить текст курсивом, не нужно больше использовать тег <em> или ему подобный, нарушая логическую разметку страницы, поскольку теперь имеется возможность применить соответствующее свойство CSS;

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

Кстати, чтобы иметь возможность не на словах, а на реальном примере убедиться в возможностях CSS, достаточно посетить известный проект ‘CSS Zen Garden’, на котором представлено более 200 вариантов совершенно разного дизайна на основе всего лишь одного html-документа (смотреть).

belarusweb.net

Что такое CSS и для чего он нужен

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

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

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

Что такое CSS?

CSS (Cascading Style Sheets) – каскадные таблицы стилей. Фактически они служат для того чтобы отделить друг от друга структуру страницы и ее содержание от ее внешнего вида. Сейчас попробую объяснить это подробнее.

Если страница полностью написана на HTML, то каждый элемент кода определяет не только элемент содержимого страницы, но и его способ отображения. Например, не только, что вот в таком-то месте находится текст «Hello», но и то, что этот текст выделен жирным и красным цветом.

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

Более того, известно, что Гугл не очень-то любит страницы, на которых используются старые версии html разметки (когда свойства прописаны с помощью html, а не в css). Вообще такие страницы и способ их создания (верстка) называются невалидными. Нужно стараться избегать этого.

Теперь, я надеюсь, Вы поняли, что такое CSS код и зачем нужна эта технология. Распространилась она уже, кстати, очень давно, поэтому встретить сайт без css крайне сложно. Все бесплатные шаблоны также используют css. Поэтому по запросу «скачать css шаблон» вы, скорее всего, найдете валидную верстку.

Как я уже писал выше, любой вебмастер должен знать основы css (стили, спрайты селектор и т.д.), чтобы правильно править свои сайты и не захламлять код. Рекомендую всем найти краткий справочник и немного его почитать. Не обязательно разбираться во всех тонкостях, но понимать, что такое css и знать её основы — нужно каждому!

blogwork.ru

Css свойства оформления сайта: обзор самых основных

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

Что нужно знать для начала

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

body{ background: #fff; color: #ccc; … }

body{

background: #fff;

color: #ccc;

…

}

Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.

Основные css-свойства – что нужно знать при работе с css

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Стили для текстового содержимого

Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: Размер шрифта в html, Как задать цвет шрифта в html, Как задать шрифт в html.

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

Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.

Отображение на экране

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

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

Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)

Inline- преобразование в строчный элемент.

Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).

Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)

None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.

Опять же, это не все значения, только самые основные.

Свойства размера

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Width – ширина

Height – высота

Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.

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

Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:

*{ box-sizing: border-box; }

box-sizing: border-box;

}

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

Соответственно, записав так:

div{border: 3px solid blue;}

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

Цвет и фон

Это основные параметры, которые отвечают за восприятие нами информации. В значении в этим свойствам записывается одно и то же – цвет, который можно определить с помощью ключевых слов, в шестнадцатеричном коде или каком-то цветовом формате (чаще всего rgb). Единственное отличие – цвет определяется с помощью свойства color, а фон – с помощью background.

CSS стили внутри тега – так тоже можно

Правильно будет создавать отдельный файл формата css и в нем писать все необходимые стили, но также существует возможность встроить все стили в html, в один тег. Этот тег – style. Он парный, писать его нужно обязательно в пределах тега head. Используется так:

<style>

font-size: 14px;

}

… другие стили

</style>

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Что такое CSS? — Веб-технологии для разработчиков

Перейти к предыдущему разделу:
CSS для начинающих Эта первая статья руководства по CSS для начинающих кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.

Информация: Что такое CSS

Каскадные таблицы стилей (Cascading Style Sheets = CSS) — это язык, который отвечает за визуальное представление документов пользователю.

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

А представление документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.

Примеры

Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (HyperText Markup Language — Язык ГиперТекстовой Разметки)
Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (XML User Interface Language — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.

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

Подробнее

Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.

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

Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:

HTML	о веб-страницах
XML	о структуре документов в общем
SVG	о графике
XUL	о пользовательских интерфейсах в Mozilla

Во второй части данного руководства вы встретите примеры этих языков разметки.

Подробнее

В терминах CSS программа, которая выводит документ пользователю, так называемому user agent (UA). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.

Прочие определения и термины, имеющие отношение к CSS, вы можете найти в Определениях спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.

К действию: Создание документа

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

Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем doc1.html.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  </head>

  <body>
    <p>
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

Посмотреть демо

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

Что дальше?

Перейти к следующему разделу:
Зачем нужен CSS?В документе, который вы создали, CSS пока что не использовался. В следующем разделе вы научитесь использовать CSS для стилизации документа.

developer.mozilla.org

Что такое CSS?

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

Возможно, вы уже просматривали раздел по HTML, если нет, то стоит заглянуть для ознакомления. В одном из первых материалов — Что такое HTML?, мы можем узнать, что HTML – это язык разметки гипертекстовых документов и отвечает за расположение элементов в документе (на сайте). Все сайты состоят из html и css.

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

Теперь тоже понятие, только немного своими словами:

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

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

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

Например, на сайте имеются заголовки второго уровня:


<h3>Заголовок 2</h3>

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

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


h3{
font-size: 20px;
color: green;
}

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

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

и подключаются специальной командой к документу, где у нас содержится html разметка.

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

В следующих статьях это будет разобрано более подробно.

Всем удачи!

Возможно вам так же будет интересно:

alexfine.ru

Продвинутые CSS-селекторы, о которых вы не знали

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

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

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

($=) – атрибут оканчивается определенным значением

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

div[id$=“_myDiv”] {
  // CSS правило
}

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

<!-- HTML -->
<div> 
  Какой-то текст 
</div>

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

div[id$="_LoginPanel"] {
  margin: 0 3em;
  padding: 1em;
}

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

div[id$=“myDynamicDiv”] {
  // CSS правила
}

Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):

<!-- HTML -->
<div>
  <h2>My custom panel</h2>
</div>

Селектор будет выглядеть следующим образом:

div[class^="myPanel_"] {
  // CSS правила
}

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

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

<div>
  <h2>Какой-то текст</h2>
  <form>...</form>
</div>

Выбор этого элемента будет выглядеть следующим образом:

div[class*="logoutPanel"] {
 // CSS правила
}

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

<!-- HTML -->
<div class=“3453_mydynamicdiv”>
  <h2>My Dynamic Div</h2>
</div>

Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:

// 1-й способ – выбор конкретного элемента класса
div[class="3453_mydynamicdiv"] {
  // CSS правила
}

// 2-й способ – выбор всех элементов класса
.3453_mydynamicdiv {
  // CSS правила
}

Краткий обзор селекторов атрибутов:

= значение атрибута эквивалентно определённым символам;
$= значение атрибута оканчивается определенными символами;
^= значение атрибута начинается с определенных символов;
*= значение атрибута содержит определенные символы.

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

a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// вы поняли

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

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

<ul>
 <li>Blog</li>
 <li>About</li> 
 <li>Videos</li>
 <li>Music</li>
 <li>Merch</li>
</ul>

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

.nav li:not(.highlight) {
  margin: 0 1em 0 0;
  padding: 5px 16px;
  display: inline-block;
}

Можно пойти дальше и выбирать любые атрибуты.

Например:

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

p::first-letter {
  // стиль буквы
}

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):

p:first-child::first-letter {
 // добавляем стили только к первой букве первого абзаца текста
}

Этот подход освобождает от необходимости использования JavaScript.

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

article:first-of-type {
  margin-top: 0;
}

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

article:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

Вы познакомились с «продвинутыми» CSS class selector, о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.

Данная публикация представляет собой перевод статьи «Advanced CSS Selectors you never knew about» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

30 селекторов CSS, которые нужно запомнить

От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.

1.*

* { margin: 0; padding: 0; }

* {

margin: 0;

padding: 0;

}

Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Звездочку * также можно использовать для дочерних селекторов.

#container * { border: 1px solid black; }

#container * {

border: 1px solid black;

}

Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

2. #X

#container { width: 960px; margin: auto; }

#container {

width: 960px;

margin: auto;

}

Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.

Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?

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

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

3. .X

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

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

4. X Y

li a { text-decoration: none; }

li a {

text-decoration: none;

}

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

Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

5. X

a { color: red; } ul { margin-left: 0; }

a { color: red; }

ul { margin-left: 0; }

Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul {}.

Просмотреть DEMO.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

6. X:visited and X:link

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

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

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

7. X + Y

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

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

8. X>Y

div#container > ul { border: 1px solid black; }

div#container > ul {

border: 1px solid black;

}

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

<div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

<div>

<ul>

<li> List Item

<ul>

<li> Child </li>

</ul>

</li>

</ul>

</div>

Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.

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

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

9. X ~ Y

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

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

10. X[title]

a[title] { color: green; }

a[title] {

color: green;

}

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

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

11. X[href=»foo»]

a[href=»http://net.tutsplus.com»] { color: #1f6053; /* nettuts green */ }

a[href=»http://net.tutsplus.com»] {

color: #1f6053; /* nettuts green */

}

Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на http://net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.

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

Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

12. X[href*=»nettuts»]

a[href*=»tuts»] { color: #1f6053; /* nettuts green */ }

a[href*=»tuts»] {

color: #1f6053; /* nettuts green */

}

Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.

Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

13. X[href^=»http»]

a[href^=»http»] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

a[href^=»http»] {

background: url(path/to/external/icon.png) no-repeat;

padding-left: 10px;

}

Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.

Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.

Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://.

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

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

14. X[href$=».jpg»]

a[href$=».jpg»] { color: red; }

a[href$=».jpg»] {

color: red;

}

И снова мы пользуемся знаком регулярных выражений, $, для обращения к концу строки. В этом случае мы ведем поиск всех привязок, ссылающихся на изображение — или, по крайней мере, url’а, оканчивающегося на .jpg. Помните, что это, скорее всего, не сработает с gif’ами и png.

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

15. X[data-*=»foo»]

a[data-filetype=»image»] { color: red; }

a[data-filetype=»image»] {

color: red;

}

Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:

a[href$=».jpg»], a[href$=».jpeg»], a[href$=».png»], a[href$=».gif»] { color: red; }

a[href$=».jpg»],

a[href$=».jpeg»],

a[href$=».png»],

a[href$=».gif»] {

color: red;

}

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

<a href=»path/to/image.jpg» data-filetype=»image»> Image Link </a>

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

a[data-filetype=»image»] { color: red; }

a[data-filetype=»image»] {

color: red;

}

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

16. X[foo~=»bar»]

a[data-info~=»external»] { color: red; } a[data-info~=»image»] { border: 1px solid black; }

a[data-info~=»external»] {

color: red;

}

a[data-info~=»image»] {

border: 1px solid black;

}

А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (~) позволяет выбрать своей целью атрибут со списком значений, разделенным пробелами.

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

<a href=»path/to/image.jpg» data-info=»external image»> Click Me, Fool </a>

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

/* Target data-info attr that contains the value «external» */ a[data-info~=»external»] { color: red; } /* And which contain the value «image» */ a[data-info~=»image»] { border: 1px solid black; }

/* Target data-info attr that contains the value «external» */

a[data-info~=»external»] {

color: red;

}

/* And which contain the value «image» */

a[data-info~=»image»] {

border: 1px solid black;

}

Просмотреть DEMO.

Совместимость

IE7+

Firefox

Chrome

Safari

Opera

17. X:checked

input[type=radio]:checked { border: 1px solid black; }

input[type=radio]:checked {

border: 1px solid black;

}

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

Просмотреть DEMO.

Совместимость

IE9+

Firefox

Chrome

Safari

Opera

18. X:after

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

Многие познакомились с этими классами при первой встрече с хаком clear-fix.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.clearfix:after { content: «»; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

.clearfix:after {

content: «»;

display: block;

clear: both;

visibility: hidden;

font-size: 0;

height: 0;

}

.clearfix {

*display: inline-block;

_height: 1%;

}

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

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

Совместимость

IE8+

Firefox

Chrome

Safari

Opera

19. X:hover

div:hover { background: #e3e3e3; }

div:hover {

background: #e3e3e3;

}

Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!

Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.

Чаще всего мы используем этот селектор при применении к тэгам-привязкам, например, border-bottom , когда над ними проводят мышью.

a:hover { border-bottom: 1px solid black; }

a:hover {

border-bottom: 1px solid black;

}

Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.

Совместимость

IE6+

Firefox

Chrome

Safari

Opera

20. X:not(selector)

div:not(#container) { color: blue; }

div:not(#container) {

color: blue;

}

Псевдокласс отрицания чрезвычайно полезен. Скажем, я хочу выбрать все div’ы, кроме одного, который является id container. Фрагмент выше выполнит эту работу идеально.

Или, если бы я хотел выбрать каждый отдельный элемент (не советую), кроме тэгов абзаца, можно было бы сделать:

*:not(p) { color: green; }

*:not(p) {

color: green;

}

Просмотреть DEMO.

Совместимость

IE9+

Firefox

Chrome

Safari

Opera

21. X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em; }

p::first-line {

font-weight: bold;

font-size: 1.2em;

}

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

Псевдоэлемент состоит из двух двоеточий: ::

Выберите первую букву абзаца

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }

p::first-letter {

float: left;

font-size: 2em;

font-weight: bold;

font-family: cursive;

padding-right: 2px;

}

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

Чаще всего оно используется для создания «газетных» стилей для первой буквы абзаца.

p::first-line { font-weight: bold; font-size: 1.2em; }

p::first-line {

font-weight: bold;

font-size: 1.2em;

}

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

«Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник

Просмотреть DEMO.

Совместимость

IE6

Firefox

Chrome

Safari

Opera

22. X:nth-child(n)

li:nth-child(3) { color: red; }

li:nth-child(3) {

color: red;

}

Помните время, когда у нас не имелось возможности выделять отдельные элементы в стеке? Псевдокласс nth-child решает эту проблему!

Пожалуйста, обратите внимание, что nth-child принимает в качестве параметра целое число, однако, оно не начинается с нуля. Если хотите выбрать второй пункт списка, пользуйтесь li:nth-child(2).

Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.

Просмотреть DEMO.

Совместимость

IE9+

Firefox

Chrome

Safari

Opera

23. X:nth-last-child(n)

li:nth-last-child(2) { color: red; }

li:nth-last-child(2) {

color: red;

}

Что получится, если бы у вас был огромный список пунктов в ul, и вам нужно было всего лишь обратиться, скажем, к третьему от конца пункту? Помимо выполнения li:nth-child(397), вы могли бы вместо этого применить псевдокласс nth-last-child.

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

Просмотреть DEMO.

Совместимость

IE9+

Firefox

Chrome

Safari

Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black; }

ul:nth-of-type(3) {

border: 1px solid black;

}

Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.

Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.

Просмотреть DEMO.

Совместимость

IE9+

Firefox

Chrome

Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black; }

ul:nth-last-of-type(3) {

border: 1px solid black;

}

Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.

Совместимость

IE9+

Firefox

Chrome

Safari

Opera

26. X:first-child

ul li:first-child { border-top: none; }

ul li:first-child {

border-top: none;

}

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

Например, скажем, у вас есть список строк, и каждый из них содержит border-top и border-bottom. При таком размещении первый и последний пункт в этом наборе будут выглядеть немного странно.

Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.

Просмотреть DEMO.

Совместимость

IE7

Firefox

Chrome

Safari

Opera

27. X:last-child

ul > li:last-child { color: green; }

ul > li:last-child {

color: green;

}

В противоположность first-child, last-child выделит последний пункт родителя элемента.

Пример

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

Разметка

<ul>

</ul>

Здесь нет ничего особенного; всего лишь простой список.

CSS

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0; } li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c; }

ul {

width: 200px;

background: #292929;

color: white;

list-style: none;

padding-left: 0;

}

li {

padding: 10px;

border-bottom: 1px solid black;

border-top: 1px solid #3c3c3c;

}

Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.

Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.

Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.

li:first-child { border-top: none; } li:last-child { border-bottom: none; }

li:first-child {

border-top: none;

}

li:last-child {

border-bottom: none;

}

Вот так; все исправлено!

Просмотреть DEMO.

Совместимость

IE9+

Firefox

Chrome

Safari

Opera

Ага … IE8 поддерживал :first-child , но не:last-child. Поди разберись!

28. X:only-child

div p:only-child { color: red; }

div p:only-child {

color: red;

}

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

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

Давайте представим следующую разметку.

<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>

<div><p> My paragraph here. </p></div>

<div>

<p> Two paragraphs total. </p>

</div>

В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.

Просмотреть DEMO.

Совместимость

IE9+

Firefox

Chrome

Safari

Opera

29. X:only-of-type

li:only-of-type { font-weight: bold; }

li:only-of-type {

font-weight: bold;

}

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

Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.

ul > li:only-of-type { font-weight: bold; }

ul > li:only-of-type {

font-weight: bold;

}

Просмотреть DEMO.

Совместимость

IE9+

Firefox 3.5+

Chrome

Safari

Opera

30. X:first-of-type

Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.

Проверка

Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

<div>

<p> My paragraph here. </p>

<ul>

</ul>

<ul>

</ul>

</div>

Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.

Решение 1

Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold; }

ul:first-of-type > li:nth-child(2) {

font-weight: bold;

}

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

Решение 2

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

p + ul li:last-child { font-weight: bold; }

p + ul li:last-child {

font-weight: bold;

}

В этом сценарии мы находим ul, непосредственно следующий за тэгом p, а затем найдем самый последний его дочерний элемент.

Решение 3

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

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

ul:first-of-type li:nth-last-child(1) {

font-weight: bold;

}

На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!

Просмотреть DEMO.

Совместимость

IE9+

Firefox 3.5+

Chrome

Safari

Opera

Заключение

Если вы корректируете более старые браузеры, типа Internet Explorer 6, вам все же следует быть осторожным при использовании новых селекторов. Но, пожалуйста, не позволяйте отпугнуть вас от их изучения. Вы окажете себе этим медвежью услугу. Не стесняйтесь сверяться здесь со списком совместимости с браузерами. Как альтернативу можно использовать прекрасный скрипт IE9.js Dean Edward’а для предоставления этим селекторам поддержки в старых браузерах.

Во-вторых, при работе с библиотеками JavaScript, вроде популярного jQuery, всегда, где это возможно, старайтесь отдавать предпочтение использованию «родных» селекторов CSS3 перед пользовательскими методами/селекторами библиотеки. Ваш код от этого станет выполняться быстрее, так как движок селекторов может использовать исконный парсинг браузера охотнее, чем свой собственный.

Спасибо за прочтение урока по селекторам CSS, надеюсь, вы усвоили пару приемов!

Автор: Jeffrey Way

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: [email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com