Что такое CSS и зачем он нужен веб-дизайнеру?
Анюта

Здравствуйте, Анюта!

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

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

Из чего сделан сайт?

Основа любого сайта, т.е. его каркас, создается при помощи языка гипертекстовой разметки HTML и каскадных таблиц стилей CSS.

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

Любой сайт можно образно назвать клиент-серверным приложением. Давайте разберемся в этом.

Ваш сайт находится на сервере какой-либо хостинг-компании. Стандартный веб-сервер представляет собой следующее:

• установленная база данных с информацией Вашего сайта;
• язык программирования, например, PHP, занимающийся запросами, посланными браузером;
• имеется папка с картинками или видео, которые находятся у Вас на сайте;
• обязательно присутствует файл с CSS-правилами;
• язык динамической активности страниц – Java Script и прочие инструменты.

Язык PHP и база данных работает с сервером, а CSS и Java Script отрабатываются у клиента (пользователя) на компьютере. В этом и есть основной смысл работы сайта.

Для чего нужен CSS?

Если бы веб-программисты и дизайнеры не использовали CSS, то сайты могли бы выглядеть примерно так: http://info.cern.ch. Это скучно, неинтересно и не заставляет остаться на таком ресурсе.

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

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

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

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

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

С уважением, Евгений.

Полезный совет?

Расскажите друзьям

что это такое, зачем нужно и почему нужно минимально освоить CSS Экопарк Z

CSS — это Cascading Style Sheets (Каскадные Таблицы Стилей).

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

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

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

Наиболее важным из всех файлов стилей является файл

Ярким примером достоинств использования единого файла стилей style.css является оформление таблиц: задав в файле стилей ширину ячеек всех таблиц width:auto; и высоту  ячеек всех таблиц height:auto; можно быть уверенным, что ширина и высота всех ячеек всех таблиц страниц сайта будет автоматически определяться содержанием ячеек.

Для освоения языка CSS можно использовать онлайновые учебники и справочники, которые легко найти в Интернете. Например, можно использовать материалы сайта www.wisdomweb.ru

Этот язык прошёл несколько стадий своего развития, в 2014-м году современной является 3-я версия языка, которая постепенно совершенствуется и дорабатывается.

Изучая язык CSS, обязательно обратите внимание на приоритеты стилей.

…!

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

И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение тут…

Зачем нужен CSS, когда есть HTML? И почему там много повторяется?

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

попробуйте с помощью HTML сделать один див поверх другого!

Да, можно к любому тэгу HTML добавлять атрибут style или снести css в тэг <style></style>, но когда дизайн сайта сложный, то лучше оформлять настройки визуализации в отдельном файле css. Этот файл кэшируется браузерами и при загрузке любой страницы использующей созданный файл css, он не будет постоянно скачиваться с сайта, что ускоряет загрузку сайта. Да и вообще, удобнее так.

для красоты и функционала

CSS Reset — сброс стилей css (зачем нужно + типы файлов)

У каждого браузера есть свои предустановленные правила оформления веб-страниц и элементов на них (user agent stylesheet), подключаемые автоматически по умолчанию. Тем не менее, большинство верстальщиков при создании нового проекта добавляет в него специальный файл Reset CSS, который осуществляет полное обнуление CSS стилей и позволяет разработчикам творить с «чистого листа». Почему и как это все делается — разберу в текущей статье.

Если вы посмотрите на картинку-превью к посту, то увидите, что обычная строка поиска по сайту в Safari, Chrome и Firefox отображается абсолютно разным образом. Да, иногда правила в них совпадают, например, все скрывают тег head через опцию display: none!, однако во многих случаях есть серьезные различия при рендеринге объектов на странице. Подозреваю, что некоторым вашим клиентам может не понравится, когда итоговый вариант верстки выглядит не так, как на макете.

Поэтому, если вы начинающий веб-разработчик, публикация вам однозначно пригодится для общего развития. Она является переводом этой заметки с обзором состояния дел в сфере CSS Resets в 2018 году. Уверен, что в 2019 и позже все это еще будет актуально, т.к. данной теме уже исполнилось больше 10лет (с момента выхода первого подобного решения).

Зачем нужен сброс CSS настроек

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

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

Но ведь сейчас ситуация в верстке менее противоречивая?

Да, действительно, в наше время многие параметры в user agent стали более похожими. Практически везде заголовку h2 задается размер шрифта 2em и горизонтальный отступ 0.67em. Однако это все относительно новые изменения, и как минимум, нужно учитывать поддержку старых версий программ, где подобной согласованности нет.

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

