CSS — каскадные таблицы стилей


Содержание материала:

Что такое CSS и как подключить каскадные таблицы стилей к html-документу

Здравствуйте уважаемые читатели блога webcodius.ru. После блока статей посвященных HTML я решил познакомить вас с CSS, так как средств разметки недостаточно для оформления документов. И вообще, изучение HTML это лишь первый этап в процессе обучения созданию сайтов, следующим шагов является изучение CSS. Так давайте же узнаем что такое CSS и зачем они нужны.

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

Каскадные таблицы стилей(так расшифровывается аббревиатура CSS — Cascading Style Sheets) представляют собой набор параметров(стилей), описывающих оформление самой web-страницы и отдельных ее элементов. Эти параметры определяют фон страницы, цвет текста, выравнивание абзацев, параметры рамки таблицы и многое другое.

Таким образом с помощью языка HTML вы формируете структуру web-страниц, например задаете заголовки с помощью тегов h1-h6 или абзацы через тег p. А с помощью правил CSS вы задаете то, как эти элементы html-документа будут отображаться в браузере. То есть задаете тип и цвет шрифта, выравнивание текста, цвет фона элементов, различные отступы и др. Причем одно правило CSS может влиять на визуальное представление сразу нескольких элементов веб-страницы.

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

Добавление стилей или как подключить CSS к HTML документу

Прежде чем говорить о синтаксисе или о свойствах каскадных таблиц стилей, необходимо научиться подключать их к html документу. Всего существует три способа подключения css к html.

1. Первый способ заключается в размещении стилей в отдельном файле или нескольких файлах с расширением .css. В этом случае для подключения CSS стилей используется метатег link, в котором прописан путь до внешнего файла стилей. Помещается этот метатег в раздел заголовков соответствующей веб страницы между тегами head. Вот формат его написания:

Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».

Так примерно будет выглядеть строчка подключения стилей CSS в html коде:

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

2. Второй способ заключается в написании так называемых глобальных стилей, которые прописываются прямо в html коде веб-страницы. Их заключают в парный тег style и обычно помещают в секцию заголовка между тегами head:

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

3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style, который включает в себя в качестве параметров набор CSS свойств:

Абзац с серым фоном и красным текстом

Причем свойства заданные в атрибуте style применяются только к одному элементу html. Обычно этот способ подключения стилей применяют на этапе отладки дизайна сайта, а затем переносят полученные CSS свойства в файл с внешними стилями.

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Далее рассмотрим синтаксис написания правил CSS. Обычный формат определения CSS правила выглядит так:

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«<» и «>»):

  • селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
  • пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
  • между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
  • свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
  • пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
  • так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

  • body — это селектор, который представляет из себя имя тега body;
  • background — свойство стиля, с помощью которого задаются параметры фона;
  • #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

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

Рассмотрим еще пример:

Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги h1 зеленым цветом и задаст ему размер шрифта 24 пикселя.

В качестве селектора тега, кроме имени тега, можно указывать класс:

Имя класса должно состоять из букв латинского алфавита, цифр и дефисов и начинаться должно с буквы. А в определении CSS правила перед именем класса должна стоять точка, означающая что определяется стилевой класс. Данный стиль будет применен ко всем тегам, у которых будет задан атрибут >имени стилевого класса без точки :

В примере мы привязали к тегу «Р» css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

В этом примере к тегу «Р» мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор, который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

  • в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
  • привязка к html элементу осуществляется через атрибут >Рассмотрим пример для ясности:

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили и задавать сразу несколько одинаковых стилей. Посмотрим пример:

h1.redtext, p strong

В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:

Комментарии CSS

Язык css позволяет как и html задавать комментарии. Для того, чтобы выделить фрагмент кода CSS в комментарий достаточно заключить его в специальные слеши со звездочками:

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

На этом на сегодня все. В ближайшее время постараюсь продолжить знакомить с CSS. О каскадных стилях можно рассказать еще очень много интересной и полезной информации. Чтобы не пропустить новые статьи не забудьте подписываться на обновления блога. До новых встреч!

Каскадные таблицы стилей CSS

В то время как HTML структурирует документ и сообщает веб-браузеру, какую функцию имеет определенный элемент, CSS выдает браузеру инструкции о том, как отобразить определенный элемент — оформление, размещение пробелов и позиционирование .

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web «.

начало 1990-х годов Различные браузеры имели свои стили для отображения веб страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания
1994 Появился термин «каскадные таблицы стилей»
1996 Консорциумом W3C была издана рекомендация CSS1
1998 Консорциумом W3C принята рекомендация CSS2
Сентябрь 2009 Консорциумом W3C утверждена рабочая версия CSS2.1

Уровень 1 (CSS1)

Это рекомендация W3C была принята в 1996 году и откорректирована в 1999 году. Основные возможности, предоставляемых этой рекомендацией:

  • Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
  • Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
  • Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
  • Выравнивание для текста, изображений, таблиц и других элементов.
  • Свойства блоков, такие как высота, ширина, внутренние ( padding ) и внешние ( margin ) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear .

Уровень 2 (CSS2)

Это рекомендация W3C была принята в 1998 году. Она построена на CSS1 с сохранением обратной совместимости. Среди новых возможностей можно назвать следующие:

  • Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
  • Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
  • Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
  • Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
  • Расширенный механизм селекторов.
  • Указатели.
  • Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

Уровень 2.1 ( CSS 2.1 )

Рабочая версия W3C от 8 сентября 2009 года. Построена на CSS2 , в ней исправлен ряд ошибок.

CSS-верстка

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Использование CSS дает следующие преимущества:

  • Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
  • Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и кешируется.
  • Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
  • Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Известны также и недостатки:

  • Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.
  • Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

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

Таким образом, CSS не является ни языком программирования, ни языком разметки.

Определение правил стилей

Базовым конструкцией в CSS является правило следующего вида:

Селектор определяет элементы HTML , к которым будет применяться правило, определяемые реальным названием элемента, например, body , или другими средствами, такими как значения атрибута class .

Фигурные скобки <> содержат пары свойство/ значение , которые разделяются между собой точкой с запятой; свойства отделяются от своих соответствующих значений двоеточием.

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

