Глава1 Глава2 Глава3
А далее идет большой текст с этими главами, так вот чтобы посетитель страницы нажав на одну из этих глав "перенёсся" в нужное место текста нам нужно сделать две вещи:
Присвоить индивидуальное имя каждой главе. Ищем, значит, в большом-большом тексте нужные главы и делаем их адресами ссылок закладок, присваиваем им имена.:
<а name="glava1">Глава1 </а> <а name="glava2">Глава2 </а> <а name="glava3">Глава3 </а>
Имя можно присвоить любое необязательно glava1
А потом прописываем на них ссылки в меню, содержании:
<a href="#glava1"> Глава1</a> <a href="#glava2"> Глава3</a> <a href="#glava3"> Глава3</a>
Перед каждым именем ставим знак решётки #.
Одна из страничек на сайте обязательно должна называться index.html. Именно файл с таким названием на сайте будет искать программа робот, когда человек введет имя сайта. Так как страница index.html будет открываться первой, делайте её главной. Остальные страницы можете называть, как угодно.
Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.
Иногда в тексте не обойтись без знаков -спецсимволов.
Так например спецсимвол < - будет значить что в этом месте текста нужно поставить знак < а спецсимвол > обозначит символ >.
Все спецсимволы начинают писаться со знака &- амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду.
Для знака & тоже есть свой спецсимвол - &
Такая вот путаница получается..
Спецсимвол - это неразрывный пробел. Дело в том, что когда Вы пишите текст в блокноте или html редакторе "простых" пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они "удаляются" и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать... вот и придумали люди спецсимвол он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.
А неразрывным он называется по тому, что группа таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы
Пример в примере… навивает на философские мысли о бесконечности…
Если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания, вставляйте в неё знак пробела .
Помните правило <тег>здесь что то обязательно должно быть</тег>? Спецсимвол пробела один из выходов в данном случае.
Кроме выше указанных есть еще целый ряд спецсимволов: знаки зодиака, карточные масти, палочки, точечки, ёлочки, кругляшки, дроби..
Простой новый тег <hr> рисует в окне горизонтальную линию, не требует закрывающего тега. Часто применяется при верстке страницы в качестве декоративного элемента.
Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут - size, цвет атрибут - color, и при необходимости отключить тень линии noshade.
Тег <marquee> заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:
behavior - определяет тип скроллинга, может иметь следующие значения:
alternate - колебательные движения от края к краю
scroll - прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
slide - прокручивание текста c остановкой.
scrollamount - скорость бегущей строки от 1 до 10. loop задает количество прокруток бегущей строки. direction - направление движения текста. значения:
up - вверх, down - вниз, left - влево, right - вправо.
bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки:
<html> <head> <title>Бегущая строка</title> </head> <body> <div align="center"><h2>Бегающие строки</h2></div> <marquee>Бегущая строка по умолчанию</marquee> <marquee direction="right">Бегущая строка слева направо</marquee> <marquee behavior="alternate">Бегущая строка бегает от края к краю</marquee> <marquee scrollamount="10">Бегущая строка со скоростью 10</marquee> <marquee scrollamount="1">Бегущая строка со скоростью 1</marquee> <marquee direction="right" loop="2">Эта строка будет прокручиваться только два раза</marquee> <marquee behavior="slide">Бегущая строка с остановкой</marquee> <marquee bgcolor="#b40000">Бегущая строка с фоном</marquee> <marquee width=400>Бегущая строка с ограничением ширены прокрутки</marquee> <marquee direction="up">Бегущая строка снизу вверх</marquee> <marquee hspace="300">Бегущая строка с отступами от границ</marquee> </body> </html>
Комментарии используются для того, чтобы облегчить свой собственный труд, а так же упростить понимание другим человеком кода странички. Пишутся они непосредственно в коде html документа, однако браузер не выводит эти "пометки" на экран. Для того чтобы заставить браузер игнорировать какой либо текст его необходимо заключить вот в такой набор символов:
<!-- -->
По принципу:
<!-- здесь может быть любой текст -->
Неупорядоченный список задаётся тегом <ul>. Любой список состоит из элементов, "пунктов", каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам "пункта". Для тега <li> закрывающий тег </li> необязателен.
Вместе данные теги приобретают следующий вид:
<ul> <li> Пункт первый.. <li> Пункт второй.. <li> Пункт третий.. </ul>
Теги <li> и <ul> имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль.
Может иметь одно и трёх значений:
disk - кружок, диск (по умолчанию)
circle - полый круг
square - квадрат
Упорядоченный или нумерованный список задаётся тегом <ol>, так же как и в неупорядоченном списке, элемент списка присуждается тегом <li>.
Построение кода полностью схоже с неупорядоченным списком.
Атрибут type в сочетании с упорядоченным списком может иметь следующие значения:
А - Заглавные буквы
а - Строчные буквы
I - Заглавные римские цифры
i - Строчные римские цифры
1 - Арабские цифры (по умолчанию)
В упорядоченном списке есть атрибут start его числовое значение говорит о том, с какого номера следует строить упорядоченный список.
Список определений задаётся тегом <dl>. Пункты списка определений размечаются тегом <dt>, а определения этих пунктов тегом <dd>.
Всё вместе пишется по следующей схеме:
<dl> <dt> <dd> </dl>
Пример:
<html> <head> <title>Список определений</title> </head> <body> <dl> <dt> Слово коса может иметь следующие определения: <dd> сельскохозяйственный инструмент <dd> хитрая девичья причёска <dd> отмель реки <dt> Слово ключ тоже имеет несколько значений: <dd> гаечный <dd> источник, родник </dl> </body> </html>
Между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей.
С тегом <title> указываем имя документа в заголовке страницы.
Тег <meta> (закрывающего тега не требует) указывает служебную информацию на нашей страничке.
<meta> имеет следующие атрибуты:
http-equiv - указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
name - информационное имя. (применяется в паре с атрибутом content)
content - информационное содержание, связанное с мета именем (name)
Пример (очень нужный и важный):
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
Данная запись указывает браузеру кодировку, в которой была написана данная страница - формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку "иероглифов" у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.
<meta http-equiv="Content-Type" - указываем, что в этом мета теге мы будем заниматься Content-Type - типом содержания Content="text/html; - а именно его текстом Charset=Windows-1251"> - документ для Windows - Кириллица, где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252
В настоящее время рекомендуют использовать кодировку UTF 8
То есть писать в голове документа так:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Пример:
<meta http-equiv="Content-Language" Content="ru">
В этой строчке говорится о том, что язык Language документа является русским Content="ru"
Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.
Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name="author" указывает имя автора страницы, а name="copyright" авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д.
Язык разметки гипертекстовых документов, точно также как и русский язык живёт во времени и тоже меняется.. появляются новые слова - теги например <footer>, <header>, <video>.., какие-то наоборот умирают, забывается и осуждаются в использовании, например теги: <center>, <font>, <frameset>.., тоже самое происходит с атрибутами, меняются правила синтаксиса..
Так вот чтобы различные браузеры отобразили документ правильно, не запутались в чтении Вашей страницы, необходимо указать в соответствии с какими стандартами он был написан.
Разработкой стандартов HTML языка (и не только HTML), иначе спецификаций, занимается организация World Wide Web Consortium, W3C - Консорциум Всемирной паутины, официальный сайт: (www.w3.org). Эта организация разработала несколько спецификаций HTML.
Именно этими документами должны руководствоваться как веб-мастера при создании сайтов, так и разработчики браузеров
Заголовок <!DOCTYPE> указывает на тип документа - DTD (document type definition - описание типа документа) для правильной его интерпретации браузерами, другими словами указывал браузерам, согласно каким стандартам следует обрабатывать ту или иную страницу.
Ниже перечислены основные варианты <!DOCTYPE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Строгий DTD. Используя такой заголовок, веб-страница должна в точности следовать спецификации HTML 4.01 не использовать теги и атрибуты, обозначенные спецификацией как "нежелательные", а также не должна использовать фреймы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Переходный синтаксис HTML. При таком заголовке допускаются "вольности" при составлении документа, страница может содержать теги и атрибуты, помеченные спецификацией HTML 4.01 как "нежелательные".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- Указывает, что в HTML-документе используются фреймы.
<!DOCTYPE html>
- А такой заголовок обозначает, что используется спецификация HTML 5.
Заголовок <!DOCTYPE> принято располагать в самом начале документа перед тегом <html>
CSS (Cascading Style Sheets).
CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
Чтобы внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом , можно тремя способами:
1. Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе, который нуждается в отдельном стилевом описании.
2. Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
3. Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание:
<p style=""> это параграф с индивидуальным стилем </p>
Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента <p>
Например:
<p style="color: #ff0000; font-size:12px"> это параграф с индивидуальным стилем</p>
В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей.
По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.
Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег <style></style> в котором и происходит описание нужных нам элементов.
Теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа. Мы облегчили себе работу, будь на странице сотня параграфов и несколько заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.
Тег <style> принято внедрять в заголовок HTML документа между тегами <head></head>.
Атрибут тега <style> type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type должно равняться text/css.
Внутри тега <style></style> идет непосредственное объявление стилей тех или иных HTML элементов.
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
Главное достоинство CSS - возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.
Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:
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}
Далее сохраняем этот небольшой файл с расширением *.css (обычно файл со стилями называют style.css).
Нужно заставить страницы нашего сайта черпать информацию с этого файла.
Делается это с помощью тега <link> (связь). Тег <link> многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег <link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как <link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами <head> </head> и не выводится браузерами на экран.
Тег <link> имеет атрибуты:
href - Путь к файлу. rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
shortcut icon - Определяет, что подключаемый файл является иконкой.
stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
application/rss+xml - Файл в формате XML для описания ленты новостей.
type - MIME тип данных подключаемого файла.
Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"
Теперь вставляем эту строчку в заголовки страниц нашего сайта и получаем результат.
Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
Используйте тег <style> со стилевым описанием, в том случае, если страница должна иметь индивидуальный дизайн в корни отличный от других страниц сайта.
В большинстве случаев разумно выносить каскадную таблицу стилей в отдельный css файл.
В CSS свойство text-align выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.
text-align (так же как и htmlловский атрибут align) имеет следующие значения:
left - Выровнять текст по левому краю элемента (по умолчанию).
right - Выровнять текст по правому краю.
center - Выровнять текст по центру.
justify - Выровнять текст по обоим краям.
Чтобы выровнять текст параграфа по центру следует писать так:
<p style="text-align: center">текст по центру </p>
- это в этом случае если с помощью атрибута style, внедряем CSS непосредственно в HTML тег.
А вот в примере ниже используется тег <style> в заголовке документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Выравнивание текста</title> <style type="text/css"> h1 { text-align: center } p { text-align: justify } </style> </head> <body> <h1>Всё о слонах</h1> <p>Слон - самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p> <p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон - "животное, которое превосходит всех других в остроумии и интеллекте".</p> </body> </html>
Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста:
blink - Текст будет мигать.
line-through - Делает текст перечеркнутым.
overline - Надчёркивание текста.
underline - Подчеркивание текста.
none - Текст без оформления.
Пишется так:
<a href="index.html" style="text-decoration:none">Ссылка без подчёркивания</a>
Обратите внимание на внешний файл CSS в нем мы "декорировали" ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}
Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться "живым".
Свойство text-indent - задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает "красную строку".
Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.
Свойство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.
Значения:
none - Текст отображается без каких-либо изменений.(по умолчанию)
capitalize - Каждое слово в тексте отображается с заглавного символа.
lowercase - Все символы преобразуются в нижний регистр.
uppercase - Все символы преобразуются в верхний регистр.
Вертикальное выравнивание текста в строке устанавливает свойство vertical-align
Возможные значения свойства vertical-align:
baseline - Выравнивает базовую линию элемента по базовой линии родителя.
bottom - Выравнивает элемент по нижней части строки.
middle - Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
sub - Нижний индекс (размер шрифта не меняется).
super - Верхний индекс (размер шрифта не меняется).
text-bottom - Нижняя граница элемента выравнивается по нижнему краю строки.
text-top - Верхняя граница элемента выравнивается по верхнему краю строки.
top - Выравнивает элемент по верхней части строки.
Базовая линия - это линия, на которой располагаются "сидят" символы в текстовой строке,
Так же вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения.
Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами.
Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.
Может иметь следующие значения:
normal - текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
nowrap - запрещает автоматический перенос строки.
pre - показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.
При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>
Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке:
normal - Нормальное расстояние. (по умолчанию)
px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:
normal - Нормальное расстояние. (по умолчанию)
px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Интерлиньяж - это расстояние между строками текста.
Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:
normal - Норма (по умолчанию).
% - Проценты. за сто процентов берется высота шрифта
0.5 - Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 - двойному.
px - Пиксели и любые другие единицы измерения, принятые в CSS.
Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.
Шрифт может иметь следующие стили:
normal - обычный (по умолчанию)
italic - курсив
oblique - наклонный
Курсив - это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст - это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.
Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными:
normal - нормальный (по умолчанию)
small-caps - все буквы заглавные и уменьшенные
Свойство CSS font-size - определяет размер шрифта.
Размер шрифта может быть задан в процентах или пикселях и любых других допустимых единицах измерения CSS, а так же абсолютным или относительным значением.
значения абсолютного размера шрифта:
xx-small - очень очень маленький
x-small - очень маленький
small - маленький
medium - средний
large - большой
x-large - очень большой
xx-large - очень очень большой
значения относительного размера шрифта:
larger - больше чем размер шрифта родительского элемента
smaller - меньше чем размер шрифта родительского элемента
Свойство font-weight - определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:
normal - обычный шрифт
bold - полужирный шрифт
bolder - жирный шрифт
lighter - тонкий шрифт
А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300... 900) где значение 100 тонкий шрифт, а 900 - сверх жирный.
Атрибут CSS font-family - указывает одно, два или три имени шрифта из библиотеки шрифтов.
Возможность указывать до трёх имен шрифтов через запятую используется разработчиками во избежание возможных проблем связанных с отсутствием, по тем или иным причинам, указанных имен в библиотеке шрифтов на компьютере пользователя.
Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} - будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.
Если же браузер не найдёт в библиотеке шрифтов пользователя ни одного шрифта из указанных то он будет использовать тот шрифт который указан в его настройках "по умолчанию"
Однако также можно указать браузеру не только какой то конкретный шрифт, но и обозначить предпочтительное семейство шрифтов из перечисленных ниже возможных
serif - шрифты с засечками
sans-serif - рубленые шрифты
cursive - курсивные шрифты
fantasy - декоративные шрифты
monospace - моношириные шрифты
Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif - рубленых шрифтов.
Все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font-family, font-size и т.д..
Все эти свойства являются "дочерними" базового атрибута CSS font.
font - (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:
font-style
font-variant
font-weight
font-size
font-family
Для более детального ознакомления с возможными параметрами смотрите каждый атрибут отдельно.
Предположим нам необходимо написать стилевое описание шрифта для тега <span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial
Все это можно осуществить, написав следующие:
span{ font-style: italic; font-weight: bolder; font-size: 20px; font-family: Arial }
А можно обойтись всего одной строчкой используя базовый атрибут font.
Вот так:
span{font: italic bold 20px Arial}
Мы просто перечислили нужные нам параметры "марки" font. Так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.
Цвет в CSS может быть задан следующими методами:
#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.
Свойство background-color - определяет цвет фона элемента.
Цвет фона может иметь следующие значения:
#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.
transparent - прозрачный фон. (по умолчанию)
Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image.
Возможные значения background-image:
url - путь к файлу с изображением.
none - изображение отсутствует. (по умолчанию)
Если рисунок не заполняет собой весь фон элемента, то он выкладывается "плиткой". Свойство background-repeat - регулирует повторение фонового изображения.
Возможные значения:
no-repeat - запретить повторение, показать только одно изображение.
repeat - повторять изображение (по умолчанию).
repeat-x - повторять только по горизонтали.
repeat-y - повторять только по вертикали.
При помощи CSS свойства background-position - можно управлять позицией фонового изображения в элементах где оно задано с помощью background-image.
Позицию фонового изображения, а точнее его верхнего левого угла, можно задать в процентах, пикселях, а также любых других единицах измерения CSS, с помощью двух значений, где первое значение будет являться отступом от левой границы элемента, а второе значение отступом от верхней границы элемента.
Например, запись: background-position: 200px 100px; будет обозначать, что фоновое изображение будет смещено по горизонтали на 200 пикселей от левой границы элемента и по вертикали на 100 пикселей от верхней границы элемента.
Так же можно использовать следующие значения:
по горизонтали:
left - расположить слева.
center - расположить по центру.
right - расположить справа.
по вертикали:
top - расположить сверху.
center - расположить по центру.
bottom - расположить снизу.
Являясь базовым свойством, background может одновременно принимать те или иные значения от его дочерних свойств:
background-attachment
background-color
background-image
background-position
background-repeat
Нужные значения дочерних свойств указываются через пробел, в любом порядке и по мере необходимости.
Как присвоить элементу или группе идентичных элементов индивидуальный стиль, отличный от основного, уже указанного в стилевом описании документа
Предположим в файле CSS к элементу <p> у нас применён следующий стиль:
p {color: #0000ff; font-size:14px}
Все параграфы синие и размер у них 14px, но нам надо сделать так чтобы некоторые из этих параграфов были розовые! И как быть??
На помощь приходят классы.
Для того чтобы выделить некоторые из параграфов розовым цветом, необходимо присвоить элементу определённое имя и вывести его тем самым в класс, в некую нестандартную, для страницы или сайта в целом, категорию.
Делается это так:
p.rose {color: #ff00ff; font: italic 16px Arial}
p - это элемент HTML (селектор) в данном случае наш параграф, .rose - это индивидуальное имя класса которое мы сами выдумали, оно может быть любым необязательно rose-розовый, точка между селектором и именем класса есть дань уважения к синтаксису принятому в CSS - теперь браузер поймет, что данный элемент p выведен в класс rose.
Ну что ж имя мы присвоили теперь нам необходимо в документе HTML указать теги (в нашем случае теги <p>) которым необходим индивидуальный стиль. Делается это с помощью атрибута class:
<p class="rose">Этот параграф использует имя класса rose и тем самым выделяется из основной массы</p>
Недостающие описания стиля выведенного в отдельный класс, элементы черпают из основного стилевого описания или же берут из свойств элемента "по умолчанию".
Идентификаторы они же id селекторы, весьма схожи с классами, с тем лишь отличием, что идентификатор может иметь одно единственное уникальное имя во всем документе. Идентификаторы, как правило, применяются в том случае, если возникает необходимость управлять стилем элемента динамически с помощью скрипта, обращаясь к его индивидуальному имени.
В файле CSS имя указывается со знаком решётки в его начале.
Например:
#block {color: #ff00ff; font: italic 16px Arial}
А к нужному элементу добавляется атрибут id="block" например
<p id="block">Параграф с идентификатором</p>
Для начала разберемся с самим понятием позиционирование. Позиционированием называют определение конкретного месторасположения на странице того или иного элемента (бокса). Позиционирование бывает абсолютным, относительным, фиксированным и статическим.
пример.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Позиционирование.</title> </head> <body> <div style="float: left; background: #c00; border-style: double; padding: 5px; height: 1500px; width: 300px"> <div style="position: relative; left: 10px; top: 50px; background: #c0c; border-style: double; padding: 5px; width: 200px">Блок позиционирован относительно крёв элемента родителя.</div> </div> <div style="position: absolute; left:200px; top: 350px; background: #cc0; border-style: double; padding: 5px; width: 200px">Блок абсолютно позицонорован и выведен из общего потока, его положение задаётся от краёв окна браузера. Как видите данный блок может накладываться на другие элементы страницы.</div> <div style="position: fixed; left: 150px; top: 150px; background: #0cc; border-style: double; padding: 5px; width: 200px">А это фиксированный блок, тоже выведен из общего потока однако при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.</div> </body> </html>
Итак, для того, что бы позиционировать какой либо элемент к нему применяют свойство position и одно из его возможных значений:
absolute - Абсолютное позиционирование элемента.
relative - Относительное позиционирование элемента.
fixed - Фиксированное позиционирование элемента.
static - Статическое позиционирование элемента. (Элемент отображаются как обычно.)
inherit - Наследует значение элемента родителя.
Абсолютно позиционированный элемент (position: absolute) выводится из общего потока и несмотря на другие элементы и их взаимное расположение, занимает указанное место на странице от края/краёв окна браузера. При таком способе позиционирования один элемент может накладываться поверх другого.
Для того чтобы позиционировать элемент от края/краёв окна браузера, нам понадобятся следующие свойства CSS:
bottom - Расстояние от нижнего края окна браузера.
left - Расстояние от левого края окна браузера.
right - Расстояние от правого края окна браузера.
top - Расстояние от верхнего края окна браузера.
Данные расстояния могут быть заданы в пикселях, процентах или любых других принятых единицах измерения CSS, значение по умолчанию - auto.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Абсолютное позиционирование.</title> </head> <body> <div style="background: #0f0; border: #000000 2px solid; padding: 5px; margin: 10px; width: 300px; height: 200px;"><h1>Блок №1</h1></div> <div style="background: #00f; border: #000000 2px solid; padding: 5px; margin: 10px; width: 500px; height: 100px;"><h1>Блок №2</h1></div> <div style="position: absolute; left:200px; top: 100px; background: #f00; border: #000 2px solid; padding: 5px; width: 200px; height: 200px;"><h1>Блок №3</h1> Данный блок абсолютно позиционирован! <br><br> Блоки 1 и 2 никак не влияют на его месторасположение.</div> </body> </html>
Как видите, в примере третий блок вышел из общего потока элементов и живёт по своим собственным правилам, остальная разметка страницы никак не влияет на месторасположение данного блока.
Относительное позиционирование (position: relative) определяет место элемента относительно краёв элемента родителя и не выводится из общего потока.
Так же как и в случае с абсолютным позиционированием расстояния от края/краёв родительского элемента задаётся с помощью свойств: bottom, left, right, top.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Относительное позиционирование.</title> <style type="text/css"> h1 { color: #008000; font-size:20px } div.blok1 { background: #c0e4ff; border: #000000 2px solid; padding: 5px; width: 500px; height: 400px; } div.blok2 { position: relative; left: 150px; background: #ffa0c5; border: #000 2px solid; padding: 5px; width: 250px; height: 200px; } </style> </head> <body> <div class="blok1"> <h1>Элемент родитель - блок №1</h1> <div class="blok2"> <h1>Блок №2</h1> Данный блок позиционирован относительно левого края элемента родителя. </div> </div> </body> </html>
В случае если элемент родитель явно не задан, то отчет ведётся от края/краёв окна браузера.
Фиксированное позиционирование (position: fixed) похоже на абсолютное, элемент выводится из общего потока, его координаты рассчитываются от краёв окна браузера, но при прокрутке страницы элемент не меняет своего положения.
Пример:
Файл style.css h1 { color: #800; text-align: center; font-size:30px } h2 { color: #088; text-align: center; font-size:18px } div.blok1 { background-image: url(fon.gif); border: #000 2px solid; padding: 5px; width: 800px; height: 4000px } div.blok2 { position: fixed; left: 250px; top: 300px; border: #080 6px double; padding: 5px; width: 300px }
Файл index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Фиксированное позиционирование.</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="blok1"> <h1>Какая то страничка</h1> </div> <div class="blok2"> <h2>Фиксированный блок с навязчивой рекламой</h2> <h1>Купи слона!!</h1> Фиксированный блок, выведен из общего потока элементов, при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство. </div> </body> </html>
Псевдоклассы - это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.
Вот список всех псевдоклассов:
hover - Стиль элемента на который наведён курсор мыши.
active - Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
visited - Стиль для недавно посещённой ссылки.
link - Стиль для нечасто посещаемой ссылки.
focus - Стиль элемента находящегося в фокусе.
first-child - Стиль первого дочернего элемента.
lang - Определяет язык, который используется в фрагменте документа.
О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.
Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:
a:hover { color:#ff0000} где: a - элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка. :hover - после двоеточия собственно нужный нам псевдокласс. {color:#ff0000} - ну и блок объявления стилей в фигурных скобках.
А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку - то она покраснеет.
Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.
Псевдокласс hover.
Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.
В качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:
.menu:hover { color:#ff0000;}
Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу <tr>. Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок - тег <a>, так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!
Рассмотрим сразу три псевдокласса созданных для работы со ссылками.
active - Стиль активной ссылки.
visited - Стиль для недавно посещённой ссылки.
link - Стиль для нечасто посещаемой ссылки.
Псевдокласс active присваивает ссылке определённый стиль в тот момент, когда эта ссылка активна, то есть в тот момент, когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Короче active - это стиль ссылки в момент клика по ней.
Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visited указывает стиль ссылки, которая недавно посещалась пользователем.
Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a {...} и a:link {...} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.
Все три вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу - работать будет везде, кроме браузера Internet Explorer 6 и ниже.
Псевдокласс focus определяет стиль элемента, если тот находится в фокусе. Теперь собственно о том, что такое фокус?.. как в случае с оптикой и иллюзией, слово фокус в CSS обозначат, что некий объект, а точнее элемент, находится в центре внимания наблюдателя - пользователя. Такими элементами могут быть теги <a> <input> <select> и <textarea>.