Каскадные таблицы стилей CSS. Верстка
HTML как язык разметки гипертекста, его структура, элементы. Каскадные таблицы стилей, их разработка. Верстка: страницы как мы их видим. Новые технологии – HTML5, CSS3. LESS. Динамический язык стилевой разметки. Технологии упрощенной разметки HAML, SASS.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 19.04.2013 |
| Размер файла | 3,4 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
haml
%span.my_class
%body#my_id
%body.my_first_class.my_second_class#my_id
html
<span class='my_class'></span>
<body id='my_id'></body>
<body id='my_id' class='my_first_class my_second_class'></body>
Как видно из примера выше, операторы «.» и «#» можно комбинировать, задавая одному элементу сразу несколько классов и добавлять к этому еще и id (классы и id можно так же устанавливать непосредственно через атрибуты, но при верстке лучше использовать именно операторы haml это повысит скорость разработки и сделает код более наглядным).
Haml закрывает тег автоматически и не требует наличия закрывающей пары. Данное поведение можно явно переопределить с помощью оператора «/» (прямая косая черта). Например:
haml
%br/
html
<br />
По умолчанию теги: meta, img, link, br, hr, input, area, param, col и base ведут себя согласно опции: autoclose, указывать явное наличие «/» в них не нужно.
Структура документа haml, как будет описано ниже, основана на отступах и строках. В тех случаях когда вам необходимо удалить, добавленные парсером переносы строк или отступы, используйте операторы «>» и «<» (больше и меньше). При этом оператор «>» удаляет отступы и перенос строки, а оператор «>» только отступы. Например:
haml
%br
%br>
%br
%br
%br<
%br
html
<br><br><br>
<br>
<br><br>
Для понимания действий данных операторов в официальной документации их поведение описывается как «пасть аллигатора», которая съедает тег с пробелами в первом случаи или просто пробелы после тега, во втором.
Последним рассмотренным оператором будет «\» (обратная косая черта), позволяющий экранировать любые другие операторы haml от парсера. Например:
haml
\%br
\.my_class
\#my_id
html
%br
my_class
#my_id
В разделе с операторами не были рассмотрены «[]» (квадратные скобки) - предназначенные для передачи Ruby объектов, устанавливающих класс и id элемента, а также «|» (прямая черта) позволяющая записывать строку используя много строчную запись. Данные операторы являются весьма специфичными и редко применяются для верстки, вы можете познакомиться с ними в официальной документации.
Атрибуты элемента
Haml поддерживает два варианта записи атрибутов элемента, первый с помощью «{}» (фигурные скобки), второй с помощью «()» (круглые скобки). Фигурные скобки являются аналогом Ruby хэша, круглые скобки позволяют перечислять атрибуты также как в обычном HTML документе. Скобки можно комбинировать и использовать для записи атрибутов одного элемента разные стили. Атрибуты внутри скобок можно переносить на другие строки (отступы внутри скобок игнорируются) Например:
haml
%div {:class => 'box',:id => 'box_id'} Атрибуты в фигурных скобках
%div (class='box' id='box_id') Атрибуты в круглых скобках
%div (class='box') {:id => 'box_id'} Совместное использование, «микс»
%p {:style => 'color:red',:id => 'red_text'} Отступы в скобках игнорируются
%p (style='color:red'
id='red_text') Переносы строк тоже игнорируются внутри скобок
html
<div class= «box» id= «box_id»>Атрибуты в фигурных скобках</div>
<div class= «box» id= «box_id»>Атрибуты в круглых скобках</div>
<div class= «box» id= «box_id»>Совместное использование, « микс»</div>
<p id= «red_text» style= «color:red»>
Отступы в скобках игнорируются
</p>
<p id= «red_text» style= «color:red»>
Переносы строк тоже игнорируются внутри скобок
</p>
При написании кода старайтесь выбрать один стиль написания атрибутов для того что бы не создавать двойного смысла в коде. Если вы пишите для Ruby проектов, лучше всегда использовать фигурные скобки, это не будет ставить в тупик программистов читающих ваш код.
Структура документа
Как уже говорилось ранее, для структурирования элементов в haml используются отступы и строки. Структура документа haml представляет собой дерево, корнем которого является сам документ, а все последующие элементы - ветки. Ветки могут вкладываться друг в друга образуя связи. При описании структуры используются следующие правила:
Табуляция лучше пробела! Управление структурой с помощью табуляции позволяет писать код достаточно быстро. Для управления используются клавиши «Tab» (добавления табуляции) и сочетание «Shift+Tab» (удаление табуляции), при этом вы можете оперировать несколькими блоками сразу или даже всем документом в целом. Не забывайте, что в большинстве операционных систем, табуляция равна 4-м или 8-ми пробелам. Для того чтобы сохранить читаемость документа установите, в редакторе кода, значение табуляции равной 2-м пробелам.
1 - Строки документа haml содержащие только отступы и переносы строк игнорируются парсером и не попадают в итоговый документ. Такой документ мы будем называть «пустым».
2 - Не «пустой» документ должен иметь хотя бы один элемент с «нулевым» отступом. Например:
Следующий пример вызовет ошибку т.к. строка начинается с отступа.
haml
%div
html
Indenting at the beginning of the document is illegal.
3 - Для вложения одного оператора в другой необходимо перенести его на новую строку и увеличить его отступ на единицу, при этом нельзя пропускать уровни вложенности т.е. увеличивать отступ больше чем на единицу у одного из элементов.
haml
%div
%p
Текст вложен в тег p который в свою очередь вложен в тег div
html
<div>
<p>
Текст вложен в тег p который в свою очередь вложен в тег div
</p>
</div>
Следующий пример вызовет ошибку т.к. у тега span двойной отступ
haml
%div
%p
%span
Неверное вложение span в тег p.
html
The line was indented 2 levels deeper than the previous line.
Увеличивать отступ можно не только на единицу, но например и на 2, главное что бы во всем документе соблюдалось данное правило, т.е. для вложения следующего элемента нужно будет использовать отступ равный 4.
4 - Строка документа может начинаться с символа отличного от оператора но вкладывать такие строки друг в друга нельзя. Так же нельзя вкладывать любые операторы haml внутрь строк. Например:
Следующий два примера вызовут ошибку компиляции.
haml
Начало документа
Попытка вложить строку в строку
html
Illegal nesting: nesting within plain text is illegal.
haml
Начало документа
%div попробуем вложить оператор haml
html
Illegal nesting: nesting within plain text is illegal.
5 - HTML элементы в содержимом не экранируются и выводятся в поток как есть (данное поведение возможно переопределить с помощью фильтра или опции).
haml
%h1
Это заголовок написан на haml
<h1>Это заголовок написан на HTML</h1>
html
<h1>
Это заголовок написан на haml
</h1>
<h1>Это заголовок написан на HTML</h1>
6 - Между операторами haml в одной строке не должно быть отступов. Любые элементы указанные в одной строке с оператором после отступа считаются его содержимым. Например:
haml
%h1.my_class {:style => 'color: red'}<= 'Нет отступов, все операторы haml записаны верно'
%h1.my_class {:style => 'color: red'}<= В содержимое попадет часть операторов
html
<h1 class= «my_class» style= «color: red»>Нет отступов, все операторы haml записаны верно</h1>
<h1>.my_class {:style => 'color: red'}<= В содержимое попадет часть операторов</h1>
Для указания doctype вам необходимо в начале документа после трех восклицательных знаков «!!!» указать необходимый вам тип. Haml поддерживает как XML так и HTML схемы. На данную директиву также влияет опция: format определенная в настройках приложения. Помимо прочего для XML можно дополнительно указать кодировку, отличную от UTF-8. Например:
Если опция: format не определена или имеет значение: xhtml
haml
!!!
html (XHTML 1.0 Transitional)
<! DOCTYPE html PUBLIC «- //W3C //DTD XHTML 1.0 Transitional //EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
Если опция: format имеет значение: html4
haml
!!! Strict
html (HTML 4.01 Strict)
<! DOCTYPE html PUBLIC «- //W3C //DTD HTML 4.01 //EN» «http://www.w3.org/TR/html4/strict.dtd»>
Если опция: format имеет значение: html5 всегда используется <! DOCTYPE html>
haml
!!!
html (HTML 5)
<! DOCTYPE html>
XML указывается следующим путем
haml
!!! XML
html
<? xml version='1.0' encoding='utf-8'?>
Не забывайте о том что Doctype не является html элементом вкладывать в него содержимое не нужно.
Полный список поддерживаемых Doctype можно посмотреть в официальной документации.
Комментарии
Для обозначения HTML комментариев используется знак «/». Для обозначения условных комментариев Internet Explorer «/[]». Так же существуют комментарии haml «-#», текст заключенный в них не попадает в конечный поток. Например:
haml
%div Эта строка видна в браузере
/ Эта видна в исходном коде
/[if IE] Эта строка будет видна только в браузере IE или в исходном коде
/%div
%p
Весь этот код будет за комментирован
-#
Этот текст не попадет в конечный html документ
html
<div>
Эта строка видна в браузере
</div>
<! - Эта видна в исходном коде ->
<! - [if IE]> Эта строка будет видна только в браузере IE или в исходном коде <! [endif]->
<!-
<div>
<p>
Весь этот код будет за комментирован
</p>
</div>
->
Операторы языка Ruby
Для вывода результата работы кода написанного на языке Ruby используется оператор «=» (равно). Например:
haml
- str = 'Hello World!'
%h1
= str
html
<h1>
Hello World!
</h1>
Оператор «=» можно также указывать в строке с другими операторами haml, при этом оператор «=» должен быть указан в самом конце. Например:
haml
- str = 'Hello World!'
%span.my_class {:style=>'color:red'}>= str
html
<span class= «my_class» style= «color:red»>Hello World!</span>
В примерах выше для исполнения Ruby кода так же использовался оператор «-» (дефис). Код записанный после него исполняется, но результат не попадает в конечный документ. Например:
haml
%span
- hide_str = 'Эта строка не будет выведена в конечный документ'
Строка занимает
= hide_str.bytesize
byte
html
<span>
Строка занимает 89 byte
</span>
Такие вещи как интерполяция, экранирование, исполнение блоков кода не рассматриваются в данном документе. Более расширенную информацию по использованию Ruby кода в документах haml можно получить из официальной документации.
Фильтры
Фильтры позволяют передавать парсеру haml блоки текста которые должны обрабатываться по определенным правилам. Синтаксис фильтра состоит из оператора «:» (двоеточие) и имени фильтра. Существуют следующие встроенные фильтры:
:plain
Текст полученный данным фильтром не анализируется парсером и выводится как есть за исключением любых HTML элементов. Помогает при вставке больших объемов текста не содержащих HTML тегов. Например:
haml
%div
:plain
Этот текст - не будет проанализирован парсером на предмет операторов haml
%div - знак процента будет проигнорирован так же как и любой другой оператор.
Все символы <b>HTML</b> НЕ будут <strong>экранированы</strong>
html
<div>
Этот текст - не будет проанализирован парсером на предмет операторов haml
%div - знак процента будет проигнорирован так же как и любой другой оператор
Все символы <b>HTML</b> НЕ будут <strong>экранированы</strong>
</div>
:escaped
Работает так же как и фильтр: plain но все HTML теги экранируются. Например:
haml
%div
:escaped
Этот текст - не будет проанализирован парсером на предмет операторов haml
%div - знак процента будет проигнорирован так же как и любой другой оператор.
Все символы <b>HTML</b> будут <h1>экранированы</h1>
html
<div>
Этот текст - не будет проанализирован парсером на предмет операторов haml
%div - знак процента будет проигнорирован так же как и любой другой оператор.
Все символы < b> HTML</b> будут < strong> экранированы</strong>
</div>
:preserve
Входящий блок текста в исходном коде записывается в одну строку, переносы заменяются символом &#x000A, HTML теги не экранируются. Например:
haml
%p
:preserve
Этот текст
в исходном коде
будет записан в одну строку
<p>Но в окне браузера HTML теги</p>
<p>будут создавать переносы</p>
html
<p>
Этот текст&#x000A; в исходном коде&#x000A; будет записан в одну строку&#x000A;<p>Но в окне браузера HTML теги</p>&#x000A;<p>будут создавать переносы</p>
</p>
:javascript
Полученный набор оборачивается в тег <script> и CDATA, полезен для встраивания JavaScript кода. Например:
haml
:javascript
alert ('Встроенный JavaScript');
html
<script type= «text/javascript»>
// <! [CDATA [
alert('Встроенный JavaScript');
// ]]>
</script>
:css
Полученный текст оборачивается в тег <style> и CDATA, предназначен для встраивания css кода. Например:
haml
:css
h1 {font-weight: bold;}
html
<style type= «text/css»>
/*<! [CDATA [*/
h1 {font-weight: bold;}
/*]]>*/
</style>
:cdata
Оборачивает полученный текст в тег CDATA. Например:
haml
:cdata
<element>Земля</element>
<element>Огонь</element>
<element>Вода</element>
html
<! [CDATA [
<element>Земля</element>
<element>Огонь</element>
<element>Вода</element>
]]>
:ruby
Интерпретирует весь входящий текст как код на языке Ruby. Например:
haml
:ruby
a = 10
b = 5
c = a+b
%span= c
html
<span>15</span>
:erb
Интерпретирует весь входящий текст как шаблон ERB. Например:
haml
:erb
<%a = 20%>
<%b = 25%>
<%c = a+b%>
%span= c
html
<span>45</span>
Фильтры: textile,:markdown и:maruku используются с соответствующими плагинами облегченных языков разметки.
:sass
Входящий поток интерпретируется как код на языке sass, который представляет собой мощный инструмент по написанию абстрактного css кода.
Помимо указанных выше фильтров, вы можете написать свои собственные, подробнее об этом вы можете прочитать в официальной документации.
Опции
Опции парсера указываются в конфигурационном файле приложения через директиву «Haml: Template.options». В haml определенны следующие опции:
Для верстки особое значение может иметь только опция: format, все остальные лучше не переопределять и оставить как есть.
:format
Определяет формат вывода, по умолчанию имеет значение xhtml (в Rails3 значением по умолчанию является html5). Может принимать следующие значения: html5, xhtml и html4
:escape_html
Указывает парсеру применять экранирование или нет к HTML тегам в содержимом. Может принимать значение true или false
:ugly
Указывает парсеру сохранять или нет исходное форматирование в конечном выводе. Влияет на производительность приложения, в режиме «Production» всегда имеет значение true. Может принимать значения true и false
:attr_wrapper
Указывает на то какие символы использовать для обертки HTML атрибутов. По умолчанию используется «'» (апостроф).
:autoclose
Определяет список тегов которые не содержат пары и должны быть закрыты в соответствии с используемым стандартом. По умолчанию имеет значение: ['meta', 'img', 'link', 'br', 'hr', 'input', 'area', 'param', 'col', 'base']
Опции: encoding,:preserve,:filename,:suppress_eval и:line специфичны и их описание вы можете посмотреть в официальной документации
Sass (Syntactically Awesome Stylesheets) - модуль, включенный в Haml. Sass - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Вложенные правила
Одна из ключевых особенностей Sass - вложенные правила, которые облегчают процесс создания и редактирования вложенных селекторов.
#header
:background #FFFFFF
error
color: #FF0000
a
text-decoration: none
&:hover
text-decoration: underline
Будет скомпилировано в:
#header {
background: #FFFFFF;
}
#header.error {
color: #FF0000;
}
#header a {
text-decoration: none
}
#header a:hover {
text-decoration: underline
}
Переменные в CSS
Sass добавляет к CSS константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей.
}
Заключение
гипертекст разметка верстка стилевой
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа.
Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS).
Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими Шрифт Брайля.
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно.
Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Основным понятием CSS является стиль - т.е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т.п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTMLкода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Удобно, не правда ли?
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.
Список использованной литературы
1. Бройдо В.Л. Вычислительные системы, сети и телекоммуникации СПб, Питер 2002 - 464 с.
2. Информатика /под редакцией С.В. Симоновича. СПб, Питер 2001 - 400 с.
3. Кирмайер М. Информационные технологии. СПб.: Питер, 2003 - 443 с.
4. Мэтьюз Дж. Web - сервер. СПб.: Символ, 1998 - 356 с.
5. Олифер В.Г., Олифер Н.А. Компьютерные сети. СПб.: Питер, 2005 - 864 с
6. Олифер В.Г., Олифер Н.А. Сетевые операционные системы. СПб.: Питер, 2003 - 539 с.
7. Эд Титтел, Джефф Ноубл HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. - М.: «Диалектика», 2011.
8. Стивен Шафер HTML, XHTML и CSS. Библия пользователя, 5-е издание - HTML, XHTML, and CSS Bible, 5th Edition. - М.: «Диалектика», 2010.
9. Энди Бадд, Камерон Молл, Саймон Коллизон CSS: профессиональное применение Web-стандартов = CSS Mastery: Advanced Web Standards Solutions. М.: «Вильямс», 2008.
10. Кристофер Шмитт. CSS. Рецепты программирования = CSS. Cookbook. - СПб.: БХВ-Петербург, 2007.
11. Эрик А. Мейер. CSS-каскадные таблицы стилей: подробное руководство = Cascading Style Sheets: The definitive Guide. - М.: Символ, 2006.
Размещено на Allbest.ru
Подобные документы
Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007HTML - язык разметки гипертекста как набор инструкций для программы-просмотрщика (броузера). Понятие и назначение тэгов, их функции и параметры. Смысл понятий "параметр" и "значение параметра". Правила работы с тэгами, создание ссылок с их помощью.
статья [16,8 K], добавлен 10.05.2009Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009Физическая структура сайта. Шаблон оформления страницы. Исходный текст шаблона главной HTML-страницы (верстка с использованием фреймов). Фрагмент кода, содержащий карту сайта. Каскадные таблицы стилей. Программное обеспечение, использованное при работе.
курсовая работа [1,3 M], добавлен 02.07.2014Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Новый язык разметки гипертекста XHTML. Валидация XHTML-документов, определение их типа. Распространённые ошибки в XHTML-разметке. Конформность пользовательских агентов. Использование XHTML с другими пространствами имен. Расширение семантики HTML.
курсовая работа [44,1 K], добавлен 14.07.2009Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014История Hyper Text Markup Language, таблицы стилей, уровни Cascading Style Sheets. Описание средств разработки шаблона. Верстка элементов шаблона и создание стилей. Требования к качеству html-верстки и тестирование сайта. Листинг html и css-кода.
курсовая работа [237,5 K], добавлен 28.12.2014Краткие сведения о доске объявлений, структура и внутреннее содержание соответствующего сайта. Принципы и основные этапы разработки, выбор и обоснование программных средств: язык HTML, каскадные таблицы стилей, JavaScript, Web-сервер Apache, PHP.
дипломная работа [1,6 M], добавлен 22.10.2014