Значения являются теми конкретными характеристиками, которые вы хотите задать каждому свойству выделенных элементов. Эти значения зависят от свойства.

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

Рассмотрим конкретный пример:

Это правило выбирает HTML элемент p , и для каждого элемента p в документах HTML , которые используют этот код CSS , будет применяться это правило, если только не будут существовать применяемые к ним более конкретные правила, которые будут переопределять это правило. Данное правило влияет на свойства, которые определяют поля вокруг параграфа ( margin ), шрифт текста в параграфе ( font-family ), и цвет этого текста ( color ). Поля задаются размером в 10 пикселей, шрифт задается как Times New Roman , а цвет текста задается как green .

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

Комментарии CSS.

Комментарии добавляют, помещая их между символами /* и */ . Комментарии могут охватывать несколько строк, и в этом случае браузер будет игнорировать эти строки:

Селекторы объединения в группу

Можно также объеднить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h2 и p , тогда можно было бы написать следующий CSS :

Однако, можно сократить код CSS , группируя селекторы вместе с помощью запятой — правила в скобках применяются к обоим селекторам:

Существует несколько различных селекторов, каждый из которых соответствуют различным частям разметки. Тремя наиболее общими селекторами, которые встречаются чаще всего, являются следующие:

Синтаксис Селектор Описание
p <> селектор элемента соответствует всем элементам на странице с указанным названием (элементам p , в приведенном выше случае)
example<> селектор класса соответствует всем элементам, которые имеют атрибут class с указанным значением, так что пример выше будет соответствовать
, или любому другому элементу со значением .
#example<> селектор id соответствует всем элементам, которые имеют атрибут id с указанным значением, так что пример выше будет соответствовать
, или любому другому элементу со значением . Селекторы id не проверяют название никакого элемента, и можно иметь только один селектор для каждого id в документе HTML — они являются уникальными для каждой страницы.


Дополнительные селекторы CSS

С помощью селекторов CSS , селекторов элемента, класса и id -селекторов можно реализовать многое, но это, конечно, не все возможные селекторы — существуют другие селекторы, которые позволяют выбирать элементы для стилевого оформления на основе более специфических критериев:

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

Универсальные селекторы

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

Селекторы атрибутов элементов

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

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

Можно выбирать элементы также и по значению атрибута, а не только по названию атрибута. Следующее правило задает все изображения с атрибутом src со значением alert.gif :

Значительно более полезной является возможность выбирать определенные части атрибутов, например, расширения файлов. CSS3 фактически вводит три новых типа селекторов атрибутов , которые могут выбирать на основе текстовой строки в значениях атрибутов (в начале, конце, или в любом месте в значении).

Селекторы потомков элементов

Можно использовать селектор потомка для выбора только определенных элементов, которые являются потомками других определенных элементов. Например, следующее правило задает цвет текста только тех strong элементов, которые являются потомками элементов h3 , как green , но не для других элементов strong :

Селекторы потомоков не поддерживаются в браузере IE 6 (и более младших версиях).

Селекторы нижележащих элементов

Селекторы нижележащих элементов очень похожи на селекторы потомков , за исключением того, что селекторы потомков выбирают только непосредственно нижележащих, а селекторы нижележащих выбирают подходящие элементы в любом месте иерархии элементов, а не только непосредственно нижележащих. Рассмотрим пример.

В этом фрагменте элемент div является предком всех других элементов. Он имеет двух потомоков, em и p . Элемент p имеет один элемент потомок , еще один em .

Селекторы смежных одноуровневых элементов

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

Селекторы смежных одноуровневых элементов не поддерживаются в браузере IE 6 (и более младших версиях).

Псевдо-классы

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

Список ниже представляет различные псевдо-классы и описание состояния ссылки, которое они выбирают:

:link обычное состояние ссылок по умолчанию, когда вы впервые их находите
:visited ссылки, которые вы уже посетили в используемом в данный момент браузере
:focus ссылка (или поле формы, или что-то еще), в которой в данный момент находится курсор клавиатуры
:hover ссылка, на которой в данный момент находится указатель мыши
:active ссылка, на которой в данный момент происходит щелчок.

Следующие правила CSS определяют что:

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

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

Можно выделить поле ввода , которое содержит активный мигающий курсор с помощью следующего правила:

Псевдо-элементы

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

Чтобы сделать первую строку каждого параграфа жирной, можно использовать следующее правило:

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

Можно также использовать функцию attr() для вставки значений атрибутов элементов после элемента. Например, можно вставить цель каждой ссылки в документ в скобках с помощью следующего кода:

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

Эти селекторы не поддерживаются в IE 6 (и более младших версиях).

Блог Vaden Pro

Cascading Style Sheets или же css при переводе на русский язык означает «каскадные таблицы стилей». Согласно официальной документации W3C css представляет из себя механизм для добавления оформления в html документ.

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

Что такое каскадные таблицы стилей?

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

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

В слове «каскадная» заключается главная особенность данного языка веб-разработки, позволившая ему стать настолько популярным среди веб-мастеров. Она заключается в том, что в css используется наследование правил оформления элементов (стилей) от старшего элемента (родителя) к младшему (потомку, элементу содержащемуся внутри родителя, вложенному тегу, если будет понятнее).

Подробнее о «родственных» связях html тегов можно почитать в статье: «Что такое дерево документа в HTML?»

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

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

Наследование стиля вместе с четкой расстановкой приоритетов наследования и образует собой в конечном итоге «каскад».

Пример использования css

Данный фрагмент кода взят из оформления заголовка на одном из сайтов. Он представляет собой одно обычное правило, которое в свою очередь состоит из:

  • Селектора – часть кода сообщающая браузеру к какому именно элементу или же совокупности элементов применяется данное правило. В нашем примере селектор это «#footer h3». Подробнее правила построения селекторов и принципы наследования оформления будут рассмотрены в дальнейших уроках.
  • Блока определений – набор стилей оформления для конкретного селектора. Он содержится между фигурных скобок после селектора. Стили написанные не блоком, а в одну строку являются признаком дурного тона в оформлении css кода.

