CSS జోడించడం ఎలా?

బ్రౌజర్ స్టైల్స్ చదివినప్పుడు, అది స్టైల్స్ ఫైల్లో సమాచారాన్ని ఆధారంగా హ్ట్మ్ల్ డాక్యుమెంట్ను ఫార్మాట్ చేస్తుంది.

CSS యొక్క మూడు విధానాలు

స్టైల్స్ ఫైల్ని ప్రవేశపెట్టడానికి మూడు విధానాలు ఉన్నాయి:

  • బాహ్య CSS
  • అంతర్గత స్టైల్ స్క్రాప్ట్
  • స్టైల్ స్క్రాప్ట్

బాహ్య CSS

బాహ్య స్టైల్స్ ఫైల్ని మార్చడం ద్వారా, మీరు మొత్తం వెబ్సైట్ యొక్క అనుభవాన్ని మార్చవచ్చు!

ప్రతి హ్ట్మ్ల్ పేజీ హెడ్ భాగంలో లింక్ ఎలమెంట్లో బాహ్య స్టైల్స్ ఫైల్స్ యొక్క సూచనను కలిగివుండాలి.

ఉదాహరణ

హ్ట్మ్ల్ పేజీ యొక్క హెడ్ భాగంలో లింక్ ఎలమెంట్లో బాహ్య స్టైల్స్ నిర్వచించబడతాయి:

<!DOCTYPE html>
<html>



<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

స్వయంగా ప్రయత్నించండి

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

బాహ్య .css ఫైల్స్ ఏ హెచ్ఎంఎల్ టాగ్స్ చేర్చబడకూడదు.

"mystyle.css" ఈ విధంగా ఉంటుంది:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

గమనిక:అట్టిడి విలువ మరియు యూనిట్ మధ్య స్పేస్ జోడించకూడదు (ఉదాహరణకు margin-left: 20 px;）。సరైన రూపం ఈ విధంగా ఉంటుంది:margin-left: 20px;

అంతర్గత స్టైల్ స్క్రాప్ట్

ఒక హెచ్ఎంఎల్ పేజీకి ఏకైక షేయిల్స్ ఉన్నట్లయితే, అంతర్గత షేయిల్ స్క్రాప్ట్ ఉపయోగించవచ్చు.

అంతర్గత షేయిల్స్ హెడ్ పార్ట్లో <style> ఎలిమెంట్లో నిర్వచించబడతాయి.

ఉదాహరణ

అంతర్గత షేయిల్స్ హెడ్ పార్ట్లో <style> ఎలిమెంట్లో నిర్వచించబడతాయి:

<!DOCTYPE html>
<html>



<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

స్వయంగా ప్రయత్నించండి

స్టైల్ స్క్రాప్ట్

స్టైల్ స్క్రాప్ట్ (లేదా స్టైల్ ఇన్‌లైన్) ఒక ఎలిమెంట్కు ప్రత్యేక షేయిల్స్ నిర్వచించడానికి ఉపయోగించబడతాయి.

స్టైల్ స్క్రాప్ట్ ఉపయోగించడానికి, సంబంధిత ఎలిమెంట్కు style అట్టిడిని జోడించండి. style అట్టిడిలో ఏ సిఎస్ఎస్ అంశాన్ని చేర్చవచ్చు.

ఉదాహరణ

స్టైల్ స్క్రాప్ట్ సంబంధిత ఎలిమెంట్కు "style" అట్టిడిలో నిర్వచించబడుతుంది:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

స్వయంగా ప్రయత్నించండి

సలహా:స్టైల్ స్క్రాప్ట్లు అనేది అనుబంధ విషయాలను (విషయాలను ప్రదర్శనతో కలిపి ఉంచడం ద్వారా) అనేక ప్రయోజనాలను కోల్పోతుంది. ఈ పద్ధతిని జాగ్రత్తగా ఉపయోగించండి.

పలు షేయిల్ స్క్రాప్ట్లు

అన్ని షేయిల్ స్క్రాప్ట్లో ఒకే సెలెక్టర్ (ఎలిమెంట్)కు కొన్ని అంశాలు నిర్వచించబడినట్లయితే, చివరి పరిశీలించిన షేయిల్ స్క్రాప్ట్లో అంశాలు వాడబడతాయి.

అప్పుడువెలుపలి షేయిల్ స్క్రాప్ట్కూడా <h1> ఎలిమెంట్కు ఈ కింద షేయిల్స్ సెట్ చేయబడింది:

h1 {
  color: navy;
}

అప్పుడు, కొంత సరికొత్తఅంతర్గత షేయిల్ స్క్రాప్ట్కూడా <h1> ఎలిమెంట్కు ఈ కింద షేయిల్స్ సెట్ చేయబడింది:

h1 {
  color: orange;    
}

ఉదాహరణ

అంతేకాక, వెలుపలి షేయిల్ స్క్రాప్ట్కు లింక్ చేసినప్పుడుతరువాతనిర్వచించినట్లయితే, <h1> ఎలిమెంట్ నారింజ రంగులో ఉంటుంది:

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

అయితే, వెలుపలి షేయిల్ స్క్రాప్ట్కు లింక్ చేసినప్పుడుముందు定义了内部样式，则

元素将是深蓝色：

స్వయంగా ప్రయత్నించండి

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. బ్రౌజర్ డిఫాల్ట్ స్టైల్స్

అందువలన, ఇన్‌లైన్ స్టైల్స్ అత్యధిక ప్రాధాన్యత కలిగి ఉంటాయి మరియు బాహ్య మరియు అంతర్గత స్టైల్స్ మరియు బ్రౌజర్ డిఫాల్ట్ స్టైల్స్ ని ఆధిపత్యం చేసుకుంటాయి.

స్వయంగా ప్రయత్నించండి