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