1 00:00:00,000 --> 00:00:02,000 [Powered by Google Translate] [CSS] 2 00:00:02,000 --> 00:00:04,810 [జోసెఫ్ ఓంగ్ - హార్వర్డ్ విశ్వవిద్యాలయం] 3 00:00:04,810 --> 00:00:07,160 [ఈ CS50 ఉంది. - CS50.TV] 4 00:00:07,160 --> 00:00:11,430 >> ఈ రోజు మనం CSS గురించి మాట్లాడటం లేదా క్యాస్కేడింగ్ స్టైల్ షీట్స్ అవుతారు. 5 00:00:11,430 --> 00:00:14,330 >> సో CSS సరిగ్గా ఏమిటి? 6 00:00:14,330 --> 00:00:17,120 బాగా, 2 భాగాలుగా డౌన్ పదం CSS విచ్ఛిన్నం చేసుకుందాం: 7 00:00:17,120 --> 00:00:19,510 క్యాస్కేడింగ్ మరియు శైలి షీట్లు. 8 00:00:19,510 --> 00:00:23,900 కాస్కేడింగ్ కొద్దిగా మరింత క్లిష్టంగా ఉంటుంది, మరియు ఇది మేము మరొక వీడియో లో కవర్ చేస్తాము ఏదో వార్తలు. 9 00:00:23,900 --> 00:00:27,930 కానీ స్టార్టర్స్ కోసం, శైలి షీట్లు CSS ఏమి వద్ద చాలా సూచనలు. 10 00:00:27,930 --> 00:00:30,880 ఇది, ఒక వెబ్ పేజీ యొక్క HTML కు శైలులు జతచేస్తుంది 11 00:00:30,880 --> 00:00:33,720 వెబ్ పేజీ అందమైన యెంత మారుతున్న. 12 00:00:33,720 --> 00:00:38,310 ఈ పేజీలో టెక్స్ట్ ఫాంట్ నుండి కంటెంట్ స్థానాలు ప్రతిదీ అర్థం 13 00:00:38,310 --> 00:00:43,800 సమీప బాక్స్ యొక్క మూలల మేకింగ్ లేదా టెక్స్ట్ నీడలు జోడించడం వంటి ఇతర చల్లని విషయాలను. 14 00:00:43,800 --> 00:00:48,230 విషయాలు తెరపై యానిమేట్ చేయడానికి మీకు కూడా వెర్రి విషయాలు చేయవచ్చు. 15 00:00:48,230 --> 00:00:51,700 >> కాబట్టి మేము HTML తో CSS ఎలా ఉపయోగించగలను? 16 00:00:51,700 --> 00:00:53,620 నేను రాశాడు ఈ పేద కనిపించే సైట్ టేక్. 17 00:00:53,620 --> 00:00:57,290 రాబ్ ప్రస్తుతం ఈ సైట్ చూడండి ఉంటే, అతను బహుశా, ఏదో వంటి చెప్పాను 18 00:00:57,290 --> 00:01:01,730 "వావ్! నా పరిచయం భయంకరమైన ఉంది. జోసెఫ్, మీరు ఒక భయంకర డిజైనర్ ఉన్నాము." 19 00:01:01,730 --> 00:01:05,110 "డిఫాల్ట్ టైమ్స్ ఫాంట్ ఉపయోగించి? హెల్వెటికా ఎక్కువ." 20 00:01:05,110 --> 00:01:09,600 >> సో వాట్ రాబ్ కోరుకుంటున్నారు స్టైలింగ్ దరఖాస్తు సాధారణ మార్గం కావచ్చు? 21 00:01:09,600 --> 00:01:13,530 ఎక్కువ మంది ప్రజల స్పష్టమైన మార్గంలో మా ప్రారంభంలో CSS రాశాడు 22 00:01:13,530 --> 00:01:17,470 మూలకం లోనే మేము శైలి ప్రకటనలు కుడి కాల్ ఏమి ఉంచడం 23 00:01:17,470 --> 00:01:20,560 HTML స్టైల్ గుణం ఉపయోగించి. 24 00:01:20,560 --> 00:01:26,420 ఒక శైలి ప్రకటన కేవలం HTML మూలకం యొక్క CSS ఆస్తి కలిగి మనము కావలసిన 25 00:01:26,420 --> 00:01:32,140 చివరిలో ఆస్తి మరియు ఒక సెమికోలన్ కొత్త విలువ తరువాత తర్వాత ఒక విరామ చిహ్నం. 26 00:01:32,140 --> 00:01:36,600 ఉదాహరణకు, వీలు యొక్క రాబ్ పరిచయమైన చుట్టూ నల్ల అంచు కోరుకుంటున్నారు అని. 27 00:01:36,600 --> 00:01:40,040 మేము మొదటి ఇక్కడ రాబ్ యొక్క div న శైలి లక్షణం చాలు 28 00:01:40,040 --> 00:01:43,830 అప్పుడు డబుల్ కోట్స్ లోపల ఒక CSS ప్రకటన చాలు: 29 00:01:43,830 --> 00:01:47,880 "Border: 1 px ఘన నలుపు;" 30 00:01:47,880 --> 00:01:52,480 1 పిక్సెల్ సరిహద్దు యొక్క వెడల్పు సూచిస్తుంది, ఘన, సరిహద్దు శైలిని సూచిస్తుంది 31 00:01:52,480 --> 00:01:56,640 మరియు చివరిలో రంగు సరిహద్దు యొక్క రంగు ఏమిటి నిర్ణయిస్తుంది. 32 00:01:56,640 --> 00:02:01,220 >> మేము ఒక మూలకం బహుళ శైలులు కావాలా, క్రమంలో ఈ ప్రకటనలు వ్రాయండి. 33 00:02:01,220 --> 00:02:05,650 ఉదాహరణకు, రాబ్ ఒక నీలం నేపధ్యం హెల్వెటికా తన శీర్షిక టెక్స్ట్ అనుకొంటే 34 00:02:05,650 --> 00:02:09,270 మరియు టెక్స్ట్ చుట్టూ మరింత స్పేస్ మేము చేయవచ్చు: 35 00:02:09,270 --> 00:02:19,800 శైలి = "ఫాంట్ కుటుంబం: హెల్వెటికా; background-color: నీలం; పాడింగ్: 5 px;" 36 00:02:22,150 --> 00:02:28,010 గత సెమికోలన్ నిజానికి ఐచ్ఛికం, కానీ ప్రజలు కలిగి కోసమని అది ఉంచాలని. 37 00:02:28,010 --> 00:02:32,180 >> మేము చాలా చల్లగా మరియు క్లిష్టమైన CSS లక్షణాలు కొన్ని వివరిస్తూ సేవ్ చేస్తాము 38 00:02:32,180 --> 00:02:34,140 మరొక వీడియో కోసం. 39 00:02:34,140 --> 00:02:38,780 మీరు మనస్సులో ఏదో కలిగి ఉంటే, కేవలం CSS తర్వాత మీకు కావలసిన ప్రభావం ను 40 00:02:38,780 --> 00:02:41,590 బహుశా మీరు అందంగా మంచి ఫలితాలు ఇస్తుంది. 41 00:02:41,590 --> 00:02:44,530 చల్లని విషయం, CSS అందంగా విస్తృత ఉంది 42 00:02:44,530 --> 00:02:48,470 మీరు చేయాలనుకుంటున్నారా ఏదైనా ఉంటే కనుక అసమానత ఉన్నాయి - కారణం లోపల - 43 00:02:48,470 --> 00:02:51,350 CSS, బహుశా దీన్ని చేయవచ్చు. 44 00:02:51,350 --> 00:02:54,750 మేము లైన్ స్టైలింగ్ స్టైలింగ్ ఈ రకమైన కాల్. 45 00:02:54,750 --> 00:02:59,030 మూలకం శైలి ప్రారంభ ట్యాగ్ లైన్ లో, బాగా ఉంది. 46 00:02:59,030 --> 00:03:01,770 >> నిజంగా నిర్వహించబడుతుంది చేయాలని ఎవరు చేసారో కోసం, 47 00:03:01,770 --> 00:03:05,800 మీరు ఈ అన్ని యెంత దారుణంగా వద్ద peeved కొద్దిగా పొందడానికి మొదలు కావచ్చు. 48 00:03:05,800 --> 00:03:09,810 మీరు పేజీపై ప్రతి మూలకం కోసం దీన్ని కలిగి ఉంటే, ఇమాజిన్ 49 00:03:09,810 --> 00:03:13,690 ప్లస్ ఇప్పుడు మీ HTML మరియు CSS అన్ని కలసిపోయిన మరియు చిందరవందర ఉంటాయి. 50 00:03:13,690 --> 00:03:15,500 స్థూల, కుడి? 51 00:03:15,500 --> 00:03:21,110 ఈ పరిష్కరించడానికి, ప్రజలు చివరికి వారి HTML మార్కప్ వేరు లో పట్టుకోవడంలో ప్రారంభించారు 52 00:03:21,110 --> 00:03:26,370 CSS సెలెక్టర్లు అనే ఉపయోగించి వారి CSS స్టైలింగ్ నుండి. 53 00:03:26,370 --> 00:03:31,780 CSS సెలెక్టర్లు ఇది ప్రకటనలు వర్తించే అంశాలు ఎంచుకోండి ఉపయోగిస్తారు. 54 00:03:31,780 --> 00:03:38,600 CSS ప్రకటనల జాబితా కలిపి సెలెక్టర్ తరచుగా ఒక CSS నియమంగా సూచిస్తారు. 55 00:03:38,600 --> 00:03:43,260 ఈ నియమాలు, తెరుచుకుంటాయి మరియు మూసుకుంటాయి HTML శైలి పట్టీలు మధ్య ఉంటుందని 56 00:03:43,260 --> 00:03:46,120 తరచుగా పత్రం యొక్క తల. 57 00:03:46,120 --> 00:03:49,000 >> ఇది, ఒక ఉదాహరణ తో చూడటానికి చాలా సులభం 58 00:03:49,000 --> 00:03:53,000 కాబట్టి ఒక సాధారణ CSS పాలన సృష్టించడం ద్వారా ప్రారంభిద్దాం. 59 00:03:53,000 --> 00:03:58,180 మొదటి, యొక్క మా HTML యొక్క భాగంలో శైలి పట్టీలు చాలు తెలపండి. 60 00:03:58,180 --> 00:04:00,020 తరువాత, సెలెక్టర్. 61 00:04:00,020 --> 00:04:03,490 మేము సాధారణ సెలెక్టర్లు ఒకటి, హాష్ చిహ్నం ఉపయోగించి ఆఫ్ మొదలు పెడతారేమో 62 00:04:03,490 --> 00:04:08,080 ఇది దాని ID గుణం ద్వారా ఒక HTML మూలకం ఎంపిక. 63 00:04:08,080 --> 00:04:11,850 ఈ సందర్భంలో మేము రాబ్ పరిచయం ప్రాతినిధ్యం div ఎంచుకోండి చేస్తాము 64 00:04:11,850 --> 00:04:16,740 div యొక్క ID, రాబ్ తరువాత హాష్ చిహ్నం టైప్ చేసి. 65 00:04:16,740 --> 00:04:18,579 ఇప్పుడు ప్రకటనలు. 66 00:04:18,579 --> 00:04:24,090 మేము తెరుచుకుంటాయి మరియు మూసుకుంటాయి జంట కలుపులు జోడించడానికి మరియు రాబ్ యొక్క div మా ముందు ఇన్లైన్ ప్రకటనలు మారవచ్చు 67 00:04:24,090 --> 00:04:26,880 ఈ జంట కలుపులు లోపలి రిఫ్రెష్, 68 00:04:26,880 --> 00:04:34,160 మరియు, చల్లని, రాబ్ యొక్క పరిచయ ఇప్పటికీ చుట్టూ నల్ల అంచు మైనస్ దారుణంగా ఇన్లైన్ వికార స్వరూపము ఉంది. 69 00:04:34,160 --> 00:04:39,380 >> ఇప్పుడు, మేము రాబ్ యొక్క పరిచయ యొక్క h1 లోపల ఎంచుకోండి కోరుకుంటే? 70 00:04:39,380 --> 00:04:44,400 మీరు "యొక్క అది ఒక ID ఉంచి మా ముందు శైలులు తరలించడానికి లెట్.", అనుకుంటున్నాను ఉండవచ్చు 71 00:04:44,400 --> 00:04:48,760 ఆ పని, కానీ CSS మీరు అంశాలు ఎంచుకోండి తెలియజేసినందుకు ఇతర మార్గాలు ఉన్నాయి 72 00:04:48,760 --> 00:04:53,490 మేము combinators సాధారణ సెలెక్టర్లు మిక్స్ కాల్ ఏమి ఉపయోగించి. 73 00:04:53,490 --> 00:04:57,740 ఉదాహరణకు, ఒక తెల్లని పాత్ర combinator ఉపయోగించవచ్చు 74 00:04:57,740 --> 00:05:03,510 మరొక సెలెక్టర్ లోపలి జీవిస్తున్న 1 సెలెక్టర్ అన్ని సందర్భాల్లో తెలుపుటకు. 75 00:05:03,510 --> 00:05:06,630 అది నిజానికి కంటే చాలా క్లిష్టమైన ధ్వనులు. 76 00:05:06,630 --> 00:05:08,830 ఇక్కడ ఒక ఉదాహరణ వార్తలు. 77 00:05:08,830 --> 00:05:13,900 మేము #, దోచుకుంటున్నారని ఒక ఖాళీని జోడించడానికి, మరియు ఒక h1 అది అనుసరించండి టైప్ ఉంటుంది 78 00:05:13,900 --> 00:05:18,840 మరొక సాధారణ సెలెక్టర్ అంశాల రకాల ఎంపిక చేసే ట్యాగ్ సెలెక్టర్ అని 79 00:05:18,840 --> 00:05:21,200 divs లేదా పేరాలు వంటి. 80 00:05:21,200 --> 00:05:26,140 స్పేస్ అన్ని CSS ప్రకటనలు దరఖాస్తు, మా 2 సాధారణ సెలెక్టర్లు మిళితం 81 00:05:26,140 --> 00:05:32,560 మరియు ID = "రాబ్" తో మూలకం లోపలి నివసించే h1 ట్యాగ్లను గిరజాల కలుపులు. 82 00:05:32,560 --> 00:05:38,290 అది పనిచేస్తుంది మీరు ఒప్పించేందుకు, నేను తెలుపు, రిఫ్రెష్, ఫాంట్ను రంగు మారుస్తాము 83 00:05:38,290 --> 00:05:42,090 మరియు, చూడండి, రాబ్ యొక్క శీర్షిక ఇప్పుడు తెలుపు. 84 00:05:42,090 --> 00:05:47,510 >> ఈ కృతి యొక్క అన్ని నిబంధనలను బదులుగా ఇన్లైన్ శైలులు ఉపయోగించి ఆ చూపించు వెళ్తాడు 85 00:05:47,510 --> 00:05:50,510 మేము చాలా శుభ్రంగా కోడ్ పొందవచ్చు. 86 00:05:50,510 --> 00:05:53,900 ఈ శైలి బ్లాక్ మొదలవుతుంది ఉంటే నిజానికి, కొద్దిగా పెద్ద పొందడానికి 87 00:05:53,900 --> 00:05:58,340 నేను కూడా పూర్తిగా వేర్వేరు ఫైల్ ఈ శైలులు ఉపసంహరించుకునేలా చెయ్యవచ్చు. 88 00:05:58,340 --> 00:06:05,120 >> ఈ పత్రంలో CSS ఈ కొత్త ఫైలు చేర్చడానికి నేను HTML యొక్క లింక్ ను ఉపయోగిస్తారు చేస్తాము. 89 00:06:05,120 --> 00:06:10,320 ఇక్కడ నేను, నేను ఒక బాహ్య శైలి షీట్ లో లింక్ వెబ్ ఆ rel లక్షణం అది చెప్పడం వెబ్ 90 00:06:10,320 --> 00:06:14,840 మరియు నా href లక్షణం ఫైల్ మార్గం పేర్కొనండి. 91 00:06:14,840 --> 00:06:20,290 ఇప్పుడు నా HTML మార్కప్ మరియు CSS, పూర్తిగా ప్రత్యేక ఫైళ్ళలో చక్కగా నిర్వహిస్తారు 92 00:06:20,290 --> 00:06:26,090 ఇది దాదాపు ఎల్లప్పుడూ డిజైనర్లు HTML మరియు CSS తో పని ఇష్టపడతారు మార్గం. 93 00:06:26,090 --> 00:06:30,180 >> మీరు wondering మీరు సందర్భంలో, సాధారణ సెలెక్టర్లు ID సెలెక్టర్లు ఉన్నాయి 94 00:06:30,180 --> 00:06:33,100 మేము ఇప్పుడు చూసిన మాదిరిగా మరియు టాగ్ సెలెక్టర్లు 95 00:06:33,100 --> 00:06:38,610 అలాగే తరగతి ఒక నిర్దిష్ట తరగతికి తో అంశాలు ఎంచుకోవడం కోసం సెలెక్టర్లు, 96 00:06:38,610 --> 00:06:44,000 రకం వంటి ఇతర లక్షణాలు ద్వారా అంశాలు ఎంచుకోవడం కోసం గుణం సెలెక్టర్లు = "రేడియో" 97 00:06:44,000 --> 00:06:49,180 రేడియో బటన్ ఇన్పుట్లను, మరియు వంటి pseudoselectors కోసం హోవర్ మరియు దృష్టి 98 00:06:49,180 --> 00:06:55,260 పరస్పర ఒక మూలకం జరుగుతాయి పైగా mousing ఇష్టపడినప్పుడు స్టైలింగ్ పేర్కొనడం కోసం. 99 00:06:55,260 --> 00:06:58,950 >> సాధారణ combinators అన్ని పిల్లలకు తెల్లని ఉన్నాయి 100 00:06:58,950 --> 00:07:02,080 మరియు కామాలతో సెలెక్టర్లు పిలిచేవారు. 101 00:07:02,080 --> 00:07:06,370 మీరు ఎదుర్కొనే ఇతరులకు మాత్రమే ప్రత్యక్ష పిల్లలకు బాణం ఉన్నాయి 102 00:07:06,370 --> 00:07:10,440 మూలకం తర్వాత సంభవించే అన్ని తోబుట్టువుల కోసం tilde, 103 00:07:10,440 --> 00:07:16,010 మరియు మూలకం వెంటనే వస్తుంది 1 తోబుట్టువు కోసం ప్లస్ సైన్. 104 00:07:16,010 --> 00:07:18,540 >> ఈ సెలెక్టర్లు మరియు combinators కలపడం ద్వారా, 105 00:07:18,540 --> 00:07:22,910 మీరు ఒక వెబ్ పేజీలో సాధించింది స్టైలింగ్ పరిధి విస్తృతం చేసుకోవచ్చు 106 00:07:22,910 --> 00:07:25,050 మరియు మరింత సమర్థవంతంగా CSS వ్రాయండి. 107 00:07:25,050 --> 00:07:28,370 మీరు నన్ను ఇక్కడ టైప్ చూడండి CSS రేఖలు కేవలం ఒక జంట తో, 108 00:07:28,370 --> 00:07:34,460 నేను త్వరగా ఈ వంటి ఏదో వంటి ఈ లుక్ వంటి ఏదో చేయవచ్చు. 109 00:07:34,460 --> 00:07:37,080 >> నేను జోసెఫ్ రెడీ, మరియు ఈ CS50 ఉంది. 110 00:07:37,080 --> 00:07:39,260 >> [CS50.TV] 111 00:07:39,260 --> 00:07:40,780 >> ఉహ్, నేను ఎక్కడ మొదలు లేదు? 112 00:07:40,780 --> 00:07:44,140 [నవ్వుతూ] సరే - నాకు లేని అన్నారు. 113 00:07:44,140 --> 00:07:47,300 ఒక జోడించు - నాకు ఆ పదాలు మార్చడానికి లెట్. 114 00:07:50,580 --> 00:07:52,470 Ooh. క్షమించాలి.