Образац са стилизованим етикетама
Како стилизовати ознаку обрасца помоћу ЦСС-а. Елемент обрасца који се користи за означавање различитих поља и области за унос на обрасцу веб странице је елемент ознаке. Може се стилизовати помоћу правила каскадног стилског листа.
Корак 1
Да бисте стилизовали елементе етикете онако како се појављују на слици у уводу, потребно је да користите елемент ознаке са атрибутом „за“. Штавише, потребно је да затворите елемент ознаке пре него што додате сам елемент „улаз“. ХТМЛ за комплетан образац приказан је на илустрацији.
Видео дана
Корак 2
Да бих стилизовао елементе етикета, направио сам да се налепнице приказују као елементи на нивоу блока, који су били лебдећи на левој страни. Затим сам доделио ширину ознакама тако да сва поља за унос буду на уједначеној удаљености од ознака. Доделио сам боју и подебљао текст. Користио сам генерисани садржај да додам двотачку (: ) после ознаке. (Двотачка се можда неће појавити у сваком претраживачу.)
Ево ЦСС-а:
лабел { боја: #Б4886Б; фонт-веигхт: болд; дисплеј блок; ширина: 150пк; флоат: лево; } ознака: после { цонтент: ": " }
Корак 3
Само ради потпуности, такође ћу вам показати ЦСС који се користи за стилизовање скупа поља, пошто су елементи етикете окружени скупом поља са ивицом.
Ево тог ЦСС-а:
фиелдсет { бордер: 1пк солид #ЦЦА383; ширина: 400пк; позадина: #ФФЕ8ЕФ; паддинг: 3пк; } легенда скупа поља { бацкгроунд: #ЦЦА383; паддинг: 6пк; фонт-веигхт: болд; }
Корак 4
Могли бисте да урадите много других ствари за стилизовање елемената етикете. Мој пример је само један од начина да се то уради.
ХТМЛ образац
Ствари које ће вам требати
Радно познавање ХТМЛ-а
Радно познавање ЦСС-а
