>> [संगीत खेल]
एलीसन BUCHHOLTZ-ए.यू.: तो हम मूल रूप से बस जा रहे हैं
यदि आप एक ठहरनेवाला देने के लिए सीएसएस की, क्योंकि हम जानते हैं
इसे कवर नहीं किया गया था कि सभी वर्गों में।
और हम वास्तव में यकीन है कि बनाने के लिए चाहते हैं दोस्तों, अपने निपटान में इस उपकरण
इसे बनाने के लिए की क्षमता है क्योंकि अपनी वेबसाइटों बहुत सुंदर लग रही हो।
>> और तुम तो, एक वेबसाइट का निर्माण कर रहे हैं आप शायद यह सुंदर बनाना चाहते हैं।
मेरा मतलब है, आप के लिए नहीं है, लेकिन मैं यह सुझाव था। [हंसते हुए]
आप उपयोगकर्ताओं के लिए यह प्रयोग करना चाहते हैं, तो आप कर सकते हैं यह एक छोटे से [अश्राव्य] बनाना चाहते हैं।
इसलिए हम कोशिश करते हैं और आप सिर्फ देने के लिए जा रहे हैं कुछ बुनियादी उपकरणों और समझ,
इतना है कि आप बाहर जाने के लिए और आप कर रहे हैं जब सीएसएस के बारे में बातें शोध,
यह अस्पष्ट पूरा नहीं हुआ है, सीएसएस की तरह कभी कभी हो।
>> टॉमस Reimers: हाँ।
एलीसन बहुत अच्छी तरह से यह कहा।
इसलिए मैं पहली बात यह है कि हम अनुमान सीएसएस क्या है के साथ शुरू करना चाहिए?
तो सीएसएस भयानक है।
CSS--
>> एलीसन BUCHHOLTZ-ए.यू.: यह है हमारे संगोष्ठी का नाम है।
>> टॉमस Reimers: हाँ।
ऐसा लगता है कि वास्तव में महत्वपूर्ण है आप फिर से समझते हैं।
आप केवल एक ही दूर ले भयानक अगर बात यह है कि सीएसएस है।
दो सीएसएस के लिए खड़ा है व्यापक स्टाइल शीट्स।
तो इसके मूल में, सीएसएस है जिसका अर्थ है एक शैली पत्रक,
यह आप एक वेब पेज शैली के लिए अनुमति देता है।
और फिर क्या इसका मतलब है, यह है एक जिस तरह से अपनी वेबसाइट के लिए शैली को जोड़ने के लिए।
शैली के द्वारा, हम सब कुछ मतलब कि structural-- नहीं है
इसलिए रंग की तरह बातें, पृष्ठभूमि छवियों, सीमाओं, जैसे, गद्दी,
हाशिये।
हम इस बारे में बात करेंगे क्या सब है कि एक बिट में मतलब है।
>> तो हम बस आगे चला गया है और एडिट में उन दोनों के स्तर पर खुला।
तो यह index.html है।
और इस main.css है।
तो main.css कुछ भी नहीं है।
एलीसन BUCHHOLTZ-ए.यू.: अब तक कोई शैली।
टॉमस Reimers: कोई नहीं।
जैसा कि आप देखेंगे और, यह है एक बहुत बदसूरत साइट।
एलीसन BUCHHOLTZ-ए.यू.: यह सिर्फ सादा है।
टॉमस Reimers: हाँ।
हाँ, यह बदसूरत नहीं है यह सिर्फ न्यूनतावादी है।
और फिर यहाँ हम सूचकांक है।
और इसलिए एक त्वरित के लिए एचटीएमएल, एलीसन की आवृत्ति,
आप बस पृष्ठ के बारे में बात करना चाहते हैं?
>> एलीसन BUCHHOLTZ-ए.यू.: हाँ।
तो जाहिर है, हम अपने एचटीएमएल है टैग, जो सिर्फ नाम HTML फ़ाइल।
हम सीएसएस के साथ, हमारे यहाँ शीर्षक है Awesomeness, which-- तुम वापस जाना है।
वह कहां है?
>> टॉमस Reimers: ओह।
हाँ, आप देख सकते हैं।
एलीसन BUCHHOLTZ-ए.यू.: और हैडर नोटिस
सही यहाँ इस टैब शीर्षक है।
और फिर "हैलो, दुनिया!" होती हे हम सिर्फ यह है कि पाठ
वेब पर प्रदर्शित वापस जाने के is-- जो पृष्ठ।
वापस।
जो सिर्फ हमारे शरीर में है सादा पाठ here--।
इसके अलावा, एक बात करने के लिए आप यहाँ देखो, नोटिस,
टॉमस इन ऊपर बंद कर हमारे स्लाइड से दो।
तो जब तक आप सभी के रूप में इनमें से तीन, आप ठीक कह रहे हैं।
उन्होंने कहा कि वे चाहते हैं कि जो कुछ भी क्रम में हो सकता है।
क्या सबसे महत्वपूर्ण बात यह है कि बस आप उन तीन बातों में से एक है।
>> टॉमस Reimers: कूल।
एक डॉक्टर प्रकार जोड़ें?
एलीसन BUCHHOLTZ-ए.यू.: हाँ।
टॉमस Reimers: हाँ।
बिंदास।
एलीसन BUCHHOLTZ-ए.यू.: जाहिर है, मेरे mics के मुझे पसंद नहीं है।
टॉमस Reimers: ओह, बस हमें एक सेकंड दे एलीसन उसे mic के बाहर स्विच करते हुए।
तो हाँ।
इसलिए हम अपने मुख्य पृष्ठ है।
यह unstyled की तरह है।
हम ज्यादा नहीं है।
हम सिर्फ मूल रूप से पाठ है।
हम शैली पत्रक है।
हम शीर्षक है।
तो बस-नंगे चोरी घटकों के लिए एक वेबसाइट बनाने के।
>> तो वहाँ से, चलो सीएसएस क्या है के बारे में बात करते हैं
और यह पसंद है और है कि सभी को लग रहा है।
तो that-- के लिए
एलीसन BUCHHOLTZ-ए.यू.: वापस स्लाइड के लिए।
टॉमस Reimers: स्लाइड्स पर वापस।
और एलीसन पर ले जा सकते।
>> एलीसन BUCHHOLTZ-ए.यू.: वू।
ठीक है।
, अपने सीएसएस फ़ाइल में तो आपके पास करने के लिए जा रहे हैं
इन चीजों की एक बहुत चयनकर्ताओं बुलाया।
वह सिर्फ होगी अपने सीएसएस फ़ाइल का आधार है।
यह सिर्फ होने जा रहा है बहुत सारे और इनमें से बहुत सारे।
तो चयनकर्ता।
यह सिर्फ सामान्य शरीर रचना है।
हम के माध्यम से जाने के लिए जा रहे हैं उदाहरण हैं, क्योंकि अगर तुम लोगों को कभी नहीं
मैं महसूस करता हूँ, मेरे अनुभाग देखा सार में चीजों की तरह
वास्तव में कोई मतलब नहीं है।
यह हमेशा उदाहरण देखने के लिए मदद करता है।
>> इसलिए हम कुछ चयनकर्ता है।
उस के लिए कुछ पहचानकर्ता होने जा रहा है हम क्या चाहते हैं शैली को लागू करने के लिए।
और फिर हम किसी भी हो सकता है नियमों और मूल्यों की स्थापना की।
आप देख सकते हैं कि चयनकर्ताओं तो शरीर की तरह कुछ हो सकता है,
या पी के साथ पैरा, या शीर्षक, या जो भी हो,
जो कुछ भी आप अपने एचटीएमएल टैग होना चाहते हैं।
>> इस मामले में तो, हम शरीर है।
और हम कुछ नियम है, जो इस मेल खाती है
क्या करने के लिए अपनी शैली के लिए लागू होता है।
तो इस मामले में, हम हैं पृष्ठभूमि रंग और फ़ॉन्ट वजन।
तो यह बदलने जा रहा है कुछ भी की पृष्ठभूमि
हमारे HTML फ़ाइल के किसी भी शरीर टैग के भीतर।
और इसे देने के लिए जा रहा है यह इस हल्के नीले रंग मूल्य।
>> इसलिए इसे बनाने के लिए जा रहा है पृष्ठभूमि हल्के नीले रंग की।
और फिर शरीर के भीतर कुछ भी है बोल्ड एक फ़ॉन्ट वजन के लिए जा रहा।
तो यह सिर्फ करने के लिए जा रहा है हमारे पाठ की सारी बोल्ड।
और यह सिर्फ एक चयनकर्ता है।
लेकिन अगर आप इनमें से बहुत सारे हो सकता था।
और हम दिखाने के लिए जा रहे हैं के रूप में बाद में, एक छोटा सा और कैसे में
वहाँ काम करता है और अधिक उदाहरण हैं।
आप जोड़ना चाहते हैं कुछ भी?
>> टॉमस Reimers: नहीं
एलीसन मिल गया।
हम सिर्फ एक को काटने के लिए जा रहे हैं हमारे यहाँ उदाहरण साइट पर उदाहरण।
तो चलो वास्तव में इस लेते हैं।
यह एकदम सही है।
तो मैं बस कॉपी और पेस्ट करने के लिए जा रहा हूँ हमारे main.css फ़ाइल में है कि सही।
और मैं इसे बचाने के लिए जा रहा हूँ।
और फिर हम यह चलेगा।
इसलिए तरफ ध्यान दें, में से एक सबसे अधिक निराशा बातें
यदि आप एक फ़ाइल को बचाने के लिए, और नहीं है अगर तो आप की तरह, पृष्ठ पुनः लोड,
और इस तरह, क्यों नहीं है हो रहा परिवर्तन?
ऐसा होता है।
यहाँ तो हम हम बनाया देखा कि हमारे एक हल्के नीले रंग की पृष्ठभूमि वेबसाइट
और कुछ पाठ बोल्ड।
>> मैं यह भी उल्लेख करना चाहिए आप अगर लोग कुछ के बारे में सवाल है,
हम क्या कर रहे हैं, लगता है कृपया हमें मुक्त करो और हमें पूछने के लिए।
हम पूरी तरह से तैयार हैं सवालों के क्षेत्र।
>> जाहिर है, साथ: एलीसन BUCHHOLTZ-ए.यू. सीएसएस, सब कुछ खुद पर बनाता है।
एक बात नहीं करता है तो अगर , अब समझ कर हम
नहीं करना चाहती है कि बाद में आप नीचे दलदल से।
>> टॉमस Reimers: तो चलो एक तरह से इस काटना।
तो क्या आप शुरू करने के लिए करना चाहते हैं यहाँ चयनकर्ता के साथ?
>> एलीसन BUCHHOLTZ-ए.यू.: हाँ।
मैं पहले कह रहा था, शरीर यहाँ सिर्फ हमारे चयनकर्ता है।
इसलिए हम अपने index-- आह वापस करने के लिए खत्म हो जाना है।
>> टॉमस Reimers: मैं बस बंद हुआ।
मुझे एक दूसरी दे।
इसलिए सूचकांक, खुली फ़ाइल।
एलीसन BUCHHOLTZ-ए.यू.: कूल।
तो तुम यहाँ नोटिस अगर, हम ठीक है, इन शरीर टैग नहीं है?
तो चयनकर्ता बस से मेल खाती है हम के बारे में बात कर रहे हैं कि टैग।
यहीं शरीर तो।
तो क्या हम कह रहे है everything-- हम वापस जा सकते हैं?
मुझे लगता है मैं सिर्फ पाती जैसे स्क्रीन को छूने।
यह इतना कूलर होगी।
>> उन के भीतर तो कुछ भी हमने देखा है, जो शरीर टैग,
, बस, जैसे, पाठ था और सामान्य रूप से शरीर
, जैसे, पृष्ठभूमि को दर्शाता है।
यदि आप कभी भी चाहते हैं पृष्ठभूमि में परिवर्तन,
एक शरीर है कि टैग में होने जा रहा है।
बस उन्हें लागू इन नियमों की है।
>> तो अगर हम करने के लिए जा रहे थे सूचकांक and-- वास्तव में,
हम कुछ कर सकते हैं शरीर के बाहर?
हम था, जैसे, एक पाद लेख या कुछ है, यह इस पर लागू नहीं होगा।
लेकिन भीतर कुछ भी इन शरीर टैग जा रहा है
इस शरीर से प्रभावित होने की हम बनाया है कि चयनकर्ता।
आप टाइप करने के लिए गए थे तो अगर कुछ और there--
>> टॉमस Reimers: चलो कि घर ड्राइव करते हैं।
तो अगर इतना है कि हम एक div-- था तुम हो सकता है सिर्फ एक और टैग।
मैं इसे बंद करने के लिए जा रहा हूँ।
या फिर इस एक पैरा बनाते हैं।
तो पी पैरा के लिए खड़ा है।
और कहा कि पैरा के भीतर।
और फिर मैं "यह पाठ है। कहते हैं,"
बिंदास।
और फिर मैं इस नियम को लागू कर दिया बजाय शरीर के एक पैरा।
आप इसे केवल के लिए लागू होता देखेंगे कि कैसे नवगठित पैरा, ठीक है,
पूरी बात नहीं।
कि मतलब?
>> एलीसन BUCHHOLTZ-ए.यू.: तो क्या यह सब शरीर है,
लेकिन अब हमारे चयनकर्ता बस पैरा से मेल खाती है।
तो हम बस बोल्ड और नीले रंग की है इस विशिष्ट पैराग्राफ के लिए,
इस एक ही बात है क्योंकि कि पी टैग के भीतर संलग्न है।
>> टॉमस Reimers: क्रमबद्ध कि मतलब है की कैसे चीजों को अन्य बातों के encapsulate?
एलीसन BUCHHOLTZ-ए.यू.: इसके अलावा, बस की तरह, एक बेहतरीन तरीके से कहने के लिए
वास्तव में सीएसएस के साथ आराम पाने के लिए सिर्फ इस तरह बातें करने के लिए किया जाता है,
बस इसे बाहर का प्रयास करें।
यह कुछ टाइप करने के लिए बहुत आसान है बाहर, ताज़ा मारा, और देखो क्या होता है।
और सबसे सीएस के साथ के रूप में, प्रयोग अक्सर कर सकते हैं
एक बेहतर करने के लिए नेतृत्व सहज ज्ञान युक्त समझ।
इससे भी अधिक अमेरिका की तुलना में सिर्फ जैसे, आप से बात कर।
>> टॉमस Reimers: बिल्कुल 100% कि बात पर सहमत हैं।
हम वापस इस पर जाने के लिए अगर तो, चलो शुरू करते हैं इन दो करना वास्तव में क्या विदारक।
इसलिए हम इस पर दो नियम हैं।
तो पहले एक पृष्ठभूमि रंग है।
और तुम हम यह निर्धारित किया है कि देखते हैं एक मूल्य के, हल्के नीले रंग के बराबर।
>> तो सीएसएस में, सीएसएस प्रकार है कैसे करें के बारे में बहुत ही ढीला
आप रंग को परिभाषित करने की अनुमति दी हो।
तो क्या आप उनके नाम से परिभाषित कर सकते हैं।
आप भी ऐसा कुछ कर सकते हैं "लाल।"
और हम यह करने के लिए वापस जाने के लिए तो अगर, आप पृष्ठभूमि लाल है कि देखेंगे।
आप यह भी मैं आपको लगता really-- प्राप्त कर सकते हैं इस के साथ बहुत रचनात्मक प्राप्त कर सकते हैं,
तुम नहीं कर सकते?
>> एलीसन BUCHHOLTZ-ए.यू.: मैं आप हेक्स का उपयोग कर सकते हैं।
तुम नहीं कर सकते?
>> टॉमस Reimers: हाँ।
तो अगर आप हेक्स उपयोग कर सकते हैं।
लेकिन मुझे लगता है कि नाम के लिहाज से सोच रहा हूँ।
वहाँ नहीं कर रहे हैं?
एलीसन BUCHHOLTZ-ए.यू.: आप काफी कुछ कर सकते हैं।
सबसे रंगों की तरह बहुत ज्यादा है कि आप जैसे name-- सकते हैं, मैं सामन एक है।
>> टॉमस Reimers: हम कोशिश करने वाला सामन कर रहे हैं।
एलीसन BUCHHOLTZ-ए.यू.: मैं षाट्रेज़ वहाँ में है।
टॉमस Reimers: हाँ।
देख?
तो तुम बहुत रचनात्मक प्राप्त कर सकते हैं।
>> एलीसन BUCHHOLTZ-ए.यू.: आप बहुत रचनात्मक हो सकता है।
की तरह, आप सोच सकते हैं अगर रंग का नाम है, यह वहाँ में शायद है।
आप वास्तव में ठीक चाहते हैं विस्तार, तुम हेक्स जा सकते हैं।
>> टॉमस Reimers: हाँ।
इसलिए हेक्साडेसिमल।
तुम लोग इस वापस याद है अपने पुराने PSET से, छवि ठीक हो,
तुम लोगों को सामना करना पड़ा इन हेक्स मूल्यों के साथ।
और तरह की, वह यह है कि क्या संक्षिप्त करने के लिए हेक्स में संग्रहित तीन मूल्यों है।
तो यह दो वेतन वृद्धि के समूह में है।
पहले दो लाल मूल्य का प्रतिनिधित्व करते हैं।
दूसरा एक का प्रतिनिधित्व करता है हरी मूल्य।
और पिछले एक नीले रंग की है?
>> तो एफएफ प्रतिनिधित्व करने के लिए होता है एक हेक्साडेसिमल 255।
तो अगर आप 255 लाल, 255 है नीले रंग के लिए हरे और 0।
और मूल्यों 0 और 255 के बीच सीमा होती है।
>> दर्शकों: ठीक है।
तो अनिवार्य रूप से, हम खोज सकता है हम चाहते हैं कि किसी भी रंग के लिए इंटरनेट,
और वास्तव में जाना जाता है की पहचान रंग स्पेक्ट्रम कॉम्बो,
और फिर हम में डाल सकता है?
एलीसन BUCHHOLTZ-ए.यू.: बिल्कुल।
तो अगर आप बहुत ज्यादा पूरा नियंत्रण है रंगों के साथ आप सीएसएस के भीतर चाहते हैं।
हम के बारे में बात करने जा रहे पृष्ठभूमि छवियों बाद में?
या फिर हम ऐसा करना चाहते हैं?
>> टॉमस Reimers: हाँ।
बिल्कुल।
तो सबसे पहले, सिर्फ दिखाने के लिए कि लाल और हरे रंग पीला है।
और अगर आप कुछ की जरूरत है इस खोजने में मदद की है, तो आप
गूगल कुछ कर सकते हैं "रंग बीनने।" की तरह
एलीसन BUCHHOLTZ-ए.यू.: ओह, यह बहुत अच्छा है।
मैं रंग बीनने प्यार करता हूँ।
>> टॉमस Reimers: colorpicker.com एक अच्छा उदाहरण है।
और यहाँ, आप है कि आप देखेंगे एक पूर्ण फ़ोटोशॉप की तरह रंग बीनने।
>> एलीसन BUCHHOLTZ-ए.यू.: एम एम-एचएम।
इसके अलावा, ठंडी चीजें आप कर रहे हैं रंग योजनाओं उत्पन्न कर सकते हैं
आप के लिए नहीं है, इसलिए है कि जैसे, रंग टकरा।
टॉमस Reimers: और फिर यहाँ हेक्स मान रहा है।
तो तुम हमेशा मूल रूप से ऑनलाइन प्राप्त कर सकते हैं स्थानों से हेक्स मूल्य पाने के लिए।
यह है, जैसे कि बस की तरह नहीं है हम संख्या में दुनिया के रंग देख।
यह हम ऑनलाइन जाने कि अधिक है और, हम क्या चाहते हैं रंग लगता है
और फिर संख्या नीचे ले।
यह सिर्फ एक वास्तव में आसान है क्योंकि जिस तरह से सीएस में चीजों को संदर्भित करने के लिए।
>> एलीसन BUCHHOLTZ-ए.यू.: और फिर also-- वहाँ
मैं इस साइट का सही नाम भूल जाते हैं।
लेकिन, निश्चित रूप से वहाँ मैं , एडोब से कुछ लगता है
कि, आप के लिए रंग योजनाओं उत्पन्न करता है है, जो वास्तव में अच्छा है क्योंकि आप
definitely-- यह कभी कभी है यह पता लगाने के लिए मुश्किल है,
ओह, मैं इस रंग का उपयोग करना चाहते हैं, क्या एक और उपयोगी हो सकता है
अपनी साइट पर अन्यत्र उपयोग करने के लिए, जैसे, यह अच्छा है और एकजुट करना।
>> टॉमस Reimers: एलीसन के बारे में बात कर एडोब द्वारा एक Kuler कहा जाता है, मुझे लगता है।
यह कश्मीर-यू-एल ई आर।
एलीसन BUCHHOLTZ-ए.यू.: मुझे ऐसा लगता है।
मुझे लगता है कि एक पूरा यकीन है।
>> टॉमस Reimers: मेरा पसंदीदा है हमेशा रंग योजना के डिजाइनर गया।
>> एलीसन BUCHHOLTZ-ए.यू.: ऊह।
>> टॉमस Reimers: now-- कौन सा है
>> एलीसन BUCHHOLTZ-ए.यू.: आह, यह सुंदर है।
>> टॉमस Reimers: और आप मूल रूप से पसंद है, कह सकते हैं,
मैं एक दूसरे के बगल में तीन रंग चाहते हैं।
और फिर कुछ अच्छा करते हैं।
और फिर आपको एक उदाहरण मिल सकते हैं ऐसा लग सकता है की।
और फिर आप में से किसी के ऊपर मंडराना उन्हें, यह आप हेक्स मान देता है।
>> तो सिर्फ एक अच्छा तरीका के रूप में शुरू करने के लिए रंग योजनाओं के बारे में सोच
एक वेबसाइट में या क्या रंग एक साथ अच्छी तरह से जाना हो सकता है।
कि आश्चर्यजनक रूप से किया जा सकता है क्योंकि आपको लगता है कि के रूप में आसान नहीं लेने के लिए।
और फिर अन्य शांत बात मैं हमेशा इस साइट के बारे में पाया है
आप उदाहरण मारा, तो इसे जाएगा क्या एक उदाहरण वेबसाइट दिखाने
उस रंग योजना का उपयोग कर की तरह लग सकता है।
वैसे भी।
>> पीछे वास्तविक सीएसएस करने के लिए।
एलीसन BUCHHOLTZ-ए.यू.: लेकिन जाहिर है, हम इन संदर्भों उपयोगी हो सकता है पता।
टॉमस Reimers: नहीं, वे निश्चित रूप से मददगार हो सकते हैं।
दूसरा नियम, एलीसन तो?
>> एलीसन BUCHHOLTZ-ए.यू.: हाँ।
दूसरा नियम है बस हमारे फ़ॉन्ट के लिए इसी।
तो फाँट बस की तरह है of-- इतना वजन होगा
आप चाहें, तो बस चाहते हैं, तो हो सकता है, सामान्य या, जैसे, पतले फोंट,
या इस मामले में, जैसे, बोल्ड।
मैं भूल जाते हैं।
अगर तुम चाहते थे it-- वहाँ क्या है सामान्य की तरह, सिर्फ एक पतली एक?
टॉमस Reimers: मैं वास्तव में नहीं है एक पतली एक है कि अगर वहाँ पता है।
एलीसन BUCHHOLTZ-ए.यू.: मैं भूल जाते हैं।
इसलिए फ़ॉन्ट वजन आमतौर पर हम सिर्फ बोल्ड के लिए इस्तेमाल करते हैं।
आप में वास्तव में प्राप्त करना चाहते हैं यह, हम आपको दिखाने जा रहे हैं।
W3Schools से सब अलग अलग है चीजें आप फोंट के लिए कर सकते हैं।
लेकिन मूल रूप से, आप कभी भी चाहते हैं फ़ॉन्ट के बारे में कुछ भी बदलने के लिए,
यह हमेशा होने जा रहा है जैसे, फ़ॉन्ट-कुछ।
आप कर रहे हैं तो अगर यह फ़ॉन्ट-परिवार की तरह हो जाएगा वास्तविक प्रकार बदलने के लिए कोशिश कर रहा है।
यह आप अगर फ़ॉन्ट शैली हो जाएगा घसीट तरह इसे बनाना चाहते हैं,
या इटैलिक, या whatnot।
या फिर भी फ़ॉन्ट रंग, अगर हम चाहते हैं कि बदलना चाहते थे।
>> टॉमस Reimers: हाँ।
तो आपको लगता है कि बदल सकते हैं।
और तरह की बस के लिए अब संक्षिप्त, आप कर सकते हैं ताकि
हम यहाँ चयनकर्ता ऊपर है कि देखते हैं।
हम इन घुंघराले ब्रेसिज़ है।
और फिर हम नियम है अर्धविराम द्वारा सीमांकित।
कि मतलब?
हाँ?
बिंदास।
तो यह है कि good-- है अगर
>> एलीसन BUCHHOLTZ-ए.यू.: वापस।
टॉमस Reimers: चलो विशेष रूप से बात करते हैं चयनकर्ताओं के लिए किस तरह के बारे में हम हैं।
'अभी हम है क्योंकि की तरह सिर्फ टैग दिखाया।
लेकिन तुम लोग यह प्रशंसनीय देख सकता था।
आप दो पैराग्राफ का कहना है कि एक पृष्ठ और आप पर
शैली के लिए सक्षम होना चाहता हूँ लेकिन एक अन्य नहीं,
तुम सिर्फ अपने आप को सीमित नहीं करना चाहते हैं अलग वास्तविक HTML का उपयोग करने के लिए है
टैग उन्हें विभिन्न शैलियों देने के लिए।
>> इसलिए हम बुनियादी तीन है चयनकर्ताओं के प्रकार।
एलीसन BUCHHOLTZ-ए.यू.: हाँ।
तो हम क्या है, जो टैग हम अभी बारे में बात कर रहा हूँ।
तो यह है कि एक तरह से अपने शरीर या पी की तरह है।
और फिर हम है, जो वर्ग है हम अपने सीएसएस फ़ाइल में इसे परिभाषित करते हैं,
यह हमेशा डॉट होने जा रहा है, जो कुछ भी आप अपने वर्ग के नाम पर होना चाहते हैं।
और यह कई बातों के लिए आवेदन कर सकते हैं।
>> आप पांच पैराग्राफ का कहना है कि और उनमें से तीन में से दो
एक ही स्टाइल किए जाने की जरूरत है, आप इसे करने के लिए एक वर्ग के लिए लागू होगा।
और यह कि हम यह कर सिर्फ तरीका है।
हम आप में एक उदाहरण देता हूँ जहां यह वास्तव में पता चलता है।
लेकिन तुम शायद कुछ टैग था पी, इसके बाद, आप लिखना होगा
वर्ग जो कुछ वर्गों के बराबर होती है आप इसे करने के लिए लागू करना चाहते हैं।
हम चाहते हैं कि तो जो कुछ भी वर्ग चयनकर्ताओं इस विशिष्ट पैराग्राफ को लागू करने के लिए,
हम सिर्फ इस तरह लिख सकता है।
बेशक, मैं एक उदाहरण के बारे में सोच इसे और अधिक ठोस बनाना होगा।
>> हमारे पास एक दूसरे को आईडी हम निरूपित, जो है
एक हैश, या पौंड, या हैशटैग के साथ।
टॉमस Reimers: Octothorpe।
एलीसन BUCHHOLTZ-ए.यू.: Octothorpe।
वह भी काम करता है।
और यह एक सच में अद्वितीय होना चाहिए।
वे केवल करने के लिए आवेदन करना चाहिए अपने पेज पर एक बात है।
कि एक विशिष्ट पैराग्राफ चाहे तो, या कुछ एक सूची में आइटम, या जो भी हो,
इस अद्वितीय होना चाहिए।
और उसी तरह है कि हम सिर्फ कहते हैं, जैसे, वर्ग = "Class1 Class2,"
यह सिर्फ हमारे पास जो कुछ भी की आईडी हो सकता है।
टॉमस Reimers: हाँ।
तो चलो निश्चित रूप से बात करते हैं यहाँ उदाहरण के बारे में।
और मैं सिर्फ गोता करने के लिए जा रहा हूँ सीधे वापस कोड में।
तो चलो हमारे HTML को देखो।
और इसलिए हम अभी एक पैरा है।
यह पाठ है।
मैं बस को संशोधित करने के लिए जा रहा हूँ यह। "यह पाठ 1. है"
और फिर हम करने जा रहे हैं एक "यह पाठ 2. है"
>> एलीसन BUCHHOLTZ-ए.यू.: दूसरा एक है।
टॉमस Reimers: हाँ।
तो अब हम सही "यह पाठ 2, है"?
और हम फिर से लोड है कि अगर देखने जा रहे हैं पेज, क्या हम मिल जा रहे हैं
हम कर रहे हैं वाला है find--
एलीसन BUCHHOLTZ-ए.यू.: ऊह।
टॉमस Reimers: हाँ।
हम एक "यह है खोजने के लिए जा रहे हैं पाठ 1, "और" यह "पाठ 2. है
>> एलीसन BUCHHOLTZ-ए.यू.: और बाहर सुंदर पीले रंग।
>> टॉमस Reimers: और आप देखेंगे अब ठीक है, हमारे चयनकर्ता कि
जो पी के लिए लागू होता है, या पैराग्राफ, उन दोनों को प्रभावित करता है,
उन दोनों के मिलने की वजह हालत वे एक पी टैग दोनों कर रहे हैं कि।
यही कारण है कि कुल समझ में आता है।
तो सवाल यह है, ठीक है, क्या हम चाहते थे कि अगर केवल एक ही मिलता है?
तो क्या वास्तव में एलीसन कह रहा था, जैसे हम ऐसा करने के लिए दो अन्य तरीके हैं।
मैं आईडी के साथ शुरू करने जा रहा हूँ।
>> एलीसन BUCHHOLTZ-ए.यू.: आईडी के साथ शुरू करते हैं।
>> टॉमस Reimers: और दोनों इनमें से गुण हैं।
तो विशेषताओं एचटीएमएल में मौजूद हैं।
और वे क्या कर रहे हैं आप जोड़ने के लिए कुछ है कि
जो टैग के अंदर टैग नाम से अलग।
तो आप कई विशेषताएँ कर सकते हैं।
हाँ?
>> एलीसन BUCHHOLTZ-ए.यू.: मैं बस से जा रहा था PSET 7 से अपने उदाहरण से कहने के लिए,
आप में से किसी को संरेखित करने की कोशिश केंद्र के लिए चीजें हैं,
आप का इस्तेमाल किया गया हो सकता है "पाठ align = center।"
और आप शायद यह देखा केन्द्रित किया जाना चाहिए था
अपने पाठ या अपने नेविगेशन पट्टी।
तो यह है कि अभी भी एक गुण है आप के साथ परिचित हो सकता है।
टॉमस Reimers: एक गुच्छा है की आप देखेंगे कि जिम्मेदार बताते हैं।
हाँ।
PSET 7 के लिए अच्छा संदर्भ की तरह।
हम आईडी है।
आप यह भी हो सकता है वर्ग, इस तरह से बातें।
एक टैग के कई गुण हो सकता है।
तो आईडी के साथ शुरू की है कि हम नाटक करते हैं मैं नहीं जानता कि of-- एक आईडी करना चाहते हैं।
हम विशेष फोन करता हूँ इस एक वजह से, हम कर रहे हैं
बोल्ड बनाने जा रही है, और रेखांकन, और जो भी हो।
एलीसन BUCHHOLTZ-ए.यू.: यह वाला सुपर स्पेशल हो।
टॉमस Reimers: तो यह एक, हम आईडी खास है।
जिस तरह से है कि चयन करने के लिए, तो है, main.css में, एक पी टैग के बजाय,
आप ठीक है, #special करते हैं?
और उस का चयन आईडी विशेष के साथ बात।
यह हर किसी के लिए समझ पड़ता है?
दर्शक: हाँ।
टॉमस Reimers: कूल।
तो अब हम वापस जाना है, हम वूप्स see-- करेंगे।
हाँ।
हम देखेंगे कि यह केवल चयन आईडी विशेष के साथ एक।
हाँ?
अच्छा लगता है।
हाँ।
>> दर्शक: कुछ एक हो सकता है दोनों वर्ग और एक आईडी की विशेषता?
>> टॉमस Reimers: हाँ।
दर्शक: ठीक है।
तुम तो दे तो क्या होता है यह है कि संघर्ष सीएसएस में कुछ नियम?
टॉमस Reimers: बिल्कुल।
हम निश्चित रूप से जा रहे हैं उस के बारे में बात करने के लिए।
तो क्या वास्तव में आप हो रहे थे पर, आप भी कक्षाओं में हो सकता है।
तो चलो मैं था ढोंग करते हैं तीन पैराग्राफ और मैं
पहली शैली करना चाहता था दो लेकिन तीसरे नहीं।
खैर, अपने पहले विचार मैं अच्छी तरह से हो सकता है, बस एक दूसरे के पास एक पहचान दे सकता है।
लेकिन तुम नहीं कर सकते, एक आईडी, क्योंकि वास्तव में एलीसन कह रहा था, जैसे
अनूठा हो गया है।
>> तो बजाय एक आईडी, क्या आप उपयोग कर सकते हैं आप एक वर्ग का उपयोग कर सकते है।
और एक class-- यह अनुमति देता है क्या आप मूल रूप से कहना है ऐसा करने के लिए,
इस एक समूह के हिस्से के रूप अंतर्गत आता है।
इस मामले में, हमारे समूह स्पेशल कहा जाता है।
और हम तो क्या करने जा रहे हैं क्या है हम, बल्कि पाउंड से say-- लिए जा रहे हैं
हम डॉट उपयोग करने के लिए जा रहे हैं।
ठीक है?
और नोटिस कि पाउंड और डॉट केवल सीएसएस फ़ाइल के भीतर मौजूद हैं,
नहीं HTML के भीतर।
एलीसन BUCHHOLTZ-ए.यू.: हाँ।
महत्वपूर्ण अंतर।
>> टॉमस Reimers: मैं , इतना संघर्ष किया था
मैं HTML में हैश डाल क्योंकि और तो बस एक लंबे समय के लिए मूर्ख महसूस किया।
इसके बारे में दोनों का चयन कैसे देखें उस वर्ग के साथ लोगों को?
बिंदास।
>> अब, चीजों को कई वर्गों हो सकता है।
मैं पहले करना चाहता था कहते हैं कि दो पीले रंग की एक पृष्ठभूमि है
और दूसरा दो नीले रंग की एक फ़ॉन्ट रंग।
ठीक है।
मैं क्यों होता मैं सच में नहीं पता ऐसा करने के लिए चाहते हैं, लेकिन मैं कर सकता हूँ।
>> एलीसन BUCHHOLTZ-ए.यू.: नहीं हो सकता है अपनी वेबसाइट के लिए यह सिफारिश की है।
लेकिन हमारे प्रयोजनों के लिए, यह करूँगा।
>> टॉमस Reimers: यह नहीं है एक अच्छा रंग योजना।
एलीसन BUCHHOLTZ-ए.यू.: ठीक है, पीले और नीले रंग के अपने उच्च विद्यालय के रंग हैं।
मैं हालांकि, पता नहीं है।
टॉमस Reimers: एलीसन के उच्च स्कूल एक महान रंग योजना थी।
[हँसी]
तो फिर हम कॉल कर सकते हैं क्या है this-- कॉल चलो तो हम खास है
और हम बहुत है।
मैं इस बात के लिए, आप का उपयोग करें, का सुझाव और अधिक वर्णनात्मक नाम।
एलीसन BUCHHOLTZ-ए.यू.: हाँ, मैं करूंगा पीले या नीले रंग की तरह, इस पर कॉल करें।
>> टॉमस Reimers: हम नहीं कर रहे हैं वास्तव में, एक असली वेबसाइट बनाने के
जो हम कर रही है कि नहीं कर रहे हैं, यही वजह है।
लेकिन अगर आप वास्तव में यदि आप एक असली वेबसाइट पड़ा
हो सकता है, जैसे, लेख हेडर, लेख सामग्री, पहला शब्द,
जो की अनुमति इस तरह बातें, आप और अधिक वर्णनात्मक हो।
ये सिर्फ चर की तरह वास्तव में कर रहे हैं।
वे एक तरह जहां में नामित किया जाना चाहिए आप इस तरह के रूप में, like-- हाँ, यह कर सकते हैं।
परफेक्ट।
>> तो पृष्ठभूमि रंग।
और फिर हम इतने say-- लिए जा रहे हैं रंग बदलने के लिए जिस तरह से सिर्फ "रंग है।"
और हम यह नीले रंग बनाने के लिए जा रहे हैं।
यह अच्छा है।
तो अब हमारे पास पहले दो खास है।
अगले एक करने के लिए जा रहा है "सुंदर = वर्ग है।"
एलीसन BUCHHOLTZ-ए.यू.: और फिर तुम हूँ मध्य एक करने के लिए "सुंदर" जोड़ना चाहते हैं।
टॉमस Reimers: हाँ।
और फिर बीच एक करने के लिए, "सुंदर," क्या होता जोड़ने के लिए
तुम सिर्फ एक जगह है है।
वर्ग विशेषता तो एक अंतरिक्ष-अलग सूची है
सभी वर्गों की कि कि टैग करने के लिए लागू होते हैं।
ठीक है?
इस एक के अंतर्गत आता है की तरह यह नहीं है कहा जाता है कि विशेष वर्ग के कुछ प्रकार
"विशेष, अंतरिक्ष, सुंदर।"
यह दो classes-- के अंतर्गत आता है विशेष और सुंदर।
हाँ?
बिंदास।
>> और फिर हम देखो क्या होता है, पर हम कर रहे हैं
पहले एक है कि देखने के लिए जा पीले रंग की पृष्ठभूमि, काला पाठ।
दूसरा one--
>> एलीसन BUCHHOLTZ-ए.यू.: बोल्ड --has नीले रंग के पाठ के साथ पीले रंग की पृष्ठभूमि।
और हमारे पिछले एक बस है हम यह करने के लिए आवंटित किया है कि नीले पाठ।
>> टॉमस Reimers: शांत हो?
चयनकर्ताओं कैसे काम करते हो?
बहुत बढ़िया।
>> एलीसन BUCHHOLTZ-ए.यू.: हम करना चाहते हैं अब तो संघर्ष के बारे में बात करते हैं?
>> टॉमस Reimers: तो हाँ।
बिल्कुल।
तो क्या आप अगर ऐसा होता है ठीक है, एक संघर्ष है?
के पहले एक ढोंग करते हैं कुछ सेट अप like--
एलीसन BUCHHOLTZ-ए.यू.: हो सकता है इस एक पृष्ठभूमि में परिवर्तन?
टॉमस Reimers: हाँ।
इसलिए हम बनाने जा रहे हैं "सुंदर" सामन की पृष्ठभूमि बदल जाते हैं।
एलीसन BUCHHOLTZ-ए.यू.: तुम बस के साथ कर रहे हैं सभी महान रंग आज, टॉमस।
टॉमस Reimers: हाँ।
मुझे पता चला क्योंकि मैं कर सकता हूँ एक असली रंग के रूप में सामन का उपयोग करें।
इसलिए हम केवल यह है कि क्या करने जा रहे हैं।
मैं भी सूर्यास्त एक असली रंग है।
दर्शक: सूर्यास्त एक असली रंग है?
एलीसन BUCHHOLTZ-ए.यू.: चलो इसे करने की कोशिश करते हैं।
टॉमस Reimers: इस प्रदर्शन के बाद सिर्फ मामले में यह खराब करता है क्योंकि
मैं डिबगिंग जा नहीं करना चाहती।
इसलिए हम सामन एक असली रंग पता है।
पर तो कोई अनुमान क्या होने जा रहा है?
>> एलीसन BUCHHOLTZ-ए.यू.: कोई विचार है?
>> दर्शक: [अश्राव्य]।
>> टॉमस Reimers: हाँ।
तो आप यह बिल्कुल सही है।
असल में, यह लेता है यह दिया गया था कि पिछले शासन।
>> एलीसन BUCHHOLTZ-ए.यू.: तो यह है जहां व्यापक प्रभाव में आता है।
>> टॉमस Reimers: तो कैसे याद हम व्यापक स्टाइल शीट्स कि था?
उस से तो, हम किस तरह का मतलब हम नियमों का एक गुच्छा है कि
जो एक दूसरे के शीर्ष पर लागू होते हैं, और वे भी एक दूसरे के स्थान पर आ सकते हैं।
>> एलीसन BUCHHOLTZ-ए.यू.: तो तल पर जो कुछ भी है
शीर्ष पर है जो कुछ भी पार कर जाएगी।
आपको लगता है कि पूरी तरह से नियमों का हो सकता था पहले से कुछ नकारना।
आप होना चाहते हैं यही कारण है कि यह भी है आप स्टाइल रहे हैं जब सावधान,
इसलिए आप नियम बनाने के लिए नहीं कर रहे हैं कि आप अभी पूरी तरह से अधिभावी रहे हैं।
>> टॉमस Reimers: या शायद आप नियमों ऊपर लिखना चाहते हैं।
>> एलीसन BUCHHOLTZ-ए.यू.: या शायद तुम जानते हो।
हाँ।
>> टॉमस Reimers: आपके पास एक बहाना है सबसे बातें करने के लिए लागू होता है जो वर्ग,
लेकिन आप बदलना चाहते हैं, हम कहते हैं लाल और फ़ॉन्ट के लिए पृष्ठभूमि रंग
अधिकांश के लिए बोल्ड करने के लिए वजन बातें करते हैं, लेकिन एक के लिए,
आप केवल पृष्ठभूमि रंग चाहते हैं लाल हो सकता है लेकिन आप अन्य सभी चाहते करने के लिए
गुण, आप कुछ कर सकता है जैसे "font- वजन = सामान्य,"
जो तब कि बोल्ड परिवर्तन पूर्ववत होगा।
हाँ?
फिर, सबसे अच्छा तरीका है, मुझे लगता है एलीसन यह सिर्फ अभ्यास कर रही है।
>> एलीसन BUCHHOLTZ-ए.यू.: प्रयोग कर सकें।
>> टॉमस Reimers: अभ्यास, अभ्यास, अभ्यास, और प्रयोग।
मुझे लगता है कि बहुत से लोगों को पता है सीएसएस अनुमान है और जांच का सिर्फ एक बहुत है
जहां अगर दिन के अंत में, यदि आप something-- की तरह क्या करना चाहते हैं
आप किसी न किसी विचार है, लेकिन आप शायद अभी भी जरूरत है
सुनिश्चित करने के लिए इसे बाहर की कोशिश आप यह कैसा लग रहा है पता है।
>> दर्शक: आप आवेदन कर रहे हैं कक्षाएं, एक से अधिक
एक ही पैराग्राफ को या अनुभाग, यह करता है
क्या बात है आदेश आप कर सकते हैं उद्धरण में उन्हें प्रकार है?
>> टॉमस Reimers: नहीं, बिल्कुल नहीं।
>> एलीसन BUCHHOLTZ-ए.यू.: क्या मायने रखता है अपने सीएसएस शैली पत्रक के भीतर आदेश।
दर्शक: आप सवाल दोहराने सकता है?
टॉमस Reimers: ओह।
एलीसन BUCHHOLTZ-ए.यू.: भीतर वर्ग, जब आप दे रहे हैं कक्षाएं
एचटीएमएल में कुछ करने के लिए करता है, यह वे कर रहे हैं, जो आदेश बात है?
यह आदेश फर्क नहीं पड़ता।
क्या मायने रखता है का आदेश है अपने सीएसएस के भीतर वर्ग चयनकर्ताओं,
अपनी शैली पत्रक के भीतर।
>> टॉमस Reimers: ध्वनि अच्छा है?
>> एलीसन BUCHHOLTZ-ए.यू.: लवली।
>> टॉमस Reimers: और फिर हम to-- जारी रखने के लिए जा रहे हैं
एलीसन BUCHHOLTZ-ए.यू.: हम आगे क्या करना है?
मैं भूल जाते हैं।
ओह, हम सिर्फ उदाहरण है।
लेकिन हम एक तरह से उन किया है।
हम मक्खी पर उदाहरण किया है।
>> टॉमस Reimers: हम करने के लिए मिल जल्द ही चयनकर्ताओं गठबंधन।
>> एलीसन BUCHHOLTZ-ए.यू.: ओह, हम चयनकर्ताओं गठबंधन करने के लिए मिलता है।
टॉमस Reimers: तो कुछ उदाहरण हमारे पास है
# Dog-- पौंड, या हैशटैग, या octothorpe, या जो कुछ भी
आप that-- तेज कॉल करना चाहते हैं।
>> एलीसन BUCHHOLTZ-ए.यू.: तीव्र कुत्ता।
>> टॉमस Reimers: तो फिर तुम .pets है।
कुछ, कुत्ते की एक आईडी है पृष्ठ पर केवल एक कुत्ता है।
कुछ का एक आईडी है बिल्ली, केवल एक बिल्ली है।
पेज पर कई पालतू जानवर हो सकता है।
हम कक्षाओं कि दे दी है यही कारण है कि।
आप पी का एक उदाहरण है।
और फिर से एक इसलिए पिछले उदाहरण है, जो
, हम के बारे में बात नहीं की है कुछ है आप उन्हें गठबंधन क्या होता है जब है।
P.pets तो।
>> उस के लिए तो, चलो के लिए वापस जाओ कोड और हाँ another-- परिचय।
तो यहाँ वापस।
>> एलीसन BUCHHOLTZ-ए.यू.: मैं इस really-- है की तरह लग रहा है
की तरह सिर्फ उदाहरण के माध्यम से देख वास्तव में यह जानने के लिए रास्ता है।
तो यह है कि हम क्या कर रहे है।
>> टॉमस Reimers: तो चलो हम नाटक करते हैं केवल सही पाठ 2, का चयन करने के लिए करना चाहते हैं?
तो हम निश्चित रूप से नहीं कर सकते एक आईडी के साथ करते हैं।
खैर, हम एक साथ कर सकता है कि आईडी, लेकिन यह एक आईडी नहीं है।
मैं एक जोड़ने के लिए, लेकिन के लिए बहाना दे सकता है मैं एक जोड़ने के लिए नहीं चाहता था कि
या यह पहले से ही कुछ और है।
मैं उस के साथ ऐसा नहीं कर सकते।
टैग सही, निश्चित रूप से अद्वितीय नहीं है?
और ना ही वर्ग है।
लेकिन अगर आप इन बातों को जोड़ सकते हैं।
हम कुछ करना चाहता था कहते हैं कि जो केवल बातें करने के लिए लागू होता है जो
वर्ग विशेष है और जो वर्ग सुंदर है।
>> तो क्या आप कर सकते हैं, main.css में है आप के पहले इसे हटाना चलो, कह सकते हैं।
आप इन गठजोड़ कर सकते हैं।
तो अगर आप .special कर सकते हैं।
कोई स्थान नहीं।
बस .special.pretty।
क्या इसका मतलब है कि कुछ है जो विशेष और सुंदर दोनों है।
कि मतलब?
और हम यहाँ जाना है, क्या आप को देखने के लिए जा रहे हैं
यह नियम केवल पर लागू होता है उन दोनों की है जो एक दूसरे के।
और आप चीजों की एक बहुत कुछ के लिए ऐसा कर सकते हैं।
तुम चलो say-- कर सकते हैं मैं केवल चाहता था नाटक
सुंदर वर्ग है जो बातें करने के लिए और यह भी एक पैराग्राफ टैग जो कर रहे हैं।
तो p.pretty।
का है कि मैं था ढोंग करते हैं टैग शरीर पर बहुत कुछ।
ठीक है?
मैं इस चलाने के लिए और मैं कर सकते हैं यह केवल देख सकते हैं कि
जो कर रहे हैं बातें करने के लिए लागू करने के लिए जा रहा सुंदर वर्ग के साथ पैराग्राफ।
और तुम, इन गठजोड़ कर सकते हैं असल में, आप चाहते हैं के रूप में कई।
तो तुम सिर्फ उन्हें एक साथ रख सकते हैं।
कि मतलब?
एलीसन BUCHHOLTZ-ए.यू.: तो इस तरह के और अधिक उपयोगी है
जब, टॉमस हो सकता है, जैसा कि पहले कह रहा था आप एक बहुत ही जटिल वेबसाइट है,
और आप पहले से ही एक बहुत कुछ है लिखित इन नियमों की वजह से,
और तुम सिर्फ करने की जरूरत है पहले से दो गठबंधन।
जैसा बजाय एक पूरी लिखने की नए चयनकर्ता और, वहाँ इसे बदलने
तुम सिर्फ गठजोड़ कर सकते हैं उन्हें यह overlaps जहां।
>> टॉमस Reimers: या आप कभी कभी out-- मिल सकता है
एक वर्ग है जो जैसे फॉन्ट का रंग नीला बनाता है,
और एक अन्य वर्ग नहीं है जो पृष्ठभूमि नीले रंग में आता है।
और कहा कि सिर्फ काम नहीं करेगा।
तो आप एक विशेष मामले में लिखते हैं, जहां, यह दोनों है अगर like-- लेकिन, आप क्या कर रहे हैं
क्या करने जा रहा है कि आप के लिए जा रहे है इस एक नीले रंग की इस छाया बनाना
और यह एक नीले रंग की यह दूसरी छाया।
अधिकार?
>> एलीसन BUCHHOLTZ-ए.यू.: अच्छा अपवाद के उन प्रकार के लिए।
टॉमस Reimers: करने के लिए तो समस्याओं के बारे में सोचना
आप उन्हें गठबंधन है कि जब पैदा हो सकता है।
बिंदास।
तो वापस हमारे प्रस्तुति के लिए।
एलीसन BUCHHOLTZ-ए.यू.: हम लगभग वहाँ रहे हैं।
टॉमस Reimers: और यह जोड़ने के लिए बंद कर दिया गया है।
एलीसन BUCHHOLTZ-ए.यू.: ओह, नहीं।
एलीसन BUCHHOLTZ-ए.यू. पर: सीएस कार्यालय, इंटरनेट नीचे चला जाता है।
ओह, विडंबना।
>> टॉमस Reimers: तो सौभाग्य से, हम कर सकते हैं इंटरनेट के बिना मौजूद है, मुझे लगता है,
हम यहाँ सभी स्लाइड किया है।
तो चलो के बारे में बात करते हैं टैग का रिश्ता है।
एलीसन BUCHHOLTZ-ए.यू.: ठीक है।
जा रहा है तो बस की तरह टॉमस ने क्या कहा के बंद,
यह ऐसा करने का एक और तरीका है।
इसलिए हम कुछ माता पिता है एक बच्चे को चयनकर्ता के साथ चयनकर्ता।
तो यहाँ इस उदाहरण में, हम कुछ है एक वर्ग नेवबार, वर्ग बटन के साथ शरीर।
आह।
>> टॉमस Reimers: ओह, माफ करना।
>> एलीसन BUCHHOLTZ-ए.यू.: और असल में, क्या इसका मतलब यह है
जैसे, बच्चों का चयन किया गया है चयनकर्ताओं के इन प्रकार के सभी,
यह माता पिता के चयनकर्ता के भीतर।
और उन लोगों के ही हैं यह कभी भी करने के लिए लागू करने के लिए जा रहा है।
देखो मे नहीँ जानता कि हम एक बेहतर तरीका है of--
टॉमस Reimers: तो मैं सोचने के लिए जिस तरह से लगता है
इस बारे में कि कैसे पहले याद है हम एक तरह से उन्हें एक साथ रखा पसंद है।
और फिर एक तत्व है कि इसका मतलब है जो इन सब से मेल खाता है।
क्या यह कह रहा है कि मैं, है आप सब कुछ मैच चाहते हैं
मैं चाहता हूँ some-- भीतर आप एक चयनकर्ता को खोजने के लिए।
और फिर उस के भीतर, मैं चाहता हूँ आप नई चीजें मैच के लिए।
अधिकार?
तो सीएसएस में, यह सब के बारे में की तरह है इन मदों के मैच में सक्षम किया जा रहा है।
और अगर आप मैच के लिए कोशिश कर सकते हैं अन्य मदों के भीतर आइटम नहीं है।
>> तो चलो वास्तव में एक उदाहरण करते हैं, और हम स्पष्ट है कि करेंगे।
तो चलो हम विशेष है ढोंग करते हैं, विशेष सुंदर, जो भी हो।
और फिर हम ठीक है, एक कड़ी है?
तो एक एक कड़ी है, याद है।
यह कहीं भी जाने के लिए नहीं जा रहा है।
और हम इसे देने के लिए जा रहे हैं वर्ग कड़ी है, मुझे लगता है।
चलो यह दे दो मुझे एक विचार दे class--।
एलीसन BUCHHOLTZ-ए.यू.: कूल।
टॉमस Reimers: चलो Coo-- यह सुंदर वर्ग जाओ।
क्यूँ नहीँ?
>> एलीसन BUCHHOLTZ-ए.यू.: ठीक है।
टॉमस Reimers: तो अभी बहुत बातें
पृष्ठभूमि बनाने जा रहे हैं सामन के नीले, पृष्ठभूमि रंग।
यही समझ में आता है।
और हम this-- करते हैं
>> एलीसन BUCHHOLTZ-ए.यू.: आप पाठ जोड़ना चाहते हैं
इसलिए हाइपरलिंक वास्तव में पता चलता है?
टॉमस Reimers: यह है कि एक अच्छा फोन होगा।
एलीसन BUCHHOLTZ-ए.यू.: 'क्योंकि सही अब हम कुछ भी नहीं मिलने वाला है बस रहे हैं।
टॉमस Reimers: तो यह एक कड़ी है।
"यह एक कड़ी है।"
ओह, और यह जा रहा है एक और कड़ी हो।
चलो यह वर्ग दे दें "शांत करते हैं।"
आप ठीक कह रहे हैं।
बिंदास।
इसलिए अभी हम इस हड़पने के लिए जा रहे हैं।
हम एक फेंक करने के लिए जा रहे हैं।
हम में से एक है विशेष टैग, और हम भी
सुंदर टैग में एक करने जा रहे हैं।
और अभी हम करने जा रहे हैं ऐसा हम cool-- बनाने जा रहे है
क्या हम यह करने के लिए करना चाहते हैं?
एलीसन BUCHHOLTZ-ए.यू.: हम इसे बड़ा कर सकते हैं?
टॉमस Reimers: चलो इसे एक सीमा दे।
एलीसन BUCHHOLTZ-ए.यू.: हम सीमा सकता है।
टॉमस Reimers: हाँ।
इसलिए हम कुछ करने के लिए जा रहे हैं जैसे, सीमा is-- और हम कर रहे हैं
सभी एक दूसरे में यह समझा जा रहा है।
अभी के लिए--
>> एलीसन BUCHHOLTZ-ए.यू.: बॉक्स मॉडल के लिए।
टॉमस Reimers: लेकिन अब के लिए, हम कर रहे हैं बस यह एक सीमा देने के लिए जा रहा है।
तो क्या इसका मतलब है कि आप कर रहे है इन कड़ियों को देखने के लिए जा रहा है।
और तुम है कि वे देखने के लिए जा रहे हैं इन, जैसे, बदसूरत काले बॉर्डर, जो
शांत है।
>> एलीसन BUCHHOLTZ-ए.यू.: हमारी वेबसाइट बहुत सुंदर है।
>> टॉमस Reimers: हाँ।
हमारी वेबसाइट भयानक है।
तो इन दो लिंक कर रहे हैं, और वे दिखाई देते हैं।
अब देखते हैं कि मैं नाटक करते हैं केवल यह करना चाहता था
यह कुछ के भीतर नहीं था जो सामन की एक पृष्ठभूमि के लिए किया था।
तो यह एक याद है कि , सामन की एक पृष्ठभूमि है
यह सुंदर वर्ग की है, क्योंकि।
>> लेकिन हम केवल ठंडा कहना चाहता हूँ कि वर्ग में कक्षा में, विशेष नहीं कर रहे हैं, जो
सुंदर, कि सीमा होनी चाहिए।
खैर, क्या आप कर सकते हैं कि आप है .cool, .special, अंतरिक्ष कह सकते हैं।
जब आपको लगता है और वह है, क्या कर रहा है इसके बारे में, यह मूल रूप से कह रहा है,
ठीक है, मुझे सब कुछ मिल कि विशेष से मेल खाता है।
तब उन टैग के भीतर, लगता है अच्छा है कि मुझे सब कुछ।
एलीसन BUCHHOLTZ-ए.यू.: तो एक और तरीका कि, इस बारे में सोचने के लिए अच्छा हो सकता है
सी के लिए इसे वापस लाने, है सिर्फ गुंजाइश के विचार की तरह।
तो अगर आप कुछ है जब लोगों की तरह चयनकर्ता,
हम इस से पहले के लिए काम कर रहा है कि, अपने पूरे वेब पेज, अपने HTML के सभी
ठीक है, अपने दायरे के भीतर है?
लेकिन हम इन किया है जब अभिभावक बच्चे रिश्तों,
आप नीचे जहां संकुचन कर रहे हैं ऐसा लगता है जैसे यदि आप एक विशिष्ट स्थान के लिए देख रहे हैं
अगर, के रूप में की तरह, हम भीतर देख रहे हैं एक विशेष समारोह के बजाय
हमारी पूरी फाइल की।
दर्शक: होता है, मन में उस के साथ तो हम changed-- था अगर यह मायने रखता है
एलीसन BUCHHOLTZ-ए.यू.: आदेश?
दर्शक: सीएसएस में --the वर्ग , अंतरिक्ष .cool करने के लिए, .special?
एलीसन BUCHHOLTZ-ए.यू.: हाँ, क्योंकि तब है कि
गुंजाइश यह करने के लिए कहेंगे, शांत है कि सब कुछ,
और फिर क्या has-- पर देखने के लिए मैं इस मामले में, जैसे, मतलब
मैं इसे बदल दिया होता नहीं लगता।
>> टॉमस Reimers: हमें क्या कहा था तो?
सॉरी।
>> एलीसन BUCHHOLTZ-ए.यू.: हम तो यह तो शांत करने के लिए गुंजाइश
विशेष के बाहर बातों के लिए लग रही है, यह वास्तव में एक ही होगा।
>> टॉमस Reimers: तो यह नहीं होगा।
>> एलीसन BUCHHOLTZ-ए.यू.: यह नहीं होगा?
ओह ठीक है, ओह।
मैं गलत हूँ।
>> टॉमस Reimers: तो कारण यह different-- आम mistake-- है
सही है कि अब केवल लिंक ठीक है, शांत है?
तुम लोगों को है करने के लिए मैं, मेरे सवाल का अनुमान इस पृष्ठ पर क्या .cool से मिलान किया जाता है?
दो टैग यहाँ, सही कर रहे हैं?
यह एक है जो और यह एक है।
दोनों शांत मैच।
और कुछ नहीं करता है।
तो आप ने कहा, अगर .cool, अंतरिक्ष, .special, आप का कहना है कि करने के लिए जा रहे हैं,
इन टैग के भीतर, क्या खास है?
एलीसन BUCHHOLTZ-ए.यू.: हम्म।
यही कारण है कि क्या it-- सही है।
यह यहां सिर्फ कुछ की तरह है क्योंकि।
>> टॉमस Reimers: तो यह कुछ भी नहीं चुनता है।
>> एलीसन BUCHHOLTZ-ए.यू.: के साथ जबकि विशेष, हम यहाँ इन टैग के भीतर हो।
>> टॉमस Reimers: उन और उन।
दर्शक: ठीक है।
तो आगे से उन टैग स्लेश?
>> टॉमस Reimers: हाँ।
कि मतलब?
कैसे यह मूल रूप से है गुंजाइश संकीर्ण करने के लिए कोशिश कर रहा।
एलीसन BUCHHOLTZ-ए.यू.: हाँ।
मुझे लगता है कि शायद लगता है कि सबसे आसान तरीका है इसके बारे में सोचने के लिए।
>> टॉमस Reimers: तो हम यह पाया गया है, और हम इस दोनों विशेष मिलान कर पाया।
और फिर हम भीतर, पूछ रहे हैं इन लोगों को शांत क्या है?
और यह एक है, यह एक शांत भीतर।
इस एक के भीतर, कुछ भी नहीं अच्छा है।
तो यह बनी हुई है कि केवल टैग है।
>> एलीसन BUCHHOLTZ-ए.यू.: शांत जबकि बस वहाँ ये एक टैग के भीतर है।
टॉमस Reimers: बिल्कुल।
और उन के भीतर विशेष क्या है?
कुछ भी नहीं।
अब, मैं क्या कहेंगे है कोई जगह नहीं थी,
आप शांत और special-- क्या पूछ रहे हैं या सही, सुंदर और विशेष क्या है?
आप .special.pretty कहते हैं, कि .pretty.special के रूप में ही।
>> अंतरिक्ष हटाने क्या है क्योंकि आप .special कहना है, जब पूछ रही है,
आप, ठीक है, पूछ रहे हैं जो लोगों को विशेष कर रहे हैं?
और फिर, उन में से कौन सा लोगों को भी सुंदर हैं,
जो व्याकरण की दृष्टि से, एक ही है, पूछ के रूप में, सुंदर है क्या,
और फिर उन लोगों की, विशेष भी क्या है?
अधिकार?
यह का अंतर है क्या है के भीतर है।
दर्शक: ठीक है।
टॉमस Reimers: हाँ।
बहुत बढ़िया।
Then-- साथ कि दिमाग में तो
>> एलीसन BUCHHOLTZ-ए.यू.: मैं हमारे पिछले लगता है बात (फैंसी ब्रिटिश लहजे में)
बॉक्स मॉडल।
>> टॉमस Reimers: box-- [हंसते] मैं एलीसन का कहना है कि जिस तरह से प्यार करता हूँ।
बॉक्स मॉडल बात तो।
>> एलीसन BUCHHOLTZ-ए.यू.: बस है एक बॉक्स है, मैं अपने बॉक्स मॉडल हो जाएगा।
टॉमस Reimers: तो उस बारे में बात करते हैं।
इसलिए अभी हम एक बहुत खर्च कर दिया समय के चयनकर्ताओं के बारे में बात कर रही है।
अब तक, तुम लोगों की तरह, शायद रहे हैं, जैसा कि आप जानते selectors-- के स्वामी,
वास्तव में सामग्री का चयन करने के लिए है कि कैसे आप अपने स्क्रीन पर हेरफेर करने के लिए चाहते हैं।
>> तो अब सवाल है, कैसे है वास्तव में आप यह हेरफेर कर सकते हैं?
तो मैं सबसे बुनियादी अनुमान उस के बारे में सोचने के लिए रास्ता
खैर, वास्तव में क्या है, सीएसएस में एक तत्व है?
हम समय की एक बहुत खर्च किया है के बारे में बात कर रही है, एक टैग है क्या,
या सबसे बुनियादी क्या है एक टैग का प्रतिनिधित्व?
>> के बारे में सोचने के लिए एक अच्छा तरीका वह यह है कि सामन क्या आकार है?
, जैसे, क्या आकार है पृष्ठभूमि सामन रंग?
>> दर्शक: यह एक आयत है।
>> टॉमस Reimers: यह सही है, एक आयत है?
>> एलीसन BUCHHOLTZ-ए.यू.: एक चाल सवाल नहीं था।
[हँसी]
>> टॉमस Reimers: कोशिश कर नहीं यह देर से तुम लोगों को चाल की।
इसलिए हम इस आयत है।
और टैग एक पी, सही है?
तो यह है कि हमें अच्छा देता है पैरा विश्वास है कि
पर, एक आयत के रूप में प्रतिनिधित्व किया है ब्राउज़र के मन में जो कम से कम
रही हे।
>> एलीसन BUCHHOLTZ-ए.यू.: मेरा मतलब है, ब्राउज़रों, आम तौर पर आयताकार हैं
तो यह समझ में आता है।
>> टॉमस Reimers: विचार यहाँ है सीएसएस के भीतर टैग की है कि सभी
एक आयत के रूप में प्रतिनिधित्व कर रहे हैं।
और हर आयत चार है सीएसएस के अनुसार भागों, ठीक है?
आप वास्तविक सामग्री है।
पाठ निहित है कि जहां।
>> एलीसन BUCHHOLTZ-ए.यू.: हो सकता है कि आपकी तस्वीर।
>> टॉमस Reimers: हाँ।
आप है, जो padding है सफेद अंतरिक्ष के बस किसी तरह।
तो फिर तुम एक सीमा है।
और फिर तुम मार्जिन है जो उस के बाहर सफेद स्थान है।
कि कोई मतलब नहीं है तो किसी को भी, तो हम कर रहे हैं
एक पल के लिए उस के बारे में बात करने के लिए जा रहा है।
तो यहीं है, हम क्या करने जा रहे हैं क्या हम ठीक है, कुछ divs बनाने के लिए जा रहे हैं?
मुझे जबकि माफ करना I--
>> एलीसन BUCHHOLTZ-ए.यू.: मेरा मन हम में एक प्यारा तस्वीर डाल देना चाहिए।
>> टॉमस Reimers: हम निश्चित रूप से करना चाहिए।
>> एलीसन BUCHHOLTZ-ए.यू.: मैं हर किसी की तरह लग रहा है
एक से फायदा हो सकता है सुंदर चित्र, सब है।
>> टॉमस Reimers: हम कर सकते हैं a-- से सभी को लाभ
>> दर्शक: हाँ, ज़रूर।
टॉमस Reimers: ठीक है, शांत।
इसलिए हम एक प्यारा रखना चाहिए कहीं में तस्वीर।
एलीसन BUCHHOLTZ-ए.यू.: मैं एक तरह लग रहा है प्यारा चलनेवाली सही अब उपयोगी हो सकता है।
टॉमस Reimers: यकीन है।
एलीसन BUCHHOLTZ-ए.यू.: इस सप्ताह के अंत।
कुछ लो adorab--
>> टॉमस Reimers: कैसे एक बिल्ली के बच्चे डटकर?
>> एलीसन BUCHHOLTZ-ए.यू.: एक बिल्ली का बच्चा भी है, काम करता है।
>> टॉमस Reimers: कूल, क्योंकि उस के लिए एक साइट है।
यह PlaceKitten कहा जाता है।
एलीसन BUCHHOLTZ-ए.यू.: यह बढ़िया है।
टॉमस Reimers: हाँ।
एलीसन BUCHHOLTZ-ए.यू.: बस की तरह है, के लिए, अपनी वेबसाइट में प्लेसहोल्डर छवियों।
टॉमस Reimers: एम एम-एचएम।
PlacePuppy भी है।
और PlaceBacon है।
>> एलीसन BUCHHOLTZ-ए.यू.: PlaceBacon?
रियली?
>> टॉमस Reimers: ओह, हम नहीं करते यहां इंटरनेट का उपयोग कर सकते है।
>> एलीसन BUCHHOLTZ-ए.यू.: [कराह]
दुखद।
टॉमस Reimers: अन्यथा, मैं तुम लोगों को दिखा सकते हैं
कैसे अपनी वेबसाइट में छवियों को डाल दिया।
हम इस प्राप्त करने के लिए प्रयास करने के लिए जा रहे हैं हम जाने के लिए करने से पहले काम कर रहे।
लेकिन अब के लिए, हम सिर्फ रहे हैं फिर रंग में बात करने जा रहा।
हम kittens-- की तस्वीरें डाल करना चाहते हैं
>> एलीसन BUCHHOLTZ-ए.यू.: हमने किया।
>> टॉमस Reimers: --the इंटरनेट की पल के लिए नीचे जा रहा है।
इसलिए हम दो divs है, और हम कर रहे हैं उन्हें दो आईडी देने के लिए जा रहा है।
हम यह कॉल करने के लिए जा रहे हैं "पहले" और "दूसरा"।
तो आईडी = "पहले।"
और हम उन्हें दो रंग देने के लिए जा रहे हैं।
इसलिए हम कुछ कैसे चयन करते हैं "" पहले से एक आईडी के साथ?
एलीसन BUCHHOLTZ-ए.यू.: डॉट या हैश?
दर्शक: तीव्र।
टॉमस Reimers: तीव्र, बिल्कुल सही।
तीव्र, हैश, जो कुछ we--
>> एलीसन BUCHHOLTZ-ए.यू.: बहुत सी बातें यह कॉल करने के लिए।
>> टॉमस Reimers: ठीक है।
हम हैशटैग पर व्यवस्थित करने के लिए जा रहे हैं, और कर रहे हैं कि हम साथ जाने के लिए जा रहे हैं।
ठीक है?
>> एलीसन BUCHHOLTZ-ए.यू.: हैशटैग।
>> टॉमस Reimers: तो हैशटैग का पहला।
>> एलीसन BUCHHOLTZ-ए.यू.: तो आप seminar-- ट्वीट कर सकते हैं
हैशटैग सीएसएस, शांत हैशटैग।
टॉमस Reimers: हैशटैग Awesomeness।
एलीसन BUCHHOLTZ-ए.यू.: हैशटैग Awesomeness, हाँ।
टॉमस Reimers: ठीक है।
इसलिए हम "पहले" और "दूसरा है।"
तो सबसे पहले, हमारे पास करने के लिए जा रहे हैं लाल रंग का एक पृष्ठभूमि रंग।
एलीसन BUCHHOLTZ-ए.यू.: उह, पेट के।
टॉमस Reimers: हाँ।
एलीसन BUCHHOLTZ-ए.यू.: मैं अपनी जगह-चेकर हो जाएगा।
टॉमस Reimers: एलीसन मुझे मिला है।
Blue-- की पृष्ठभूमि रंग
>> टॉमस Reimers: बैंगनी!
>> टॉमस Reimers: बैंगनी।
एलीसन BUCHHOLTZ-ए.यू.: हाँ।
पर्पल के मेरा पसंदीदा रंग, और हम अभी तक उपयोग नहीं किया है।
>> टॉमस Reimers: वायलेट।
एलीसन BUCHHOLTZ-ए.यू.: वायलेट।
यही काम करता है।
>> टॉमस Reimers: तो हम कर रहे हैं दो divs के लिए किया जा रहा।
वे पूरी तरह से खाली हो जा रहे हैं।
हम शायद कुछ पाठ करना चाहिए था।
तो "" पहले होने जा रहा है "नमस्ते।"
और "दूसरा" say-- जाएगा
>> एलीसन BUCHHOLTZ-ए.यू.: अलविदा।
>> दर्शक: - "वर्ल्ड।"
अलविदा, नमस्कार।
एलीसन BUCHHOLTZ-ए.यू.: मैंने देखा संगीत समारोह में उन्हें दूसरे सप्ताह।
टॉमस Reimers: बीटल्स?
एलीसन BUCHHOLTZ-ए.यू.: reals के लिए।
वे कहते हैं कि महान नहीं कर रहे हैं।
मुझे यह पसंद नहीं है।
>> टॉमस Reimers: हम "नमस्ते" और "अलविदा।"
और फिर, सीएसएस, बस कमाल है यह हमारे रंग पहचानता है।
यहां तक ​​की जरूरत नहीं है वे मौजूद है कि चिंता मत करो।
वे करते हैं।
>> एलीसन BUCHHOLTZ-ए.यू.: वे मौजूद।
>> टॉमस Reimers: तो सीएसएस मैं लगता है कि 255 शब्दों रंग के बारे में बात करने के लिए।
यदि आप बाहर एक रंग के बारे में सोच सकते हैं उन 255, की तरह, मैं प्रभावित हो जाएगा।
एलीसन BUCHHOLTZ-ए.यू.: हाँ।
मैं तुम लोगों को हो सकता है बस सही होने के बाद में आते हैं।
>> टॉमस Reimers: तो यहाँ, आप हम दो बक्से देखेंगे
सही एक दूसरे को, सही के शीर्ष पर?
नमस्ते और अलविदा।
>> एलीसन BUCHHOLTZ-ए.यू.: बीच में कोई जगह नहीं है।
वे सिर्फ smooshed रहे सही एक दूसरे के शीर्ष पर।
>> टॉमस Reimers: तो पहली बात मुझे लगता है हम के बारे में बात करनी चाहिए अनुमान
चलो यह भी हाँ say-- जाने है।
तो सीएसएस बॉक्स की तरह के रूप में उन्हें प्रतिनिधित्व करता है।
और बक्से के रूप में, वे सामग्री है।
और सामग्री अब सही तरह की है नमस्कार या अलविदा और यह बात है।
ठीक है?
>> पहले चीजों में से एक तो तुम क्या कर सकते हैं आप गद्दी जोड़ सकते है।
गद्दी कितनी जगह कहते हैं यह प्रत्येक पक्ष पर छोड़ देना चाहिए।
तो चलो मैं कहना चाहता हूँ हम कहते हैं प्रत्येक पक्ष पर 10 पिक्सल।
और मैं एक दूसरे में काटना होगा।
एलीसन BUCHHOLTZ-ए.यू.: यहां इन सभी बातों के
पिक्सल में ज्यादातर होने जा रहे हैं संगोष्ठी के आराम के लिए।
आप यह है कि देखने के लिए जा रहे हैं इसके चारों ओर कुछ जगह, सही है?
तो तुम यहाँ नहीं दिख रहा है क्या वहाँ है गद्दी के इस अदृश्य क्रमबद्ध
जैसे, जो कहते हैं, प्रत्येक पक्ष पर, ठीक है, तुम content-- की अपनी बॉक्स है
>> एलीसन BUCHHOLTZ-ए.यू.: यदि आप चाहते हैं बस का निरीक्षण तत्व को खींचने के लिए?
>> टॉमस Reimers: हाँ, यह एक अच्छा विचार है।
एलीसन BUCHHOLTZ-ए.यू.: इसके अलावा, मुझे मिल निरीक्षण तत्व एक अच्छा तरीका है कि
कुछ जा रहा है कि अगर यह पता लगाने के लिए गलत, अप्रत्याशित कुछ होता है,
टैग निरीक्षण और देखकर क्या ओवरराइट मददगार है की तरह है।
>> टॉमस Reimers: तो मुझे यकीन नहीं है तुम लोग इस रंग देख सकते हैं।
आप कर सकते हैं?
आप इस गद्दी देखेंगे धार की तरह पर।
और फिर आप वास्तविक देखना नीले रंग में सामग्री, है ना?
तो यह है कि बहुत है बॉक्स मॉडल की मूल बातें।
आप सामग्री है।
तो फिर तुम padding है।
>> दर्शक: क्यों तुम बस नहीं करते the-- अंदर बॉक्स का उपयोग करें
>> एलीसन BUCHHOLTZ-ए.यू.: ठीक है।
यह सिर्फ का चयन कर रहा है क्योंकि अब ठीक तत्व।
>> टॉमस Reimers: हाँ।
अन्य चीजें।
तो चलो उस के बारे में बात करते हैं एक पल के लिए गद्दी आदेश।
सीएसएस, माप में तो एक इकाई की आवश्यकता है।
तो पहले आप को राशि है।
तो इस मामले में, हम 10 कहा है।
और फिर अगले एक कहा है कि हम पिक्सल, px है।
हो सकता है आप अन्य लोगों को कर रहे हैं सेंटीमीटर, इंच की तरह बातें।
आप चीजों की तरह कर सकते हैं, 10 इंच क्या है?
और यह हास्यास्पद होने जा रहा है।
>> एलीसन BUCHHOLTZ-ए.यू.: ओह, लड़के।
>> दर्शक: वाह।
>> टॉमस और एलीसन: हाँ।
टॉमस Reimers: तो है कि सभी गद्दी है।
मैं पिक्सल के लिए वापस जाने के लिए जा रहा हूँ।
>> एलीसन BUCHHOLTZ-ए.यू.: पिक्सल मानक, जैसे हो जाते हैं।
आप वेबसाइटों की एक बहुत देखो, वे ज्यादातर पिक्सल में काम करते हैं।
टॉमस Reimers: तो आप को देखने के लिए जा रहे हैं या तो आप देख अन्य लोगों pixels--
एक उन्हें है, जो उन्हें है फ़ॉन्ट की ऊंचाई के बराबर
जो आप वर्तमान में उपयोग कर रहे हैं।
>> एलीसन BUCHHOLTZ-ए.यू.: मिमी।
टॉमस Reimers: यह कहने के लिए एक अच्छा तरीका है जैसे, मैं अपने फ़ॉन्ट के रूप में के रूप में ज्यादा जगह चाहते हैं
ले जा रही है।
एलीसन BUCHHOLTZ-ए.यू.: कि पता नहीं था।
आप हर दिन कुछ नया सीखते हैं।
टॉमस Reimers: वहाँ रहे हैं एक सीएस में माप की बहुत।
मैं आप उन्हें देखने की सलाह देते हैं।
आपके सभी मामलों के लिए, मुझे लगता है कि पिक्सल पर्याप्त होना चाहिए।
और वे भी क्या कर रहे हैं आप को देखने के लिए जा रहे हैं
ऑनलाइन किया उदाहरण के बहुमत में।
इसलिए हम पिक्सल पर छोड़ दूँगा।
>> तुम भी, मैं इतना say-- कर सकते हैं चाहिए padding समूह paddings सब के सब।
आप भी ऐसा कुछ कर सकते हैं बस set-- करने के लिए "पैडिंग टॉप"
एलीसन BUCHHOLTZ-ए.यू.: हो सकता है हम अपने "नमस्ते" वापस मिल जाएगा।
टॉमस Reimers: सिर्फ सेट --to शीर्ष और कुछ नहीं पर गद्दी।
तो चार आदेशों पैडिंग टॉप कर रहे हैं, गद्दी-नीचे, padding-left,
और padding-सही है।
>> एलीसन BUCHHOLTZ-ए.यू.: बस की तरह यदि आप एक बॉक्स के लिए उम्मीद करेंगे।
>> टॉमस Reimers: हाँ।
कुछ भी नहीं है वहाँ भी पागल।
कि मतलब?
तो यह है कि गद्दी है।
मैं सभी सेट करने के लिए जा रहा हूँ वापस करने के लिए 10 paddings।
और फिर मैं सीमा पर स्थानांतरित करने के लिए जा रहा हूँ।
>> तो क्या सीमा है सीमा एक अजीब आदेश है।
यह एक बार में तीन चीजों की तरह लेता है।
तो पहले आप को कितना बड़ा है यह एक माप के रूप में होना चाहता हूँ।
फिर से, मैं केवल पिक्सल का उपयोग कर रहा हूँ।
और आखिरी बात मैं मापन के लिए जोड़ना चाहिए
एक बात है जो एक यूनिट की जरूरत नहीं है शून्य है।
यह वास्तव में गलत है 0 एक इकाई देने के लिए,
0 0 इंच भर है, क्योंकि पिक्सल, सेंटीमीटर, जो भी हो।
यह सब सिर्फ सही, 0 मतलब है?
तो पहले आप को यह माप दे।
>> तो फिर तुम यह शैली दे।
तो मैं कहने जा रहा हूँ "ठोस।"
और हम हैं कि क्या मतलब के बारे में बात करेंगे।
और फिर अंत में, आप इसे एक रंग दे।
तो मैं कहने जा रहा हूँ "काला।"
और ये हम सब बातें कर रहे हैं अब शैली के लिए छोड़कर, पहले देखा,
लेकिन हम उस बारे में बात करेंगे।
तो तुम लोग माप देखा है, और आप रंगों को देखा है।
और क्या होता है जब हम इस मिल रहा है इसके चारों ओर अच्छा काले रंग की सीमा, है ना?
हम किया है कि कैसे तुम लोगों को देखते हैं?
>> दर्शक: हाँ।
>> टॉमस Reimers: कूल।
तो क्या है?
तो सब से पहले, यह एक पिक्सेल है।
यह ठीक है, काफी स्पष्ट है?
की तरह, यह एक पिक्सेल मोटी है।
या यह एक पिक्सेल होगा, लेकिन मैं कर रहा हूँ यह एक छोटा सा अधिक है तो, में उछाल
उस से भी।
>> एलीसन BUCHHOLTZ-ए.यू.: और हम हैं यह हास्यास्पद संकल्प टीवी।
>> टॉमस Reimers: हाँ।
आप इसे बड़ा कर सकते हैं, छोटे, जो भी हो।
यहाँ तो एक दो पिक्सेल सीमा है।
आप इसे मोटी दो बार के रूप में देखेंगे।
आपके पास अगली बात रंग है।
यह दिलचस्प नहीं है।
मैं बात करने के लिए नहीं जा रहा हूँ वास्तव में, इस बारे में।
>> एलीसन BUCHHOLTZ-ए.यू.: लेकिन शैली सिर्फ एक छोटे से दिलचस्प हो सकता है।
>> टॉमस Reimers: हाँ।
शैली तो, कुछ लोग हैं मैं आमतौर पर इस्तेमाल किया देखते हैं।
सबसे पहले एक ठोस, अगले एक डॉटेड, और पिछले एक के धराशायी।
और यहाँ बिंदीदार है।
आप वे कर रहे हैं कि देखेंगे डॉट्स की एक गुच्छा, है ना?
तरह का एक अच्छा सीमा पाने के लिए एक अच्छा तरीका जा रहा है, डैश भी बहुत लोकप्रिय हैं।
>> एलीसन BUCHHOLTZ-ए.यू.: और फिर बेशक, मैं कर रहा हूँ
यकीन है कि अन्य बहुत सारे हैं आप प्राप्त कर सकते हैं कि शैलियों।
और हम की एक महान सेट है आप लोगों के लिए अंत में लिंक
एक तरह से सोचना और अधिक ठंडा सीएसएस पर दिखेगा।
>> टॉमस Reimers: और फिर आखिरी बात यह है, हम कर रहे हैं
के बारे में बात करने जा रहा बॉक्स मॉडल असली जल्दी।
ओह, और उसके बाद सीमा, वास्तव में गद्दी की तरह,
आप यह भी पसंद बातें हैं सीमा-बाएँ, सीमा-सही, सीमा टॉप,
सीमा-नीचे, आप जो की अनुमति एक विशिष्ट सीमा पर पाने के लिए।
यहाँ तो सिर्फ सीमा छोड़ दिया परिभाषित है।
वह समझ में आता है?
>> एलीसन BUCHHOLTZ-ए.यू.: यह एक अच्छा है जिस तरह से बातें जोर देना या जोड़ने के लिए
विभिन्न तत्वों के बीच लाइनों।
टॉमस Reimers: बिल्कुल।
तो यह है कि हमारी सीमा है।
और पिछले एक के मार्जिन।
मार्जिन की तरह गद्दी यह within-- नहीं है सिवाय
एलीसन BUCHHOLTZ-ए.यू.: यह नहीं अपने तत्व के आसपास
लेकिन वास्तव में पूरे चारों ओर बॉक्स हम देख रहा है कि।
>> टॉमस Reimers: हाँ।
एलीसन पूरी तरह से यह कहा।
यह आपके अंदर है, की तरह नहीं है, तत्व है, यह पूरे बॉक्स के आसपास है।
उस तरह चीजों का मतलब पृष्ठभूमि यह करने के लिए लागू नहीं है।
और यह मूल रूप कहते हैं, की तरह, मैं कुछ नहीं चाहिए
मेरे लिए यह ज्यादा जगह में।
हमारे पास यहां की तरह तो 10 पिक्सल के एक मार्जिन।
10 पिक्सल के भीतर ऐसा कुछ भी नहीं है मेरे बगल में होना चाहिए।
उस की तरह है इसके अंतरिक्ष लेकिन एक तरह से नहीं।
तो यह है कि बहुत है बॉक्स मॉडल की मूल बातें।
कि मतलब?
कूल, शांत।
एलीसन BUCHHOLTZ-ए.यू.: बहुत बढ़िया।
तो अब मैं सिर्फ हम सोचते हमारे शांत संसाधन हैं
हम तुम लोगों को ले जाता हूँ कि बहुत जल्दी के माध्यम से।
और हम अच्छी तरह actually-- करेंगे, हम अभी तक इंटरनेट की क्या ज़रूरत है?
>> टॉमस Reimers: चलो मैं up-- खोल सकते हैं अगर देखना
मुझे बस अगर देखते हैं कि मैं जल्दी से इंटरनेट प्राप्त कर सकते हैं
एलीसन कुछ के बारे में बात करती है, जबकि एलीसन के बारे में बात करना चाहता है।
एलीसन BUCHHOLTZ-ए.यू.: तो basically-- मैं नहीं
मैं इस बिंदु पर कह सकते हैं और क्या पता है।
लेकिन इन कर रहे हैं कुछ वास्तव में अच्छा संसाधनों।
ये लोग कर रहे हैं कि टॉमस और मैं का इस्तेमाल किया है
और हम वास्तव में है कि इस बात के लिए तैयार करने के लिए प्रयोग किया जाता है।
W3Schools से एक यह है कि आप लोग पहले देखा जाना चाहिए था।
हम एक के लिए यह सलाह देते हैं सीएसएस के साथ बहुत सी चीजें।
मैं मैं करने के लिए यह सलाह देते हैं पता है मेरे अनुभाग हर समय।
>> महान चीज़ों में से एक यह है कि सीएसएस के साथ गड़बड़ की तरह करने के लिए आपको अनुमति देता है
और परिवर्तन देखने तत्क्षण इस में,
जैसे, डबल खिड़की यह है कि देखने के लिए।
तो क्या आप के बारे में चिंता करने की जरूरत नहीं है अपने स्वयं के वेब पेज की स्थापना,
या में vhost निर्धारित करना स्थानीय उपकरणों और स्थानीय मेजबान,
और वह सब सामान काम कर रही है।
यह सही पृष्ठ के भीतर एम्बेडेड है।
>> और यह इन छोटी है सबक यह है कि आप कर सकते हैं
जानने के लिए के माध्यम से जाना चयनकर्ताओं के बारे में अधिक है,
या जोड़ तोड़ के बारे में जानने के लिए अपने फ़ॉन्ट, या एक पृष्ठभूमि है, या एक छवि।
और अगर आप इन किया है तात्कालिक परिणाम है कि आप
किसी भी करने के लिए नहीं है के लिए अन्य तैयार करने का काम करते हैं।
इसलिए मैं W3Schools से प्यार करते हैं।
यह शानदार है।
यह काम कर रहा है?
>> टॉमस Reimers: हाँ।
नहीं, ऐसा नहीं है।
तुम मुझे कोशिश करना चाहते हैं और अपने कंप्यूटर को पुनः आरंभ?
या हम to-- चाहते हैं
>> एलीसन BUCHHOLTZ-ए.यू.: मेरा मतलब है, खैर, यह भी ऑनलाइन हो जाएगा।
सभी स्लाइड ऑनलाइन हो जाएगा।
इसलिए मैं सिर्फ अत्यधिक इन करने की सिफारिश।
>> यह बस के रूप में महान है एक धोखा शीट की तरह।
यह सिर्फ सभी बुनियादी है आपको लगता है कि हासिल है।
जब आप पहली बार कर रहे हैं यह बहुत अच्छी बात है अपनी वेबसाइट बाहर शुरू।
हो सकता है आप नहीं है सभी में प्राप्त करना चाहते हैं
किरकिरा असली जुओं से भरा हुआ डिजाइन भारी सामान।
तुम सिर्फ एक तरह से यह प्रारूप करने की जरूरत है उस तरह की भावना और इच्छा बनाता है
कुछ समय के लिए करते हैं।
और तुम सच में चाहते हैं इसे में प्राप्त करने के लिए, मुझे पता है
इस तरह, में से एक है टॉमस की पसंदीदा संदर्भ।
हम यह करने के लिए इस्तेमाल कर रहे थे प्रस्तुत करने का, और यह शानदार है।
यह मोज़िला से डेवलपर की।
>> टॉमस Reimers: तो मोज़िला हैं फ़ायरफ़ॉक्स जो लोग।
और यह सिर्फ अपने निजी डेवलपर की मुझे लगता है कि जो संदर्भ, कमाल है।
और यह एक अद्भुत है संसाधनों की सूची।
इसलिए हम have--
>> एलीसन BUCHHOLTZ-ए.यू.: और फिर पिछले नोट है
जब आप करने की कोशिश कर रहे हैं , अपनी वेबसाइट डिजाइन
बातों से प्रेरणा लेते हैं कि आप सुंदर हैं।
तत्व का निरीक्षण स्रोत कोड का निरीक्षण
सुपर सहायक हो सकता है यह पता लगाने की कोशिश कर के लिए
कैसे अपनी खुद की वेबसाइट शैली के लिए।
>> अक्सर, मैं सबसे अच्छा तरह लग रहा है इस तरह, प्रयोग के अलावा,
बस में लग रहा है सुंदर चीजें हैं जो।
मैं इसे सिर्फ करने के लिए वास्तव में मुश्किल है लगता है एक तरह से अपने दम पर बातें डिजाइन,
विशेष रूप से शुरुआत में।
इसलिए वेबसाइटों को देखने के लिए कृपया आप देख रहे है कि आनंद।
समझ क्या उन्हें आप के लिए अपील।
और फिर करने के लिए स्वतंत्र महसूस हो रहा है कोशिश करते हैं और कि दोहराने।
>> टॉमस Reimers: ठीक है।
यहां तक ​​कि वेबसाइटों की तरह इस तरह से, आप देख सकते हैं
शीर्ष पर एक div निश्चित रूप से नहीं है।
और फिर आप के भीतर एक और div के पास यहाँ, जो सीएसएस Awesomeness है।
और फिर तुम यहाँ लिंक का एक गुच्छा है।
आप वास्तव में सिर्फ निरीक्षण हैं तत्वों, आप की तरह कर सकते हैं
वेबसाइटों क्या कर देखना शुरू की तरह लग रही है, और मैं कैसे कर सकते हैं
अगर मैं चाहता था कि बहलाना।
कि मतलब?
इसलिए हम केवल बाईं तीन मिनट है।
सवाल तो?
उनमें से किसी को?
हाँ।
>> दर्शक: रंग के लिए आयत, तुम कैसे होगा
आप यह नहीं चाहते थे कि अगर have-- , पूरे पृष्ठ भर सका जा रहा
आप इसे ही पार जाना बना दिया है आधे पेज या सिर्फ पाठ?
>> टॉमस Reimers: हाँ, बिल्कुल।
तो मुझे वास्तव में देखते हैं।
मैं दो विचार है।
तो सब से पहले, आप यह भी percents उपयोग कर सकते हैं।
>> दर्शक: सच में?
>> एलीसन BUCHHOLTZ-ए.यू.: तो कुछ देखने के लिए सापेक्ष स्थिति है।
यह कुछ ऐसा है कि हम में पाने के लिए समय नहीं है,
लेकिन यह मैं निश्चित रूप से कुछ है तुम लोगों को बाहर की जाँच की सिफारिश।
>> टॉमस Reimers: तो percents।
हम इसे बनाया है और कैसे देखते हैं चौड़ाई का सिर्फ 50%?
एलीसन BUCHHOLTZ-ए.यू.: यदि आप वास्तव में पिक्सेल की संख्या पता है,
आपको लगता है कि जिस तरह से और अधिक सटीक हो सकते हैं।
आप इसके साथ बेला के आसपास जा सकता है।
लेकिन 50%।
हम अपने ब्राउज़र का आकार बदलने के लिए गए थे, यह यह छोटा करना होगा।
>> टॉमस Reimers: खैर, यह है मूल रूप से 50% अब ठीक है, मुझे लगता है।
यह तो मार्जिन 50% है, और उस करने के लिए जोड़ा गया है।
सीएसएस quirks के एक बहुत है।
इसलिए अभी यह है पृष्ठ चौड़ाई का 50%।
लेकिन अगर आप 10 है कि याद पिक्सल हर तरफ से बंद कर लिया।
तो अगर आप के खिलाफ है कि स्थानांतरित करने के लिए थे ब्राउज़र के बाएँ किनारे,
तो यह 50% की तरह लग रही होगी।
जैसा मैंने कहा फिर, सीएसएस कर सकते हैं अनुमान है और जांच की एक बहुत हो।
जैसे, यदि आप कुछ लगता है एक तरह से व्यवहार करने के लिए जा रहा है,
लेकिन यह पूरी तरह से एक अलग तरह से व्यवहार करता है।
>> एलीसन BUCHHOLTZ-ए.यू.: और तुम बस, होशियार हो
और तुम सिर्फ एक बेहतर हो इसके लिए अंतर्ज्ञान आप के साथ कदम के रूप में।
>> टॉमस Reimers: और यह बदतर और बदतर हो जाता है।
तो यह वास्तव में सिर्फ एक दौड़ है।
>> एलीसन BUCHHOLTZ-ए.यू.: यही कारण है कि सुपर उत्साहजनक है।
हम उन्हें सीएसएस पसंद करने के लिए चाहते हैं।
>> टॉमस Reimers: सीएसएस भयानक है।
याद रखें कि।
अन्य प्रश्न?
>> एलीसन BUCHHOLTZ-ए.यू.: एक बात।
कुछ और?
बिंदास।
>> टॉमस Reimers: बहुत बढ़िया।
>> एलीसन BUCHHOLTZ-ए.यू.: ठीक है, तुम अगर दोस्तों, पर बाद में कोई प्रश्न हैं,
हम हमेशा हमेशा की प्रति के रूप में उपलब्ध हो।
तुम्हें शायद कुछ देखेंगे अंतिम परियोजनाओं के लिए हम में से
और निश्चित रूप से hackathon पर।
>> टॉमस Reimers: बिल्कुल।
और मेले में।
>> एलीसन BUCHHOLTZ-ए.यू.: और मेले में।
ओह।
>> टॉमस Reimers: के लिए तत्पर हैं अपने awesome-- के सभी देखकर
>> एलीसन BUCHHOLTZ-ए.यू.: हम देखेंगे अपने भयानक वेबसाइटों के सभी
कि सुंदर हो जाएगा।
टॉमस Reimers: आप हमेशा कर सकते हैं , जैसे, वेबसाइटों को देखने के
कौन है, तो पसंद है, अच्छा सीएसएस और था सीएसएस क्या करने की कोशिश नहीं की थी, जो उन लोगों की तरह।
एलीसन BUCHHOLTZ-ए.यू.: इसके अलावा, एक और बात यह है कि इस पर गौर करने के लिए एक और बात
Bootstrapping है।
इसलिए बूटस्ट्रैप महान है।
>> टॉमस Reimers: गूगल कि अगर you--
>> एलीसन BUCHHOLTZ-ए.यू.: गूगल यह।
यह शानदार है।
तुम इसे प्यार करती हूँ।
और अब आप एक है कि सीएसएस की बुनियादी समझ,
यह एक बहुत अधिक समझ बनाने के लिए करेंगे।
बहुत बढ़िया।
धन्यवाद, दोस्तों।
>> टॉमस Reimers: बहुत-बहुत धन्यवाद।