కిందివి ప్రధానమైనవి ' నిబంధనల వద్ద CSSలో:
ఈ మూడింటి గురించి క్లుప్తంగా చర్చిద్దాం' నిబంధనల వద్ద ”అవి ఎలా పనిచేస్తాయో అర్థం చేసుకోవడానికి.
CSSలో @దిగుమతి నియమం ఏమిటి?
ది ' @దిగుమతి ” CSSలోని నియమం మరొక స్టైల్ షీట్ నుండి CSS స్టైల్ షీట్‌ను దిగుమతి చేయడానికి ఉపయోగించబడుతుంది. వెబ్ పేజీలోని విభిన్న మూలకాల కోసం లక్షణాలు లేదా స్టైలింగ్ సూచనలను కలిగి ఉన్న CSS స్టైల్ షీట్ ఉన్నట్లయితే మరియు అదే స్టైలింగ్‌ను మరొక వెబ్ పేజీ ఫైల్‌లో జోడించడం అవసరం అయితే ' @దిగుమతి ' ఆ స్టైల్ షీట్ పేరుతో (ఇది CSS లక్షణాలను కలిగి ఉంటుంది) కుడి వైపున రౌండ్ బ్రాకెట్లలో ' url ” లేదా విలోమ కామాల్లో ఆ స్టైల్ షీట్ నుండి అన్ని ప్రాపర్టీలను దిగుమతి చేసుకోవచ్చు మరియు వాటిని నేరుగా స్టైల్ షీట్‌కి వర్తింపజేయవచ్చు @దిగుమతి ” నిబంధన జోడించబడింది.
వాక్యనిర్మాణం
'' తర్వాత వ్రాసిన CSS ఆకృతీకరించిన స్టైల్ షీట్ ఫైల్ పేరు ఉండాలి @దిగుమతి ”. కాబట్టి, జోడించడానికి వాక్యనిర్మాణం ' @దిగుమతి స్టైల్ షీట్‌లో నియమం క్రింది విధంగా ఉంది:
@దిగుమతి 'stylesheetname.css' ;
దిగుమతి నియమాన్ని కూడా అదే ప్రయోజనం కోసం క్రింది విధంగా వ్రాయవచ్చు, ఎందుకంటే ఇది కూడా అదే ఫలితాన్ని ఉత్పత్తి చేస్తుంది:
@దిగుమతి url ( stylesheetname.css ) ;CSSలో @మీడియా నియమం ఏమిటి?
ది ' @మీడియా ” వెబ్ పేజీకి మీడియా సూచనలను జోడించడానికి నియమం ఉపయోగించబడుతుంది. ఈ నియమాన్ని జోడించేటప్పుడు వర్తించే షరతు ప్రకారం ఈ నియమం పని చేస్తుంది. షరతు జోడించిన వెంటనే జోడించబడుతుంది ' @మీడియా ” కుడి వైపున ఆపై కర్లీ బ్రాకెట్లలోని నియమం లోపల షరతు నిజమైతే అమలు చేయాల్సిన లక్షణాలు లేదా సూచనలు ఉంటాయి.
ఉదాహరణ: @మీడియా నియమాన్ని వర్తింపజేయడం
ఉదాహరణ ద్వారా అర్థం చేసుకోవడానికి, మేము వెబ్ పేజీకి కొంత కంటెంట్‌ని జోడించవచ్చు:
< div తరగతి = 'నా తరగతి' >< h1 > LinuxHint ట్యుటోరియల్‌కి స్వాగతం! < / h1 >
< / div >
ఎగువ కోడ్ స్నిప్పెట్‌లో, దీన్ని వెబ్ పేజీ కంటెంట్‌గా ప్రదర్శించడానికి ఒక శీర్షిక సృష్టించబడింది.
కొలతలు లేదా పేజీ వెడల్పు పెరిగినప్పుడు లేదా తగ్గినప్పుడు మీడియా సూచనలను జోడించే ఉదాహరణను తీసుకుందాం. మొదట, వ్రాయండి ' @మీడియా ” ఆపై షరతును జోడించి ఆపై కర్లీ బ్రాకెట్లలో CSS లక్షణాలను నిర్వచించండి, అది షరతుతో ఉంటే అమలు చేయాలి @మీడియా ” నిజం అవుతుంది:
@మీడియా ( గరిష్ట వెడల్పు : 700px ) {.నా తరగతి {
రంగు : నలుపు ;
నేపథ్య : ఆకుపచ్చ ;
}
}
@మీడియా ( కనిష్ట వెడల్పు : 700px ) మరియు ( గరిష్ట వెడల్పు : 900px ) {
.నా తరగతి {
రంగు : నలుపు ;
నేపథ్య : పసుపు ;
}
}
@మీడియా ( కనిష్ట వెడల్పు : 900px ) {
.నా తరగతి {
రంగు : నలుపు ;
నేపథ్య : నీలవర్ణం ;
}
}
పై కోడ్‌లో, తదనుగుణంగా అమలు చేయడానికి మూడు వేర్వేరు మీడియా నియమాలకు షరతుగా వేర్వేరు వెడల్పు పరిమాణాలు పేర్కొనబడ్డాయి. ఉదాహరణకు, పై కోడ్ ప్రకారం, కనిష్ట వెడల్పు 700px ఉన్నప్పుడు, టెక్స్ట్ యొక్క నేపథ్య రంగు పసుపు రంగులోకి మారుతుంది.
పై కోడ్ ద్వారా రూపొందించబడిన ఫలితం క్రింది విధంగా ఉంటుంది. స్క్రీన్ పరిమాణాన్ని మార్చడం వలన టెక్స్ట్ యొక్క నేపథ్య రంగులు మారుతాయి:
CSSలో @font-face రూల్ అంటే ఏమిటి?
ఫాంట్‌ఫేస్ నియమం అనేది వెబ్ పేజీకి నేరుగా ఫాంట్ స్టైల్‌లను జోడించడానికి సులభమైన పద్ధతి. ఫాంట్‌లు నేరుగా డౌన్‌లోడ్ చేయబడతాయి మరియు ఈ నియమం ద్వారా వచనానికి వర్తింపజేయబడతాయి.
ఉదాహరణ: @font-face నియమాన్ని వర్తింపజేయడం
జోడించే పద్ధతిని అర్థం చేసుకుందాం ' @ఫాంట్-ఫేస్ 'ఒక సాధారణ ఉదాహరణ ద్వారా నియమం:
< div తరగతి = 'నా తరగతి' >< h1 > LinuxHint ట్యుటోరియల్‌కి స్వాగతం! < / h1 >
< / div >
పై కోడ్ స్నిప్పెట్ ఈ పోస్ట్ యొక్క మునుపటి విభాగంలో వివరించిన విధంగానే వచన శీర్షికను కలిగి ఉంది.
అమలు చేద్దాం' @ఫాంట్-ఫేస్ 'నియమం' ” దాని ఫాంట్ మార్చడానికి శీర్షిక:
@ఫాంట్-ఫేస్ {ఫాంట్ కుటుంబం : 'డెజావు సాన్స్' ;
src : url ( './fonts/DejaVuSans.ttf' ) ఫార్మాట్ ( 'ttf' ) ;
ఫాంట్-వెయిట్ : 500 ;
}
h1 {
ఫాంట్ కుటుంబం : 'దేజావు సాన్స్' ;
ఫాంట్-వెయిట్ : 500 ;
}
పై కోడ్ స్నిప్పెట్‌లో, అవసరమైన ఫాంట్ కుటుంబం పేరు ఉంది ఆపై “ url 'ఫాంట్ డౌన్‌లోడ్ చేయాల్సిన చోట నుండి లింక్ మరియు ఆపై ఫాంట్-వెయిట్. ' ద్వారా ఫాంట్ ముఖం పేర్కొనబడినప్పుడు @ఫాంట్-ఫేస్ 'నియమం, ఫాంట్ ముఖం యొక్క పేరు ఏదైనా మూలకంతో ఉపయోగించవచ్చు, ఈ కోడ్‌లో వలె ఇది ' కోసం ఉపయోగించబడింది h1 ' శీర్షిక.
ఈ కోడ్‌ని అమలు చేయడం వలన “లో పేర్కొన్న సూచనల ప్రకారం ఫాంట్ మారుతుంది. @ఫాంట్-ఫేస్ ” నియమం. క్రింది కోడ్ స్నిప్పెట్ యొక్క అవుట్‌పుట్ అవుతుంది:
ఇది '' యొక్క ఉద్దేశ్యాన్ని సంగ్రహిస్తుంది. @ ” CSS లో చిహ్నం.
ముగింపు
ది ' @ 'CSSలో చిహ్నం జోడించడానికి ఉపయోగించబడుతుంది' నియమాల వద్ద ” CSS లో. డాక్యుమెంట్‌లను స్టైలింగ్ చేయడానికి CSSని ఉపయోగిస్తున్నప్పుడు ఈ నియమాలు చాలా ఉపయోగకరమైన విధులను నిర్వహిస్తాయి అంటే అవి మరొక css ఫైల్ నుండి పూర్తి స్టైల్ షీట్‌లను దిగుమతి చేస్తాయి. @దిగుమతి 'నియమం, షరతులకు అనుగుణంగా నిర్వచించిన మీడియాలో CSS లక్షణాలను వర్తింపజేయండి' @మీడియా 'నియమం, మరియు వెబ్‌పేజీలో ఉపయోగించడానికి ఫాంట్‌లను నేరుగా డౌన్‌లోడ్ చేసుకోండి' @ఫాంట్-ఫేస్ ” నియమం.