[Powered by Google Translate] [CSS] [జోసెఫ్ ఓంగ్ - హార్వర్డ్ విశ్వవిద్యాలయం] [ఈ CS50 ఉంది. - CS50.TV] 

ఈ రోజు మనం CSS గురించి మాట్లాడటం లేదా క్యాస్కేడింగ్ స్టైల్ షీట్స్ అవుతారు. 

సో CSS సరిగ్గా ఏమిటి? బాగా, 2 భాగాలుగా డౌన్ పదం CSS విచ్ఛిన్నం చేసుకుందాం: క్యాస్కేడింగ్ మరియు శైలి షీట్లు. కాస్కేడింగ్ కొద్దిగా మరింత క్లిష్టంగా ఉంటుంది, మరియు ఇది మేము మరొక వీడియో లో కవర్ చేస్తాము ఏదో వార్తలు. కానీ స్టార్టర్స్ కోసం, శైలి షీట్లు CSS ఏమి వద్ద చాలా సూచనలు. ఇది, ఒక వెబ్ పేజీ యొక్క HTML కు శైలులు జతచేస్తుంది వెబ్ పేజీ అందమైన యెంత మారుతున్న. ఈ పేజీలో టెక్స్ట్ ఫాంట్ నుండి కంటెంట్ స్థానాలు ప్రతిదీ అర్థం సమీప బాక్స్ యొక్క మూలల మేకింగ్ లేదా టెక్స్ట్ నీడలు జోడించడం వంటి ఇతర చల్లని విషయాలను. విషయాలు తెరపై యానిమేట్ చేయడానికి మీకు కూడా వెర్రి విషయాలు చేయవచ్చు. 

కాబట్టి మేము HTML తో CSS ఎలా ఉపయోగించగలను? నేను రాశాడు ఈ పేద కనిపించే సైట్ టేక్. రాబ్ ప్రస్తుతం ఈ సైట్ చూడండి ఉంటే, అతను బహుశా, ఏదో వంటి చెప్పాను "వావ్! నా పరిచయం భయంకరమైన ఉంది. జోసెఫ్, మీరు ఒక భయంకర డిజైనర్ ఉన్నాము." "డిఫాల్ట్ టైమ్స్ ఫాంట్ ఉపయోగించి? హెల్వెటికా ఎక్కువ." 

సో వాట్ రాబ్ కోరుకుంటున్నారు స్టైలింగ్ దరఖాస్తు సాధారణ మార్గం కావచ్చు? ఎక్కువ మంది ప్రజల స్పష్టమైన మార్గంలో మా ప్రారంభంలో CSS రాశాడు మూలకం లోనే మేము శైలి ప్రకటనలు కుడి కాల్ ఏమి ఉంచడం HTML స్టైల్ గుణం ఉపయోగించి. ఒక శైలి ప్రకటన కేవలం HTML మూలకం యొక్క CSS ఆస్తి కలిగి మనము కావలసిన చివరిలో ఆస్తి మరియు ఒక సెమికోలన్ కొత్త విలువ తరువాత తర్వాత ఒక విరామ చిహ్నం. ఉదాహరణకు, వీలు యొక్క రాబ్ పరిచయమైన చుట్టూ నల్ల అంచు కోరుకుంటున్నారు అని. మేము మొదటి ఇక్కడ రాబ్ యొక్క div న శైలి లక్షణం చాలు అప్పుడు డబుల్ కోట్స్ లోపల ఒక CSS ప్రకటన చాలు: "Border: 1 px ఘన నలుపు;" 1 పిక్సెల్ సరిహద్దు యొక్క వెడల్పు సూచిస్తుంది, ఘన, సరిహద్దు శైలిని సూచిస్తుంది మరియు చివరిలో రంగు సరిహద్దు యొక్క రంగు ఏమిటి నిర్ణయిస్తుంది. 

మేము ఒక మూలకం బహుళ శైలులు కావాలా, క్రమంలో ఈ ప్రకటనలు వ్రాయండి. ఉదాహరణకు, రాబ్ ఒక నీలం నేపధ్యం హెల్వెటికా తన శీర్షిక టెక్స్ట్ అనుకొంటే మరియు టెక్స్ట్ చుట్టూ మరింత స్పేస్ మేము చేయవచ్చు: శైలి = "ఫాంట్ కుటుంబం: హెల్వెటికా; background-color: నీలం; పాడింగ్: 5 px;" గత సెమికోలన్ నిజానికి ఐచ్ఛికం, కానీ ప్రజలు కలిగి కోసమని అది ఉంచాలని. 

