s~4 ut perspicialis IIIXk ocnois iste oatus еn'<Ж sit voluptatem accusantium doloremque laudamium,
totam rem apetiam, ~ iря quae аЬ iDo ir!ventore ...- mtans et quasi architecto beatae vitae diaa
sunt ~-Nemo eпim ipsam voluptatem quia voluptas sit aspernarur aut odit aut fugit. s~ quia
conseqwo!Ur magDi dolores eos qu; ratione voluptattm sequi aesciuot. Neque porro quisquam est,
qui dolortm ipsum quia dolor sit amet, consectetur, adipisd velit, s~ quia ооо aumquam eius modi
tempora..jocidua ut laЬore et dolore maвaam aJiquam quaerat voluptatem.
Lorem lpsum Dolor Sat
s~ ut perspiciatis IIIXk omois ist~ aal1ls еn'(Ж sit voluptatem acc:usaatiuln dolortmque laudaalium,
totam rem ~ eaque ipSA quae аЬ iDo iьvel:store veritalis et quasi architecto ~atae vitae dicta
sunt ехрiсаЬо. Nemo eaim ipsam Yoluptattm quia voluptas sit aspernarur aut odit aut fugit. ~ quia
c:oasequuntur magDi dolores eos qu; ratione voluptatem sequi nescU!t Neque porro quisquam est.
Р1к. 2.3. CSS легко и творчески справлАетсА с форматированием текста, поэвол1111 иэмен11ть
начертание, раэмер, цвет шрифтов текста и даже добавляя декоративные рамки
и подчеркивание
Все то, чем вы занимались в обучающем уроке, можно назвать ~css в двух
словах•: начать с НТМL-страницы, добавить таблицу стилей, создать прочие СSS~
тили, чтобы заставить страницу прилично вы"Jiядеть. В следующей части этой
обучающей программы вы увидите, как можно более эффективно работать, исполь-
зуя внешние таблицы стилей. -
Соэдание внеwней та6лиць1 сrилей
Поскольку во внутренних таблицах стилей все стили сгрупnированы в начале вебстраницы,
создавать и редактировать их намного проще и удобнее, че~ встроенные
58 Глава 2. Соэдание сrилей и таблиц сrилей
стили, с которыми вы имели дело до этого. Кроме того, внутренние таблицы стилей
позволяют форматировать любое количество экземпляров тегов неб-страницы одновременпо
(как в примере с тегом <hl>), создав один простой стиль (правило).
Внешние таблицы стилей не только наследуют преимущества внутренних таблиц,
но и имеют дополнительные плюсы: в них можно хранить все стили для всех страниц
сайта. Редактирование одного стиля во внешней таблице обновляет стиль целого
сайта. В этом разделе вы возьмете стили, созданные в предыдущем уроке,
и поместите их во внешнюю таблицу стилей.
1. В своей программе редактирования создайте новый файл и сохраните его под
именем ma i n. css в той же самой папке, где находится неб-страница, над которой
вы сейчас работаете.
Файлы внешних таблиц стилей должны заканчиваться расширением CSS. Имя
файла ma i n. cs s указывает на то, что стили, содержащиеся в файле, используются
глобально для всего сайта (вы, конечно, можете использовать любое понравившееся
имя файJlа).
Приступим к добавлению нового стиля к таблице стилей.
2. Наберите следующий код определения стиля в файле ma i n. css:
body {
background-color: #CDEбFF:
background-image: url(images/bg_body.png):
background-repeat: repeat-x:
padding-top: lOOpx:
Этот стиль относится к тегу содержимого неб-страницы ( <body> ), который включает
в себя всю информацию, видимую в окне браузера. В данном случае стиль
добавляет на страницу фоновое изображение. В отличие от подобного свойства
HTML, свойство установки фонового изображения CSS (background-image) может
отображать графические элементы многими способами. В данном случае
изображение размножено в горизонтальном направлении, начиная от верхнего
края страницы. О свойствах фоновых изображений читайте в разд. 4Фоновые
изображения!> гл. 8.
Этот стиль также добавляет цвет фона страницы и отодвигает ее содержимое
вниз на 100 пиксело в от верхнего края окна браузера. Когда вы просматриваете
страницу, вы видите, что это дополнительное пространство отодвигает заголовок
от фонового рисунка.
3. Вместо повторного набора стилей, созданных в предыдущем уроке, просто скопируем
стили, определенные во внутренней таблице стилей, и вставим их в эту
внешнюю таблицу стилей. Откройте страницу basic. html, над которой работали,
и скопируйте весь текст, содержащийся внутри тегов <s ty 1 е> (не копируйте
сами теги <style>).
Скопируйте стилевую информацию тем же самым способом, которым скопировали
бы любой текст. Например, с помощью меню Edit ~Сору (Правка ~ Копировать)
или нажатием сочетания клавиш Ctri+C.
Обучающий урок: соэдание первых стилей 59
4. В файл ma i n. cs s вставьте этот код стилей либо посредством меню Edit ~ Paste
(Правка ~Вставить), либо с помощью сочетания клавиш Ctri+V.
Внешняя таблица стилей никогда не должна содержать НТМL-код, именно
поэтому вы и не копировали теги <style>.
5. Сохраните файл main .css.
Теперь нужно очистить старый НТМL-файл от СSS-кода и связать новую таблицу
стилей с этим файлом.
6. Вернитесь к файлу bas i с . htm l в своем текстовом редакторе и удалите теги <sty l е>
и все СSS-стили, определенные в этом файле ранее.
Вам больше не нужны эти стили внутренней таблицы, поскольку они перенесены
во внешнюю таблицу стилей, которую сейчас нужно присоединить
к НТМL-файлу.
7. В том месте НТМL-файла, где находилась встроенная таблица стилей (между
закрывающим тегом </t i t l е> и закрывающим тегом <head> ), введите следующее:
<link href="main.CSS" rel="stylesheet" type="textlcss" />
Тег <l i nk> -один из способов присоединить внешнюю таблицу стилей к веб-странице;
другой вариант- использование CSS-пpaвилa@import, описанного в предыдущем
разделе. Тег <l i nk> определяет местонахождение внешней таблицы
стилей (о его атрибутах - re l и type - также читайте в предыдущем разделе).
ПРИМЕЧАНИЕ-----------------------------------------------В
данном примере файл внешней таблицы стилей расположен в той же самой папке, что и веб-страница,
так что исnользование имени файла в качестве значения href nредполагает простой путь относительно
документа. д если бы он находился в любой другой папке, путь был бы немного более
сложным. В таком случае для указания местонахождения файла нужно использовать путь либо относительно
самого документа, то есть веб-страницы, либо относительно корневого каталога сайта.
Применяется такая же методика, как и при указании гиперссылки на другую веб-страницу (информацию
на эту тему смотрите по адресу www.commuпitymx.com/coпteпt/article.cfm?cid=230AD).
8. Сохраните файл и просмотрите его в браузере.
Веб-страница должна выглядеть так, как описано в шаге 9 предыдущего раздела
обучающего урока, но с добавлением синего фона и картинки с травой и цветами
вдоль верхнего края страницы (благодаря СSS-коду, введенному в шаге 2).
СSS-стили в этой внешней таблице стилей -те же самые, что были во внутренней
таблице стилей, только они расположены в другом месте. Чтобы продемонстрировать,
насколько удобнее и лучше вариант хранения СSS-стилей в отдельном
файле внешней таблицы стилей, нужно присоединить созданную внешнюю
таблицу стилей к другой веб-странице.
ПРИМЕЧАНИЕ-----------------------------------------------Если
на получившейся веб-странице отсутствует форматирование (к примеру, заголовок маленький
и никак не выделен), то, вероятно, вы набрали код в шаге б с ошибкой или сохранили файл maiп.css
в папке, отличной от той, в которой находится файл basic.html. В этом случае просто переместите
файл maiп.css в ту же самую папку.
60 Глава 2. Соэдание стилей и таблиц стилей
9. Откройте файл 02\another page. html.
Эта неб-страница содержит те же самые НТМL-элементы: Нl, Н2, Р и др., с которыми
вы уже работали.
10. У становите курсор после закрывающего тега </t i t l е> и нажмите клавишу
Enter.
Сейчас нужно присоединить к этой неб-странице уже созданную внешнюю таблицу
стилей.
11. Наберите тот тег <l ink>, который применялея в седьмом шаге этого примера.
Код неб-страницы должен выглядеть следующим образом (код, который вы
только что набрали, отмечен полужирным шрифтом):
<title>Дpyraя страница</titlе>
<link href="main.CSS" rel="stylesheet" type="text/css" />
</head>
12. Сохраните страницу и просмотрите ее в браузере.
Достаточно всего одной строки кода, добавленной в неб-страницу, чтобы мгновенно
преобразить ее внешний вид. Чтобы по казать, насколько просто обновить
стиль, описанный во внешней таблице стилей, попробуйте отредактировать
один из стилей или добавить другие.
13. Откройте файл main.css и добавьте определение СSS-свойства- font-family:
"Palatino Linotype". Baskerville. serif: -вначалестиляэлементаР.
Код должен выглядеть следующим образом (добавленный код выделен полужирным
шрифтом):
р {
font-family: "Palatino Linotype". Baskerville, serif;
со l or: #616161:
line-height:· 150%:
margin-top: 10рх:
margin-left: 80рх:
}
Напоследок создайте новый стиль для элемента Н2.
14. Установите курсор после заключительной фигурной скобки} стиля элемента Р,
нажмите Enter и добавьте следующий стиль:
h2 {
color: #В1967С:
font-weight: normal:
font-family: "Palatino Linotype". Baskerville. serif:
font-size: 2.2em:
border-bottom: 2рх white solid:
background: url(images/bullet_flower.png) no-repeat:
padding: О О 2рх 80рх:
margin: 0:
Обучающий урок: соэдание первых стилей 61
С большинством этих СSS-свойств вы уже знакомы, однако некоторые из них
новые для вас, например border-bottom, используемое для добавления линии
под заголовком. Свойство background вообще предоставляет возможность для
комбИнирования различных свойств- в данном случае это background-image
и background-repeat- в одно. Не беспокойтесь о назначении этих свойств,
вы изучите их подробнейшим образом в последующих главах. О свойствах
шрифта читайте в гл. 6, о свойствах, устанавливающих отступы и границы,в
гл. 7, а о свойствах, устанавливающих параметры фона,- в гл. 8.
Стили, которые вы создавали до сих пор, работают с основными элементами Нl,
Н2 и Р, изменяя облик каждого их экземпляра. Другими словами, стиль Р, который
вы создали, форматирует каждый абзац на странице. Но если вы хотите
воздействовать на какой-то конкретный абзац, нужно использовать другой вид
стиля.
15. Перейдите к концу стиля Н2, нажмите Enter после закрывающей скобки} и наберите
следующий код:
. i ntro {
color: #6А94СС:
font-family: Arial. Helvetica. sans-serif:
font-size: 1.2em:
margin-left: 0:
margin-bottom: 25рх:
Если вы просмотрите файл basic.html в браузере, то пока не заметите никаких
изменений. Этот тиn стиля, называемый селе'Кторо.м класса, форматирует только
отдельные теги, к которым вы примените класс. Для того чтобы этот новый
стиль работал, придется немного отредактировать НТМL-кQД.
16. Сохраните файл main.css и перейдите к файлу basic.html в своем текстовом
редакторе. Найдите открывающий тег <р>, следующий за тегом <hl>, и добавьте
class="intro". Открывающий тег должен выглядеть следующим образом:
<р class="intro">
Вам не нужно добавлять точку перед словом i ntro, как вы это делали, создавая
стиль в шаге 15 (почему так, вы узнаете в следующей главе). Этот дополнительный
код HTML применяет стиль к первому абзацу (и только к первому).
Повторите этот шаг для файла another _page.html -добавьте class="intro" к первому
тегу <р> на этой странице.
17. Сохраните все файлы и просмотрите страницы basic. html и another _page. htm
в браузере. На рис. 2.4 представлен внешний вид страницы another _page. htm
в окончательном виде.
Обратите внимание, что внешний вид обеих веб-страниц определяется единственным
СSS-файлом с внешней таблицей стилей. Простым редактированием
файла g l оЬа l . css вы можете изменить стиль сразу обеих веб-страниц. Закройте
глаза и представьте, что ваш сайт содержит тысячи страниц. Мощные средства
изменения дизайна, не правда ли?
62 Глава 2. Соэдание стиле .. и таблиц стипей
Окончательную версию этой части обучающего примера вы найдете в папке
02_flnished. '
Sed ut perspiciatls unde omnis iste natus егrог sit voluptatem accusantium doloгemque laudantium,
totam rem aperiam, eaque lpsa quae аЬ lllo lnventore veritatis et quesl architecto ьеаtае vitae dlcta
sunt expflcaЬo. Nemo enlm Jpsam voluptatem qula vo1uptвs sit aвpematur aut odlt aut fuglt, sed quia
consequuntuг magnl dblores еоз qul retlone voluptatem sequi nesclunt. Neque parro quisquam est,
qul dolorem lpsum quia dolor sit amet, consectetuг, adlplscl velit, sed qula non numquam eius modi
temparв Jncldunt ut teЬore at dolore magnam aliquam quaeret voluptatem.
Another Page ...
5ed ut pcnpic:iatit u.ndt orn.nia Ьt.е urш crrot" sit , .. otuptatern ucuaantium ~ laшlantiutn, cown ran apt:riam,
eoquc ipsa q...., .Ь iJ!o ii"Uton: vcriwu с< quui аrdШ.есш ь..~ virac di<D ""'' up1lcaЬo. Nemo cnlm ipam
VQ!uptatcm quia \Юiupw tit aJpernA!Ur aut odit ••• ruc~~ ted qu;. eonsщuuntцr moгni dolores- qlli n.lione
\OOiuplatcm oequi nerciunt. Ncquc porro quloq,uam щ qui dolorcm ipoum qllia dolor til ..-~ ~ adipixi ..JU,
ted qu;. oon numquam dus modi tempora itlddцnt Ui laЬorc « dolore mчnam a1iq1W11 quacn.t \OOhlpwom. Ut enim
ad minima venWn, quil nootrum cxm:italioocm uDam (Orpqris IIUOCipit laЬoriooam, oili ul ol!qWd а еа oonunodi
con.ocqu.arur? Q1W ouшn Yd cum oJJe n:prcЬenderit qlli in еа VQiupwc Yelit ... quam niliil rn<>Шoiae CODIOC!Witut, Yd
iUum qui dolomn cum rup., quo wlupw nuJJa ~
Рк. 2.4. Применение внешних таблиц стилей дает возможность обновления дизайна всех
страниц сайта в один nрием посредством редактирования единстеенного СSS-файла
Полное исключение СSS-кода из НТМL-документа и вынесение его в отдельный
файл позволяет значительно уменьшить размер самих веб-страниц, следовательно,
они будут загружаться намного быстрее.
3 Селекторы: определение
элементов стилизации
Каждый СSS-стиль имеет две основные части: селектор и блок объявления (о нем
говорилось в предыдущей главе), который, в свою очередь, содержит форматирующие
свойства- цвет, размер шрифта текста и т. д. Они относятся лишь к оформлению.
Волшебство CSS заключается как раз в самых первых символах, начинающих
определение любого стиля, - селекторах. ____________Например:
h1 {
font-family: Arial. sans-serif:
color: #CCCCFF:
Здесь первая часть стиля - селектор - определяет элементы, подлежащие форматированию.
В данном случае h 1 означает <<Все заголовки первого уровня (тег <h 1>)
неб-страницы>>.
ПРИМЕЧАНИЕ-----------------------------------------------Как
видно иэ примера, в имена не входят символы < и >,в которые заключены соответствующие
НТМL-теги. Поэтому, например, когда вы пишете стиль для тега <р>, набирайте только название-
р.
Именно селектор контролирует дизайн неб-страницы, определяя элемент, который
вы хотите изменить. Другими словами, именно он используется для форматирования
множества элементов одновременно. Если дать более подробное описание,
то селекторы позволяют выбрать один или несколько схожих элементов для
их последующего изменения с помощью свойств в блоке объявления. Селекторы
CSS - большой потенциал для создания дизайна веб-страниц.
lРИМЕЧАНИЕ-------------------------------------------------Если
вы хотите немного попрактиковаться на примерах, прежде чем изучать теоретический материал
по данной теме селекторов, обратитесь к обучающему уроку этой главы.
Селекторы типов: дизайн страницы
Селекторы типов (иногда называют селекторами тегов) представляют весьма эффективное
средство проектирования дизайна веб-страниц, поскольку определяют
стиль всех экземпляров конкретного НТМL-элемента.
64 Глава 3. Селекторы: оnределение элементов стилизации
С их помощью можно быстро изменять дизайн веб-страницы с небольшими
усИЛиями. Например, если надо отформатировать все абзацы текста, используя
шрифт одного начертания, размера, а также цвета, то вам просто нужно создать
стиль с селектором Р ( применительно к тегу <р> ). Он переопределяет, каким образом
браузер отобразит отдельно взятый тег (в данном случае <р> ).
Еще до появления CSS, чтобы отформатировать текст, вам пришлось бы заключить
его по всем абзацам ·в тег <font> многократно. Этот процесс занял бы много
времени, не говоря о том, что код НТМL-страниц при этом увеличится в объеме до
неимоверных размеров, страницы будут загружаться медленнее, их обновление
будет занимать много времени. С селекторами типов вам фактически ничего не
нужно делать с НТМL-кодом, просто создайте СSS-стили и позвольте браузеру
сделать все остальное.
Селекторы исключительно просто определить ________________в СSS-стилях, так как они наследуют
название форматируемых элементов - Р, Нl, TABLE,. IМG и т. д. Например, страница,
представленная на рис. 3.1, имеет три тега <h2> (помечены на левой границе
окна браузера) . Единственный СSS-стиль с селектором h2, приведеиным ниже,
определяет представление каждого заголовка второго уровня страницы.
h2 {
font-family:"Century Gothic". "Gill Sans". sans-serif:
color:#OOOOOO:
margin-bottom:O:
Г"~···~··~··~·~=,~~~.·~··~·i;~~·~~~=·······~1
Ф-How to Move Sod Up 10 Stories Without
The Apartment Manager Finding Out
~~~~~~~~ ~~.~~~!~cr~n~~:~.-~~~~~.~!~~n<mumllr' шhh t"''"rr.J
JIН\.'ttlшн ш l;.orc~' d,\J~~~~ ша~n~ ~1iquaш cr~1 v,,rшpOJt . Ur '' 1!\J ~шш <Hf щтiт 'сныщ .
Ф-t}tн~ 1ю~mнJ t.'.(C:Гt.:J t:нюn ull~lstt:нqx·r ~н~ ipat lt't"н'nj, "''' 111 :tiiЧIJir> сх ~:, comrrкxJt,
~,.,)11~\fti:.H f)11 is autrm H'l Clll1\ irщr(' dolor ш hcшt~ril iн ' 'lllputatt' \ 'CJtt ~:'1:-.t' щоkм•,·
.. \ 111~·qн~н . \(~1 illшн Jplof~ l'tl J',.·щ!i<il nнiiLI н,,.,
Wooden Crates Make Excellent Hldlng Places
l .. i'щ~шlr~шn (l~)lc.1r :-.11 :ita'lt't . ~.·o"~..:trtu~r adipiм.:m~ ~o'. Ht . :ч.:J t.lмm nonu111m) 11il'h с-ш:-.н""'J
1m~ кl~tnf ut l.юй"СI tf(tloн· н1:ч~nа :tltчшш1 сr:н ""'IUif':\l 1.:1 '' i~t t:ntm :td tнiшш н~tШJIН
• t(tii'-IHtstn.ldi.'XC'r~o.·i t;,Jiic.)t1 ul l:нaк·c.ч"("-.'r'tl~lpir lot\!.н11 " n~sl ш oslщtt trC'\ с;, с.·• ннн~-.Jt\
1.'\)H:-t'tf\1.\t Нш_. .. J~lft'll l \l'll..'tНI1 юurc.·,lttll )( illl't'IJtlr('IH lfl \tllpUILIII.' ,·,·tн ('\o.'it' IH(}k'H('
... t.J H:'<.'tfU:t1 , ' "'lafl~tn) ,t~)lor"· t"\1 l~н.~rat ннll.1 l.1t 1 t ~~~~~~1•1~~r ~~~~~~~,.,. <~tlopoxlll~ ,·lor . ,..J <1шmошоrш1н11~ orit>Jr ''"""""!
IIIKJtliiHI UII:Юr\.'t'l llt11im: Cll:t~lli\ .11Jqt~нn1 t.'f:\1 \ 'c.) JUip;t( ~ ~t "1~1 (,.'IH IH ~lt1 1HIШНI \ t'f'tMIH. . :
ч11i.; n-.•.:-rnнl c.:-,,.,,.t r.tttt)O вlfara1c<,f[)('r :-.:u~·trrtlt•h4·•n:i~ ш.;J ol Jl iчшp t'Л _________________('а .. ·tщнш~Jн ':'!
l. . :~·~:::!.t~~~ ~)~~~:~~~~~·~~ :~:~~~~:~~..:-~~~~~ ~~~~·~г~·t~1 ев \ .•.rl!)~~(,lf~. . ,.~1~1 ~~~~· .~.~~ tl(' ' ' ''.: 4 .~~
Llt.~~<. ....... -----···--·····-·······----- ----- - ----·-···--· ------------···-·· ··-·---.0- ':·:
Рис. 3.1. Селектор тега воздействует на все экземпляры ука1анноrо элемента веб-страницы
Однако и здесь имеются свои недостатки. Как сделать, чтобы не все абзацы небстраницы
выглядели одинаково? Простыми селекторами типов этого добиться не
Селекторы классов: точное уnравление 65
удастся, потому что они не предоставляют достаточную информацию браузеру.
Например, нужно задать различия между элементом Р, выделенным определенным
цветом и кеглем, и элементом Р, который вы хотите оставить написанным шрифтом
черного цвета. CSS предоставляет сразу несколько способов решения данной проблемы,
самый простой из которых - селекторы классов.
Сеnекторыкпассов:точноеуправпение
Если вы хотите, чтобы какие-то элементы выглядели не так, как другие родственные
им элементы из той же веб-страницы, например, хотите задать для одного или
двух рисунков красную рамку, оставив все остальные изображения нестилизованными,
то можете использовать селектор 1Ulaccoв. Если вы привыкли работать со
стилями в программах для редактирования текста, таких как Microsoft W ord, то
селекторы классов покажутся вам хорошо знакомыми. Вы создаете селектор, назначая
ему имя, а затем применяете его лишь к тем тегам HTML, которые хотите
отформатировать.
Например, вы можете создать класс . copyri ght и с его помощью выделить абзац,
содержащий информацию об авторских правах, не затрагивая остальные абзацы.
Селекторы классов позволяют указать конкретный элемент веб-страницы, независимо
от тегов. Предположим, вы хотите отформатировать одно или несколько
слов абзаца. В данном случае применяется форматирование не ко всему тегу <р>,
а лишь к фрагменту абзаца. Таким образом, вам нужно использовать селектор класса
для выделения определенного текста. Можно примелить изменения к множеству
элементов, входящих в различные НТМL-теrи.
Например, вы можете придать какому-то абзацу и заголовку второго уровня
(тег <h2>) одинаковый стиль, как показало на рис. 3.2. В отличие от селекторов
типов, которые ограничивают вас существующими на веб-странице НТМL-тегами,
с помощью этого метода вы можете создать любое количество селекторов классов
и поместить их в выбранное место.
lРИМЕЧАНИЕ-------------------------------------------------Вы
можете стилизовать один экземnляр заголовка <h2> («Wet Sod is Heavy Sod»). Селектор класса
.special сообщает брауэеру о необходимости nрименения стиля к единственному тегу <h2>. Создав
его однажды, вы можете nользоваться им и в дальнейшем nрименительно к любым тегам. В nримере
(см. рис. 3.2) такой стиль nрименен к верхнему абзацу.
Если вы хотите nрименить селектор класса всего к нескольким словам текста, содержащегося в nроизвольном
теге НТМL-кода (nодобно среднему абзацу на рис. 3.2), то исnользуйте тег <span>.
Для более детального ознакомления смотрите ниже врезку «Бриллиант без огранки».
Вы, вероятно, обратили внимание на точку, с которой начинается каждое название
селектора класса: . copyri ght, . speci а l. Это одно из нескольких правил, которые
необходимо иметь в виду, именуя классы.
О Все названия селекторов классов должны начинаться с точки. С ее помощью
браузеры находят селекторы классов в таблице стилей CSS.
О При именовании стилевых классов разрешается использование только букв
алфавита, чисел, дефисов, знаков подчеркивания.
66Глава 3. Селекторы: определение элементов стилиэации
- -· . . .
·) Clils~ Selectors · Moz1llil Firefox
•Е'е .~• ».--•-~ ~ -!o-als-tf-.e/p о et[р ht1p:ffas.local/d..o~ln'A
How to Move Sod Up 10Stc ~
The Apartment Manager f"'i~
