Вжух, и ваш сайт легким нажатием клавиш преобразился
Что за CSS?
CSS — знаменитые каскадные таблицы стилей (Cascading Style Sheets), которые превращают веб-страницу из блеклой серой массы в яркий и запоминающийся сайт.
Идея CSS появилась в начале 90-х годов, когда мировое сообщество всерьез задумалось над унификацией стандартов под все браузеры. Таким образом, появились HTML и CSS. Однако на первых порах на CSS особого внимания не обращали — у каждого браузера были собственные настройки стиля, которые удовлетворяли потребности как посетителей веб-сайтов, так и их разработчиков.
Но в 1994 году каскадными таблицами заинтересовались Хокон Виум Ли и Берт Бос, а уже в 1996 году была издана рекомендация CSS1.
В первой версии настройки в основном касались текста и размещения материалов на страничке. Тексту можно было придать особый шрифт, цвет, расстояние между символами, высоту строки — в общем, почти все, что мы можем видеть в привычном «ворде».
Вторая версия вышла двумя годами позже. В нее добавили блочную верстку, голосовые и звуковые настройки, расширенные инструментарий селекторов. До 2011 года новых версий не выходило, пока не выпустили CSS2.1 с исправлением ошибок предыдущей.
Более 10 лет разработчики потратили на введение CSS3, которую сейчас и используют. Она вобрала в себя все, что было в старых версиях, и добавила некоторые возможности для веб-разработки без использования JavaScript, например, часть анимаций.
Сейчас ведется разработка 4 поколения CSS, но большинство идей хранятся в черновом варианте.
Как выглядит CSS в коде?
Как и JavaScript, CSS может прописываться внутри HTML-разметки, директивой «@import» или отдельным файлом, который затем подключается в HTML. В основном пользуются последним способом, так как читаемость кода в этом случае не страдает. Благодаря этому, на хостинге можно увидеть несколько файлов — index.html, script.js и style.css (названия можно дать любое — это же файлы). Каждый из них отвечает за свою часть сайта, последний отвечает именно за CSS.
В зависимости от типа подключения CSS код будет иметь пару отличий. Если стиль прописывается внутри разметки, то код можно прописать напрямую в элементе:
Отступов в примерах нет — Яндекс.Дзен не умеет в отступы :(
<body>
<p style="font-size: 14px; color: orange">Это Спринтхост</p>
</body>
Если CSS находится в отдельном файле, то нужно использовать селекторы — это особые «крючочки», которые позволяют выбрать нужный нам элемент и преобразовать его. Они бывают универсальным, селекторами тегов, идентификаторов, классов, атрибутов, потомков, элементов, а также псевдоклассов и псевдоэлементов.
Файл HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="SPH">Удобный хостинг</div>
<p class="Sprinthost" >Бесподобная техподдержка</p>
</body>
Файл CSS:
- По тегу — стиль заденет все указанные теги:
p {
font-size: 14px;
color: orange;
}
По классу:
.Sprinthost {
font-size: 14px;
color: orange;
}
По идентификатору:
# SPH {
font-size: 16px;
color: purple;
}
В целом, формат кода везде один: селектор, фигурные скобки, свойство (color, font-size, float и тд) и его значение (red, 14px, left и тд). Важно не забывать ставить двоеточие «:» между свойством и его значением, а также точку с запятой «;» между самими свойствами. А если стиль прописывается в элементе в разметке, то нужно использовать кавычки.
Стоит ли изучать CSS?
Веб-мастерам точно нужно изучать CSS, так как это одна из главнейших составляющих хорошего сайта. Без CSS сайт будет выглядеть, будто создан на заре появления интернета. При помощи «каскадных таблиц» можно выделить ваш ресурс от сотни других своим дизайном и стилем. Для бизнеса это может стать ключевым пунктом. Например, услуга или продукт по качеству и цене сопоставима с конкурентами, соответственно, клиент уже не может выбрать нужное по самым очевидным соображениям цены/качества. В таком случае подключается не для всех очевидные возможности — внешний вид сайта, тип общения с клиентом, скорость ответа — все то, что вызывает положительные эмоции у человека. Серый и блеклый сайт точно отпугнет нового клиента.
Как и любой другой язык программирования, CSS требует постоянной практики. Тренироваться можно и в обычном текстовом документе, но удобнее на хостинге. В файловом менеджере Спринтхост элементы кода выделяются разными цветами, поэтому они достаточно легко читаются. Кроме того, можно тут же посмотреть результат работы и показать его кому-нибудь, можно даже у нашей техподдержки спросить совета. В общем, вариантов для изучения много, а профессия фронтенд-разработчика актуальна, поэтому дерзайте и пробуйте новое!