Внедрение CSS в HTML документ. Как работает CSS? Установка свойств с помощью функции
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5 CSS 2.1 IE Cr Op Sa Fx
Флексагон
Флексагон представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.
Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css . Содержимое этого файла показано в примере 1.2.
Пример 1.2. Содержимое стилевого файла style.css
Body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ } p { text-align: justify; /* Выравнивание по ширине */ margin-left: 60px; /* Отступ слева в пикселах */ margin-right: 10px; /* Отступ справа в пикселах */ border-left: 1px solid #999; /* Параметры линии слева */ border-bottom: 1px solid #999; /* Параметры линии снизу */ padding-left: 10px; /* Отступ от линии слева до текста */ padding-bottom: 10px; /* Отступ от линии снизу до текста */ }
В файле style.css как раз и описаны все параметры оформления таких тегов как
,и
Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом
, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление» , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
- font-color
- color
- font-family
- font-size
2. Что такое стиль?
- Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
- Язык разметки гипертекстовых документов.
- Набор правил форматирования элементов веб-страницы.
- Метод преобразований текстовых документов в HTML.
- Технология, представляющая собой разные приёмы для вёрстки HTML-кода.
3. Как расшифровывается аббревиатура CSS?
- Colorful Style Sheets
- Cascading Style Sheets
- Computer Style Sheets
- Creative Style Sheets
- Common Style Sheets
Ответы
2. Набор правил форматирования элементов веб-страницы.
Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.
Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.
Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так:
С помощью CSS того же самого результата можно добиться так:
Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:
Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.
Применение CSS к HTML-документу
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style . Красный цвет фона можно установить так:
This is a red page
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг
This is a red page
Метод 3: Внешний (ссылка на таблицу стилей)
Внешняя таблица стилей это просто текстовый файл с расширением .css . Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Например, скажем, ваша таблица стилей называется style.css и находится в папке style . Это можно проиллюстрировать так:
href="style/style.css" />
Обратите внимание, как указан путь к вашей таблице стилей атрибутом href .
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами
и . Например, так:
Эта ссылка указывает браузеру, что он должен использовать правила отображения
HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов
могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно
использовать для управления отображением множества HTML-документов.
Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать.
Попытайтесь сделать это сами
Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:
default.htm
Моя первая таблица стилей
style.css
Body { background-color: #FF0000; }
Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")
Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!
Переходите в следующий урок , где мы рассмотрим некоторые из свойств CSS.
Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.
Что такое HTML и CSS?
HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.
Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.
При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.
Основные термины HTML
Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.
Элементы
Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с
до
) и абзацев (определены как
); в список можно включить элементы
, Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так: Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов. Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег
и закрывающий тег
. Что находится между этими двумя тегами будет содержимым ссылки. Так, теги ссылок будут выглядеть примерно так: Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id
, который идентифицирует элемент; атрибут class
, который классифицирует элемент; атрибут src
, который определяет источник встраиваемого содержимого; и атрибут href
, который указывает ссылку на связанный ресурс. Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент
с атрибутом href
будет выглядеть следующим образом:
Shay Howe
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега
и закрывающего тега
охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com"
в открывающем теге. Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу. HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac. Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы:
,
, Объявление типа документа или
находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто
. После этого идёт элемент
означающий начало документа. Внутри
элемент Всё видимое содержимое веб-страницы будет находиться в элементе
Это веб-страница. Этот код показывает документ, начиная с объявления типа документа,
, затем сразу идёт элемент
. Внутри
идут элементы Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента В предыдущем примере элемент
был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега.
является одним из таких элементов. Содержимое элемента
в примере присваивается с помощью атрибута charset
и значения. К другим типичным самозакрывающимся элементам относятся: Приведённая структура, сделанная с помощью объявления типа документа
и элементов
, Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода. В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так! Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид. В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой. При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац. Селекторы, как правило, связаны со значением атрибута, вроде значения id
или class
или именем элемента, вроде В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы P { ... }
Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background
, color
, font-size
, height
и width
и другие часто добавляемые свойства. В следующем коде мы определяем свойства color
и font-size
, применяемые ко всем элементам P {
color: ...;
font-size: ...;
}
Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы И устанавливаем значение свойства color
как orange
, а значение свойства font-size
как 16 пикселей. P {
color: orange;
font-size: 16px;
}
Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой. Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным. Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS. Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы. Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы Div { ... }
Классы позволяют выбрать элемент на основе значения атрибута class
. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа. Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class
для нескольких элементов. В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class
, включая элементы Awesome { ... }
Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class
, идентификаторы используют значение атрибута id
в качестве селектора. Независимо от типа отображаемого элемента, значение атрибута id
может быть использовано только один раз на странице. Если id
присутствуют, то они должны быть зарезервированы для важных элементов. В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id
. Здесь идентификатор выберет только элемент, содержащий атрибут id
со значением shayhowe
.
#shayhowe { ... }
Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные. Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе. Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым. Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл. Внутри элемента В следующем примере HTML-документа элемент
Чтобы CSS отображался правильно, значение пути атрибута href
должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка. Если CSS-файл располагается в подпапке, то значение атрибута href
должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href
будет stylesheets/main.css
. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку. На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS. Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS. Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта. Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5. Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей. Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта. Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить. Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS. Просматривая файл index.html в браузере мы можем видеть, что элементы Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} Мы также включим ссылку на наш файл main.css используя атрибут href
. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href
, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css
.
Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше. Рис. 1.04. Наш сайт Styles Conference со сбросом CSS Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент. Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке. Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками. Напомним, что мы рассмотрели следующее: Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой. Отличительной особенностью CSS является отсутствие таких понятий как элемент, тег или атрибут. Структура таблиц состоит из ПРАВИЛ
, которые определяют, какой внешний вид должен иметь определенный элемент в документе. Рассмотрим структуру правила: На изображении видно, что сначала пишется селектор, указывающий к какому html тегу (тегам) предназначается данное свойство. Затем идет блок объявления стилей, который содержит в себе свойство и значение, заключенный в фигурные скобки. После свойства пишется двоеточие. Если правило содержит в себе несколько объявлений, как в случае на рисунке, то после каждого пишется точка с запятой, кроме самого последнего. Таким образом, на рисунке выше правило показывает, что все заголовки заключенные в тег H1
в документе будут синего цвета (color: blue
) с размером шрифта 14 пикселей (font-size: 14px
). Нам известно, что изменив стилевые правила во внешней таблице стилей, можно поменять дизайн всех страниц сайта. Только для этого сначала следует подключить внешнюю таблицу стилей ко всем страницам сайт. Внешняя таблица стилей
- это обычный текстовый файл с расширением.css
Попробуем сделать самостоятельно:
Файлы имеют содержание: style.css:
В браузере увидим: Могут быть включены прямо в html-документ в раздел Также, можно задать стили с помощью атрибута style: Данные примеры не желательно использовать, так как они не дают весомых преимуществ перед html. Если появится необходимость менять дизайн полностью сайта, то для этого придется редактировать каждую страницу, что займет очень много времени. Следующая -
В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом. Осуществить данную задачу можно тремя способами: Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS. Практически каждый HTML тег имеет атрибут style
, который говорит о том, что к этому тегу применяется некое стилевое описание. Пишется так:
style=""
> Всё что будет написано между кавычками атрибута style
и будет являться стилевым описанием для данного элемента, в данном случае элемента
Ну например:
style="color: #ff0000; font-size:12px"
> это параграф с индивидуальным стилем В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках, сейчас же речь идет о том как применить CSS к какому либо HTML тегу. По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента. style="color: #ff0000; font-size:14px"
> style="color: #ff0000; font-size:14px"
> Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов. Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег
(не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов. Взгляните на пример, ниже к нему будут комментарии. На этом сайте Вы найдёте любую информацию о слонах. У нас Вы можете по выгодным ценам приобрести лучших слонов!! Только у нас Вы можете взять любых слонов на прокат!! Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки
- красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента. Теперь обещанные комментарии: Тег
идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису: Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой. Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл. Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст: Body {background-color: #c5ffa0} О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника. Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла. Делается это с помощью тега
(связь). Тег
многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег
является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как
несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами
и не выводится браузерами на экран. Тег
имеет атрибуты: Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид: Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel
присваиваем значение stylesheet
так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css
и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"
Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом.. Файл mystyle.css На этом сайте Вы найдёте любую информацию о слонах. У нас Вы можете по выгодным ценам приобрести лучших слонов!! Только у нас Вы можете взять любых слонов на прокат!! В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!? В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?Теги
Атрибуты
Демонстрация основных терминов HTML
Настройка структуры документа HTML
Привет, мир!
Демонстрация структуры HTML-документа
и абзац текста через <р>
. Поскольку и заголовок и абзац вложены в элемент
, они видны на веб-странице.
Самозакрывающиеся элементы
Валидация кода
На практике
Основные термины CSS
Селекторы
или <р>
.
Свойства
Значения
Работа с селекторами
Селекторы типа
Классы
Идентификаторы
Дополнительные селекторы
Подключение CSS
Другие варианты добавления CSS
Использование сброса CSS
Кроссбраузерность и тестирование
На практике
и
Демонстрация и исходный код
Резюме
Ресурсы и ссылки
Создание таблицы CSS и подключение к HTML документу
Например, есть таблица стилей style.css
и страницы html. Для подключения стилей в данные html страницы следует добавить строку, которая дает понять браузеру, что он должен использовать стили css папки style.css:
Для этого открываем блокнот и создаем один файл - index.html и второй - style.css. Затем располагаем их в одной папке.
h2{color:green;font-size:16px}
Встроенные таблицы стилей
Расположим правила стилей в самой голове документа:
"https://www.w3.org/TR/html4/loose.dtd">
Создаем таблицу CSS и подключаем к html страницам
"https://www.w3.org/TR/html4/loose.dtd">
Создаем таблицу CSS и подключаем к html страницам
Атрибут style.
style="background-color: #c5ffa0"
>
style="color: #0000ff; font-size:18px"
>Всё о слонах
Купить слона
style="color: #0000ff; font-size:16px"
>Взять слона на прокат
Тег
Всё о слонах
Купить слона
Взять слона на прокат
,
- будут синими а параграфы
CSS в отдельном внешнем файле.
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
rel
- Определяет отношения между текущим документом и файлом, на который делается ссылка.
type
- MIME тип данных подключаемого файла.
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Всё о слонах
Файл elephant.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Купить слона
Файл elephant1.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Взять слона на прокат