Правила оформления кода могут располагаться как в пределах html страницы (вложенные и встроенные таблицы стилей) для которой они используются, так и прикрепляться к ней отдельным файлом (внутри css файла и в html файл). По этому признаку их разделяют на внутренние и внешние соответственно.

Зачем понадобилось разделять содержимое и оформление html страниц?

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

Пример кода с оформлением на чистом html:

Теперь пройдемся подробнее по основным причинам перехода от чистого html к html + css:

  • Слишком громоздкий код страницы значительно увеличивал размер файла, что ухудшало время загрузки страницы и увеличивало нагрузку на сервер.
  • Смешивание «логической» и «визуальной» части оформления приводило к ухудшению индексации страниц поисковыми роботами.
  • Адаптация внешнего вида сайта под различные типы браузеров и устройств становилась невозможна.
  • Код становился «грязным» не читабельным, что усложняло его поддердку веб-разработчиками.
  • Ограниченность функционала оформления тегами приводила к однообразному и пресному внешнему виду сайтов. При помощи одних только атрибутов невозможно настроить полноценное оформление сайта.
  • Внесение изменений в дизайн становилось крайне трудоемкой задачей, поскольку оформление приходилось менять каждому конкретному элементу, без возможности задания его целой группе элементов в один прием.

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

Что изменилось с внедрением css?

  • Разделение структуры документа на логическую разметку и оформление сделало код значительно «чище», тоесть читабельней, понятней для восприятия.
  • Появилась возможность адаптации сайтов для различных устройств за счет подключения для них различных правил оформления.
  • Один файл css может оформлять все страницы сайта, что позволяет значительно снизить трудоемкость веб-разработки, размер сайта в целом.
  • Простота применения каскадных таблиц стилей значительно сократила время на веб-разработку.
  • За счет кеширования файла с оформлением сайта на порядок ускорилось время загрузки страниц сайтов и снизилась нагрузка на сервера в целом.

Подводя итоги

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

CSS — каскадные таблицы стилей

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

Или нет? Если мы учтем небольшое взаимодействие с пользователем, мы на самом деле можем генерировать некоторую степень случайности в CSS. Давайте взглянем!

Новости

Улучшите свой CSS с помощью этих 5 принципов

Написание CSS — процесс достаточно простой и понятный, тогда почему для этого требуются еще какие-то принципы и best-practices?

По мере увеличения масштабов проекта и количества людей, работающего над ним, всё более и более явно начинают проявляться новые сложности, которые могут вызвать серьезные проблемы в будущем. Дублирование кода, сложные цепочки переопределения свойств, использование !important, оставшиеся и неиспользуемые CSS-свойства от удаленных HTML-элементов и так далее. Такой код сложнее читать и исправлять.

Написание CSS на профессиональном уровне сделает код более поддерживаемым, расширяемым, понятным и чистым. Давайте рассмотрим 5 простых и очень эффективным принципов, которые выведут ваш CSS на новый уровень

Оформляйте стили наведения, фокуса и активного состояния по-разному

