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

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

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

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

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

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

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

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

ఇది ఒక ఉదాహరణ తో చూడటానికి చాలా సులభం కాబట్టి సాధారణ CSS పాలన సృష్టించడం ద్వారా ప్రారంభిద్దాం. మొదటి, యొక్క మా HTML యొక్క భాగంలో శైలి పట్టీలు పెట్టి అనుమతిస్తాయి. తరువాత, సెలెక్టర్. మేము సాధారణ సెలెక్టర్లు ఒకటి, hash గుర్తు, ఉపయోగించి ఆఫ్ ప్రారంభిస్తాము దాని 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 పని ఇష్టపడతారు మార్గం. 

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

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

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

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

[CS50.TV] 

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