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

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

Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.

Чтобы понять, что такое CSS, разберем простой пример. Когда сотрудник редакции газеты или журнала производит верстку издания, он делает пометки, по которым затем разрабатывается внешний вид готового материала. Например: «выделить заголовок красным», «сделать отступ», «увеличить расстояние между информационными блоками» и так далее. При работе с сайтами нельзя прописать подобные заметки обычным языком, браузер не сможет их прочитать. Чтобы он учел отметки, необходимо прописать их на языке CSS.

Принцип работы CSS

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

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

Как и где можно написать CSS

• CSS может быть прописан как атрибут непосредственно в HTML.

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

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

  синиц цвет текста

  При одновременном использовании id и class, приоритет будет отдан id.

  содержимое
  Приоритет отдаётся более узкой записи
  
  содержимое

  id в отличии от class нельзя использовать два раза

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

  Контекстные селекторы (второй пример)

  div { color: red; } div p { color: red; }

  Отличия между ними очевидны. Первой строкой мы задаем красный цвет для всех div, второй - только для содержимого тега p в div.

  содержимое
  содержимое

  Содержимое

  Есть ли различия между этими двумя вариантами?

  .demo { color: red; } p.demo { color: red; }

  Первый ведёт к изменению в любых тегах, помеченных классом demo

  содержимое

  Содержимое

  Второй будет применён только к тегу p с class="demo"

  содержимое

  Содержимое

  Каковы различия между

  .demo p { color: red; } p.demo { color: red; }

  В первом случае только теги p, содержащиеся в контейнере с классом demo, будут иметь красный цвет

  Красная палитра

  любого другого цвета

  Красная палитра

  Во втором для любого тега p с данным классом (см. выше).

  Аналогично с псевдоклассом:hover (изменения производятся при наведении мышки).

  Образец как использовать CSS текст в span и далее.

  И второй способ.

  Образец как пользоваться CSS текст в span и далее.

  Между ними нет различия.

  содержимое
  содержимое
  
  
  содержимое
  содержимое

  Стили применяются только для тега с определённым атрибутом.

  Содержимое

  Содержимое

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

  div { background: #AAA url() no-repeat left top; } Вот этот вариант не будет функционировать в IE, поскольку нет пробела между url()no-repeat:
  div { background: #AAA url()no-repeat left top; }

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

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

  Что такое HTML?

  HTML (Hypertext Markup Language) - это язык гипертекствой разметки . Не совсем понятно, верно? Упростив определение, можно сказать, что HTML - это "скелет" любой страницы.

  Примером может послужить следующий участок выдуманной нами странички:

  Заголовок страницы

  видимая часть ссылки(анкор)

  Заголовок страницы

  Это текст, параграф, заключенный в теги . Как правило, HTML состоит из тегов, которые открываются и закрываются, обрамляя те или иные элементы. Вот и сейчас абзац текста закончится и мы поставим.

  видимая часть ссылки(анкор)

  Почему "скелет"? Если Вы присмотритесь, то интерпретированный код совсем никак не оформлен. Не заданы ни цвета, ни размеры, ни позиционирование.

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

  Что такое CSS?

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

  Думаю, лучше всего показать пример:

  Зебры

  Окраска

  
  Узнать больше о зебрах!

  • Без использования CSS
  • С использованием CSS

  Зебры

  Зе́бры (лат. Hippotigris) - подрод рода лошади, включающий виды бурчеллова зебра (Equus quagga), зебра Греви (Equus grevyi) и горная зебра (Equus zebra). Гибридные формы между зебрами и домашними лошадьми называют зеброидами, между зебрами и ослами - зебрулами. Зебры живут маленькими группами, состоящими из самок с детёнышами и одного жеребца.

  Окраска

  По поводу фоновой окраски зебры часто встречаются две взаимоисключающие позиции: белая либо чёрная. Куратор отдела крупных млекопитающих зоопарка Атланты Лиза Смит (Lisa Smith) утверждает, что специалисты чаще всего описывают зебру как чёрную лошадь в белую полоску

  Зебры

  Зе́бры (лат. Hippotigris) - подрод рода лошади, включающий виды бурчеллова зебра (Equus quagga), зебра Греви (Equus grevyi) и горная зебра (Equus zebra). Гибридные формы между зебрами и домашними лошадьми называют зеброидами, между зебрами и ослами - зебрулами. Зебры живут маленькими группами, состоящими из самок с детёнышами и одного жеребца.

  Окраска

  По поводу фоновой окраски зебры часто встречаются две взаимоисключающие позиции: белая либо чёрная. Куратор отдела крупных млекопитающих зоопарка Атланты Лиза Смит (Lisa Smith) утверждает, что специалисты чаще всего описывают зебру как чёрную лошадь в белую полоску

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

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

  Что такое PHP?

  PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) - это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.

  Что это означает для нас? Давайте посмотрим пример использования PHP:

  echo "Привет, мир! Я - скрипт PHP.";
  ?>

  Привет, мир! Я - скрипт PHP.

  Характерной отличительной чертой данного языка является то, что результатом его обработки могут являться обычные HTML-теги (HTML-код). Именно поэтому он активно используется в среде веб-программирования. Также стоит отметить, что, в отличие от HTML, PHP умеет общаться с сервером, а также просматривать базы данных, "вытаскивать" нужную информацию и выводить на страницу.

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

  Именно благодаря языкам программирования, подобным PHP (и самому PHP), стало возможным создание CMS (Content Management System, "си эм эс") или Систем Управления Контентом.

  Что нам сейчас стоит уяснить? PHP-скрипты - это своеобразный "клей-конструктор" , который позволяет программировать вывод различной информации на экран пользователя. Для создания обычной статичной страницы в Интернете достаточно использования HTML в паре с CSS. Но если эта страница (к примеру, новость) является частью какого-либо динамического сайта, то скорее всего ее появление - это результат выполнения PHP-скрипта.

  Что такое JS?

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

  Для начала предлагаю рассмотреть небольшой пример того, что можно сделать с помощью JS:

  
  
  
  
  

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

  1. Определение CSS

  CSS (от англ. "Cascading Style Sheets", каскадные таблицы стилей) - список стилей для сайта на html

  Что такое стиль? Грубо говоря, стиль это то, как выглядит элемент на сайте. Например, любой текст можно написать размером 10 пикселей, а можно 14 пикселей. Можно написать черным цветом, можно синим. Можно подчеркнуть/наклонить/зачеркнуть и т.п. Все, что связано с форматированим текста делается через CSS.

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

  Список всех стилей на языке вебмастеров часто называют "таблица стилей CSS".

  2. Цели и задачи CSS

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

  3. Синтаксис CSS (селекторы)

  Каждое свойство и стиль описывается через "Селекторы". Его синтаксис следующий

  Селектор { атрибут : значение ; }

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

  Например

  .название_стиля { атрибут1 : значения1; атрибут2 : значения2; ... };

  Существует множество вариантов задания стилей CSS. Давайте разберем самые популярные на примерах.

  /*Задание общего стиля */ .global_style { font-size : 12px ; color : red ; } /**/ font.style1 { font-size : 10px ; color : blue ; } /*Задание общего стиля только для тега font */ #global_style2 { font-size : 14px ; color : red ; } h1 { font-size : 19px ; }

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

  .

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

  Третий вариант задания через решетку (#). Как и в первом случае он определен для всех элементов, но задавать его нужно не через class, а через атрибут id:

  В последнем варианте мы просто указали название тега

  и прописали ему стиль. Это значит, что теперь все теги

  будут наследовать значение этого стиля.

  4. Как и где задавать стили CSS

  5. В чем плюсы использования CSS

  • Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он изменится на каждой странице сайта
  • Это единственный способ изменять дизайн на сайте
  • Простой синтаксис языка

  6. Проблемы CSS с браузерами

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

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

  • -moz- для браузера Firefox
  • -webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
  • -ms- для браузера Internet Explorer
  • -o- для браузера Opera

  7. Ответы на часто задаваемы вопросы

  7.1. Что такое CSS3

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

  7.2. В чём разница между CSS и HTML?

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