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 это принципиально разные вещи, но они связаны между собой. Правилом хорошего тона является разделение кодов между собой, чтобы не смешивать их на одной странице.
Уроки CSS
Изучение CSS для новичков / Урок #1 – Введение в CSS. Что это и как с ним работать?
Приветствую вас на курсе по изучению языка стилей CSS (CSS3). За курс мы с вами познакомимся с основами css, изучим понятие селекторов и разработаем небольшой веб сайт на основе HTML и CSS. В первом уроке мы поговорим про CSS, узнаем что он делает и на что он способен.
Видеоурок
Полезные ссылки:
- Практикум по CSS ;
- Редактор Atom ;
- Редактор Visual Studio ;
- Редактор Sublime Text .
Информация про CSS
CSS является языком, что отвечает за оформление вида страницы. Он позволяет указать стилевое оформление каждого из HTML элементов. Также за счёт CSS можно указывать стили для файлов с XML-разметок: XUL , SVG и прочие.
Чистый HTML-документ выглядит ужасно без использования стилей. Каскадные таблицы стилей или же CSS помогает указать всё оформление для веб сайта. Используя лишь HTML и CSS можно создать любой дизайн сайта, какой вам только будет нужен.
Написание CSS
CSS-стиль – это определённое правило, что подсказывает веб-обозревателю правила форматирования для каждого элемента. Под форматированием подразумевается: изменение цвета текста, фона элемента, шрифта, теней, позиции на экране и тому прочее.
Чтобы создать рабочий CSS-стиль, нужно правильно указать 2 основные части:
- Селектор – указывает целевой элемент, которому назначается стиль;
- Блок стилей – подсказывает браузеру нужные правила форматирования.
Пример:
В примере селектором выступает тег div. Это означает, что все стили в блоке будут применены к каждому div-элементу на странице.
В фигурных скобках всегда указываются стили. Они должны стоять строго в скобках, а не за их пределами. В представленном примере на выходе получится div блок c красным фоном, шириной 100 и высотой 60 пикселей.
Все команды имеют свойство, а за ним идёт значение. Иллюстрация на основании того же примера:
background-color:red; /* , где background-color – это свойство; red – значение. */Свойство задаёт определённый стиль. Подобных свойств очень много, в нашем случае – это цвет фона. Значение всегда указывается после двоеточия. По примеру, свойству background-color установлено значение red. Таким образом перекрашивается цвет фона в красный.
По завершению команды всегда ставится точка с запятой. Этот символ является делителем, который отделяет между собой команды.
Список различных стилей принято называть таблицей стилей или CSS. Есть несколько разных методов указания стилей.
Атрибуты html и стили css
Большинство HTML-элементов поддерживают установку стилей посредством атрибутов. Пример, отдельным элементам есть возможность указать атрибуты width и height (ширина с высотой). Атрибуты указываются прямо в HTML-файле. С ними нужно быть осторожными.
С одной стороны – это удобный способ указать стили для конкретного блока (значения в атрибутах имеют высший приоритет), все прочие теги, подпадающие под общие селекторы, будут иметь стили с CSS-файла.
С другой стороны – это портит HTML-код, он перестаёт быть чистым. В случае редактирования неудобно находить и менять стили по разным файлам, появляется излишняя путаница.
Проверка валидности
Во время создания стилей нередко появляются неясности в отношении правильности их указания и корректности. В данном случае на помощь приходит валидатор CSS, доступный по этой ссылке .
План курса
В курсе по изучению языка стилей CSS для начинающих мы научимся прописывать CSS3 стили, изучим основы CSS, научимся работать с селекторами и по итогу разработаем множество мини проектов на HTML и CSS.
К концу видеокурса CSS у вас будут стойкие знания в самом языке и понимание как можно сделать красивый веб сайт.
Программа обучения
Также на нашем сайте есть более углубленная программа по изучению разработки веб сайтов. Ознакомится с программой обучения по Front-end можно по этой ссылке и с программой обучения Full Stack по этой ссылке .
Версии CSS: CSS1, CSS 2, CSS2.1, CSS3.0
CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 90-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.
В начале 90-х различные браузеры имели свои стили для отображения веб страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.
В середине 90х Концорциум Всемирной Паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
Оглавление документа
Уровень 1 (CSS1)
- Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
- Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
- Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
- Выравнивание для текста, изображений, таблиц и других элементов.
- Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
- И другое…
Уровень 2 (CSS2)
Рекомендация CSS2 W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.
- Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.
- Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
- Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
- Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
- Расширенный механизм селекторов.
- Указатели.
- Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
- И другое…
Уровень 2.1 (CSS2.1)
Рабочая версия W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок.
Уровень 3 (CSS3)
Рабочая версия.
Сильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и введением переменных (variables).
Css и css3 в чем разница
Например, если теги HTML отмечают раздел текста как header страницы, то применение CSS сообщает компьютеру, что все что отмечено на этом сайте header, который должно отображаться в определенном стиле, например, жирным синим шрифтом.
Несмотря на то что CSS и HTML работают вместе, они хранятся совершенно отдельно в двух разных файлах. Это удобно, потому что позволяет дизайнерам вносить изменения во внешний вид сайта, не затрагивая его базовую структуру.
Каскадный аспект также является ключевым, это хранение файлов в виде каскадных листов позволяет разработчикам глобально обновлять дизайн для нескольких страниц одновременно. Представьте себе, что вы пытаетесь кодировать дизайн индивидуально для каждой страницы сайта на 1000 страниц, добавляя код шрифта и цвета для каждой отдельной страницы. Также CSS упрощает этот процесс до одного, внешне связанного многоуровневого файла.
Что нового в CSS3?
CSS3 является новейшим стандартом для языка CSS, который разрабатывается с 2005 года. Он обратно совместим со старыми версиями CSS, что имеет новые свойства, которые отлаживают предыдущие особенности и расширяют возможности CSS2, и даже имеет некоторые JavaScript-подобные возможности. CSS3 также решает ряд проблем, связанных с разработкой мобильных приложений, учитывая адаптивный дизайн и устраняя проблемы, вызванные несовместимостью Adobe Flash на мобильных устройствах. В сочетании с JavaScript, CSS3 обладает множеством функциональных возможностей Flash, это с точки зрения анимации и интерактивности.
Вот 7 основных вещей, которые отличают CSS3 от его предшественников.
1. Мобильный первый менталитет
CSS3 по своей природе поддерживает адаптивный дизайн и оснащен для обработки медиа-запросов. Медиа-запросы — это вызовы, выполняемые кодом для определения устройства и размера экрана на котором пользователь просматривает сайт. Это добавляет новые возможности адаптивного дизайна в репертуар CSS.
2. Модульный код
Одним из самых важных достижений является то, что CSS3 разделен на модули. Все старые спецификации CSS были перенесены в новую версию и разделены на более мелкие части, где также добавлены некоторые новые модули.
Другие модули CSS3 включают в себя:
— Селекторы: разработчики могут редактировать элементы по имени, классу, типу, атрибуту и так далее.
— Модуль Box Model: описывает подход к созданию согласованности между HTML-элементами на странице или блоками. Применяя поля границы и отступы к содержимому блока, разработчики могут очистить область вокруг элемента, присвоить ему границы.
— Фоновые изображения и границы, где CSS3 также позволяет лучше контролировать обработку границ элементов и фонов страниц, а также позволяет использовать закругленные углы для прямоугольников и теней. До CSS3 фоны должны были создаваться с помощью изображений, которые увеличивали размер файла и время загрузки страницы.
— Текстовые эффекты: CSS3 включает в себя эффекты тени, переполнение текста, которое скрывает текст и становится слишком длинным для его элемента, разрыв слова, где автоматическое разбиение текста, чтобы он помещался в рамку, и перенос текста — все, что экономит дизайнерам много времени.
3. Поддержка веб-шрифтов
До CSS3 дизайнеры могли использовать только безопасные для сети шрифты, чтобы быть на 100 процентов уверенными, что шрифты всегда будут отображаться одинаково на всех компьютерах. Безопасные веб-шрифты — это шрифты, которые каждый компьютер устанавливает и распознает. Если бы дизайнер использовал обычные шрифты, такие как Times New Roman или Arial, он мог бы в значительной степени гарантировать, что любой пользователь будет просматривать свой сайт так, как задумано. Однако, если они захотят использовать более редкий шрифт, если он не поддерживается машиной пользователя, он по умолчанию вернется к веб-безопасному шрифту.
Дизайнеры теперь могут запускать веб-шрифты в CSS3, специальные шрифты, подобные тем которые доступны через Google Fonts и Typecast. Эти шрифты можно либо загрузить на сервер и запустить с помощью кода CSS, либо получить доступ непосредственно из его источника с помощью сценария, который вызывается прямо в коде CSS, что открыло мир возможностей для дизайнеров.
4. Позволяет быстрее разрабатывать и быстрее загружать
То, что раньше требовалось для фоновых изображений, теперь CSS3 может быть достигнуто с помощью визуальных улучшений, что экономит время разработчиков на производстве. Это сокращает количество вызовов и время загрузки для множества изображений, поскольку все эти эффекты встроены в код. Кроме того, страницы загружаются быстрее благодаря общему меньшему размеру файла и меньшему количеству вызовов.
5. Создание 2D и 3D преобразований, анимации и переходов
Эти эффекты позволяют элементам на странице вращаться, увеличиваться, уменьшаться, переворачиваться или переводиться в другой цвет. Впервые элементы, созданные в CSS могут перемещаться по экрану без использования JavaScript или Flash-кода. С помощью переходов элемент может легко изменять размер и цвет. Вы можете установить длительность перехода, например, создать кнопку, которая медленно расширяется и меняет цвет, когда вы наводите на нее курсор мыши.
6. Новые цвета и эффекты изображения
CSS3 поддерживает новые цвета (RGBA, HSL, HSLA) и цвета градиента, а также позволяет корректировать непрозрачность. Еще одна важная вещь — это поддержка закругленных углов изображения, эффект, который требовал большого форматирования и работы в Photoshop, чтобы достичь ранее.
7. Исправил некоторые досадные проблемы с выравниванием
Размер коробки позволяет разработчикам правильно подобрать размеры элементов без необходимости вычитать размеры для отступов и границ. Благодаря свойству box-sizing, отступ и граница включены в высоту и ширину.