CSS ఎలా సృష్టించాలి?

శైలీపత్రాన్ని ప్రవేశపెట్టడం ఎలా?

ఒక శైలీపత్రాన్ని చదివినప్పుడు, బ్రౌజర్ దాని మీద హైల్టెక్స్ట్ పత్రాన్ని ఫార్మాట్ చేస్తుంది. శైలీపత్రాన్ని ప్రవేశపెట్టడానికి మూడు పద్ధతులు ఉన్నాయి:

బాహ్య శైలీపత్రం

శైలీ అనేక పేజీలపై వాడబడాలి ఉన్నప్పుడు, బాహ్య శైలీపత్రం పరిపూర్ణం అవుతుంది. బాహ్య శైలీపత్రాన్ని ఉపయోగించడంలో, ఒక ఫైలును మార్చడంద్వారా మొత్తం సైట్‌ని ప్రదర్శనను మార్చవచ్చు. ప్రతి పేజీ <link> టాగ్‌ను శైలీపత్రానికి కలిపి ఉపయోగించాలి. <link> టాగ్ పత్రపు ముఖ్యమైన భాగంలో ఉంటుంది:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

బ్రౌజర్ mystyle.css ఫైలులో శైలీ ప్రకటనలను చదువుతుంది మరియు దాని మీద పత్రాన్ని ఫార్మాట్ చేస్తుంది.

బాహ్య శైలీపత్రాన్ని ఏ టెక్స్ట్ ఎడిటర్‌లోనైనా సవరించవచ్చు. ఫైలు ఏ హైల్టెక్స్ట్ ట్యాగ్‌లను కలిగి ఉండకూడదు. శైలీపత్రం .css పొడిగించబడాలి. ఈ ఉదాహరణలో శైలీపత్రం ఫైలు ఉంది:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

అట్టిబట్ట మరియు యూనిట్‌ల మధ్య అంతరాన్ని వదిలివేయకూడదు. ఉదాహరణకు, "margin-left: 20 px" అని వాడకూడదు, బదులుగా "margin-left: 20px" అని వాడాలి; ఇది మాత్రమే IE 6 లో పనిచేస్తుంది, కానీ Mozilla/Firefox లేదా Netscape లో సరిగా పనిచేయదు.

అంతర్గత శైలీపత్రం

ఒక పత్రం ప్రత్యేక శైలిని అవసరపడితే, అంతర్గత శైలీపత్రాన్ని ఉపయోగించాలి. మీరు <style> టాగ్‌ను పత్రపు ముఖ్యమైన భాగంలో ఉపయోగించవచ్చు, ఇలా ఉంటుంది:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

నిలకడి శైలి

ప్రదర్శన మరియు విషయం కలిసిపోయేటట్టు చేయడంతో, నిలకడి శైలీ శైలీపత్రం అనేక ప్రయోజనాలను కోల్పోతుంది. ఈ పద్ధతిని మరింత విధంగా ఉపయోగించకుండా ఉండండి, ఉదాహరణకు, శైలీ ఒక అంశంపై మాత్రమే ఆపాదించాలి ఉన్నప్పుడు.

నిలకడి శైలిని ఉపయోగించడానికి, మీరు సంబంధిత టాగ్‌లో శైలీ (style) అట్టిబట్టను వాడాలి. స్టైల్ అట్టిబట్ట ఏదైనా CSS అట్టిబట్టను కలిగి ఉండవచ్చు: ఈ ఉదాహరణలో పొట్టి రంగు మరియు ఎడమ బాహ్య మార్గాన్ని మార్చడానికి చూపడం జరుగుతుంది:

style="color: sienna; margin-left: 20px">
This is a paragraph

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {
  text-align: right; 
  font-size: 20pt;
  }

ఇది లోపలి స్టైల్ షేట్ ఉన్న ఈ పేజీని బాహ్య స్టైల్ షేట్ తో లింక్ చేయబడితే, h3 పై అనుభవించే స్టైల్ ఈ విధంగా ఉంటుంది:

color: red; 
text-align: right; 
font-size: 20pt;

కాలర్ అట్రిబ్యూట్ వాస్తవానికి బాహ్య స్టైల్ షేట్ లో వాస్తవానికి అనుసరిస్తారు, కానీ టెక్స్ట్ అలాయన్ (text-alignment) మరియు ఫాంట్ సైజ్ (font-size) లో లోపలి స్టైల్ షేట్ లో నియమాలు అధిగమించతాయి.