Css код: Как структурирован CSS — Изучение веб-разработки — Независимое театральное объединение "Зрительские симпатии"

Содержание

Разбираем CSS-код — Как создать сайт

Урок №2
Разбираем CSS код

В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:


h2 {
 color: white;
 background-color: green;
}
p {
 color: orange;
 font-size: 20px;
}

Открыв в браузере файл index.html вы должны увидеть следующее.

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

CSS-код обычно располагают в шапке HTML-документа и обрамляют тегами <style> </style>. Сам CSS-код начинается с имени тега, а затем идут фигурные скобки { }, внутри которых располагаются CSS-свойства, именно они и влияют на внешний вид HTML-тегов.

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


имяТега { 
 CSS-свойство: значение; 
}

После CSS-свойства, нужно обязательно ставить двоеточие :, а после значения точку с запятой

;

Для заголовка h2 мы применили следующие CSS-свойства и значения:
color: white; — цвет шрифта — белый,
background-color: green; — цвет фона — зелёный.

Для абзацев p мы применили следующие CSS-свойства и значения:
color: orange; — цвет шрифта — оранжевый,
font-size: 20px; — размер шрифта — 20 пикселей.

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

Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.

К заголовку мы добавим четыре CSS-свойства:
width: 50%; — ширина заголовка должна занимать 50% окна браузера,
text-align: center; — заголовок должен выравниваться по центру,
padding: 5px; — между шрифтом и границей фона, должен появиться зазор в 5 пикселей,
font-family: Impact; — имя шрифта устанавливаем как Impact.

К абзацам мы добавим три CSS-свойства:
background-color: #ffc; — цвет фона абзацев быть светло-жёлтым,
width: 50%; — ширина абзацев должна занимать 50% окна браузера,
padding: 10px;

— между шрифтом и границей фона, должен появиться зазор в 10 пикселей,
font-family: Arial; — имя шрифта устанавливаем как Arial.

В итоге, ваш HTML-документ должен выглядеть следующим образом (новый добавленный CSS-код выделен красным цветом):


<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h2 {
    color: white;
    background-color: green;
    width: 50%;
    text-align: center;
    padding: 5px;
    font-family: Impact;
   }
   p {
    color: orange; 
    font-size: 20px;
    background-color: #ffc;
    width: 50%;
    padding: 10px;
    font-family: Arial;
   }
  </style>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана.    Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв в браузере, файл index.html вы должны увидеть следующее.

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

Читать далее: Основные CSS-свойства

Category: Разное

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014

Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

CSS: что это, основы языка разметки

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

Что такое CSS
Как работает CSS
Как устроен код CSS
Для чего нужны методологии
Кто и как работает с CSS-кодом

Что такое CSS

Когда вы открываете сайт в Интернете, то видите перед собой то, что разработчики называют фронтендом.

Фронтенд — часть сервиса, которая отвечает за внешнее представление программы. Он создаётся с помощью трёх основных инструментов — HTML, CSS и JavaScript.

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

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

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

Это главная страница Яндекс Практикума без разметки CSS

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

Но Интернет развивался быстро: в нём стало больше информации, сайтов и браузеров для их отображения. Каждый из браузеров мог поддерживать разные теги форматирования. Когда стандартных возможностей HTML стало не хватать, появился первый стандарт CSS — сначала очень скромный, позволяющий отформатировать цвет или выравнивание текста. А спустя ещё два года, в 1998-м, вышел стандарт CSS2. Он стал настоящим прорывом. Разработчики впервые смогли задавать блочную и строчную модели элементам, звуковые стили и работать с большим количеством элементов на сайте.

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

Сейчас без вёрстки страниц CSS невозможно представить полноценную веб-разработку. Если сравнивать сайт с домом, то HTML — это стены, пол и потолок, а CSS — краска, обои или даже картины на стене.

Материал по теме:

Почему стоит попробовать себя в веб‑разработке

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

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

Есть несколько способов это сделать. Например, можно прописать стили прямо в HTML в теге <style>, вот так:

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

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

Внешний файл можно подключить сразу к нескольким страницам.

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

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

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

Каждый может стать веб‑разработчиком

Освойте навыки востребованной профессии в IT меньше чем за год: научитесь писать чистый код, разрабатывать сайты и веб-приложения. Начните с бесплатной вводной части курса «Веб-разработчик».

Как устроен код CSS

Ключ к пониманию того, как работает CSS, — само название кода. CSS или Cascading Style Sheets переводится как «каскадная таблица стилей». Мы пойдем от простого к сложному и начнем расшифровывать с конца.

Почему стили

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

Стили или свойства CSS называются правилами. Каждое правило состоит как минимум из одного селектора и одной пары «свойство — значение».

Так выглядит код CSS: здесь мы задаём внешний вид для целого абзаца

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

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

Например, здесь:

