మీ వెబ్సైట్ యొక్క లుక్ మెరుగుపరచండి తెలుసుకోండి
ఎలా CSS తో శైలి రూపాలు నేర్చుకోవడం మీ వెబ్సైట్ యొక్క రూపాన్ని మెరుగుపర్చడానికి ఒక గొప్ప మార్గం. HTML ఫారమ్లు చాలా వెబ్ పుటలలోని ugliest విషయాలలో నిస్సందేహంగా ఉన్నాయి. వారు తరచుగా బోరింగ్ మరియు ప్రయోజనకరంగా ఉంటారు మరియు శైలి యొక్క శైలిలో చాలా వరకు అందించరు.
CSS తో, అది మార్చవచ్చు. మరింత అధునాతన రూపం టాగ్లు తో CSS కలపడం కొన్ని nice- కనిపించే రూపాలు బట్వాడా.
కలర్స్ మార్చండి
వచనంతో వలె, మీరు ఫారమ్ ఎలిమెంట్ల ముందుభాగం మరియు నేపథ్య రంగులను మార్చవచ్చు.
దాదాపు ప్రతి రూపం మూలకం యొక్క నేపథ్య రంగును మార్చడానికి సులభమైన మార్గం ఇన్పుట్ ట్యాగ్లో నేపథ్య-రంగు లక్షణాన్ని ఉపయోగించడం. ఉదాహరణకు, ఈ కోడ్ అన్ని అంశాలపై నీలం నేపథ్య రంగు (# 9cf) వర్తిస్తుంది.
ఇన్పుట్ {
నేపథ్య రంగు: # 9 సిఎఫ్;
రంగు: # 000;
}
కొన్ని నిర్దిష్ట మూలకాల యొక్క నేపథ్య రంగును మార్చడానికి, టెక్స్ట్ఏరియాను జోడించి శైలిని ఎంచుకోండి. ఉదాహరణకి:
ఇన్పుట్, టెక్స్ట్ఏరియా, ఎంచుకోండి {
నేపథ్య రంగు: # 9 సిఎఫ్;
రంగు: # 000;
}
మీరు మీ నేపథ్యం రంగు చీకటిని చేస్తే టెక్స్ట్ రంగుని మార్చండి. కాంట్రాస్టింగ్ రంగులు రూపం అంశాలు మరింత స్పష్టంగా తయారు సహాయం. ఉదాహరణకు, ముదురు ఎరుపు రంగు నేపథ్యంలో టెక్స్ట్ టెక్స్ట్ రంగు తెలుపు ఉంటే మరింత సులభంగా చదవబడుతుంది. ఉదాహరణకు, ఈ కోడ్ ఎరుపు నేపథ్యంలో తెల్ల వచనాన్ని ఉంచింది.
ఇన్పుట్, టెక్స్ట్ఏరియా, ఎంచుకోండి {
నేపథ్య రంగు: # c00;
రంగు: # ff;
}
మీరు కూడా రూపం ట్యాగ్ మీద నేపథ్య రంగు ఉంచవచ్చు. ఫారమ్ ట్యాగ్ బ్లాకు మూలకం అని గుర్తుంచుకోండి, అందువల్ల రంగు దీర్ఘ చతురస్రాకారంలో నిండుతుంది, మూలకాల స్థానాలు మాత్రమే కాదు.
మీరు ప్రాంతంలోని నిలబడి చేయటానికి ఒక బ్లాక్ ఎలిమెంట్ కు పసుపు నేపథ్యాన్ని జోడించవచ్చు, ఇలా ఉంటుంది:
రూపం {
background-color: #fc;
}
సరిహద్దులను జోడించు
రంగులు వలె, మీరు వివిధ రూపం అంశాల సరిహద్దులను మార్చవచ్చు. మీరు మొత్తం రూపాన్ని చుట్టూ ఒక్క సరిహద్దుని జోడించవచ్చు. పాడింగ్ ను జోడించాలని నిర్ధారించుకోండి లేదా మీ ఫారం అంశాల సరిహద్దు పక్కన సరిగ్గా జామ్ చేయబడుతుంది.
ఇక్కడ పాడింగ్ యొక్క 5 పిక్సెల్లతో 1-పిక్సెల్ నల్ల సరిహద్దు కోసం కోడ్ యొక్క ఉదాహరణ:
రూపం {
సరిహద్దు: 1px ఘన # 000;
పాడింగ్: 5 px;
}
మీరు కేవలం రూపం దానికంటే సరిహద్దులను ఉంచవచ్చు. ఇన్పుట్ అంశాల సరిహద్దును వాటిని నిలబడి చేయడానికి మార్చండి:
ఇన్పుట్ {
సరిహద్దు: 2px dashed # c00;
}
ఇన్పుట్ పెట్టెలపై తక్కువగా ఉన్నందున మీరు ఇన్పుట్ బాక్సులపై సరిహద్దులను ఉంచినప్పుడు జాగ్రత్తగా ఉండండి, అప్పుడు కొంతమంది వారు రూపం పూరించగలరని గ్రహించలేరు.
శైలి ఫీచర్లు చేర్చండి
ఆలోచన మరియు కొన్ని CSS తో మీ రూపం అంశాలు కలిసి ఉంచడం ద్వారా, మీరు మీ సైట్ యొక్క రూపకల్పన మరియు లేఅవుట్ పూర్తి ఒక nice చూడటం రూపం ఏర్పాటు చేయవచ్చు.