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

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

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

நாம் 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 எளிய தேர்வாளர்கள் ஒருங்கிணைக்கிறது மற்றும் id = "ராப்" உறுப்பு உள்ளே வாழும் h1 குறிச்சொற்களுக்கு சுருள் ப்ரேஸ். அதை வேலை என்று நீங்கள் நம்ப வேண்டும், நான் வெள்ளை, புதுப்பித்தல், இந்த வண்ணத்தை மாற்ற வேண்டும் மற்றும், ஆனால், ராப் என்ற தலைப்பு இப்போது வெள்ளை. 

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

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

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

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

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

நான் ஜோசப் தான், இந்த CS50 உள்ளது. 

[CS50.TV] 

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