По умолчанию блоки располагаются друг под другом в порядке их прописывания в теле HTML-документа. Это называется стандартным потоком. Однако, при вёрстке практически любого сайта поток приходится то и дело нарушать, поскольку некоторые блоки требуется разместить в ряд.
Сделать это можно различными способами, причём у каждого есть как свои плюсы, так и недостатки, поэтому универсального рецепта, увы, пока нет. Выбор того или иного метода зависит от конкретных задач, которые стоят перед нами как верстальщиками. Наиболее часто используемыми методами являются:
- относительное позиционирование («position: relative») в сочетании со свойствами «float» и «clear»;
- абсолютное позиционирование («position: absolute») в сочетании со свойствами «left» и «right» для размещения блоков с нужными отступами;
- смешивание вариантов позиционирования с вложением блоков;
- использование новых свойств CSS 3.0 «flex» и «grid»;
- динамичная смена позиционирования при помощи медиа-запросов.
Современные свойства, которые появились в CSS 3.0 значительно упрощают процесс вёрстки, однако, пока далеко не все браузеры поддерживают новые стандарты. Поэтому, особое внимание уделим старым примерам с относительным и абсолютным позиционированием:
Что такое CSS-препроцессор и постпроцессор?
На скриншоте выше мы можем видеть шесть блоков разного цвета. Красный, синий и розовый с серой обводкой имеют относительное позиционирование, а первые два ещё и обтекание слева. Зелёный и жёлтый квадраты позиционируются абсолютно со строго заданными отступами от верхнего и левого края. Розовый же блок с чёрной обводкой добавлен для сравнения в самом конце и имеет относительное позиционирование.
Красный и синий блоки размещены рядом друг с другом и, по сути, нарушают стандартный поток данных. Это выражается в необходимости сброса отступа слева для первого розового блока. Далее по тексту идут зелёный и жёлтый блоки, но за счёт абсолютного позиционирования они вовсе выпадают из потока и после розового блока идёт сразу второй розовый с чёрной обводкой.
Зелёный же и жёлтый квадраты накладываются уже на второй розовый блок в строго заданном нами месте. Соответственно, изучив предложенную конструкцию, мы можем сделать вывод, что абсолютно позиционированные элементы практически не взаимодействуют с остальными блоками и подчиняются только собственным стилевым правилам, выпадая из общего потока.
Это свойство можно использовать, например, для создания жёсткого каркаса сайта или реализации плавающих и перекрывающихся блоков. Относительное же позиционирование удобно использовать для создания адаптивных сеток, поскольку оно не нарушает стандартный поток данных.
Адаптивная и отзывчивая вёрстка
Появление и развитие CSS 3.0, а также широкое распространение устройств для доступа к Интернету с разными разрешениями экрана привело к появлению такой новомодной тенденции как адаптивная и отзывчивая вёрстка. Вкратце суть её в том, чтобы страницы сайта выглядели удобными для чтения при любых размерах дисплея.
Что такое CSS?
С этой целью графические элементы сайта могут изменять свой внешний вид для удобного нажатия пальцами, перемещаться на новую позицию или исчезать вовсе. Делается это затем, чтобы основной акцент был на блоке с контентом, который является основным элементом, несущим информационную нагрузку.
Сами понятия адаптивной и отзывчивой вёрсток соотносятся как целое к частному. Адаптивная вёрстка может подразумевать только адаптацию внешнего вида страницы к определённым, наиболее часто встречаемым, фиксированным размерам дисплеев без учёта промежуточных величин. Отзывчивая же вёрстка позволяет плавно и динамически менять расположение блоков сайта при любой ширине области просмотра.
- min-aspect-ratio и max-aspect-ratio для определения соотношения ширины к высоте (указывается через слеш, например 4/3 или 16/9);
- color, min-color и max-color для определения количества поддерживаемых дисплеем цветов;
- min-height и max-height для определения высоты отображаемой области;
- min-width и max-width для определения ширины отображаемой области;
- grid для проверки поддержки устройством фиксированных размеров символов;
- orientation для проверки текущей ориентации смартфона или планшета;
- min-resolution и max-resolution для проверки разрешения экрана в точках на дюйм (DPI).
CSS — что это такое
Что такое стиль? Грубо говоря, стиль это то, как выглядит элемент на сайте. Например, любой текст можно написать размером 10 пикселей, а можно 14 пикселей. Можно написать черным цветом, можно синим. Можно подчеркнуть/наклонить/зачеркнуть и т.п.
Все, что связано с форматированим текста делается через CSS.
Но это лишь малая часть из возможностей. За всю визуализацию всех тегов html отвечает CSS. Даже за динамические изменения: выпадающие меню, подсвечивания ссылок при наведении.
Список всех стилей на языке вебмастеров часто называют «таблица стилей CSS».
2. Цели и задачи CSS
- Сделать сайт более красивым (в плане дизайна), сделать дружелюбный интерфейс, да и просто, чтобы сайты хоть как-то отличались друг от друга
- Отделить код html от кода описания стилей и дизайна
3. Синтаксис CSS (селекторы)
Каждое свойство и стиль описывается через «Селекторы». Его синтаксис следующий
Селектор< атрибут: значение; >
Селектор — это может быть название стиля или тега. В фигурных скобках описываются конкретные правила. Описание происходит всегда по одному стандарту: «название атрибута: значение». Каждое правило должно заканчиваться точкой с запятой.
.название_стиля < атрибут1: значения1; атрибут2: значения2; . >;
Существует множество вариантов задания стилей CSS. Давайте разберем самые популярные на примерах.
/*Задание общего стиля*/ .global_style < font-size: 12px; color: red; > /*Задание общего стиля только для тега font*/ font.style1 < font-size: 10px; color: blue; > /*Задание общего стиля только для тега font*/ #global_style2 < font-size: 14px; color: red; > h1 < font-size: 19px; >
Стиль global_style можно использовать для всех тегов в качестве класса. Например, .
Стиль style1 можно использовать только для тега , поскольку в определении было указано font.style1 .
Третий вариант задания через решетку (#). Как и в первом случае он определен для всех элементов, но задавать его нужно не через class, а через атрибут id:
В последнем варианте мы просто указали название тега и прописали ему стиль. Это значит, что теперь все теги будут наследовать значение этого стиля.
4. Как и где задавать стили CSS
Стиль задается в мета тегах head с помощью тега :
html> head> style type value»>text/css»> .styletest < color: blue; font-size:12px; font-family:Arial; > /style> /head> body> . Тело страницы . /body> /html>
Но это плохо, т.к. загромождается код описаниями стилей. К тому же, если этот код одинаковый для всех страниц сайта, то чтобы поменять его везде, придется повозиться. Поэтому используют специальные файлы с расширениями .css, куда заносятся все стили. Далее этот файл подключается к странице сайта с помощью тега в разделе head:
head> . link rel value»>stylesheet» type value»>text/css» href value»>style.css»/> . head>
Преимуществом такого подхода является так же и то, что этот файл кэшируется браузерами, что снижает «вес» сайта, тем самым он быстрее грузится. А это сейчас очень важно для SEO. См. как увеличить скорость загрузки сайта
5. В чем плюсы использования CSS
- Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он изменится на каждой странице сайта
- Это единственный способ изменять дизайн на сайте
- Простой синтаксис языка
6. Проблемы CSS с браузерами
Старые браузеры поддерживают не все возможности CSS. С этим возникают проблемы отображения. Например, эффект, который был задуман для лучшего восприятия контента, может привести к обратному эффекту. Если какое-то свойство не поддерживается, то есть риски наложения блоков, текстов друг на друга и т.п.
Частично эту проблему решают «префиксы». По сути это просто слово стоящее перед аргументом в таблице стилей. Для каждого браузера существует свой префикс.
- -moz- для браузера Firefox
- -webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
- -ms- для браузера Internet Explorer
- -o- для браузера Opera
7. Ответы на часто задаваемы вопросы
7.1. Что такое CSS3
В последнее время часто можно встретить понятие CSS3. По сути это все тот же CSS, но с набором новых аргументов, которые дают дополнительные возможности в плане различных эффектов. Например, свечение текста. Многие браузеры не поддерживают такие свойства, поэтому рекомендуется использовать такие эффекты в минимальных количествах.
7.2. В чём разница между CSS и HTML?
HTML — это каркас вашей страницы (это ссылки, картинки, контент). А в CSS определяется то, как все это будет отображаться для пользователя. Так что HTML и CSS это принципиально разные вещи, но они связаны между собой. Правилом хорошего тона является разделение кодов между собой, чтобы не смешивать их на одной странице.
Источник: zarabotat-na-sajte.ru
Что такое CSS
Кто такой вебмастер? Определенно тот, кто занимается созданием сайтов, причем принято считать, что для себя. Потому что люди, которые занимаются созданием клиентских сайтов, имеют более точную специализацию. Например, дизайнер, флешер, web-программист, верстальщик. В этом посте мы затронем тему, которая напрямую касается работы верстальщика и при этом просто необходима любому вебмастеру.
Не буду ходить вокруг да около: любой уважающий себя вебмастер должен уметь править html и css код. Это при условии, что он работает с готовыми шаблонами и переделывает их. Ну а если он делает шаблоны уникальные, то поверхностными знаниями css тут не обойтись.
Надеюсь, Вы знаете, что html — язык разметки страниц. Именно в виде html кода приходят браузеру страницы сайтов, и именно в этом виде хранятся сайты вебмастера на хостинге. html кодирует внешний вид страницы, а что тогда делает css?
Что такое CSS?
Если страница полностью написана на HTML, то каждый элемент кода определяет не только элемент содержимого страницы, но и его способ отображения. Например, не только, что вот в таком-то месте находится текст «Hello», но и то, что этот текст выделен жирным и красным цветом.
С использованием css кода все происходит несколько иначе. С помощью html описываются только очередность элементов содержания страницы и их классы. Соответствующие классы прописаны в css файле. Каждому из них присвоен набор свойств. Теперь, когда в html элементу мы приписываем какой-то класс, то к нему применяются и все свойства этого класса.
Не нужно писать все эти свойства каждый раз. Сейчас, когда сайты имеют множество страниц, без css просто не обойтись.
Более того, известно, что Гугл не очень-то любит страницы, на которых используются старые версии html разметки (когда свойства прописаны с помощью html, а не в css). Вообще такие страницы и способ их создания (верстка) называются невалидными. Нужно стараться избегать этого.
Теперь, я надеюсь, Вы поняли, что такое CSS код и зачем нужна эта технология. Распространилась она уже, кстати, очень давно, поэтому встретить сайт без css крайне сложно. Все бесплатные шаблоны также используют css. Поэтому по запросу «скачать css шаблон» вы, скорее всего, найдете валидную верстку.
Как я уже писал выше, любой вебмастер должен знать основы css (стили, спрайты селектор и т.д.), чтобы правильно править свои сайты и не захламлять код. Рекомендую всем найти краткий справочник и немного его почитать. Не обязательно разбираться во всех тонкостях, но понимать, что такое css и знать её основы — нужно каждому!
Источник: blogwork.ru