CSS является сокращением от Cascading Style Sheets или каскадные таблицы стилей. Такие таблицы разработаны специально для того, чтобы облегчить верстку сайта под определенный дизайн. Зачем же он нужен верстальщику сайтов и как сможет помочь данный язык при создании сайта?
CSS это язык стилей, который определяет, как будет выглядеть сайт, использующий HTML верстку. Т.е. есть верстка, она отдельно – это html-файл, допустим, index.html. Но стили в современной верстке стараются в HTML не помещать, по крайней мере, без излишней необходимости. Технически это возможно, но стараются так не делать.
Зачем нужен CSS
Первая причина этому проста – написание стилей для сайта потребует какого-то количества текста. И немало. Если у нас на сайте страницы типовые, пользователь их листает – к страницам применяются, зачастую, одни и те же стили. Если бы они были “захардкожены” в HTML, те самые байты и килобайты стилей каждая страница загружала бы заново. А CSS – это внешние файлы по отношению к HTML. Одни раз написал, подгрузил на страницу. Теперь если пользователь будет ходить по сайту, то часть стилей он сможет не загружать с сервера – он их уже один раз загрузил, теперь ими можно пользоваться из кэша браузера.
Вторая причина – это DRY-принцип (Don’t Repeat Yourself). Т.е. не двоить код, не повторять себя. Допустим, на сайте 1000 страниц. Хедер и футер, скорее всего, одинаковы. Если “захардкодить” хедер и футер на 1000 страниц, так рано или поздно что-то поменять захочется. Что же теперь все это править? Нет, конечно. Потому что есть файл CSS, он подключен ко всем страницам, его правят, проверяют, открыв несколько страниц – и все, правки внесены. Оговоримся сразу, что подключенных к странице файлов CSS может быть много.
Третья причина – удобство. HTML конечно может включать стили, технически можно обойтись и голым HTML для оформления сайта. Так и было раньше – на заре зарождения интернета, когда еще только появилась всемирная паутина (World Wide Web), использовался только язык гиппертекстовой разметки, то есть HTML. Однако CSS дает куда больше возможностей, он более оптимизирован, а так же создан для того, чтобы сделать один универсальный стиль для многих объектов, вписав лишь в файл, допустим, style.css несколько участков кода, а в HTML лишь добавив один параметр и тег.
Четвертая причина – усложнение сайтов. У современного сайта HTML используется, чтобы структурировать информацию, которая будет представлена на странице браузера, а CSS потребуется, чтобы придать дизайн, так сказать сделать форматирование исходной страницы.
Пока интернет был совсем млодоым, задачей при верстке страниц было – представить читателю текстовый документ и по возможности добавить в него изображения, а так же навигацию. Были примитивные сайты, которые для того времени считались прорывом. в плане представления информации и использования всего потенциала всемирной паутины.
Однако по мере развития интернета, развивался и сам язык, а так же браузеры, которые должны данный язык обрабатывать. Появлялись такие теги, которые поддерживались только одним браузером, что создавало путаницу. Избавить от такого недостатка было поручено создателям CSS, которые разработали достаточно простое и удобное решение. Современные сайты без этого обходиться не могут – они на страницы подключают и собственные стили CSS из файлв типа style.css, и сторонние библиотеки. Без того, чтобы вытолкнуть стили в отдельный файл использование сторонних библиотек было бы крайне затруднено.
При разработке CSS не все было и есть идеально. Зоопарк браузеров, не все стили работают унифицированно. Сейчас более-менее пришли к единообразию. В 1996 году приняли спецификацию CSS1. В 1998 году – CSS2, затем в CSS2.1. И с 2014-го года несколькими документами ввели CSS3. Иначе говоря, на CSS3 нет отдельной спецификации, а документация состоит из ряда самостоятельных документов. И с 2011 года разрабатывается CSS4 – публикуются документы, и разработчики браузеров могут им следовать. Но в основном сейчас все же наиболее правильно и безопасно с точки зрения кроссбраузерности придерживаться CSS3.
Каскадность CSS
Стили в CSS можно накладывтаь и смешивать. Есть правила, согласно которым конкретный стиль будет применен в случае конфликта селекторов.
Браузер быдет применять стиль по приоритетам.
| Селектор тега: | 1 |
| Селектор класса: | 10 |
| Селектор ID: | 100 |
| Inline-стиль: | 1000 |
Здесь inline-стиль – это как раз захардкоженный в HTML непосредственно в сам тег. Такое на практике встречается, но все же это частный случай. И именно этим обусловлено такое высокое значение приоритета: если уж разработчик для конкретного элемента что-то написал непосредственно в HTML, значит, этому наивысший приоритет.
Затем идет приоритет идентификатору – т.е. конерктному элементу присвоить стиль – да, это важнее.
Но селекторы чаще сложные, поэтому считается их общий вес.
Но бывают и настолько сложные случаи, что важно сказать браузеру – не считай приоритеты, я как разработчик объявляю наивысший приоритет:
p {color: red !important;}
Отметим, что приоритет по идентификатору и !important считаются достаточно спорными практиками. На них, скорее всего, будет ругаться влидатор – выдавать warning. Да, так можно сделать, эти возможности документирвоаны, но это не соответствует духу CSS. Потому что CSS – это про повторное использование кода. Идентификатор уникален, ну, что же ты так – как это повторно использовать? А !important рушит каскадирование и, как правило. свидетельствует о том, что разработчик не смог справиться правильным подбором селекторов.
Наследование в CSS
Из каскадирования вытекает возможность наследования (inheritance). Если не указано иное, дочерние элементы применят стиль родителя.
Допустим, у нас есть тег <div>. Если к нему применить стиль, закрашивающий его красным цветом, а внутри расположить теги <p>, то весь внешний блок <div> будет красным, если для вложенных тегов <p> специально не указать цвет фона.
Такая возможность дает большую гибкость.
Какименно применяются стили в данном конкретном случае, нам помогают понять панели разработчиков в браузерах. Например, откроем панель разработчика в Chrome.
Как правило, отладка производится именно здесь. Наглядно видны и селекоторы, и их взаимодействие: вычеркнутый стиль означает, что какой-то другой селектор имеет больший приоритет. Здесь же можно проследить наследование – вот стили, допустим, для тега <body>, все остальные видимые элементы все же вложены в него.
Структура css файла
В CSS применяется структуру “селектор {свойство: значение;}”. Селектор позволяет найти элементы на странице, к которым применяется стиль. Свойство – что изменяем – цвет, ширина, высота и т.п. Значение – собственно говоря, значение свойства, допутсим, красный цвет или 24px и т.п.
Селектором может выступать, допустим, класс. А параметром, допустим, цвет текста.
.red-flower {
color: red;
}
Это очень простой селектор, часто они сильно сложнее – учитывается вложенность элементов, их взаимное расположение. Допустим:
div:nth-child(2) img {
margin-left: -15px;
}
Здесь уже должен быть элемент <div>, у него несколько дочерних элементов, вложенный тег <img>. И это тоже не самый сложный селектор.
Но прелесь в том, что способ довольно таки простой, к тому же и универсальный — можно использовать один и тот же стиль, к примеру особенности шрифта, для разных блоков на разных страницах сайта.