В течение многих лет я оформлял состояния элементов :hover , :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №387 (28 октября — 3 ноября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Рекомендуем

Может ли бытовая техника зависать в инете и отправлять твиты

Если друг стал жертвой преступления, а из улик только код: квест в стиле нуар

Держите оффер: как находят приличную работу приличные разрабы

Дайджест свежих материалов из мира фронтенда за последнюю неделю №386 (21 — 27 октября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

dmitry-lavrik 26 октября 2020 в 09:54

Нетривиальная расстановка элементов на flexbox без media-запросов

Казалось бы, какой пост может быть о CSS Flexbox в 2020 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.

Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.

Интерактивное веб-приложение без программирования? Легко! Mavo вам в руки

Вы владеете HTML и CSS и умеете создавать простые (и не очень) статические веб-страницы, а хотели бы вдохнуть в них больше «жизни» и интерактивности? У вас есть работы (картины, фотографии, стихи, коллекция марок и т. п.), которыми вам хотелось бы поделиться с миром, но создание сайта-портфолио или блога, куда можно их разместить и без лишних усилий обновлять, вам не под силу? Или мечтаете вести дневник путешественника, или собирать необычные кулинарные рецепты, или отслеживать свою фитнес-активность и делать всё это онлайн на собственном сайте? Возможно, у вас есть любимый питомец, уход за которым требует особых процедур, и их обязательно нужно отслеживать и оперативно фиксировать?

Но от упоминания JavaScript вас бросает в лёгкую (а иногда и не очень) дрожь, а количество технологий и концепций, которыми нужно овладеть, чтобы реализовать ваши задумки, приводит вас в замешательство и отчаяние? В итоге вы задаётесь вопросами: «Почему веб-программирование должно быть таким трудным? Неужели нельзя что-то придумать, чтобы сделать его проще?».

Тогда вы пришли точно по адресу. Прочитав статью, вы получите в руки инструмент, с помощью которого, я уверен, сможете воплотить в жизнь, если не все, то многие свои идеи, аналогичные перечисленным выше.

Автор оригинальных картинок: Mart Virkus (toggl.com)

Маститые и умудрённые опытом фронтенд-разработчики, не спешите закрывать статью с криками, что сейчас тут будут что-то «втирать» новичкам и вам здесь делать нечего. Я уверен, вы тоже сможете почерпнуть для себя что-то полезное. Главное, помните: если что-то станет простым для новичков, это автоматически станет простым для всех! А значит, в какой-то мере упростит жизнь и вам. Это неплохо, согласитесь?

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Создание Scrapbook-макета на CSS Gr >Перевод


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №385 (14 — 20 октября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Знакомство с Sass модулями

Привет, Хабр! Представляю вашему вниманию перевод статьи «Introducing Sass Modules» автора Miriam Suzanne.

Недавно в Sass появилась функциональность, которая вам знакома по другим языкам: модульная система. Это большой шаг вперед для @import , одной из наиболее часто используемых функций в Sass. Несмотря на то, что существующая директива @import позволяет вам подключать сторонние пакеты и разделять ваши стили на поддерживаемые элементы, у неё всё же есть несколько ограничений

Вакансии

Как CSS Gr >Перевод

— являются важным строительным блоком для контроля над макетом.

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

С приходом CSS Grid, нам больше не нужно полагаться на элементы

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №384 (7 — 13 октября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

pavelgvozdb 10 октября 2020 в 23:11

Sass MediaScreen — Определяем девайсы на CSS

Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №383 (1 — 6 октября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Англоязычные доклады, CSS, Gr >

На FrontendConf в этом году будет выступать Leonie Watson — евангелист доступности, и Andy Bell — широко известный в мировом фронтенд-сообществе автор электронной книги «Every Layout». Выступление Leonie будет нестандартным и технически сложным, когда зрение участников будет не самым важным чувством. Andy и Leonie пригласил Павел Ловцевич. Он организует конференции в Минске, приглашает иностранных спикеров на свои конференции и к нам на FrontendConf, курирует доклады и все это, не считая работы техническим директором.

Накануне FrontendConf мы поговорили с Павлом о его роли в программном комитете конференции, о приглашении иностранных докладчиков, доступности, CSS и Grid Layout, usability презентаций, неочевидных мелочах, особенностях работы куратора, а в конце — почему вообще важно посещать конференции.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №382 (22 — 29 сентября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Заказы

Где и как использовать мультиколонки (CSS Columns)

Будни Программного комитета FrontendConf. Интервью c Сергеем Поповым

Программный комитет FrontendConf отвечает за отбор заявок, готовит программу, расписание, отвечает за стенды и концепцию. При этом участники ПК еще и курируют доклады спикеров. Задача куратора — помочь со структурой, контентом и довести доклад до идеала. Таких докладов у члена ПК бывает от одного до пары десятков, а еще надо готовить программу и свой доклад, если член ПК еще и спикер на конференции.

Накануне FrontendConf мы взяли у интервью у Сергея Попова (@sergeytovarov) и расспросили обо всем подробнее. Сергей — участник ПК, руководитель Лига А., выступающий спикер. Мы узнали о том, как идет подготовка к конференции, какие доклады он берет на курирование и чего от них ждать зрителям, для чего он выступает, о чем его новый доклад и зачем ходить на конференции.

Drag-&-Drop компоненты для слепых пользователей? Вы шутите?

Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Использование этих компонентов делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице.

Но есть нюанс. Когда мы разрабатываем такие компоненты, то думаем, что наши пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить.Часто так и есть, но мы забываем о сегменте пользователей с проблемами зрения. Мы создаем компоненты, которыми невозможно пользоваться большой группе людей, которая просто их не видит. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?

Сергей Кригер — фронтенд-разработчик в компании SinnerSchrader. Кроме фронтенд-разработки, активно интересуется темой веб-доступности и расскажет о некоторых способах ее повышения. Под катом — рассказ о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером.

Заходят как-то два браузера в скроллбар…

Скроллбар (scrollbar, полоса прокрутки) — это простой, но эффективный механизм, который действует как основное средство, с помощью которого можно просматривать большие документы. Но это — далеко не всё, на что способны полосы прокрутки! Эти скромные рабочие лошадки ещё и неплохо подсказывают пользователям о том, каковы размеры документов, с которыми они взаимодействуют. В результате скроллбары несут на себе двойную нагрузку. Они и помогают работать с различными материалами, и информируют пользователя о размерах этих материалов.

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

Более того — программы для устройств, обладающих сенсорными экранами, популяризировали идею скрытия скроллбаров. При таком подходе скроллбары оказываются невидимыми до тех пор, пока пользователь не начнёт прокручивать элемент, не помещающийся в некую область просмотра. В результате оказывается, что ради визуальной привлекательности приложений дизайнеры жертвуют понятностью интерфейсов. Пользователю может понадобиться некоторое время на то, чтобы понять, что содержимое в некоем контейнере можно прокручивать. Такой контейнер может выглядеть так, будто прокрутку он не поддерживает, или так, будто прокрутка ему просто не нужна.

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

Материал, перевод которого мы публикуем сегодня, посвящён некоторым особенностям использования скроллбаров в веб-приложениях.

CSS — каскадные таблицы стилей

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

Способы подключения CSS к документу

Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:

  • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега
  • , располагающегося в этом документе между тегами и . (Тег
  • будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
  • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ) сразу после тега (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;
  • когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.

Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например:

Иерархия элементов внутри документа

Как известно, HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементами-потомками, сестринскими.

Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом. Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента.
Пускай, например, в документе присутствуют два абзаца p, включающие в себя шрифт с полужирным начертанием b. Тогда элементы b будут дочерними элементами своих родительских элементов p, и потомками своих предков body. В свою очередь, для элементов p элемент body будет являться только родителем. И кроме того, эти два элемента p будут являться сестринскими элементами, как имеющими одного и того же родителяbody.

В CSS могут задаваться при помощи селекторов не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов (см. подраздел «виды селекторов»).

Правила построения CSS

В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

В четвёртом случае подключения таблицы CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявленийсвойство CSS : значение»), разделённых знаком «;».

Виды селекторов

Селекторы правила CSS могут быть

  • селекторами классов;
  • селекторами идентификаторов;
  • селекторами атрибутов;
  • селекторами потомков (контекстными селекторами);
  • селекторами дочерних элементов;
  • селекторами сестринских элементов;
  • селекторами псевдоклассов;
  • селекторами псевдоэлементов.
  • Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * . Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first <. >и * .first <. >имеют один и тот же смысл.

Классы элементов. Идентификаторы элементов.

Класс или идентификатор может быть присвоен какому-нибудь элементу (тегу) HTML посредством атрибутов class или id этого элемента (тега):

Основное отличие между классами элементов и идентификаторами элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор — только одному. Также отличие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.

Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.

Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.

Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с «.»), или свойство идентификатора самого по себе (в таком случае селектор начинается с «#»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.

В CSS помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.

Наследование. Каскадирование. Приоритеты стилей CSS.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green; ), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.

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

  • Наиболее низким приоритетом обладает стиль браузера;
  • Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
  • И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
    • Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
    • Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
    • Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:
      • количество идентификаторов ( #id ) в селекторе — ((1,0,0,0) за каждый объявленный идентификатор в селекторе правила CSS);
      • количество атрибутов ( [attr], [attr=»value»] ) в селекторе — ((0,1,0,0) за каждый объявленный атрибут в селекторе правила CSS);
      • количество классов ( .class ) и псевдоклассов ( :pseudoclass ) в селекторе — ((0,0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS );
      • количество тегов в селекторе ( H1, INPUT ) — ((0,0,0,1) за каждый объявленный тег в селекторе правила CSS).


Принцип расчёта таков, что, например, (1,0,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0,0), (0,1,0,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10,0), а (0,0,1,0) будет иметь больший приоритет, чем (0,0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.

    • Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;
    • И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important . Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

Пример таблицы стилей

Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами и размещена в «шапке» той самой веб-страницы, на которую она действует):

Здесь приведено семь правил CSS с селекторами p , h2 , .note , p#paragraph1 , a:hover , #news p и [type=»button»] .

  1. Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»).
  2. Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.
  3. Третье правило будет применено к ЛЮБОМУ элементу, атрибут class которого равен ‘note’. Например, к параграфу:

Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.

  • Четвёртое правило будет применяться только к элементу p , атрибут id которого равен paragraph1 . Такой элемент не будет иметь внешних отступов (margin).
  • Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.
  • Шестое правило, применяется для элементов p , которые находятся внутри КАКОГО-ЛИБО элемента с атрибутом id , равным « news » (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).
  • Седьмое правило применяется для всех элементов, у которых атрибут type равен button . Например, это правило будет применено к элементу (обычная кнопка), изменив его цвет фона на зеленый.
  • CSS-вёрстка

    До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

    • Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
    • Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закэшировано.
    • Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
    • Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.
    • Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.
    • Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

    История создания и развития CSS

    CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web» [1] . В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, и стандарт CSS.

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

    Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

    В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

    Уровень 1 (CSS1)

    Рекомендация W3C, принята 17 декабря 1996 года, откорректирована 11 января 1999 года [2] . Среди возможностей, предоставляемых этой рекомендацией:

    • Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
    • Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
    • Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
    • Выравнивание для текста, изображений, таблиц и других элементов.
    • Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

    Уровень 2 (CSS2)

    Рекомендация W3C, принята 12 мая 1998 года [3] . Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

    • Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
    • Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
    • Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
    • Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
    • Расширенный механизм селекторов.
    • Указатели.
    • Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

    В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

    Уровень 2, ревизия 1 (CSS2.1)

    Рекомендация W3C, принята 7 июня 2011 года.

    CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые и вовсе удалены. Удаленные части могут в будущем быть добавлены в CSS3.

    Уровень 3 (CSS3)

    Сильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных [5] [6] .

    Уровень 4 (CSS4)

    Поддержка CSS браузерами

    Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera) [9] .

    Бывший когда-то самым распространённым браузером [10] Internet Explorer 6 поддерживает CSS далеко не полностью [11] .

    Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS [12] [13] , но всё ещё содержит значительное количество ошибок [14] .

    В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3 [15] .

    Для проверки поддержки браузером веб-стандартов (в том числе и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.

    Различные блоковые модели

    В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5), реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5 эту модель так же понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

    В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing, со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.

    В браузере Mozilla, при поддержке этого свойства, под собственным «рабочим» названием -moz-box-sizing, ввели еще одно значение — padding-box, таким образом создав третью блочную модель, в которой width это размер содержимого и отступов блока, не включая рамки.

    CSS-фильтры

    Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, отображать блок #someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей можно написать такой код:

    Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.

    Безопасность

    Все поддерживаемые версии Internet Explorer, на конец 2010 года были уязвимы: при обработке браузером каскадных таблиц стилей (CSS) может возникнуть неинициализированная память, используемая затем для удаленного запуска на компьютере пользователя вредоносного кода [16] .

    CSS Framework

    CSS Framework (также Web design framework) — это заранее подготовленная css-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушенному в тонкостях вёрстки программисту или дизайнеру правильно создать xhtml-макет.

    Расширения CSS

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

    Для решения этих вопросов и ускорения разработки существует несколько расширений языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:

    • во время запуска страницы на стороне клиента (средствами JavaScript)
    • во время запуска страницы на стороне сервера
    • во время вёрстки сайта средствами специального компилятора

    Примеры расширений CSS:

    См. также

    Примечания

    1. Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина. — М.: НТ Пресс, 2005. — 312 с.: ил.
    2. Cascading Style Sheets, level 1
    3. Cascading Style Sheets, level 2 CSS2 Specification
    4. W3C: CSS: current work, CSS 3, etc.
    5. CSS3: css variables are a bad idea. Just allow us to call other selectors. » Rip’s Domain
    6. CSS Variables
    7. Selectors Level 4. W3.org (29 сентября 2011). Архивировано из первоисточника 30 мая 2012.
    8. Discover What’s New in CSS 4 | Webmonkey | Wired.com. Webmonkey (26 октября 2011). Архивировано из первоисточника 30 мая 2012.
    9. Web browser standards support
    10. Mozilla’s Firefox global usage share is still growing according to OneStat.com
    11. Contents and browser compatibility
    12. Details on our CSS changes for IE7 IEBlog
    13. Cascading Style Sheet Compatibility in Internet Explorer 7 MSDN
    14. The weird and wonderful world of Internet Explorer
    15. CSS Compatibility and Internet Explorer MSDN
    16. Microsoft: все версии Internet Explorer уязвимы для хакеров

    Литература

    • Эд Титтел, Джефф Ноубл HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М .: «Диалектика», 2011. — 400 с. — ISBN 978-5-8459-1752-2
    • Стивен Шафер HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М .: «Диалектика», 2010. — 656 с. — ISBN 978-5-8459-1676-1
    • Энди Бадд, Камерон Молл, Саймон Коллизон CSS: профессиональное применение Web-стандартов = CSS Mastery: Advanced Web Standards Solutions. — М .: «Вильямс», 2008. — 272 с. — ISBN 978-5-8459-1199-5
    • Кристофер Шмитт. CSS. Рецепты программирования = CSS. Cookbook. — СПб. : БХВ-Петербург, 2007. — 592 с. — ISBN 978-5-9775-0075-3
    • Эрик А. Мейер. CSS-каскадные таблицы стилей: подробное руководство = Cascading Style Sheets: The definitive Gu >М .: Символ, 2006. — 576 с. — ISBN 5-93286-075-8

    Ссылки

    Англоязычные ресурсы

    • Каскадные таблицы стилей. Домашняя страничка. (англ.)
    • Различные блоковые модели CSS (англ.)
    • CSS3-тест браузера (англ.)
    • Таблицы поддерживаемых браузерами возможностей CSS (англ.)
    • Валидатор CSS (англ.)

    • Демонстрация возможностей CSS-вёрстки (англ.)
    • CSS3 Preview — Демонстрация новых возможностей CSS3 (англ.)
    • — Демонстрация возможностей (англ.)

    Русскоязычные ресурсы

    • Каскадные таблицы стилей. Домашняя страница.
    • Сервис проверки CSS от W3C
    • Учебник CSS (рекомендован w3.org)
    • Справочник CSS
    • Учебные руководства CSS
    Языки таблиц стилей (сравнение, список)
    Режимы Настольная издательская система · Веб-разработка · Пользовательский интерфейс
    Стандартные CSS · DSSSL · XSL
    Нестандартные JSSS · FOSI · Qt Style Sheets · Sass · LESS · SMIL Timesheets
    Стандарты Консорциума Всемирной паутины
    Рекомендации

    Canonical XML • CDF • CSS • DOM • Geolocation API • HTML • ITS • MathML • OWL • P3P • PLS • RDF (Schema) • SISR • SKOS • SMIL • SOAP • SRGS • SSML • SVG • SPARQL • Timed Text • VoiceXML • WSDL • XForms • XHTML • XHTML+RDFa • XInclude • XLink • XML (Base • Encryption • Events • Information Set • namespace • Schema • Signature) • XPath / 1.0 / 2.0 • XPointer • XProc • XQuery • XSL • XSL-FO • XSLT (элементы) • XUP

    Примечания
    Рабочие проекты

    CCXML • CURIE • HTML5 • InkML • RIF • SCXML • SMIL Timesheets • sXBL • WICD • XFDL • XFrames • XBL • XHTML+MathML+SVG • XMLHttpRequest

    Guidelines

    Web Content Accessibility Guidelines

    Initiative

    Multimodal Interaction Activity • Markup Validation Service • Web Accessibility Initiative

    Deprecated
    Организации

    World Wide Web Foundation • SVG Working Group • WebOnt • Device Description Working Group • WHATWG

    Agora • Argo • Arena • Amaya • CERN httpd • Libwww • Line Mode Browser

    Wisdom

    Слово Wisdom отображается шрифтом Times New Roman, 34 пункта темно-красного цвета (на тех компьютерах, где есть поддержка таблиц стилей броузерами), а слова More Wisdom отображаются шрифтом Arial, 18 пунктов темно-оранжевого цвета (при этом задано выравнивание заголовка посередине страницы). Для текста в промежутках между этими заголовками по умолчанию используетcя шрифт Times, поскольку явно не указал шрифт для этих фрагментов. Поэтому броузер выбирает собственный заданный по умолчанию основной шрифт.
    Мудрые мысли написаны на хорошем английском языке, и принадлежат действительно мудрым людям. В качестве упражнения попробуйте сделать перевод.

    В HTML-коде запись этих «Мудростей» выглядит так:

    Группировка (grouping) состоит в объединении нескольких свойств и значений стилей. При этом возникают более жесткие правила для форматирования. Ниже приведен пример обычного класса:

    Это означает, что все абзацы класса g будут отображаться шрифтом Arial, 22 пункта, с интерлиньяжем 14 пунктов. Если применить к этому классу группировку, то получится следующее определение:

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

    ПРИМЕР абзаца класса g, к которому применена группировка.

    Краткий обзор способов размещения элементов страницы

    Таблицы стилей могут помогать в создании макета страницы, предоставляя широкие возможности выравнивания элементов страницы и управления полями. Выравнивание текста выполняется с помощью свойства text-align. Возможные значения left, right, center и justify.

    Посмотрим, как это выглядит.

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

    Для управления полями Web-страницы используются четыре свойства: margin-top, margin-bottom, margin-left и margin-right.
    Как и все свойства CSS, они могут применяться к любому логическому объекту. Обычно для управления полями используются объекты BODY и Р (paragraph — абзац). Для указания значений полей можно использовать разные единицы измерения: пиксели, пункты, сантиметры, дюймы и проценты.
    Для справки — стандартные макеты страниц HTML обычно измеряются в пикселях.

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

    На странице Пример создания 3-D эффекта приводится пример, в котором использовалось отрицательное значение полей margin-topдля создания графического эффекта без употребления графических средств.

    Пример создания 3-D эффекта

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

    В данном примере тег

    Обратите внимание на то, как в таблице стилей определяется стиль — набору свойств в фигурных скобках присваивается имя, перед которым ставится точка.

    В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга.
    Сначала выводится слой тень, на него накладывается слой основа, а затем слой1 и слой2.
    Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тегом

    В рассмотренном нами примере были использованы следующие свойства:

    margin-top отступ сверху
    color цвет
    font-size размер шрифта
    font-family семейство шрифтов
    font-weight степень «жирности» шрифтов
    line-height высота строки

    Запомните — используя отрицательные значения свойста margin-top, можно наложить один текст на другой.

    Позиционирование элементов

    Рассмотрим вопрос позиционирования элементов на странице.
    На этом сайте разбирался вопрос о расположении элементов на странице путем использования фреймов и таблиц.
    Для перекрытия элементов приходилось применять особые ухищрения, как в примере создания 3-D эффекта.

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

    Для позиционирования элементов на странице используются три свойства:

    • left — для задания расстояния в пикселах от левого края окна (х-координата);
    • top — для задания расстояния в пикселах от верхнего края окна (у-координата);
    • z-index — для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

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

    Кроме свойств-координат, для позиционирования элементов понадобится свойство position. Это свойство в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна.
    Свойство position может принимать три значения:

      absolute — заданные свойства left и top поставят элемент в место с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент).
      Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы.

    Заметим, что положение элемента не зависит от положения его тэга внутри HTML-документа.

  • relative — элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию.
    Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative, а свойства координат left и top — нулевые значения.
    Ненулевые значения свойств left и top осуществляют сдвиг элемента относительно исходного положения.
  • static — элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.
  • Посмотрим пример помещение текста на определенное место на странице и назначение ему красного цвета.

    Стиль текста был задан в теге заголовка первого уровня

    с помощью атрибута STYLE. В дальнейшем тег

    применен еще раз, но стиль, указанный в атрибуте STYLE, уже не применяется.
    Второй текст появляется там, где он и должен появиться, как если бы первого тега

    не было совсем.

    Верхний текст не позиционирован, а нижний — позиционирован.
    Дело в том, что в первом случае использования тега

    элемент позиционировался индивидуально с помощью атрибута STYLE, а во втором случае специального позиционирования не осуществлялось и броузер расположил элемент

    так, как он это должен был сделать по умолчанию.

    Статические фильтры

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

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

    Статический фильтр задается как свойство в таблице стилей.

    Параметры не обязательны.

    В версии 4 языка HTML имеется 14 статических фильтра.

    Чаще других используются следующие фильтры (без параметров):

    • Blur — эффект размытости
    • Fliph — горизонтальное отражение картинки или текста
    • Flipv — вертикальное отражение картинки или текста
    • Wave «волнистое» искажение картинки или текста
    • Xray — изображение только контура объекта

    В примере в окно выводится броузера графическая картинка в формате jpeg и текст в следующей последовательности:

    • графика и текст без фильтра;
    • графика и текст с фильтром Flipv;
    • графика и текст с фильтром Fliph;
    • графика и текст с фильтром Blur.

    Обратите внимание: фильтр Blur, примененый к тексту создает эффект трехмерности — создается впечатление отбраываемой тени.

    Посмотрим еще один пример использования статических фильтров. . В данном случае применение фильтра Xray создает эффект негатива «картинки», а также изменяет цвет шрифта текста. Фильтр Wave создает не просто «волнистое» искажение картинки — ее просто не видно за этими полосками! Зато текст, обработанный спомощью этого фильтра стал пестреньким (по цвету) и очень миленьким. Не правда ли?

    Инструментальные средства для работы c CSS

    Основную информацию о каскадных таблицах стилей можно найти на следующих web-сайтах:

    Как подключить CSS (каскадные таблицы стилей) к HTML?

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

    HTML – лишь инструмент для верстки страницы, и если вы занимаетесь этим – вы верстальщик. А вот если вы дополнительно пишите какие-нибудь скрипты или модули, на том же JavaScript или PHP – тут можно поговорить о таком понятии, как программист. Но речь сейчас пойдет не об этом, и когда мы точно узнали, является ли HTML языком программирования или нет, перейдем к главному этой статье.

    Помимо того, что HTML выступает в качестве верстки ваших веб-страниц, существует такое понятие, как CSS (нет, это не игра Counter-Strike: Source, как могло подумать множество юных веб-мастеров), это каскадные таблицы стилей. Суть их – это формирование общего стиля страницы или отдельного ее элемента. Простыми словами – отступы, цвет, шрифт, ширина, высота и прочие другие параметры настраиваются именно через эти стили.

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

    Подключение внешней таблицы стилей

    Внешний файл стилей имеет расширение .css (это обязательное условие) и название файла на английском языке. Пример – main.css или style.css. После того, как вы создали такой файл и заполнили его соответствующими стилями – загрузите его на свой сайт в удобную для вас папку и осуществите подключение к HTML-документу.

    Самый распространенный способ подключения внешнего файла стилей – это:

    Или сокращенный вариант для HTML5:

    На что тут стоит обратить внимание?

    1. Файл подключается в секцию HEAD на все страницы вашего сайта. Там, где этого файла нет, будет отсутствовать ваше оформление.
    2. В части href пишется полная или относительная ссылка к CSS-файлу.
    3. Необязателен, но желателен последний закрывающий слеш. Так код получается «по фэн-шую».
    4. Подключать на страницу можно сколько угодное число файлов стилей. Главное – без фанатизма.

    Помимо этого, стили могут быть встроены еще несколькими способами.

    Подключение внутренней таблицы стилей

    Под внутренней таблицей стилей подразумевается отсутствие файла стилей. Свойства таблицы в таком случае вставляются на страницу следующим образом:

    Или краткий вид для HTML5:

    Здесь особых нюансов нет – вставлять конструкцию можете как в секцию HEAD, так и в BODY. Причем на странице, в разных ее частях может быть несколько таких конструкций.

    Подключение встроенной таблицы стилей

    Если вы исследовали различные сайты, смотрели, как устроена их верстка, то могли заметить, как стили прописываются непосредственно следующим образом:

    Такой вариант и называется «встроенными стилями», применим ко всем элементам веб-страницы, будь то простой блок, изображение или встроенное видео.

    Единственным нюансом здесь является то, что если во внешних или внутренних стилях не используется свойство «!important» – встроенное свойство является приоритетным по исполнению. Что это значит? Приведу простой пример:

    Несмотря на то, что во внутренних стилях мы задали цвет фразы красный – она будет черной, так как это указано во встроенных стилях.

    Web-технологии

    Максим Александрович Викулин

    Лекция 3

    Каскадные таблицы стилей (CSS)

    CSS (Cascading Style Sheets)

    CSS — это язык стилей, определяющий отображение HTML-документов.

    Исходный код документа

    Содержимое стилевого файла

    Типы стилей

    1. Стиль браузера;
    2. Стиль автора;
    3. Стиль пользователя.

    Способы добавления стилей на страницу

    • Связанные стили;
    • Глобальные стили;
    • Внутренние стили;
    • Импорт CSS.

    Связанные (внешние) стили

    Глобальные стили

    Внутренние (инлайн-) стили

    Импорт CSS

    Базовый синтаксис CSS

    Selector (селектор) — указывает на тег, класс или идентификатор к которому применяются стилевые параметры.

    Property (свойство) — указывает, какое стилевое свойство применить к данному селектору (например: цвета, границы, размеры, шрифты и т.д.).

    Value (значение) — указывает, какие именно значения установить для определённого свойства.

    Формы записи

    Разные значения у одного свойства

    Комментарии

    Значения стилевых свойств

    Размеры

    Относительные величины:
    Единица Описание
    em Размер шрифта текушего элемента.
    ex Высота символа x.
    px Пиксель.
    % Процент.
    Абсолютные единицы:
    Единица Описание
    in Дюйм (1 дюйм равен 2,54 см).
    cm Сантиметр.
    mm Миллиметр.
    pt Пункт (1 пункт равен 1/72 дюйма).
    pc Пика (1 пика равна 12 пунктам).

    Адреса

    Представление цветов

    • В шестнадцатиричном виде (пример: #FF00EE или в краткой форме: #F0E);
    • По названию константы (red, green, orange, olive и т.д.);
    • С помощью функции rgb в десятичном представлении (например: rgb(128, 255, 0) или rgb(51%, 100%, 0)).
    • С помощью функции rgba, где добавляется альфа-канал, позволяющий изменять прозрачность (например: rgba(128, 255, 0, 0.5)).

    Некоторые цвета

    Селекторы тегов

    Классы

    Идентификаторы

    Идентификаторы и классы

    Идентификаторы и классы чувствительны к регистру.

    Контекстные селекторы

    Здесь стиль будет применяться к тегу2 когда он размещается внутри тега1:

    Тоже самое справедливо и для классов. Здесь стилевые правила будут применяться только к тегу тег, который расположен внутри класса класс:

    Соседние селекторы

    Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

    Дочерние элементы

    Дочерние селекторы

    Стиль применяется к селектору2, но только в том случае, если он является дочерним для селектора1.

    Универсальный селектор

    Стиль применяется ко всем тегам.

    Например, в данном случае стиль установит красный цвет текста для всех элементов, которые находятся в теге

    Селекторы атрибутов

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

    Группирование

    Пример стилей для каждого селектора:

    Группирование

    Пример сгруппированных стилей:

    Наследование

    Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

    Каскадные таблицы стилей, или CSS для начинающих (практикум «правильного» HTML)

    Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием или английским словом . Если раньше создание web-страниц было уделом избранных и на просторах Рунета царили лишь признанные web-дизайна, то теперь даже мой десятилетний сынишка в свободное от учебы время мастерит потихонечку собственную страницу, собираясь разместить ее на каком-нибудь бесплатном сервере (вроде narod.ru или boom.ru), которых за последний год тоже развелось в Рунете множество. Web-конструированием сегодня не занимается, наверное, только не подключенный к Сети или ленивый. Множество людей, поблуждав по просторам Интернета, рано или поздно задумываются о создании собственной странички. Для них-то и написана эта статья.

    Речь здесь пойдет о HTML для новичков, а именно — о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее — о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.

    Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad’ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: ) — тексты я создаю в MS Word, презентации — в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу — MS FrontPage. > Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.

    Первый раз — в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы — множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален — любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.

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

    Ну, а теперь перейдем непосредственно к делу — к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название — CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.

    Логическое и физическое форматирование

    Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием — просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.

    Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML — теги

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

    Назначение стилей отдельным элементам страницы

    CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу . Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице — достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?

    Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега , присвоив ему соответствующее значение. Синтаксис такой:

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

    Обратите внимание — когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.

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

    Назначение стилей нескольким элементам одной страницы — создание внедренной таблицы стилей

    Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.

    Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня — шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в страницы (в любом месте между тегами и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:

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

    Назначение стилей одновременно для нескольких страниц сайта

    Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным — .css).

    Вот пример содержимого такого файла (например, my.css):

    Обратите внимание: теги внутри файла таблицы стилей не используются — расширение .css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами и следующую строку:

    В этой строке указывается, что связываемый файл является таблицей стилей (rel=»stylesheet»), формат этого файла — .css (type=»text/css») и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href=»my.css»). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.

    Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в страницы внутри тега-контейнера .

    Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер . .

    Каскадные таблицы стилей css

    Каскадные таблицы стилей css

    При вступлении хочу сказать следующее, в css, это главное понятие что и для чего мы делаем. В этом весь успех курса по сути и зависит, когда вы будете понимать для чего вы редактируете и ставите то или иное значение определенному элементу, это уже успех!

    Основные понятия css

    Стили, это определенные правила для определенных элементов разметки html. Стили состоят с свойства и его значения, это напоминает нам атрибуты в html. Отдельное свойство со значением называется Декларацией, если их несколько, тогда ставится разделитель ; сразу после первой декларации. Обратно же припомним html, там разделитель между атрибутами играл пробел.

    Набор деклараций принято называть правилами. Чтобы было проще понять принцип работы со стилями рассмотрим два простые и очень часто используемые свойства. Итак работать будем со свойством цвета текста и цвета фона, а именно свойство — color и свойство — background.

    Когда мы выбрали свойства для применения стал открытым вопрос, куда и где и как применить эти цвета? Правила применяются к селекторам, такое интересное слово)))

    Селектор это часть CSS-правила, которая определяет элемент или элементы, к которым будет применён блок объявлений (стиль), содержащий форматирующие свойства.

    Теперь о практике применения стилей в верстке или задании стилей для нашего документа. Есть три способа применения стилей к нашим элементам html страницы.

    Каждый из способов имеет свои определенные преимущества перед другими. Начнем с самого простого способа, а именно inline, вложенный. Этот способ помогает применить стиль к определенному элементу на странице используя атрибут style. Как использовать атрибуты мы уже с вами знаем.

    Топ-пост этого месяца:  Схлопывание отступов CSS правила объединения, работа с дочерними и родительскими элементами
    Добавить комментарий