Основы CSS
Каскадные таблицы стилей (CSS) разделяют подробные данные представления от содержимого HTML, позволяя Вам создать таблицы стилей для различных платформ. При оптимизации веб-контента для Safari на iOS необходимо использовать CSS для доступа к некоторым функциям веб-контента iOS. Считайте это приложение, чтобы изучить, как добавить CSS к существующему содержимому HTML.
Посмотрите Safari Ссылка CSS для полного руководства по всем свойствам CSS, поддерживаемым Safari.
Что такое CSS?
CSS является расширением стандартного содержимого HTML, позволяющего Вам подстраивать представление веб-контента. С CSS можно изменить множество атрибутов стиля содержания, которое Вы разрабатываете, такие как шрифт для блока текста, цвета фона таблицы или ведущего (межстрочный интервал) между строками текста.
CSS позволяет Вам угождать различным клиентам и предпочтениям, потому что можно изменить стиль веб-страницы на лету, никогда не редактируя структуру HTML. Вместо того, чтобы встроить стиль в структуре HTML, такой как использование bgcolor атрибут для организации веб-страницы, необходимо поместить определения стилей CSS в отдельный блок за пределами него. Фактически, если Вы разделяете свой код HTML и код CSS в различные файлы, Ваши веб-страницы более удобны в сопровождении. Таким образом, можно использовать одну таблицу стилей (который содержит определения стилей) через многократные веб-страницы, существенно упрощая код.
Различные способы можно определить стиль для элемента HTML в веб-страницах, описаны в остающихся разделах этого приложения.
Встроенный CSS
Используя встроенный CSS — то, где определения стилей записаны непосредственно в определение элемента HTML — является, возможно, самым простым способом определить стиль для элемента. Можно сделать это использование style атрибут для элемента. Например, запустите с этого абзаца:
<p>The quick brown fox jumped over the lazy dog.</p> |
Без любых определений стилей это представляет в шрифте абзаца по умолчанию и стиле для браузера, представляющего его. Но скажем, Вы хотели изменить стиль абзаца для отображения в полужирном шрифте. Можно сделать это с CSS font-weight свойство. Для изменения стиля для этого абзаца добавьте font-weight ключ и значение для стиля Вы хотите непосредственно к абзацу style атрибут:
<p style="font-weight: bold;">The quick brown fox jumped over the lazy dog.</p> |
Это изменяет стиль шрифта того абзаца к полужирному шрифту. Существуют некоторые недостатки к использованию определений стилей, встроенных с HTML, хотя:
Определение не является допускающим повторное использование. Для каждого абзаца, который Вы хотите выведенный на экран в полужирном шрифте, необходимо ввести то же определение стилей — один для каждого абзаца. Если бы Вы хотели изменить полужирный стиль на курсивный стиль, например, то необходимо было бы изменить определение для каждого абзаца, также.
Код может быть нарушен. Большую часть времени у Вас не будет определения отдельного стиля. Для определенного абзаца можно хотеть иметь его дисплей в полужирном шрифте, расположить его с отступом 20 пикселей от левого поля и дать ему синий цвет фона с черной границей. В минимуме это требует четырех определений стилей CSS для каждого абзаца, который Вы хотите соответствовать этому стилю.
Одно из больших преимуществ CSS является возможностью разделить стиль от структуры, но то преимущество потеряно с этим методом. Другие методы использования CSS в Вашем содержании сохраняют преимущество, как объяснено в следующих разделах.
Встроенный головами CSS
Около начала каждого HTML документ является a <head> блок, определяющий невидимые метаданные о содержании. В этом разделе можно определить множество определений CSS, которые можно тогда снова использовать в фактическом содержании организации.
В предыдущем разделе был пример абзаца в полужирном шрифте с синим фоном и черной границей, все расположили 20 пикселей с отступом от левого поля. Определения для того стиля похожи на это:
font-weight: bold; |
background-color: blue; |
border: 1px solid black; |
margin-left: 20px; |
Но как Вы встраиваете эти определения в элементах HTML, не вводя их непосредственно в HTML? Во-первых, необходимо определить их в разделе стиля <head> блок для веб-страницы. Во-вторых, Вам нужен идентификатор для изоляции того определенного набора определений стилей от любых других в <style> блок. Используя идентификатор notebox, определение стилей похоже на это:
... |
<head> |
<style type="text/css"> |
.notebox { |
font-weight: bold; |
background-color: blue; |
border: 1px solid black; |
margin-left: 20px; |
} |
</style> |
</head> |
... |
Заметьте, что определения связываются фигурными скобками, и что идентификатор ( notebox) предшествуется периодом. Последний позволяет Вам использовать этот набор определений стилей для любого элемента в Вашем содержимом HTML. Если Вы хотите ограничить его использование только элементами абзаца, изменить идентификатор на:
p.notebox |
Это говорит браузеру использовать определения, только если они определяются в a <p> элемент абзаца. Если Вы хотите использовать эти стили для всех абзацев, то Вам не нужен пользовательский идентификатор. Измените идентификатор на p.
Вы изучили, как определить пользовательские стили в <head> блок Вашего содержания. Но как Вы фактически говорите браузер, какие абзацы должны использовать эти стили? Вот два абзаца текста в HTML:
<p>This is some plain boring text.</p> |
<p class="notebox">This is a finely styled paragraph!</p> |
Во втором абзаце существует новый атрибут: class. Это - то, как Вы указываете определение стилей, с которым определенный элемент должен представить себя. Главный абзац в примере выше представил бы, как обычно, в стиле абзаца по умолчанию для браузера. Но с классом стиля второго набора абзаца к Вашему новому notebox, это представит с полужирным шрифтом, синим цветом фона, чистой черной границей на 1 пиксель, все 20 пикселей от левого поля. Для любого абзаца (или любого элемента, так как мы не указывали явный элемент, которому это могло быть присвоено), просто используйте тот атрибут класса для именования идентификатора определения стилей.
Существует, однако, один недостаток к этому методу встраивания CSS в веб-странице. Хотя определения являются допускающими повторное использование в веб-странице — можно теперь указать как многих notebox абзацы, как Вы хотите — они не являются допускающими повторное использование через многократные веб-страницы. Если бы Вы хотите, чтобы текст абзаца был представлен в курсивном стиле вместо полужирного, необходимо было бы изменить то определение на каждой веб-странице, где Вы интегрировали его. Следующий раздел описывает самый масштабируемый способ использовать CSS в Вашем веб-контенте.
Внешний CSS
Если Вы хотите использовать определенный стиль через многократные веб-страницы, существует только один способ сделать это: внешне соединенные таблицы стилей. Так как каждая веб-страница должна знать об определениях стилей, которые Вы создали, разместив всех их во внешний файл, и затем соединение каждой веб-страницы к тому файлу походит на разумный способ сообщить им. Тот путь, если Вы хотите изменить полужирный шрифт на курсив, Вы только, должен изменить его один раз — во внешнем файле.
Внешняя таблица стилей является почти точно тем же как <style> блок, который Вы определили в последнем разделе, но это не встраивается в HTML. Все потребности браузера являются самими определениями стилей. Перечисление b-1 показывает новый файл, вызванный styles.css, это содержит все определения стилей для веб-страницы.
Перечисление b-1 styles.css файл
.bordered { |
font-weight: bold; |
background-color: blue; |
border: 1px solid black; |
margin-left: 20px; |
} |
.emphasized { |
font-style: italic; |
} |
Для хорошей меры существует другое определение стилей — то, просто устанавливающее стиль шрифта текста элемента к курсивному стилю. Теперь необходимо так или иначе сообщить содержимому HTML об этой внешней таблице стилей. Вы не будете больше встраивать определения стилей, таким образом, можно будет удалить <style> блок в целом. В его месте — все еще в <head> блок веб-страницы — Вы добавите a <link> элемент, соединяющий внешнюю таблицу стилей с документом:
<link rel="stylesheet" href="styles.css" type="text/css"> |
Эта строка говорит браузеру соединяться с этой внешней таблицей стилей. Обратите внимание на то, что URL, указанный href относительно — для этой определенной строки для соединения таблицы стилей правильно, styles.css должен быть в той же папке как HTML, соединяющийся с ним.
Как только Вы включали эту строку, можно использовать HTML class припишите так же, как в предыдущем разделе:
<p>This is some plain boring text.</p> |
<p class="emphasized">This is some italic text.</p> |
<p class="bordered">This is a finely styled paragraph!</p> |
Вы изучили, как интегрировать стиль CSS в Ваш веб-контент. Для получения информации о каком виды свойств CSS и функций поддерживаются Safari и WebKit, отсылают к Safari Ссылку CSS.