Каскадные таблицы стилей, также известные как CSS - это специальный язык для стилизации, который играет важную роль в мире веб-дизайна и разработки современных сайтов. Он используется для создания красивых, простых и интерактивных страниц - приятных глазу и удобных руке. Что в конечном итоге, и нужно потребителям - простым пользователям.
Если язык HTML это условные кирпичи из которых построен дом, то язык CSS - это обои, светильники, дверные ручки, лепнина на потолке, и всякое такое прочее. Конечно, жить можно и в бетонной коробке - спя на матрасе по центру комнаты - но в отремонтированной квартире находиться всяко приятнее. Так и язык CSS - ориентирован на создание внешнего комфорта, не затрагивая при этом вопросы капитального строительства.
Еще можно представить себе CSS как доброго волшебного робота - который несет по большей степени эстетическую пользу и приятен глазу, но сложную тяжелую работу выполнять неспособен.
Язык стилизации CSS - как прекрасный робот, сияющий множеством цветов. С его помощью можно создавать очень красивые и достаточно приятные для глаза сайты.
CSS - часть триады веб-разработки
Язык CSS является базовой составляющей в мире веб-разработки, входя в условную троицу HTML + CSS + JavaScript, на которой и создано большинство существующих в мире сайтов. Ну и в целом, практически любой сайт который ты уже видел или еще увидишь в дальнейшем, создан с использованием этих языков.
Яндекс, Google, VK, Дзен, и другие известные проекты тоже используют эти технологии. Так что, зная их как все вместе, так и каждую по отдельности - ты определенно будешь в хорошей компании.
HTML + CSS + JS. Три друга, три брата - вечная классика и столпы веб-разработки.
Стоит отметить, что CSS не является языком программирования в привычном классическом понимании. Он нужен именно для стилизации страниц - то есть, с его помощью нельзя написать программы в привычном нам виде. Но не стоит из-за этого слишком рефлексировать - значимость и массовую применимость CSS сложно переоценить.
Как начинающим веб-разработчикам, так и опытным профессионалам необходимо владеть этим языком - потому что в его отсутствии сайты будут представлять из себя банальные наборы текстов и условных прямоугольников. А как мы знаем, хороший продукт должен быть не только удобен, но и приятен в использовании фактическому потребителю. Так что, лучше уж использовать CSS, чем обходиться без него.
Почему критикуют CSS?
Стоит заметить, что CSS периодически критикуют. Справедливости ради, с неменьшей яростью критикуют также и JavaScript, jQuery (чаще всего), и иногда HTML. Тем не менее, все эти технологии никуда не деваются от обилия критики, и продолжают служить людям верой и правдой. Постепенно языки совершенствуются, упрощаются, и догоняют представления людей об удобстве и простоте. Но, мода на поливание классики помоями никуда не девается - что и говорить, сам этим иногда грешу.
Наиболее простая причина критики CSS - потому что это достаточно старая технология, которая появилась задолго до современных устройств и систем. Это ограничивает применение языка в современном искусстве создания сайтов, и зачастую требует от разработчика использовать не слишком оптимальные решения.
Хотя язык CSS и развивается достаточно быстро, обрастая новыми удобными возможностями, но как это часто и бывает - он несколько отстает от современных трендов веб-разработки и запросов со стороны индустрии.
Вариант оригинального применения языка CSS. В данном случае - использование отрицательного отступа влево.
Так же - в общем и целом, CSS устроен достаточно линейно, и часто для создания простых вещей требуется много времени и много кода. В современных концепциях тотального упрощения, это выглядит несколько архаично. Плюс к этому, в неумелых руках некоторые "банальные" ошибки в коде CSS приводят к неожиданным последствиям для конечных потребителей.
И вторая известная картинка на тему отладки CSS-кода. Одна из частых особенностей не слишком умелого применения языка (скажем так) - некоторые проблемы с тем, что элементы вылазят за желаемые границы.
Известная символика не слишком опытного применения языка CSS.
Ну и еще момент. С моей точки зрения, в неопытных руках даже карандаш становится грозным оружием. Всегда спокойно смотрел на холивары вокруг классических веб-технологий, и предпочитал просто делать оплачиваемую работу. Не могу утверждать хорош ли язык CSS, или плох как некоторые считают, но продолжаю активно использовать его в классическом виде (без SASS / LESS) вот уже многие годы - доволен абсолютно.
История возникновения языка CSS
Забавный факт - история языка CSS начинается там же, где и история HTML. А именно - в ЦЕРН! Пока неутомимые физики данного учреждения гонялись за бозонами, неутомимые системные администраторы между делом придумали современный интернет. И пока физики все так же спорят о природе мироздания и все что-то исследуют на коллайдере, айтишники из ЦЕРН давно пожинают плоды своих трудов - предоставляя мировому сообществу множество знакомых технологий.
Но давай ближе к делу! Говоря более конкретно, сотрудник ЦЕРН Тим Бернерс Ли работал над созданием прототипа всемирной паутины, а Хаком Виум Лие работал над улучшением внешнего вида веб-страниц. Вот он, автор языка стилизации CSS:
Хоком Виум Лие - автор языка стилизации CSS
И если у тебя возникнет логичный вопрос - "Почему автор CSS держит в руках логотип Оперы" - то есть такой же логичный ответ - "Потому что он работает там техническим директором аж с 1999 года". Вот тут - более подробная статья о нем (Википедия).
Ну и в качестве полноты картины, фотография автора HTML и собственно изобретателя интернета. Тим Бернерс Ли.
Тим Бернерс Ли - изобретатель интернета.
А если тебе интересно почитать в подробностях как развивался CSS, то вот тут есть большое интервью с его создателем - в оригинальном тексте.
К слову сказать, Хаком Виум Лие перешел на какой-то новый сверхуровень познания реальности, и теперь занимается выращиванием яблок и другими сельскохозяйственными делами. Очень восхищает - умение совмещать серьезную работу и личные хобби - дорогого стоит!
Автор языка CSS теперь выращивает яблоки.
Базовые принципы языка CSS
Основа языка CSS - это селектор. Говоря по-русски, "выбиратель". Почему он называется именно так? Потому что селектор как бы "выбирает" элементы на HTML-странице, которые он должен стилизовать. Фокус селектора в том, что он может выбрать сразу множество элементов по задумке программиста, и стилизовать их некоторым специальным образом.
CSS-код сохраняется в специальный файл формата .css. Далее, ссылка на этот файл подключается к веб-странице, и с этого момента содержимое .css-файла начинает влиять на содержимое веб-страницы. Вот так выглядит пример CSS-кода и пример селекторов:
Пример CSS-кода - селектор и описательная часть.
Говоря простыми словами, селектор может начинаться с символа "точка", "решетка" или с буквы (но не ограничиваясь лишь ими). Это основные типы селекторов, которые встречаются внутри практически каждого второго интернет-сайта.
Точка означает, что мы обращаемся ко всем элементам которые содержат класс с именем селектора. То есть, если у нас есть селектор который называется .redButton, то все HTML-элементы которые имеют внутри себя вот такой код: class="redButton", будут стилизованы соответствующим кодом внутри этого селектора.
Второй вариант - символ "решетка" # - это обращение к элементам по их идентификатору. Вот такой вот селектор #blueButton стилизует все элементы, которые имеют id="blueButton".
Селекторы которые начинаются с буквы - например a, div, p, ul - стилизуют вообще все HTML-теги, которые им соответсвуют. Ну, надеюсь принцип понятен - а дальше дело за твоими практическими экспериментами!
А вот так CSS-файл подключается к веб-странице с HTML-содержимым. Вместо styles/style.css необходимо подставить ссылку на свой CSS-файл. Ну и так же, не забудь что эта строка должна располагаться внутри тега header.
Ну и вот некоторые фрагменты CSS-кода для большей ясности. Стилизация параграфа - блока с текстом. Раскрашиваем текст в красный цвет, и обводим блок с текстом черной линией.
p { color: red; width: 500px; border: 1px solid black; }
Или вот еще пример. Придаем всем заголовкам на странице большой размер. Выравниваем местоположение заголовков по центру страницы.
h1 { font-size: 60px; text-align: center; }
Другие базовые примеры применения CSS-кода можно вот здесь.
А вот так выглядит файл с большим количеством CSS-кода. В данном случае, не слишком опрятно, но другой красивой картинки я не нашел.
Пример большого количества CSS-кода. Кто-то что-то стилизует.
Примеры элементов стилизации в CSS
Ниже приводится краткий обзор некоторых распространенных элементов стилизации CSS:
Цвет шрифта: Cвойство color используется для задания цвета текста.
Размер шрифта: Свойство font-size используется для установки размера текста.
Фоновый цвет блока. Свойство Background-color задает цвет фона элемента.
Границы / Обводка элемента. Свойство Border (граница) позволяет задать стиль, ширину и цвет границы элемента.
Отступы элемента относительно других. Свойство padding задает область отступов вокруг содержимого элемента.
Синтаксис этих элементов CSS следует простой, интуитивно понятной схеме:
selector { property: value; }
Селектор указывает на HTML-элемент, который нужно стилизовать, свойство описывает характеристику, которую нужно изменить, а значение задает новый стиль для свойства.
Вот по этой ссылке есть вообще весь список CSS-свойств. Не советую заучивать его (потому что это не нужно совершенно), но иногда подглядывать туда вполне себе полезно.
Полезные ресурсы для изучения языка CSS
Предлагаю тебе некоторое количество полезных ссылок, которые помогут тебе изучить основы CSS, и научиться применять его во всем своем многообразии. Как вариант - просто пройдись по этим сайтам, и посмотри что можешь взять оттуда полезного.
Mozilla Web Docs - ссылка на краткий базовый учебник по CSS. Рекомендую начать изучение именно с этого ресурса.
Wikipedia - ссылка на классическую статью про CSS. Обзорная информация, базовые примеры применения языка.
HTMLBook - справочник CSS-свойств с их описанием и применением. Полезная шпаргалка для веб-разработчиков.
W3C Валидатор - онлайн-сервис для проверки CSS-кода на твоем сайте. Проверяет CSS код на ошибки. Можно отправить ему ссылку на страницу, или CSS-код в виде текста.
W3C Schools - список свойств CSS-селекторов и примеры их применения.
В двух словах
Понимание CSS очень важно для любого, кто хочет разрабатывать или создавать сайты. От базовых стилей, таких как цвета и шрифты, до сложных конструкций, CSS дает дизайнеру полный контроль над внешним видом и эстетикой веб-страницы. Будь то создание личного блога или бизнес-сайта, знания CSS необходимы, чтобы воплотить задуманное в реальность.
И не стоит думать, что CSS это всякие-там украшательства, игрушки и баловство. От внешнего вида сайта прямым образом зависит активность пользователей на этом самом сайте.
Прими силу CSS, вникай глубже, практикуй и внедряй его, ведь это краеугольный камень визуально привлекательной и эффективной веб-разработки. Помни, что эффективный веб-разработчик не только заставляет сайт правильно функционировать, но и правильно выглядеть!
Top comments (0)