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

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

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

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 это принципиально разные вещи, но они связаны между собой. Правилом хорошего тона является разделение кодов между собой, чтобы не смешивать их на одной странице.

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

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

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

Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.

Видеоверсия:

Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки - HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

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

Наглядный пример

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

Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.

Сайт на голом HTML, без CSS
Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com . Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper . Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке "Установить".

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.

Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.

Соц. сеть с подключенными CSS файлами

Как работает CSS?

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

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

Например, через селектор "p" мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор "h1".

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

Зачем изучать CSS?

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

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

Плюсы CSS

• С использованием CSS стилей, код HTML значительно сокращается. Порой в несколько раз. Это положительно влияет на скорость загрузки сайта, что в свою очередь облегчает его продвижение в поисковых системах;
• При обновлении дизайна сайта, больше нет необходимости править каждый тег отдельно на всех веб-страницах. Достаточно изменить пару строк в таблице стилей;
• CSS открывает перед вами широкие возможности в оформлении и разметке ваших сайтов;
• Отпадает необходимость использовать устаревшие теги. Многие поисковики не любят их, и использование устаревших тегов считается моветоном;
• Используя CSS вы идете в ногу с временем.

Как быстро научиться основам CSS

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

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

Содержание статьи

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

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

Синтаксис

У css один из самых простых синтаксисов, разобраться с ним можно буквально за пару часов. Вся таблица стилей (то есть css-файл) состоит из селекторов и описания свойств и значений для них. Вот пример:

Селектор{ color: red; }

Чтобы вам было понятнее, смотрите на этот рисунок:

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

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

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

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

Подключение и пример использования

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

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


Как никак она не выглядит, обыкновенный текст. И тут-то на помощь и приходят стили, которые помогают оформить любые элементы на веб-странице. Для начала я, естественно, подключу таблицу стилей к html-файлу. Пока в ней ничего нет. Чтобы обратиться к цитате можно использовать глобальный селектор blockquote . В таком случае стили будут применены ко всем цитатам. Пропишем такие правила для цитат:

Blockquote{ width: 300px; background: #333; border-left: 5px solid #ff3300; padding: 10px; color: #fff; font-style: italic; }

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

В общем, вот она работа css на примере. Я думаю, вы поняли цель этой технологии? Можете также попробовать открыть любой популярный сайт в браузерах Google Chrome или Яндекс.Браузер, после чего нажмите F12. Откроется так называемый отладчик. Попробуйте найти в исходном коде сайта подключение стилей (находится в теге head, стили подключаются с помощью). Попробуйте изменить путь к таблицам стилей, чтобы он был неправильным и посмотрите на сайт. Наверняка его внешний вид изменится в отрицательную сторону.

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

Также и с веб-технологиями, а именно с html и css. Они неразрывно связаны друг с другом.

История

Сегодня css, как и html активно развиваются. Еще в 2008—2009 годах многих свойств, которые есть сегодня, не существовало. Тогда веб-разработчики использовали CSS 2.1 (версия языка). Сегодня же активно используется CSS 3. И хотя до сих пор новые свойства поддерживаются не всеми браузерами, их все равно уже используют.

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

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

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

Что ж, кажется я сказал все, что хотел, а если что-то забыл упомянуть, обязательно допишу в будущем. Ну и, собственно, главный вопрос: «Легко ли учиться css и за сколько можно выучить ?». Могу с уверенностью заявить, что легко, а если найти хорошие видеоуроки, то можно изучить буквально за месяц. Естественно, у вас должно быть большое желание, должны гореть глаза, без этого процесс будет идти медленнее.

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

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

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

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

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

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

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

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

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

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

• Можно применять тег

  Пример

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

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

  Пример

  css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.

  4. Самый распространенный способ применений каскадной таблицы стилей — это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.

  Пример

  css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.

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

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

  С селекторами элементов (тегов ) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:

  P { color: red; }

  p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.

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

  Текст CSS будет таким:

  #idred { color: red; } .black { color: black; }

  Текст документа будет таким:

  Пример красного абзаца

  Пример черного абзаца

  Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.

  Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).

  В HTML документе они обозначаются с помощью соответствующих тегов: id для идентификатора и class для классов.

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

  Текст CSS:

  Текст HTML документа:

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

  Текст CSS:

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

  Текст HTML документа:

  Пример красного абзаца

  Пример абзаца, который имеет потомка элемент div

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

  Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).

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

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