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