[Powered by Google Translate] [CSS] [ஜோசப் ஆங் - ஹார்வர்ட் பல்கலைக்கழகம்] [இந்த CS50 உள்ளது. - CS50.TV] 

இன்று நாம் CSS பற்றி பேசி அல்லது நடைதாள்கள். 

எனவே CSS சரியாக என்ன? நன்றாக, 2 பகுதிகளாக கீழே கால CSS உடைக்க அனுமதிக்க: விழுத்தொடர் மற்றும் நடைதாள்களைக். விழுத்தொடர் சிறிது மிகவும் சிக்கலான உள்ளது, மற்றும் நாம் மற்றொரு வீடியோ மூடலாம் விஷயம். ஆனால் முதல் முறையாக, நடைதாள்களைக் CSS என்ன நேரத்தில் மிகவும் குறிப்புகள். இது, ஒரு வலை பக்கத்தின் HTML ஸ்டைல்கள் சேர்க்கிறது வலைப்பக்கத்தில் aesthetically எப்படி மாறும். இந்த பக்கத்தில் உரை எழுத்துரு உள்ளடக்கத்தை பொருத்துதல் எல்லாமும் வட்டமான ஒரு பெட்டியில் மூலைகள் செய்யும் அல்லது உரை நிழல்கள் சேர்த்து போன்ற மற்ற குளிர் விஷயங்களை. விஷயங்களை திரையில் உயிருள்ள செய்ய நீங்கள் கூட பைத்தியம் விஷயங்களை செய்ய முடியும். 

நாம் HTML உடன் CSS எப்படி பயன்படுத்துவது? நான் எழுதிய இந்த ஏழை காணப்படும் தளத்தில் எடுத்து. ராப் இப்போது இந்த தளத்தில் பார்த்து இருந்தால், அவர் ஒருவேளை, ஏதாவது சொல்ல விரும்புகிறேன் "ஓ! என் அறிமுகம் கொடூரமான தெரிகிறது. ஜோசப், நீங்கள் ஒரு மோசமான வடிவமைப்பாளர் இருக்கிறோம்." "இயல்புநிலை டைம்ஸ் எழுத்துரு பயன்படுத்தி? ஹெல்வெடிகா மிகவும் நன்றாக உள்ளது." 

அதனால் என்ன ராப் விரும்புகிறது ஸ்டைலிங் விண்ணப்பிக்க எளிய வழி இருக்கும்? மக்கள் மிக தெளிவான முறையில் நிறைய ஆரம்பத்தில் CSS எழுதினார் உறுப்பு தன்னை நாம் பாணி அறிவிப்புக்கள் அழைத்தால் என்ன செய்ய இருந்தார் HTML வகை பண்பு பயன்படுத்தி. ஒரு பாணி அறிவிப்பு வெறுமனே HTML உறுப்பு நாட்டின் CSS சொத்து கொண்டிருக்கும் நாம் மாற்ற வேண்டும் இறுதியில் சொத்து மற்றும் ஒரு அரைக்காற்புள்ளி புதிய மதிப்பு தொடர்ந்து ஒரு பெருங்குடல் தொடர்ந்து. உதாரணமாக, நாம் ராப் அவரது அறிமுகம் சுற்றி ஒரு கருப்பு எல்லை விரும்புகிறார் என்று. நாம் முதலில் இங்கே ராப் தான் DIV மீதான பாணி பண்பு வைத்து பின்னர் இரட்டை மேற்கோளில் உள்ளே ஒரு CSS அறிவிப்பு வைத்தது: "எல்லை: 1px திட கருப்பு;" 1 பிக்சல் எல்லை அகலம் குறிக்கிறது, திட, எல்லை பாணியில் குறிக்கிறது மற்றும் இறுதியில் வண்ண எல்லை இன் நிறம் என்ன தீர்மானிக்கிறது. 

நாம் ஒரு உறுப்பு பல வடிவங்களில் விரும்பினால், வரிசையில் இந்த அறிவிப்புக்கள் எழுத. எடுத்துக்காட்டாக, ராப் நீல பின்னணியில் ஹெல்வெடிகா அவரது தலைப்பு உரை விரும்பினால் உரை சுற்றி அதிக இடம், நாம் இதை செய்ய முடியும்: பாணி = "எழுத்துரு-குடும்பத்தை: ஹெல்வெடிகா; பின்னணி வண்ண: நீல; திணிப்பு: 5px;" கடந்த அரைக்காற்புள்ளி உண்மையில் விரும்பினால், ஆனால் மக்கள் வழக்கமாக நிலைத்தன்மையும் பொருட்டு அதை வைத்து. 

