Как мы работаем css. Введение в CSS

Всем-всем привет!

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

• . Будем учиться редактировать код сайта с помощью данных редакторов;
• . Поможем поисковому роботу понять структуру страницы;
• . Узнаем насколько правильно составлен код сайта и найдем ошибки;

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

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

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

• Структуру документа;
• Место нахождения того или иного элемента;
• Предназначение элемента;
• Подключаемые сторонние файлы;
• И много-много другого.

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

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

Аргументами, передаваемыми функции, являются индекс элемента в наборе и текущее значение свойства. Переменная this ссылается на объект HTMLElement, соответствующий элементу, а функция возвращает значение, которое требуется установить.

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

Названия большинства этих методов говорят сами за себя, однако некоторые из них нуждаются в дополнительных пояснениях. Методы offset() и position() возвращают объект, имеющий свойства top и left , которые указывают положение элемента. Пример использования метода position() приведен ниже.

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

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.

Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:

С помощью CSS того же самого результата можно добиться так:

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Можно применять CSS к HTML с помощью HTML-атрибута style . Красный цвет фона можно установить так:

Example

This is a red page

Второй способ вставки CSS-кодов - HTML-тэг . Например:

Example body {background-color: #FF0000;}

This is a red page

Внешняя таблица стилей это просто текстовый файл с расширением .css . Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style . Это можно проиллюстрировать так:

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href .

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами и . Например, так:

My document ...

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

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

Давайте посмотрим, как это сделать.

Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:

Мой документ Моя первая таблица стилей

Body { background-color: #FF0000; }

Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")

Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!

Переходите в следующий урок , где мы рассмотрим некоторые из свойств CSS.

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

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

Если вам нравится использовать относительные единицы для установки размера шрифта (em), установите значение 62.5% для свойства font-size тега body . В результате станет очень просто пересчитывать px в em - нужно будет всего лишь разделить значение в px на 10 (например, 24px = 2.4em).

Body { font-size: 62.5%; /* font-size 1em = 10px */ } p { font-size: 1.2em; /* 1.2em = 12px */ }

Когда элемент input получает фокус ввода (:focus), то в браузере Safari к нему добавляется голубой контур (а в Chrome - желтый).

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

Input:focus { outline: none; }

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

Для масштабирования элемента можно использовать свойство transform в большинстве браузеров, поддерживающих CSS3.

Вот правила для трюка с увеличением элемента на 10% при наведении курсора мыши на него:

A { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); }

Нужно указать правило для браузера IE? Есть способ сделать это без условных комментариев (тем не менее, ваш код CSS не пройдет проверку).

Код примера изменяет background-color для элемента div в зависимости от типа используемого пользователем браузера. Так как * указывает на IE версии 7 и ниже, то мы используем правило с _ после него, чтобы для IE6 (и более ранних версий) использовать другой цвет фона, отличный от фона для IE7:

Div { background-color: #999; /* все браузеры */ *background-color: #ccc; /* добавили * перед свойством - для IE7 и ниже> */ _background-color: #000; /* добавили _ перед свойством - для IE6 и ниже */ }

В примере для элемента div задается 70% прозрачности. Нужно использовать частный код CSS для корректной работы в Internet Explorer (что делает наш код несоответствующим стандартам W3C):

Div { /* для браузеров, совместимых со стандартами */ opacity:0.7; /* следующие строки будут проигнорированы в браузерах, совместимых со стандартами */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */ filter: alpha(opacity=70); /* IE 5-7 */ }

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

Например:

H1 { color: green; } h1 { color: red; }

В данном наборе правил, элемент h1 будет иметь красный цвет.

Если нужно изменить приоритет правил без изменения порядка их объявления, можно сделать так:

H1 { color: green !important; } h1 { color: red; }

Теперь элемент будет зеленым.

Это один из способов центрировать элемент div с фиксированной шириной/высотой во внешнем контейнере. Данный способ можно использовать для центрирования текста, изображений и так далее внутри контейнера. Нужно сделать несложные вычисления для элемента с фиксированными размерами и использовать абсолютные величины для позиционирования и полей. Родительский контейнер должен иметь свойство position: relative , чтобы данный метод сработал.

Div { position: absolute; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; /* 1/2 высоты вашего элемента */ margin-left: -200px; /* 1/2 ширины вашего элемента */ }

Веб шрифты открывают дополнительные возможности оформления страниц с помощью правила CSS @font-face. Однако в настоящий момент нет унифицированной реализации @font-face в различных браузерах. Если говорить конкретно, типы поддерживаемых файлов шрифтов различаются в разных браузерах (может быть ситуация изменится с введением стандарта WOFF). Кроме того, при использовании шрифтов нужно быть осторожным при соблюдении авторских прав (шрифт может не иметь лицензии для использования в веб пространстве).

Одним из обходных путей в ситуации с @font-face является API Google Font .

Ниже приводится пример использования шрифта Cantarell для элемента с использованием API Google Font.

Для использования шрифта из API Google Font сначала нужно указать ссылку на внешнюю таблицу стилей в теге :

Для использования шрифта для элемента h1 просто указываем его в свойстве font-family .

H1 { font-family: "Cantarell", Arial, serif; /* Используем набор шрифтов (на всякий случай) */ }

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

Текст ссылки разорван пробелом, чтобы перенести последнее слово на следующую строку. Но как сделать так, чтобы ссылка все время оставалась на одной строке (то есть предотвратить перенос строки)? Просто. Нужно использовать свойство white-space:

A { white-space: nowrap; }

Для горизонтального центрирования текста можно использовать несколько стандартных методов (например, text-align: center или margin: 0 auto), но вертикальное центрирование текста требует использования трюков.

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

Вот элемент p , который центрирован по горизонтали внутри элемента div с размерами 100×100px, с помощью свойства text-align: center:

Свойство text-align не центрирует текст по вертикали. Мы можем установить значение свойства line-height равным высоте контейнера div (100px).

Div { width:100px; height:100px; } div p { line-height:100px; }

Такое использование свойств предполагает отсутствие у элемента p полей и отступов. Если будут иметься поля или отступы сверху или снизу, то нужно будет их компенсировать или просто установить 0 для padding и margin , чтобы облегчить себе жизнь.

Также, данный трюк не сработает, если текст будет содержать более одной строки (например, в случае переноса текста на следующую строку), потому что между строками будет установлено расстояние равное значению свойства line-height .