Как можно добавить отступ между элементами списка? html css 3 страница

Что есть такое блочная верстка и с чем ее едят? Ранее сайты верстали при помощи таблиц. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки кучно роились в других, более крупных ячейках, те в свою очередь лежали в главной ячейке, сиречь самой странице сайта. Табличная верстка сейчас уже морально устарела, хотя очень многие вебмастера продолжают ее использовать. Большим минусом ее является тяжеловесный код. Ведь каждую мало-мальскую ячейку нужно обозначить определенными тэгами. Поэтому более не станем говорить за таблицы, а таки плавно перейдем к блочной верстке. Для начала немного теории. Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п. Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная). Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был “впритык” к стенкам блока. Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга. Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как “ обтекание ” (float). Но об этом чуть позже. Тэг — это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру тэг абзаца: <p>Текст абзаца.</p> всегда обозначается буквой “p” и никак иначе. Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен “слэш” — косая черта, наклоненная вправо. Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так: <img src="images/risunok.jpg" mce_src="images/risunok.jpg" alt="" /> Тэг div В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому (”р” — к абзацам, “а” — к ссылкам, “img” — к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: “ шапка ” (header), блок навигации, блок основного содержимого, “ футер ” (footer) или подвал по-нашему. У данного тэга, как и у любого другого, имеются свои собственные атрибуты. Атрибут — описательная характеристика тэга. То есть что он может делать и каким образом. Например, опять же возьмём тэг изображения: <img src="images/risunok.jpg" mce_src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок меня, где я кормлю собаку, а она кусает меня зачем-то" /> В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images, шириной 200 пикселей, высотой 50 пикселей. И + альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам. Если же их нет смысла подписывать (например маркер списка или стрелка какая), то у атрибута alt оставляют пустое место — alt=”". Итак, атибуты тэга div. Их есть всего два: id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “ header ” (про кавычки не забываем), или “ footer “. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением “ header ” (шапка) одни настройки, а для подвала “ footer ” совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к “ шапке ” и будет набран крупным и красным шрифтом, а вот этот к “ подвалу ” и будет мелким и серым. И никакой путаницы! class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использова
Блочная вёрстка - 2

Для написания кода удобнее пользоваться редактором PSPad. Это весьма удобная программа, которой пользуются как программисты, так и верстальщики. Рекомендую. Тем более что она бесплатная и имеет русский интерфейс. Верстать мы будем вот такой вот симпатишный сайт о Летающих Парасенгах. Настоящий сайт Pigfly.ru - Об удаче, Счастье и Богатстве выглядит уже несколько по-иному. Мы рассмотрим лишь отвлеченный пример. Для начала определим тип нашего документа. Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он не для форсу бандитского, а для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания доктипа. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html> просто не будет прочитана, потому как стандарты становятся жесче. Мы определим нашу страничку в соответствии с самым крутым и строгим на данный момент доктипом под названием Strict 1.0. Выглядит сей крендель так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Прошу обратить внимание: как я уже говорил, требования здесь весьма строгие — все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам доктип тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам сих строгих правил. Но это единственный случай, где правило не работает. Далее мы впишем ещё одну хитрую строку: <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> Ну, раз тут появилось слово lang и ru, то и ежу понятно, что это указание на езыг документа. Не путать с кодировкой! Её мы укажем позднее. В этой же строке, в общем-то, и начинается уже код самой страницы с тэга <html> Следующий тэг <head>. В нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта инфа записана в служебных тэгах meta, которые также не отображаются на странице в браузере. Мы запишем на нашей страничке следующую информацию: <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." /> <meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." /> <link rel="stylesheet" href="style.css" type="text/css" /> Поясним: Первый мета-тэг показывает на кодировку сайта. В рунете желательно пользовать все-таки виндовз-1251, чтобы случайно у Васи Пяткина в его IE версии 3.0 не повылезали вместо красивого и грамотного текста всякие кракозябры. Второй мета-тэг — это краткое описание сайта. Именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут. В третьем мета-тэге ключевые слова для поисковиков. Объяснять не буду зачем это нужно, думаю и так ясно. И наконец последняя строка — это не что иное как ссылка на наш лист стилей CSS, который мы создадим чуть позже. Про него скажу лишь вот что: по умолчанию наш лист стилей могут использовать любые устройства вывода инфы будь то экран монитора, принтер, либо телетайп какой-нить шпиёнский. Но если мы хотим указать для какого устройства конкретно предназначена страница, то после атрибута type со значением text/сss должны будем указать дополнительный атрибут media со значениями: print — для принтера hendheld — для “наладонника” screen — для монитора only и т.д. 1. Это понятно — если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки. Только полезная инфа. И вот для такого случая пишется отдельный лист стилей, попроще. Следующим парным тегом будет титл — это тот текст, который появляется на самом верху браузера при открытии странички: <title>Пиггасы \| Главная</title> Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая, а настоящее, хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст. А теперь впишем закрывающий тэг </head>. Все, со служебной инфой покончено. Обратите внимание — тэги как бы вложены друг в друга: <head><title></title></head> Это правило вложения должно выполняться всегда! Никаких перестановок типа: <head><title></head></title> - НЕПРАВИЛЬНО! Вот мы и добрались до тЕльца нашей странички, которое и обзывается соответствующим тэгом <body>. Пока давайте допишем код страницы до конца (он ещё будет впоследствии дополнен): <body> </body> </html> Сохраним документ в отдельной папке. Сохраняем как index.html. Почему именно index? Любой браузер, зайдя по адресу www.piggs.ru станет сразу искать страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, стартовой. В следующем уроке займемся написанием листа стилей CSS для нашего сайта.
Блочная вёрстка - 3

Итак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в PSPad (Блокноте, WordPad-е и т.п.) и вписываем следующую строку: /© PIG.RU, 2007 \| [email protected] / На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* / (кстати, слэш на клавиатуре находится во второй снизу строке в английской раскладке, а не вверху справа в русской. Не перепутайте, это разные знаки!) Строка комментария не читается браузерами. Она нужна только для служебной информации. Кодеры обычно вписывают туда свои пометки, дабы самому не запутаться в коде, когда его много. В самом верхнем комменте (как у нас) пишутся ссылки на сайт кодера или дизайнера, его мыло, авторские права и т.п. Мы ограничимся только копирайтом и мылом. Ну а теперь непосредственно код! В листе стилей код называют правилами. Каждое правило состоит из селектора (читай - атрибута) и объявления. Объявление, в свою очередь, состоит из свойства и значения. Рассмотрим пример: p {color: #000;} Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь “р” — это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Словоcolor является Свойством объявления, а “решётка* ” с тремя нулями — Значением. В данном случае значение записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Почему всего три нуля, ведь в данном обозначении должно быть шесть цифр (или букв)? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо - 000. Все браузеры это понимают правильно. Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет. Важно только не забывать две вещи: 1. После каждого Свойства необходимо ставить двоеточие. 2. После каждого Значения — точку с запятой. Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок. Сначала зададим общие правила для страницы: * { margin: 0; padding: 0; border: 0; } body { padding: 2% 0 0; background: #fff; color: #333; font-family: “Comic Sans MS”, Verdana, Arial, Helvetica, sans-serif; } #container { width: 760px; margin: 0 auto; } Поясним: 1. В первом правиле звёздочка означает не что иное как всю страницу разом. Сама звёздочка — это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно: Отступы - 0, Поля - 0, Рамка - 0. Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно. Значения указываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать. 2. Следующим правилом мы задали для тела страницы следующие указания: поля - сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой. Вообще у нас 4 стороны. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Но так как у нас по бокам одинаково, то и значений мы дали всего три. Ещё раз: а) 5px 10px 15px 20px; - сверху будет поле в 5 пикселов, справа 10, снизу 15, слева 20. б) 5px 10px 15px; - сверху 5, с боков по 10, снизу 15. в) 5px 10px; - сверху и снизу по 5, с боков по 10. г) 5px; - со всех сторон по 5. Думаю, принцип понятен. Остальное несложно — фон белого цвета, цвет шрифта тёмно-серого (333), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Тут есть одно замечание - если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки. 3. А вот в этом правиле уже что-то новенькое — появилось незнакомое слово container с решёткой. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице. Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Сие и означает, что при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы 760 пикселей. Возникает вопрос: а почему бы у тэга body не указать такую же ширину страницы и авто-выравнивание? Дело в том, что браузеры читают данный тег (body) по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую “коробочку” под нашу страничку. Автор: Игорь Квентор
Блочная вёрстка - 4

Продолжаем разговор за CSS. Вообще принято некое упорядоченное расположение правил в css. Вначале указываются общие для всей страницы, а потом идут в той очерёдности, в которой элементы на странице появляются сверху вниз. Мы пока указали не все общие элементы. Нет заголовков, списка, ссылок (тэги h, ul, a). Их мы добавим позже, а пока начнём уже хоть что-нить прицеплять весомое к странице. Из нашего макета я вырезал целиком шапку (её мы используем не как картинку, а как фон), оба рисунка с поросями, рисунки вензеля, зелёной линии внизу, фон полосы навигации (не весь, а только отрезанный кусочек 8х35 пикселов) и зеленой галки у списка новостей. Итого у нас вышло 7 изображений. Их поместим в той же папке, где у нас лежит сама страничка и лист стилей. Далее в листе стилей пишем правило для “шапки” (header): #header { background-image: url(header.jpg); width: 760px; height: 158px; } Здесь мы указали, что вся наша шапка залита фоном-картинкой с размерами 760х158 пикселей (такая у меня вышла при разрезании макета). url(header.jpg) - это ссылка на картинку. Важный момент(!) — почему ссылка выглядит как простое имя с расширением для картинки? Да потому, что сама картинка лежит в той же самой папке, где и лист стилей. Это так называемая относительная ссылка. Если бы была абсолютной, то начиналась бы с http:// А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение.css - style.css Теперь мы снова откроем нашу Главную страницу. Между тегами body добавляем следующий код: <div id="container"> <div id="header"> </div> </div> Сохраняемся. Открываем нашу страничку браузером и любуемся на ровно посерёдке отцентрованную шапку. Что мы сделали? Мы добавили в тело страницы нашу “коробочку” - контейнер, а уже в него положили шапку. То есть вложенность тэгов налицо. div id — это и есть тэг с индивидуальным атрибутом, который стоит после знака равенства и должен быть обязательно заключен в кавычки. Полюбовались? Теперь продолжим писать код для листа стилей. Открываем его и следом за правилом для шапки запишем правило для блока навигации: #nav { background: url(nav_bg.jpg) repeat-x; color: #f00; font-size: 120%; font-weight: bold; line-height: 1.8em; text-align: center; } #nav ul { list-style-type: none; } #nav li { display: inline; margin: 0 8px; } #nav li a { color: #0c0; } #nav li a:hover { color: #f00; } Уже немного сложнее, не правда ли? Разберём по косточкам. Панель навигации будет у нас одна — сразу под шапкой, горизонтальная. (в подвале сделаем дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список. Для тех, кто не в танке объясняю: маркированный список — это список из нескольких пунктов, записанных в столбик, у которых слева взаместо порядковых чисел стоят маркеры (кружки, квадратики, и пр.) Список сей в HTML обозначается тэгом ul. Элементы списка (а попросту говоря - строчки) обозначаются тэгом li. Выглядит это примерно так: <ul> <li>Утром надел трусы.</li> <li>Не забыл про часы.</li> <li>Снова не забыл.</li> </ul> Как видим, тэги имеют парные закрывающие тэги, и тэг li вложен в тэг ul. Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav_bg.jpg размером 8х35 пикселей. Это обычный такой “столбик” с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает “повторить по оси х”, то есть по горизонтали. Далее указали цвет шрифта ярко-красного цвета #f00 для активного раздела. Он у нас не будет ссылкой, а останется простым текстом (делать на Главной странице ссылку на самое себя — тавтология). Остальное в этом правиле несложно: размер шрифта, толщина, высота по вертикали (тут появилась новая единица измерения em, которая равна высоте прописной буквы выбранного шрифта. Значение 1.8em показывает, что шрифт увеличен на 1.8 высоты стандартной буквы), ну и выравнивание текста по центру. Следующее правило указывает, что у нашего списка не должно быть никаких маркеров. Это задаётся значением none. Далее указываем для строк списка расположение по горизонтали, то есть в линию, чтобы не получился обыкновенный столбец. И отступы: сверху и снизу по нулям, с боков по 8 пикселей. А теперь укажем, каким образом наши менюшки будут раегировать на наведение мышкой на них. Понятное дело, что менюшки — это ссылки на другие разделы нашего сайта. А каким тэгом означаются ссылки? Пральна, тэгом a. Поэтому пропишем ещё пару правил для этих ссылок. В первом мы обозначили цвет ссылки в спокойном состояни, а во втором — в активном, то есть при наведении мыши. Ну а теперь следом добавим вот такое правило: a { text-decoration: none; } Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание. Ну согласитесь, в меню навигации это не всегда выглядит красиво. А там где нужно, мы это правило изменим.
Блочная вёрстка - 5

Итак, продолжим верстать нашу Главную страницу. В этом уроке буде мнооого кода. Что у нас уже есть? Контейнер, в котором лежит шапка. Следом за шапкой добавим блок навигации. Находим в коде следующее место: <div id="header"> </div> и сразу же за ним запишем следующее: <div id="nav"> <ul> <li>Главная</li> <li><a href="#">О нас</a></li> <li><a href="#">О летучести</a></li> <li><a href="#">О везучести</a></li> <li><a href="#">Свинки-герои</a></li> <li><a href="#">Подружиццо</a></li> </ul> </div> Как видим — всё просто: наши разделы оформлены как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы просто вставили решётку (#), которая всегда возвращает нас на текущую страницу. Теперь настала пора сказать пару слов о каскадности стиля. В правилах для блока навигации мы вначале указали настройки для всего блока, затем для маркированного списка, обозначенного тэгом ul, далее показали правила для строк li… Каждое последующее правило получает “в наследство” характеристики предыдущего: от nav к ul, от ul к li. Все вместе они являются вложенными в тэг контейнера и получают от него часть правил (в частности центрирование посередине экрана и заданную ширину в 760 пикселей. Это и является своеобразным каскадом. А теперь сохраняем нашу страничку. И идём скорее смотреть в браузере что получилось. Пора уже, наконец, наполнить нашу страницу чем-нить полезным, то есть Контентом (”…как много в этом слове…”). На макете во втором уроке видно, что полезная площадь страницы разделена на две функциональные области: 1. Основной текст (с картинками и пр.) 2. Блок новостей. Обычно, такую вёрстку называют двухколоночной. Как сделать так, чтобы текст остался слева, а новости справа я расскажу чуть позднее, когда мы займёмся листом стилей. А пока давайте запишем на страничке сразу после этого места: ......... <li><a href="#">Свинки-герои</a></li> <li><a href="#">Подружиццо</a></li> </ul> </div> Следующий код: <div id="text"> <img class="img1" src="pig1.jpg" alt="Летящий свин" /> <p>Летать всегда! Летать везде! Летать много, очень-очень много и всегда с улыбкой на морде лица — вот наше кредо!</p> <p>Все пиггасы рано или поздно приходят к осмыслению никчемной жизни в грязной луже и подаются в лёччики-пилоты. Причём для летания вовсе не нужна никакая посторонняя техника. Только сильное и несокрушимое желание, а также упорство, спортивная злость и немного вредности. Оно того стоит! Уж поверьте.</p> <p>Всего лишь после недели тренировок на брезентовом батуте и трёх зачотных прыжков с крыши сарая, адепт получает звание летуна-прыгуна. При этом заработанные синяки, ссадины и шишки также засчитываются в +</p> <img class="venzel" src="venzel.gif" alt="" /> <img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" /> </div> Впечатав приведённый выше код и сохранившись, откроем страницу в браузере и посмотрим, что получилось. Пока что фигня получилась. Текст появился, но всё наперекосяк. Это мы поправим в листе стилей, а пока давайте немного разберём, что же это мы намудрили. Тэг div с атрибутом text — это и есть область полезного содержимого странички, иначе называемое контентом. Как и в любом тексте тут мы видим абзацы, обрамленные тэгами р, а также несколько изображений (тэги img). С тэгами абзаца всё понятно: открылся один, за ним кусок текста, закрылся; открылся следующий, за ним опять кусок текста, закрылся, и т.д. А вот у тэгов изображений появилось нечто новое — это слово class. Если кто помнит, то оно означает многоразовость использования данного атрибута (в противовес индивидуальному id). Кроме того, class можно использовать и вовсе без тэга div! Что мы и сделали. У тэгов изображения мы просто вписали это слово сразу же за самим тэгом.

⇐ Предыдущая 16 17 18 19 202122 23 Следующая ⇒

Поделиться с друзьями:

Дата добавления: 2015-06-27; Просмотров: 748; Нарушение авторских прав?; Мы поможем в написании вашей работы!

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление

Генерация страницы за: 0.012 сек.