Awọn Style Style Pẹlu CSS

Mọ lati ṣe Ilọsiwaju oju-iwe ayelujara rẹ

Ko eko bi o ṣe le ṣe awọn fọọmu ara pẹlu CSS jẹ ọna ti o dara julọ lati ṣe atunwo oju-iwe ayelujara rẹ. Awọn fọọmu HTML jẹ idiyan laarin awọn ohun ti o dara julọ lori ọpọlọpọ oju-iwe ayelujara. Awọn igbagbogbo wọn jẹ alaidun ati iwulo ati pe wọn ko pese pupọ ni ọna ti ara.

Pẹlu CSS, ti o le yipada. Npọpọ CSS pẹlu awọn aami fọọmu ti o ni ilọsiwaju le fi awọn fọọmu ti o dara julọ han.

Yi Awọn Awọ pada

Gẹgẹbi pẹlu ọrọ, o le yi ikọkọ ati awọn awọ lẹhin ti awọn eroja fọọmu pada.

Ọna ti o rọrun lati yi awọ ti o sunmọ julọ fẹrẹ fẹrẹ jẹ gbogbo awọn ẹya ara ẹrọ ni lati lo ohun-elo lẹhin-awọ lori tag titẹ sii. Fun apẹẹrẹ, koodu yii kan awọ awọ-awọ bulu (# 9cf) lori gbogbo awọn eroja.

input {
lẹhin-awọ: # 9cf;
awọ: # 000;
}

Lati yi awọ-ode lẹhin nikan awọn eroja fọọmu, ṣe afikun ọrọ ati ki o yan si ara. Fun apere:

input, textarea, yan {
lẹhin-awọ: # 9cf;
awọ: # 000;
}

Rii daju lati yi awọ ọrọ pada pada ti o ba ṣe awọ awọ rẹ lẹhin. Iyatọ awọn awọ ṣe iranlọwọ ṣe awọn ohun elo fọọmu diẹ sii legible. Fun apẹẹrẹ, ọrọ lori awọ awọ pupa pupa dudu ti ni irọrun sii ni rọọrun ti o ba jẹ awọ ọrọ jẹ funfun. Fun apẹrẹ, aaye koodu yi ni aaye funfun lori itọlẹ pupa kan.

input, textarea, yan {
lẹhin-awọ: # c00;
awọ: #fff;
}

O le fi awọ awọ-tẹlẹ kun lori ara fọọmu ara rẹ. Ranti pe aami fọọmu jẹ ẹya- iṣiro kan , nitorina awọ naa kún ni gbogbo rectangle, kii ṣe awọn ipo ti awọn eroja nikan.

O le fi isubu awọ-oorun kan kun si ẹda kan lati ṣe agbegbe duro jade, bii eyi:

fọọmu {
lẹhin-awọ: #ffc;
}

Fi awọn aala kun

Bi pẹlu awọn awọ, o le yi awọn aala ti awọn ẹya ara ẹrọ oriṣiriṣi pada. O le fi ipari kan kun ni ayika gbogbo fọọmu naa. Rii daju pe o fi awọn ideri kun, tabi awọn ẹya ara ẹrọ rẹ yoo wa ni ọwọ ọtun ni ẹgbẹ si awọn aala.

Eyi ni apẹẹrẹ ti koodu fun abala dudu-1 kan pẹlu awọn piksẹli marun:

fọọmu {
aala: 1px lagbara # 000;
padding: 5px;
}

O le fi awọn agbegbe si ayika diẹ ẹ sii ju o kan fọọmu ara rẹ nikan. Yi iyipo ti awọn ohun kikọ silẹ lati ṣe ki wọn duro jade:

input {
aala: 2px dashed # c00;
}

Ṣọra nigbati o ba fi awọn aaye si awọn apoti ifọwọkan bi wọn ti wo kere bi awọn apoti titẹ sii lẹhinna, ati pe awọn eniyan kan le ma mọ pe wọn le fọwọsi fọọmu naa.

Darapọ Awọn ẹya ara ẹrọ

Nipasẹ papọ awọn ero oju-ara rẹ pẹlu ero ati diẹ ninu awọn CSS, o le ṣeto awoṣe ti o dara julọ ti o pari aṣiṣe ati ifilelẹ ti aaye rẹ.