Но мы ведь применяем свои стили, переопределяя базовые?

Эта один из основных тезисов противников данного подхода — в конечном итоге все равно те или иные параметры заменяются собственным style.css, так зачем добавлять еще один лишний файл и уменьшать скорость загрузки сайта? Не смотря на то, что в этой фразе есть смысл, использование ресета оправдано двумя моментами:

• Во-первых, это помогает писать более чистый код. Мы сможем разделить его на несколько частей: отдельно для самого дизайна веб-проекта и набор правил, ориентированных под специфику конкретных браузеров. Это позволить не захламлять основный CSS-файл всякими IE-хаками и т.п.
• Во-вторых, все reset’ы весят очень мало, и их загрузка не требует большого количества времени.

Типы CSS Reset (скачать можно по ссылкам в статье)

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

1. Исправление ошибок в user agent stylesheet.
2. Отмена нестандартного оригинального оформления в интернет-браузерах.
3. Создание универсальной совместимой базы стилей.

Есть варианты, решающие все три задачи и те, которые заточены только под одну конкретную проблему.

Коррекция/исправление ошибок

Рассмотрим первую из целей, озвученных выше. Как вы уже поняли, ликвидация разных недочетов и косяков броузеров наиболее актуальна для поддержки устаревших релизов. Один из хороших примеров такой ситуации — когда после появления HTML5 тот же Internet Explorer 9 не применил корректный тип display к новым объектам.

Поэтому в решениях по типу Normalize.css все ошибки учтены и обработаны:

/**
 * Add the correct display in IE.
 */
main {
  display: block;
}

/** * Add the correct display in IE. */ main { display: block; }

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

Другой пример кода от Pure CSS, который подходит в том числе и к современным веб-программам — исправление display элементов и атрибутом hidden.

[hidden] {
    display: none !important; // One of the good use cases of !important
}

[hidden] { display: none !important; // One of the good use cases of !important }

Убираем своеобразные стили браузеров

Это вторая причина сброса настроек CSS. В принципе, у каждого свое мнение относительно того какое оформление в user-agent stylesheet считать «своеобразным». Определение автора оригинальной заметки достаточно логичное: это такой стиль, который не является «голой» версией отображения элемента. Например, добавление отступов для заголовков в 2em (как это делают многие), идея не плохая, но почему именно 2em, а не 3em или не 4em. В таком случае базовым вариантом было бы отсутствие какого-либо отступа, то есть нулевой margin.

Самый простой универсальный подход, удаляющий отступы/поля тегов:

* {
    margin: 0;
    padding: 0;
}

* { margin: 0; padding: 0; }

Данный метод слишком радикальный, т.к. применяется ко всем объектам, даже тем, где вы не ожидаете (в том же input). В качестве альтернативы чаще используется Eric Meyer Reset CSS, который убирает параметры margin/padding, границы и размер шрифта (в 0 или none) там, где это логически оправдано:

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

Переопределение стилей

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

Например, вместо установки всем шрифтам размера 1em и margins = 0 в Sanitize.css задаются другие величины:

/**
 * Correct the font size and margin on `h2` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
 
h2 {
  font-size: 2em;
  margin: 0.67em 0;
}

/** * Correct the font size and margin on `h2` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h2 { font-size: 2em; margin: 0.67em 0; }

В Bootstrap’s Reboot найдете еще одну иллюстрацию текущей задачи. Разработчики пошли чуть дальше и прописали шрифты и цвет фона для body.

// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use the
//    the `inherit` value on things like `<th>` elements.
 
body {
  margin: 0; // 1
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left; // 3
  background-color: $body-bg; // 2
}

// Body // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. // 3. Set an explicit initial text-align value so that we can later use the // the `inherit` value on things like `<th>` elements. body { margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; text-align: left; // 3 background-color: $body-bg; // 2 }

Итого. Что же выбрать

В оригинальной заметке есть результат соответствующего опроса из твиттера среди фолловеров — какие решения по данной теме они используют чаще всего.

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

Что касается мнения автора статьи (Ire Aderinokun, фронтенд и UX девелопер), то она предпочитает скачать Reset CSS Эрика Мейера и немного модифицировать его под себя. Причины тут две:

• во-первых, удобно работать с максимально пустым списком директив, постепенно добавляя свои собственные;
• во-вторых, она сторонник задания отступов в одном направлении (вниз), в то время как многие ресеты не следуют этому принципу.

P.S. Что касается меня, то во многих шаблонах я чаще всего сталкивался с решением от Normalize.css. Если вы работаете с Bootstrap, то, как понимаю, ничего дополнительно придумывать не придется, там есть свой файл сброса стилей CSS. Если честно, не особо часто приходится верстать с нуля но для общего развития мне было интересно об этом почитать. Надеюсь, вам тоже;)

Правила хорошего CSS / Habr

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

1. Всё должно быть абсолютно валидным. Я стараюсь избежать даже warning’ов.
Нужно привыкать к качественному, валидному коду. Это намного эстетичней и полезней грязного «какпопало».

2. Старайтесь комментировать как можно больше.
Даже очевидным вещам не помешают комментарии. Например, перед блоком header я пишу /* Шапка */, перед footer /* Подвал */. Вроде очевидно, но мельком просматривая код, зацепиться глазом намного легче, особенно если файл стилей разбит на логические блоки. Но перебарщивать тоже не стоит.

3. Разбивайте файл на логические блоки.
Каждый логический блок от другого отделяется пустой строкой. Блоки идут в логическом порядке, сначала подготовки(CSS reset и другие мелочи), затем блок body, после него идут блоки настроек основных компонентов(ссылок, параграфов, заголовков и т.д.).
С помощью блоков и комментариев просматривать и находить что-то в файле стилей становится безумно удобно и просто.

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

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

6. Используйте 2 стиля написания, короткий и длинный:

Если свойств очень мало, то зачем писать длинный блок? Упростим как чтение, так и размер файла стилей.

7. Определитесь со стилем написания.
Например, я использую для отступа табуляцию, для построения иерархии 2 пробела. Каждому свойству я задаю значение после пробела(text-align: center;)

8. Обязательно используйте CSS Reset.
Ставить заплатки(костыли) под разные браузеры уже не модно. IE6 официально умер. Большую часть всего можно верстать валидно используя CSS Reset.

Надеюсь, мои советы вам помогут. Пользуетесь ли вы какими-то правилами? У вас есть замечания или дополнения? Пишите в комментариях, буду рад услышать ваше мнение 🙂

Нужно ли использовать препроцессоры CSS? — Хабр Q&A

Почитал несколько сайтов с описанием, что это и для чего. Посмотрел примеры. Но ничего не понял — а зачем? В чем смысл?

Суть моего вопроса:

1) Препроцессоры позволяют вводить переменные и миксины. Но ведь в CSS можно просто создать свойство