நாம் குளிர்ந்த மற்றும் மிகவும் சிக்கலான CSS பண்புகள் சில விளக்கி காப்பாற்ற வேண்டும் மற்றொரு வீடியோ. நீங்கள் மனதில் ஏதாவது இருந்தால், வெறும் CSS தொடர்ந்து நீங்கள் விரும்பும் விளைவை தொடரவும் ஒருவேளை நீங்கள் நல்ல முடிவு கொடுக்கும். குளிர் விஷயம், CSS அழகான பரந்த உள்ளது நீங்கள் செய்ய வேண்டும் ஏதாவது இருந்தால் மிகவும் பிரச்சனைகளுக்கும் உள்ளன - காரணம் இருக்கும் - CSS ஒருவேளை அதை செய்ய முடியும். நாம் இன்லைன் ஸ்டைலிங் பாணியை இந்த வகையான அழைக்கிறோம். உறுப்பு பாணி தொடக்க குறிச்சொல் ஏற்ப, நன்றாக உள்ளது. 

உண்மையில் ஏற்பாடு செய்ய பிடிக்கும் எல்லோரும் ஐந்து, இந்த அனைத்து எப்படி அழுக்காக்கி மணிக்கு சலிப்பை ஒரு சிறிய பெற தொடங்கலாம். நீங்கள் பக்கத்தில் ஒவ்வொரு உறுப்பு செய்ய வேண்டியிருந்தது என்றால், கற்பனை பிளஸ் இப்போது உங்கள் HTML மற்றும் CSS அனைத்து intermixed மற்றும் அடைக்கப்பட்டுள்ளது. மொத்த, சரியான? இதை சரிசெய்ய, மக்கள் இறுதியில் தங்கள் HTML மார்க்கப் பிரிக்கும் மீது பிடித்துக்கொண்டு தொடங்கியது CSS தேர்வாளர்கள் என்று ஏதாவது பயன்படுத்தி தங்கள் CSS ஸ்டைலிங் இருந்து. CSS தேர்வாளர்கள் இது அறிவிப்புக்கள் பயன்படுத்த வேண்டும் கூறுகள் தேர்வு பயன்படுத்தப்படுகின்றன. CSS அறிவிப்புக்கள் பட்டியலை இணைந்து ஒரு தேர்வுக்குழு பெரும்பாலும் CSS ஆட்சி என குறிப்பிடப்படுகிறது. இந்த விதிகள், திறந்த மற்றும் நெருங்கிய HTML வகை குறிச்சொற்களை இடையே வைத்து பெரும்பாலும் ஆவணத்தின் தலை. 

இது, ஒரு எடுத்துக்காட்டாக பார்க்க மிகவும் எளிதாக இருக்கிறது எனவே ஒரு எளிய CSS ஆட்சி உருவாக்குவதன் மூலம் ஆரம்பிக்கலாம். முதல், நாம் HTML தலைவர் பிரிவில் பாணி குறிச்சொற்களை வைத்து நாம். அடுத்த, தேர்வுக்குழு. நாம் எளிய தேர்வாளர்கள் ஒரு ஹாஷ் சின்னமாக, பயன்படுத்தி துவங்க வேண்டும் அதன் ஐடி பண்பு மூலம் ஒரு HTML உறுப்பு தெரிவு. இந்த விஷயத்தில் நாம் ராப் அறிமுக பிரதிபலிக்கிறது என்று DIV தேர்ந்தெடுக்க வேண்டும் கிராம அடையாள, ராப் தொடர்ந்து புல சின்னமாக தட்டச்சு. இப்போது அறிவிப்புக்கள். நாம் திறந்த மற்றும் நெருங்கிய பிரேஸ்களான சேர்க்க மற்றும் ராப் தான் DIV எங்கள் முந்தைய இன்லைன் அறிவிப்புக்கள் மாற்ற இந்த ப்ரேஸ்களை உள்ளே, புதுப்பித்தல், மேலும், குளிர், ராப் என்ற அறிமுக இன்னும் அதை சுற்றி ஒரு கருப்பு எல்லை கழித்து அழுக்காக்கி இன்லைன் அருவருப்பு உள்ளது. 

இப்போது, நாம் ராப் என்ற அறிமுக என்ற H1 உள்ளே தேர்ந்தெடுக்க விரும்பினால்? நீங்கள் "அது ஒரு ஐடி வைத்து பின்னர் எங்கள் முந்தைய பாணியை செல்லலாம்.", நினைக்கலாம் அந்த வேலை, ஆனால் CSS நீங்கள் கூறுகள் தேர்வு விடாமல் மற்ற வழிகள் உள்ளன நாம் combinators எளிய தேர்வாளர்கள் கலந்து அழைக்க என்ன பயன்படுத்தி. உதாரணமாக, ஒரு இடைவெளி பாத்திரம் ஒரு combinator பயன்படுத்தலாம் மற்றொரு தேர்வுக்குழு உள்ளே வாழும் 1 தேர்வுக்குழு அனைத்து நிகழ்வுகளையும் குறிப்பிட. அது உண்மையில் விட மிகவும் சிக்கலான போகிறது. இங்கே ஒரு எடுத்துக்காட்டு. நாம் #, திருட ஒரு இடத்தை சேர்க்க, மற்றும் ஒரு H1 அதை பின்பற்ற கொள்வோம் மற்றொரு எளிய தேர்வுக்குழு கூறுகள் வகையான தேர்ந்தெடுக்க வேண்டும் என்று ஒரு டாக் தேர்வுக்குழு என்று divs அல்லது பத்திகள் போன்ற. விண்வெளி அனைத்து CSS அறிவிப்புக்கள் விண்ணப்பிக்கும், எங்கள் 2 எளிய தேர்வாளர்கள் ஒருங்கிணைக்கிறது மற்றும் ஐடி = "ராப்" உறுப்பு உள்ளே வாழும் H1 குறிச்சொற்களை செய்ய சுருள் பிரேஸ்களான. அதை வேலை என்று நீங்கள் சமாதானப்படுத்த, நான் வெள்ளை, புதுப்பிப்பு, இந்த வண்ணத்தை மாற்ற வேண்டும் மேலும், பார், ராப் என்ற தலைப்பு இப்போது வெள்ளை. 

