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