.hello {
color:red;
font-size: 11px;
}

и применять его ко всем элементам, где это нужно.
Какая разница — вписать в HTML

<a href="\">hello</a>

или использовать в файле стиля переменную, которую так же придется добавлять к какому-то желаемому типу объектов? Мне совсем не понятно.

2) Валидность CSS.

Препроцессор компилирует ваш «красивый сахарный» синтаксис в валидный CSS.
А в чем сложность писать сразу валидный CSS? Тоже не совсем понятно.

3) Компилятор из препроцессорного языка в CSS.

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

4) Удобочитаемость кода, и простой поиск,

Ну, это я тоже не пойму. Любой нормальный редактор кода умеет по нажатию горячей клавиши приводить все отступы и т.д. в порядок. Код становится красивым и читабельным. Да и мне не понятно — что такого в CSS может быть не читаемым? Есть класс, а в фигурных скобках — свойства. Что тут нечитабельное может быть?

Поиск — тоже не вижу сложности. В браузере — F12, он выстроит красивое дерево элементов с их стилями, а у каждой строчки стиля указан файл и строка, в которой это свойство указано. Даже можно мышкой тыкнуть, и откроется окно с указанным файлом и искомой строкой.

5) Возможность инклюда (include) в препроцессорах.

Можно же в HTML файле инклюдить нужные CSS через link rel=… . Чем инклюд в препроцессорах удобней, чем эта стандартная возможность?

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

6) Вложенность свойств.

Не понимаю, каким образом такой код:

.block {
.sub_block {
color: red;
}
}

удобочитаемей, чем обычный CSS:

.block > .sub_block {color:red;}

7) На хабре видел в комментариях обсуждение, мол можно даже задавать в препроцессорах — какие браузеры поддерживать. Ахтунг! А зачем писать такие стили, которые не будут работать в старых браузерах?

P.S. Я не в коем случае не критикую новые направления, но я просто дано не изучал ничего нового, не использую фреймворки, так как и так все отлично работает.

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