01 од 10
Направите ЦСС Стиле Схеет
На исти начин како смо направили одвојену текстуалну датотеку за ХТМЛ, креирали ћете текстуалну датотеку за ЦСС. Ако вам треба визуелни приказ овог процеса, погледајте први туторијал. Ево корака за креирање ЦСС стилског листа у нотепаду:
- Изаберите Филе> Нев ин Бележница да бисте добили празан прозор
- Сачувајте датотеку као ЦСС кликом на Филе <Саве Ас ...
- Идите до мапе ми_вебсите на тврдом диску
- Промените "Сачувај као тип:" на "Све датотеке"
- Назовите своју датотеку "стилес.цсс" (оставите цитате) и кликните на дугме Сачувај
02 од 10
Повезите ЦСС Стиле Схеет са ХТМЛ-ом
Када добијете стилски стил за своју Веб локацију, мораћете да га повежете са самом Веб страницом. Да бисте то урадили користите ознаку везе. Поставите следећу ознаку везе било где унутар ознака <хеад> ваших кућних љубимаца.хтм документ:
<линк хреф = "стилес.цсс" рел = "стилесхеет" типе = "тект / цсс">
03 од 10
Поправите стране маргине
Када пишете КСХТМЛ за различите прегледаче, једна ствар коју ћете научити јесте да сви они имају различите маргине и правила за приказивање ствари. Најбољи начин да будете сигурни да је ваша страница у већини претраживача изгледала иста, није дозволити да се ствари као маргине подразумевају подразумевају на избору прегледача.
Више волим да започињам своје странице у горњем левом углу, без додатне облоге или маргине која окружује текст. Чак иако ћу садрћи садржај, поставио сам маргину на нулу, тако да почињем са истим празним тањиром. Да бисте то урадили, додајте у свој стилес.цсс документ:
хтмл, боди {
маргин: 0пк;
паддинг: 0пк;
бордер: 0пк;
лефт: 0пк;
топ: 0пк;
}
04 од 10
Промена фонта на страници
Фонт је често прва ствар коју ћете желети да промените на Веб страници. Подразумевани фонт на Веб страници може бити ружан и заправо је у самом претраживачу, па ако не дефинишете фонт, заиста нећете знати како ће ваша страница изгледати.
Типично, променили бисте фонт на параграфима, или понекад на сам документ. За ову локацију дефинишемо фонт на заглављу и нивоу параграфа. Додајте следеће у свој стилес.цсс документ:
п, ли {
фонт: 1ем Ариал, Хелветица, санс-сериф;
}
х1 {
фонт: 2ем Ариал, Хелветица, санс-сериф;
}
х2 {
фонт: 1.5ем Ариал, Хелветица, санс-сериф;
}
х3 {
фонт: 1.25ем Ариал, Хелветица, санс-сериф;
}
Почео сам са 1ем као основну величину за параграфе и ставке листе, а затим их користио да поставим величину за моје наслове. Не очекујем да користим наслов дубље од х4, али ако планираш, желиш га и стајати.
05 од 10
Стварање ваших веза више интересантније
Подразумеване боје за везе су плаве и љубичасте за независне и посјећене везе. Иако је то стандардно, можда се не уклапа у шему боја у вашим страницама, па хајде да је променимо. У вашој стилес.цсс датотеку додајте следеће:
линк {
фонт-фамили: Ариал, Хелветица, санс-сериф;
боја: # ФФ9900;
текст-декорација: подвлачи;
}
а: посјетили {
боја: # ФФЦЦ66;
}
а: ховер {
бацкгроунд: #ФФФФЦЦ;
фонт-веигхт: болд;
}
Поставио сам три стила везе, а: линк као подразумевано, а: посећено када је посећено, мењам боју и: ховер. Са: ховером имам везу да добијем боју позадине и идем болд да бих истакла да је то веза која треба кликнути.
06 од 10
Стилинг Навигатион Сецтион
Пошто смо први пут ставили навигацију (ид = "нав") у ХТМЛ, прво га стајимо. Морамо да наведемо колико би требало бити широко и ставити ширу маргину са десне стране, тако да главни текст неће избацити против ње. Ставио сам границу око њега.
Додајте следећи ЦСС у свој стилес.цсс документ:
#нав {
Ширина: 225пк;
маргин-ригхт: 15пк;
граница: средња чврста # 000000;
}
#нав ли {
лист-стиле: ноне;
}
.фоотер {
фонт-сизе: .75ем;
јасно: обоје;
ширина: 100%;
текстуално поравнање: центар;
}
Својство у листи поставља листу унутар секције за навигацију да нема метака или бројева, а .фоотер стилизира секцију ауторских права да буде мања и центрирана унутар секције.
07 од 10
Позиционирање главне секције
Постављањем главног дела са апсолутним позиционирањем можете бити сигурни да ће остати управо тамо где желите да остане на вашој Веб страници. Направио сам свој 800пк широк за смештај већих монитора, али ако имате мањи монитор, можда бисте желели да га ужим.
Поставите следеће у свој стилес.цсс документ:
#главни {
ширина: 800пк;
топ: 0пк;
позиција: апсолутно;
лево: 250пк;
}
08 од 10
Стилинг Иоур Параграпхс
Пошто сам већ поставио фонт изнад, желео бих да сваку параграфу додам мало додатног "удара" да би се боље истицало. Урадио сам то тако што сам ставио границу на врху, што је параграф означио више него само слику.
Поставите следеће у свој стилес.цсс документ:
.Горња линија {
гранични топ: дебела чврста # ФФЦЦ00;
}
Одлучио сам да то урадим као класу под називом "топлине", а не само да дефинишем све параграфе на тај начин. На овај начин, ако одлучим да желим да имам параграф без горње жуте линије, једноставно могу да оставим класу "топлине" у ознаци пасуса и неће имати горњу границу.
09 од 10
Стилинг Имагес
Слике обично имају границу око њих, ово није увек видљиво осим ако је слика веза, али ја волим да имам класу унутар моје ЦСС стил листе која аутоматски искључује границу. За овај стил стила сам креирао класу "нобордер", а већина слика у документу је део ове класе.
Други посебан део ових слика је њихова локација на страници. Желео сам да они буду део параграфа у коме су били без коришћења табела како би их ускладили. Најједноставнији начин је да користите флоат ЦСС својство.
Поставите следеће у свој стилес.цсс документ:
#маин имг {
флоат: лефт;
маргин-ригхт: 5пк;
маргин-боттом: 15пк;
}
.нобордер {
бордер: 0пк ноне;
}
Као што можете видети, на сликама су такође постављене маргине, како би били сигурни да нису разбијени у односу на плутајући текст који је поред њих у параграфима.
10 од 10
Сада погледајте своју завршену страницу
Када сачувате свој ЦСС, у свој Веб претраживач можете поново учитати страницу петс.хтм. Ваша страница би требало да изгледа слично оној приказаној на овој слици, с поравнавањем слика и навигацијом постављена на левој страни странице.
Пратите ове исте кораке за све своје интерне странице за ову локацију. Желите да имате једну страницу за сваку страницу у својој навигацији.