మేము చాలా చల్లగా మరియు క్లిష్టమైన CSS లక్షణాలు కొన్ని వివరిస్తూ సేవ్ చేస్తాము మరొక వీడియో కోసం. మీరు మనస్సులో ఏదో కలిగి ఉంటే, కేవలం CSS తర్వాత మీకు కావలసిన ప్రభావం ను బహుశా మీరు అందంగా మంచి ఫలితాలు ఇస్తుంది. చల్లని విషయం, CSS అందంగా విస్తృత ఉంది మీరు చేయాలనుకుంటున్నారా ఏదైనా ఉంటే కనుక అసమానత ఉన్నాయి - కారణం లోపల - CSS, బహుశా దీన్ని చేయవచ్చు. మేము లైన్ స్టైలింగ్ స్టైలింగ్ ఈ రకమైన కాల్. మూలకం శైలి ప్రారంభ ట్యాగ్ లైన్ లో, బాగా ఉంది. 

నిజంగా నిర్వహించబడుతుంది చేయాలని ఎవరు చేసారో కోసం, మీరు ఈ అన్ని యెంత దారుణంగా వద్ద peeved కొద్దిగా పొందడానికి మొదలు కావచ్చు. మీరు పేజీపై ప్రతి మూలకం కోసం దీన్ని కలిగి ఉంటే, ఇమాజిన్ ప్లస్ ఇప్పుడు మీ HTML మరియు CSS అన్ని కలసిపోయిన మరియు చిందరవందర ఉంటాయి. స్థూల, కుడి? ఈ పరిష్కరించడానికి, ప్రజలు చివరికి వారి HTML మార్కప్ వేరు లో పట్టుకోవడంలో ప్రారంభించారు CSS సెలెక్టర్లు అనే ఉపయోగించి వారి CSS స్టైలింగ్ నుండి. CSS సెలెక్టర్లు ఇది ప్రకటనలు వర్తించే అంశాలు ఎంచుకోండి ఉపయోగిస్తారు. CSS ప్రకటనల జాబితా కలిపి సెలెక్టర్ తరచుగా ఒక CSS నియమంగా సూచిస్తారు. ఈ నియమాలు, తెరుచుకుంటాయి మరియు మూసుకుంటాయి HTML శైలి పట్టీలు మధ్య ఉంటుందని తరచుగా పత్రం యొక్క తల. 

ఇది, ఒక ఉదాహరణ తో చూడటానికి చాలా సులభం కాబట్టి ఒక సాధారణ CSS పాలన సృష్టించడం ద్వారా ప్రారంభిద్దాం. మొదటి, యొక్క మా HTML యొక్క భాగంలో శైలి పట్టీలు చాలు తెలపండి. తరువాత, సెలెక్టర్. మేము సాధారణ సెలెక్టర్లు ఒకటి, హాష్ చిహ్నం ఉపయోగించి ఆఫ్ మొదలు పెడతారేమో ఇది దాని ID గుణం ద్వారా ఒక HTML మూలకం ఎంపిక. ఈ సందర్భంలో మేము రాబ్ పరిచయం ప్రాతినిధ్యం div ఎంచుకోండి చేస్తాము div యొక్క ID, రాబ్ తరువాత హాష్ చిహ్నం టైప్ చేసి. ఇప్పుడు ప్రకటనలు. మేము తెరుచుకుంటాయి మరియు మూసుకుంటాయి జంట కలుపులు జోడించడానికి మరియు రాబ్ యొక్క div మా ముందు ఇన్లైన్ ప్రకటనలు మారవచ్చు ఈ జంట కలుపులు లోపలి రిఫ్రెష్, మరియు, చల్లని, రాబ్ యొక్క పరిచయ ఇప్పటికీ చుట్టూ నల్ల అంచు మైనస్ దారుణంగా ఇన్లైన్ వికార స్వరూపము ఉంది. 

ఇప్పుడు, మేము రాబ్ యొక్క పరిచయ యొక్క h1 లోపల ఎంచుకోండి కోరుకుంటే? మీరు "యొక్క అది ఒక ID ఉంచి మా ముందు శైలులు తరలించడానికి లెట్.", అనుకుంటున్నాను ఉండవచ్చు ఆ పని, కానీ CSS మీరు అంశాలు ఎంచుకోండి తెలియజేసినందుకు ఇతర మార్గాలు ఉన్నాయి మేము combinators సాధారణ సెలెక్టర్లు మిక్స్ కాల్ ఏమి ఉపయోగించి. ఉదాహరణకు, ఒక తెల్లని పాత్ర combinator ఉపయోగించవచ్చు మరొక సెలెక్టర్ లోపలి జీవిస్తున్న 1 సెలెక్టర్ అన్ని సందర్భాల్లో తెలుపుటకు. అది నిజానికి కంటే చాలా క్లిష్టమైన ధ్వనులు. ఇక్కడ ఒక ఉదాహరణ వార్తలు. మేము #, దోచుకుంటున్నారని ఒక ఖాళీని జోడించడానికి, మరియు ఒక h1 అది అనుసరించండి టైప్ ఉంటుంది మరొక సాధారణ సెలెక్టర్ అంశాల రకాల ఎంపిక చేసే ట్యాగ్ సెలెక్టర్ అని divs లేదా పేరాలు వంటి. స్పేస్ అన్ని CSS ప్రకటనలు దరఖాస్తు, మా 2 సాధారణ సెలెక్టర్లు మిళితం మరియు ID = "రాబ్" తో మూలకం లోపలి నివసించే h1 ట్యాగ్లను గిరజాల కలుపులు. అది పనిచేస్తుంది మీరు ఒప్పించేందుకు, నేను తెలుపు, రిఫ్రెష్, ఫాంట్ను రంగు మారుస్తాము మరియు, చూడండి, రాబ్ యొక్క శీర్షిక ఇప్పుడు తెలుపు. 

