01 от 10
Създайте стиловия лист CSS
По същия начин, по който създадохме отделен текстов файл за HTML, ще създадете текстов файл за CSS. Ако имате нужда от графики за този процес, вижте първия урок. Ето стъпките за създаване на листа стил за CSS в Notepad:
- Изберете File> New в Notepad, за да получите празен прозорец
- Запазете файла като CSS, като кликнете върху Файл <Запиши като ...
- Придвижете се до папката my_website на твърдия ви диск
- Променете "Запиши като тип:" в "Всички файлове"
- Посочете файла "styles.css" (оставете от кавичките) и кликнете върху Запазване
02 от 10
Свържете стиловия лист CSS с вашия HTML код
След като получите стилен лист за уеб сайта си, ще трябва да го свържете със самата уеб страница. За да направите това, използвайте маркера на връзката. Поставете следния етикет за връзка навсякъде в маркерите
на вашия документ pets.htm:03 от 10
Коригирайте маржовете на страниците
Когато пишете XHTML за различни браузъри, едно нещо, което ще научите, е, че всички те изглеждат с различни маржове и правила за това как те показват нещата. Най-добрият начин да сте сигурни, че сайтът Ви изглежда еднакво в повечето браузъри, е да не разрешавате неща като маржове по подразбиране за избора на браузъра.
Предпочитам да стартирам страниците си в горния ляв ъгъл, без допълнително подплата или марж около текста. Дори и да подредя съдържанието, зададох границите до нула, така че да започвам със същата празна плоча. За да направите това, добавете следното към вашия документ styles.css:
html, body {
марж: 0px;
подложка: 0px;
граница: 0px;
ляво: 0px;
горе: 0px;
}
04 от 10
Промяна на шрифта на страницата
Шрифтът често е първото нещо, което искате да промените на уеб страница. Стандартният шрифт на уеб страница може да е грозен и в действителност е в самия уеб браузър, така че ако не дефинирате шрифта, наистина няма да знаете каква ще бъде вашата страница.
Обикновено ще промените шрифта по параграфи или понякога върху целия документ. За този сайт ще дефинираме шрифта на ниво заглавие и абзац. Добавете следното към документа си styles.css:
p, li {
шрифт: 1em Arial, Helvetica, sans-serif;
}
h1 {
шрифт: 2em Arial, Helvetica, sans-serif;
}
h2 {
шрифт: 1.5мм Arial, Helvetica, sans-serif;
}
h3 {
шрифт: 1.25em Arial, Helvetica, sans-serif;
}
Започнах с 1em като основен размер за параграфите и елементите от списъка и след това използвах това, за да задам размера на моите заглавия. Не очаквам да използвам заглавие по-дълбоко от h4, но ако планирате, ще искате да го оформите също.
05 от 10
Направете вашите връзки по-интересни
Цветовете по подразбиране за връзките са синьо и лилаво за невидирани и посетени връзки съответно. Макар че това е стандартно, може да не отговаря на цветовата схема на страниците ви, така че да го сменим. Във файла си styles.css добавете следното:
a: link {
шрифт-семейство: Arial, Helvetica, sans-serif;
цвят: # FF9900;
текст-украса: подчертаване;
}
a: посетен {
цвят: # FFCC66;
}
a: задържи {
фон: #FFFFCC;
шрифт-тегло: удебелен;
}
Настроих три стила на връзките, връзката a: връзката като по подразбиране, a: посетена, когато е била посетена, променях цвета и: hover. С: Hover имам линк получите цвят на фона и отидете смели, за да подчертае, че е линк, за да бъдат кликнали.
06 от 10
Стилизиране на секцията за навигация
Тъй като на първо място в HTML натиснем навигационната част (id = "nav"), нека първо я оформим. Трябва да посочим колко широк е той и да постави по-широк марж от дясната страна, така че главният текст да не се вдигне срещу него. Аз също поставях граница около него.
Добавете следното CSS към вашия документ styles.css:
#nav {
ширина: 225px;
margin-right: 15px;
граница: средно твърдо # 000000;
}
#nav li {
списък стил: няма;
}
.footer {
размер на шрифта: .75em;
ясно: и двете;
ширина: 100%;
текст-подравняване: център;
}
Характеристиката в стил на списъка установява списъка в секцията за навигация, за да няма куршуми или числа, а .footer стифира секцията за авторски права да бъде по-малка и центрирана в секцията.
07 от 10
Позициониране на главната секция
Чрез позиционирането на основната част с абсолютно позициониране можете да сте сигурни, че ще остане точно там, където искате да остане на вашата уеб страница. Направих моя 800px широк за настаняване на по-големи монитори, но ако имате по-малък монитор, може да искате да направите това по-тесен.
Поставете следното в документа си styles.css:
#main {
ширина: 800px;
горе: 0px;
позиция: абсолютно;
ляво: 250px;
}
08 от 10
Подреждане на вашите абзаци
Тъй като вече зададох шрифта на абзаца по-горе, исках да дам на всеки абзац малко повече "ритник", за да го направи по-добре. Направих това, като поставих границата на върха, която подчертаваше абзаца повече от само изображението.
Поставете следното в документа си styles.css:
.topline {
горна граница: плътно твърдо вещество # FFCC00;
}
Реших да го направя като класа, наречена "горна линия", вместо просто да определя всички параграфи по този начин. По този начин, ако реша, че искам да имам параграф без горна жълта линия, мога просто да оставя класа = "горна линия" в маркера на абзаца и няма да има горната граница.
09 от 10
Стилизиране на изображенията
Изображенията обикновено имат граници около тях, това не винаги е видимо, освен ако изображението не е връзка, но обичам да имам клас в моя CSS стилове, който автоматично изключва границата. За този стилов лист създадох клас "noborder" и повечето от изображенията в документа са част от този клас.
Другата специална част на тези изображения е тяхното местоположение на страницата. Исках да бъдат част от параграфа, в който са били, без да използват таблици, за да ги приравнят. Най-лесният начин да направите това е да използвате свойството CSS на плаващия.
Поставете следното в документа си styles.css:
#main img {
плувка: ляво;
margin-right: 5px;
долна граница: 15px;
}
.noborder {
граница: 0px няма;
}
Както виждате, върху изображенията има зададени и маргинализирани свойства, за да сте сигурни, че те няма да бъдат разбити срещу плаващия текст, който е до тях в параграфите.
10 от 10
Сега погледнете Вашата завършена страница
След като запазите CSS, можете да презаредите страницата pets.htm във вашия уеб браузър. Страницата ви трябва да изглежда подобна на тази, показана на тази снимка, като изображенията са подравнени и навигацията е поставена правилно в лявата част на страницата.
Следвайте същите стъпки за всички вътрешни страници за този сайт. Искате да имате една страница за всяка страница в навигацията си.