мы говорим браузеру: пусть все заголовки второго уровня (селектор h3) будут иметь цвет (свойство color) зелёный (значение #32a846).

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

Почему таблица

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

Почему каскад

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

Например, сначала вы указали в коде, что все заголовки будут зелёными. А затем в середине документа — что они должны быть красными.

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

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

Если мы добавим в код инлайн-правило <р>Цвет текста стал синим — инлайн «перебивает» <style>.</p>— текст станет синим независимо от того, написан он вверху кода или внизу.

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

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

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

Сегодня есть несколько ключевых методологий. Одни из самых распространенных — БЭМ, методология, созданная в Яндексе, и Atomic CSS, или атомарный CSS.

Для чего нужны методологии

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

Чтобы этого не произошло, разработчики создают методологии. У Яндекс есть БЭМ (расшифровывается как «Блок, Элемент, Модификатор») — подход, в основе которого лежит разделение интерфейса на независимые блоки. Блоком считается независимый компонент страницы, например блок search form — форма поиска.

Так выглядят блоки с позиции пользователя. Источник

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

Другая методология, атомарный CSS, преследует сходные цели — сократить код, сделать его понятным и повысить возможность повторного использования CSS. Но, в отличие от БЭМ, здесь используются не смысловые блоки, а отдельные правила, точечно применяемые в нужных местах. Если мы хотим сделать текст большим, полужирным и красным, мы добавляем ему классы font-size-xl, font-size-bold и color-red, в которых уже прописаны все необходимые свойства. По сути, это универсальная коллекция стилей, которую можно применять в любых проектах.

Атомарный CSS позволяет сократить код и максимально переиспользовать стили в любых компонентах. За счёт универсальности атомарный подход используется в популярных фреймворках Tailwind и Bootstrap — это инструменты, которые упрощают работу с кодом за счёт готовых шаблонов и оформленного набора компонентов.

Кто и как работает с CSS-кодом

CSS в строгом смысле не является языком разработки, поэтому профессии «разработчик на языке CSS» не существует. Ещё в 2000-х, когда не существовало жёсткого разделения на фронтенд и бэкенд, программисты, писавшие на HTML и CSS, назывались «верстальщиками». Сейчас этот термин тоже используется — но намного чаще про таких специалистов говорят «веб-разработчик» или «фронтенд-разработчик».

Для веб-разработчика CSS — не единственный рабочий инструмент. Чтобы работать с фронтендом, нужно уметь строить каркас в HTML, писать на JavaScript, работать с фреймворками, понимать, как работает HTTP-протокол и браузерные API.

На практике эти знания могут пригодиться в таких проектах, как, например, интеграция платёжной системы, создание адаптивного сайта или интерфейса для сервиса. Звучит сложно, но в действительности веб-разработка считается одной из IT-профессий с комфортным порогом входа. Основам CSS можно научиться с нуля, не будучи техническим специалистом. Например, в Яндекс Практикуме есть 10-месячный курс веб-разработки, на котором можно разобраться в CSS, HTML и JavaScript, отработать навыки на практике, окончить обучение с пятью реальными проектами в портфолио, а возможно, и получить приглашение на работу.

Интернет развивается стремительно, поэтому у веб-разработчика, хорошо разбирающегося в CSS, большие перспективы. Несмотря на внешнюю простоту, в этом языке, как и во всей фронтенд-разработке, есть куда расти: можно изучать спецификации и адаптивную вёрстку, разбираться со смежными инструментами — Git, Webpack, Figma — или пополнять стек новыми технологиями. Веб-разработка — отличный способ войти в отрасль, попробовать себя — и развиваться дальше в том направлении, которое будет ближе и интереснее всего.

Статью подготовили:

Читать также:

Что такое GitHub и как он работает

Перейти в статью

Веб-сервер Nginx и что о нём должен знать каждый разработчик

Перейти в статью

Примеры кода CSS

Бесплатно Примеры кода CSS с codepen.io и других ресурсов.

Эффекты
Основы
Ввод
Макеты
СМИ
Навигация
Другое
Свойства

Примеры анимации

95 предметов

Библиотеки анимации

35 предметов

Анимированные фоны

31 шт.

Фон частиц

14 предметов

Треугольные фоны

11 предметов

Эффекты капли

24 предмета

Эффекты размытия

16 предметов

Книжные эффекты

35 предметов

Анимация границ

45 предметов

Эффекты с учетом направления

11 предметов

Анимация огня

24 предмета

Глассморфизм

39 предметов

Глитч-эффекты

18 предметов

Светящиеся эффекты

39 предметов

Эффекты героя

26 предметов

Эффекты наведения

98 предметов

Эффекты изображения

113 предметов

Жидкие эффекты

21 шт.

Примеры неоморфизма

58 предметов

Переходы между страницами

24 предмета

Бумажные эффекты

25 предметов

Эффекты параллакса

26 предметов

Эффекты перспективы

15 предметов

Показать анимации

14 предметов

Волновые эффекты

23 предмета

Эффекты прокрутки

24 предмета

Снежные эффекты

17 предметов

Текстовые эффекты

109 предметов

Текстовые анимации

82 шт.

Светящиеся текстовые эффекты

17 предметов

Текстовые эффекты тени

24 предмета

Текстовые 3D-эффекты

24 предмета

Эффекты сбоев текста

20 предметов

Текстовые эффекты при наборе текста

11 предметов

Эффекты воды

16 предметов

3D-примеры

45 предметов

Стрелы

63 предмета

Фоновые узоры

169 предметов

Фиксированные фоны

20 предметов

Значки

37 предметов

Примеры границ

43 предмета

Блок-котировки

38 предметов

Кнопки

193 предмета

3D-кнопки

33 предмета

Анимированные кнопки

14 предметов

Эффекты нажатия кнопки

20 предметов

Плавающие кнопки действий

11 предметов

Призрачные кнопки

11 предметов

Мульти (групповые) кнопки

22 предмета

Эффекты наведения на кнопку

40 предметов

Кнопки градиента

22 предмета

Кнопки отправки

12 предметов

Плоские пуговицы

35 предметов

Кнопки закрытия

15 предметов

Кнопки загрузки

17 предметов

Иконки социальных сетей

27 предметов

Кнопки социальных сетей

18 предметов

Кнопки воспроизведения/паузы

15 предметов

Библиотеки кнопок

14 предметов

Карточки

130 предметов

Карточки блога

25 предметов

Эффекты наведения карты

25 предметов

Флип-карты

24 предмета

Карточки дизайна материалов

15 предметов

Открытки с фильмами

13 предметов

Карточки товаров

26 предметов

Карточки профиля

22 предмета

Карты рецептов

8 предметов

Визитные карточки

17 предметов

Сложенные карты

11 предметов

Цветовые палитры

26 предметов

Углы

21 шт.

29 предметов

Кассовая форма

17 предметов

Формы подписки

17 предметов

Ввод текста

29 предметов

Радиокнопки

88 предметов

Ползунки диапазона

21 шт.

14 предметов

Кадры

11 предметов

Галереи

57 предметов

Игры

14 предметов

Иконки

27 предметов

Иллюстрации

41 шт.

Сетки изображений

15 предметов

Инфографика

19 предметов

Айфоны

20 предметов

Клавиатуры

11 предметов

Логотипы

33 предмета

Музыкальные плееры

13 предметов

Плакаты

31 шт.

Загрузка скелета

10 предметов

Слайдеры

101 шт.

Слайд-шоу

28 предметов

Таблицы

43 предмета

Отзывы

12 предметов

Миниатюры

28 предметов

Иконки погоды

17 предметов

Погодные виджеты

16 предметов

Аккордеонные меню

9 предметов

Аккордеоны

37 предметов

Горизонтальные аккордеоны

8 предметов

Вертикальные аккордеоны

10 предметов

Панировочные сухари

20 предметов

Иконки меню гамбургеров

51 шт.

31 шт.

пользовательских свойства (переменные)

39 предметов

фильтр

18 предметов

флексбокс

19 предметов

переменная шрифта

16 предметов

градиент

29 предметов

сетка

35 предметов

линейно-градиентный

12 предметов

маска

13 предметов

траектория движения

14 предметов

позиция: липкая;

9 предметов

форма снаружи

19 предметов

текст-штрих

14 предметов

стиль кода. CSS | Документация WebStorm

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

Вкладки и отступы

Пустые строки

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

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

Другое

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

Расположение

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

Чтобы включить сортировку, установите флажок Сортировать свойства CSS.
Выберите По имени, чтобы все свойства CSS в каждом блоке были переупорядочены в алфавитном порядке. WebStorm игнорирует префиксы, зависящие от поставщика, но сохраняет несколько префиксов, зависящих от поставщика, для определенного свойства CSS, отсортированного по альфа-каналу.
граница: сплошная 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; радиус границы: 4px; черный цвет;
Чтобы определить собственную стратегию сортировки, выберите параметр «Пользовательский порядок» и укажите желаемый порядок сортировки в текстовом поле рядом с ним.
Используйте запятые и пробелы в качестве разделителей и пропускайте свойства, зависящие от поставщика, поскольку WebStorm всегда группирует их с соответствующим без префикса. Внутри такой группы свойства сортируются по префиксу производителя, а свойство без префикса идет последним.
Регулярные выражения приветствуются в списке Custom Order, например, .* соответствует любому свойству.
WebStorm запоминает измененный список Custom Order и восстанавливает его, если вы отключите пользовательскую сортировку, а затем включите ее снова.

Для сортировки всех свойств CSS в файле

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

Дополнительные сведения см. в разделе Основы редактора: переформатирование и реорганизация кода.