ఈ కృతి యొక్క అన్ని నిబంధనలను బదులుగా ఇన్లైన్ శైలులు ఉపయోగించి ఆ చూపించు వెళ్తాడు మేము చాలా శుభ్రంగా కోడ్ పొందవచ్చు. ఈ శైలి బ్లాక్ మొదలవుతుంది ఉంటే నిజానికి, కొద్దిగా పెద్ద పొందడానికి నేను కూడా పూర్తిగా వేర్వేరు ఫైల్ ఈ శైలులు ఉపసంహరించుకునేలా చెయ్యవచ్చు. 

ఈ పత్రంలో CSS ఈ కొత్త ఫైలు చేర్చడానికి నేను HTML యొక్క లింక్ ను ఉపయోగిస్తారు చేస్తాము. ఇక్కడ నేను, నేను ఒక బాహ్య శైలి షీట్ లో లింక్ వెబ్ ఆ rel లక్షణం అది చెప్పడం వెబ్ మరియు నా href లక్షణం ఫైల్ మార్గం పేర్కొనండి. ఇప్పుడు నా HTML మార్కప్ మరియు CSS, పూర్తిగా ప్రత్యేక ఫైళ్ళలో చక్కగా నిర్వహిస్తారు ఇది దాదాపు ఎల్లప్పుడూ డిజైనర్లు HTML మరియు CSS తో పని ఇష్టపడతారు మార్గం. 

మీరు wondering మీరు సందర్భంలో, సాధారణ సెలెక్టర్లు ID సెలెక్టర్లు ఉన్నాయి మేము ఇప్పుడు చూసిన మాదిరిగా మరియు టాగ్ సెలెక్టర్లు అలాగే తరగతి ఒక నిర్దిష్ట తరగతికి తో అంశాలు ఎంచుకోవడం కోసం సెలెక్టర్లు, రకం వంటి ఇతర లక్షణాలు ద్వారా అంశాలు ఎంచుకోవడం కోసం గుణం సెలెక్టర్లు = "రేడియో" రేడియో బటన్ ఇన్పుట్లను, మరియు వంటి pseudoselectors కోసం హోవర్ మరియు దృష్టి పరస్పర ఒక మూలకం జరుగుతాయి పైగా mousing ఇష్టపడినప్పుడు స్టైలింగ్ పేర్కొనడం కోసం. 

సాధారణ combinators అన్ని పిల్లలకు తెల్లని ఉన్నాయి మరియు కామాలతో సెలెక్టర్లు పిలిచేవారు. మీరు ఎదుర్కొనే ఇతరులకు మాత్రమే ప్రత్యక్ష పిల్లలకు బాణం ఉన్నాయి మూలకం తర్వాత సంభవించే అన్ని తోబుట్టువుల కోసం tilde, మరియు మూలకం వెంటనే వస్తుంది 1 తోబుట్టువు కోసం ప్లస్ సైన్. 

ఈ సెలెక్టర్లు మరియు combinators కలపడం ద్వారా, మీరు ఒక వెబ్ పేజీలో సాధించింది స్టైలింగ్ పరిధి విస్తృతం చేసుకోవచ్చు మరియు మరింత సమర్థవంతంగా CSS వ్రాయండి. మీరు నన్ను ఇక్కడ టైప్ చూడండి CSS రేఖలు కేవలం ఒక జంట తో, నేను త్వరగా ఈ వంటి ఏదో వంటి ఈ లుక్ వంటి ఏదో చేయవచ్చు. 

నేను జోసెఫ్ రెడీ, మరియు ఈ CS50 ఉంది. 

[CS50.TV] 

ఉహ్, నేను ఎక్కడ మొదలు లేదు? [నవ్వుతూ] సరే - నాకు లేని అన్నారు. ఒక జోడించు - నాకు ఆ పదాలు మార్చడానికి లెట్. Ooh. క్షమించాలి.