இந்த வேலை எல்லாம் விதிகள் பதிலாக இன்லைன் பாணியை பயன்படுத்தி என்று காட்ட போகிறது நாங்கள் மிகவும் தூய்மையான குறியீடு பெற முடியும். இந்த பாணி தொகுதி தொடங்குகிறது என்றால், உண்மையில், கொஞ்சம் பெரிய பெறுவது நான் கூட முற்றிலும் வேறு கோப்பு இந்த பாணியை வெளியே இழுக்க முடியும். 

இந்த ஆவணத்தில் CSS இந்த புதிய கோப்பு சேர்க்க நான் HTML இன் இணைப்பை டேக் பயன்படுத்த வேண்டும். இங்கே நான், நான் ஒரு வெளிப்புற நடை தாள் உள்ள இணைக்கும் என்று நான் ரெல் பண்பு சொல்கிறேன் என் படம் பண்புடன் கோப்பு பாதையை குறிப்பிடாமல். இப்போது என் HTML மார்க்கப் மற்றும் CSS, முற்றிலும் தனி கோப்புகளில் நன்றாக ஏற்பாடு இது எப்போதும் வடிவமைப்பாளர்கள் HTML மற்றும் CSS வேலை விரும்பினால் வழி. 

நீங்கள் என்ன செய்கிறீர்கள் வழக்கில், எளிய தேர்வாளர்கள் ஐடி தேர்வாளர்கள் அடங்கும் நாம் கண்டது தான் போன்ற மற்றும் டாக் தேர்வாளர்கள் அத்துடன் வர்க்கம் ஒரு குறிப்பிட்ட வர்க்கம் கொண்ட தனிமங்களின் தேர்வு தேர்வாளர்கள், வகை போன்ற பிற பண்புகளை மூலம் கூறுகள் தேர்வு பண்பு தேர்வாளர்கள் = "ரேடியோ" ரேடியோ பொத்தானை உள்ளீடுகள், மற்றும் போன்ற pseudoselectors ஐந்து படல் மற்றும் கவனம் பரஸ்பர ஒரு உறுப்பு ஏற்படும் மீது mousing பிடிக்கும் போது ஸ்டைலிங் குறிப்பிடாமல் ஐந்து. 

பொது combinators அனைத்து குழந்தைகளுக்கும் இடைவெளி அடங்கும் மற்றும் முகவரிகள் தேர்வாளர்கள் வேறுபடுத்தி. நீங்கள் சந்திப்பதில்லை இருக்கலாம் மற்றவர்கள் மட்டுமே நேரடி குழந்தைகள் அம்புக்குறி அடங்கும் உறுப்பு பிறகு ஏற்படும் அனைத்து உடன்பிறந்தவர்கள் ஐந்து டில்டே, மற்றும் உறுப்பு உடனடியாக வரும் என்று 1 உடன்பிறப்பு ஐந்து கூட்டல். 

இந்த தேர்வாளர்கள் மற்றும் combinators இணைப்பதன் மூலம், நீங்கள் ஒரு குறிப்பிட்ட வலைப்பக்கத்தில் அடைய முடியும் ஸ்டைலிங் வரை விரிவுபடுத்த முடியும் மேலும் திறம்பட CSS எழுத. நீங்கள் என்னை இங்கே தட்டச்சு பார்க்க CSS வரிகளை ஒரு ஜோடி இணைந்து, நான் விரைவில் இந்த போல இந்த தோற்றம் போன்ற ஏதாவது செய்ய முடியும். 

நான் ஜோசப் இருக்கிறேன், இந்த CS50 உள்ளது. 

[CS50.TV] 

ஓ, நான் எங்கு தொடங்க வேண்டும்? [சிரிக்கிறார்] சரி - என்னை இல்லாமல் அதை செய்ய விடுங்கள். ஒரு சேர்க்க - எனக்கு அந்த வார்த்தைகளை மாற்ற வேண்டும். ஓ. மன்னிக்கவும்.