[เล่นเพลง] ALLISON Buchholtz-AU: ดังนั้น เรากำลังจะเป็นเพียง เพื่อให้คุณได้บทสรุป ของ CSS เพราะเรารู้ ว่ามันก็ไม่ได้รับการคุ้มครอง ในทุกส่วน และเราต้องการที่จะให้แน่ใจว่าคุณ พวกนี้มีเครื่องมือในการกำจัดของคุณ เพราะมีความสามารถที่จะทำให้ เว็บไซต์ของคุณดูสวยมาก 

และถ้าคุณกำลังสร้างเว็บไซต์แล้ว คุณอาจต้องการที่จะให้มันสวย ฉันหมายความว่าคุณจะได้ไม่ต้องไป แต่ผมขอแนะนำให้มัน [หัวเราะ] หากคุณต้องการให้ผู้ที่จะใช้มันคุณอาจ ต้องการที่จะให้มันเล็ก ๆ น้อย ๆ [ไม่ได้ยิน] ดังนั้นเราจะพยายามและให้คุณเพียง บางเครื่องมือพื้นฐานและความเข้าใจ เพื่อที่ว่าเมื่อคุณออกไปและคุณ การค้นคว้าสิ่งที่เกี่ยวกับ CSS, มันไม่สมบูรณ์พูดพล่อยๆ เช่น CSS บางครั้งจะเป็น 

TOMAS REIMERS: ใช่ แอลลิสันบอกว่ามันสวยดี ดังนั้นผมคิดว่าสิ่งแรกที่เรา ควรเริ่มต้นด้วยคือสิ่งที่เป็น CSS? CSS ดังนั้นเป็นที่น่ากลัว CSS-- 

ALLISON Buchholtz-AU: นั่น ชื่อของการสัมมนาของเรา 

TOMAS REIMERS: ใช่ มันเป็นสิ่งสำคัญมากที่ คุณเข้าใจว่าด้วยแล้ว ถ้าคุณจะใช้เวลาไปหนึ่ง สิ่งที่มันเป็น CSS ถ้ากลัวว่า สองคือ CSS ย่อมาจาก การ Cascading Style Sheets ดังนั้นที่หลักของมัน, CSS เป็น แผ่นลักษณะความหมาย จะช่วยให้คุณรูปแบบหน้าเว็บ และแล้วสิ่งที่หมายถึงมัน วิธีที่จะเพิ่มรูปแบบไปยังเว็บไซต์ของคุณ ดังนั้นตามสไตล์เราหมายถึงทุกอย่าง ที่ไม่ได้ structural-- ดังนั้นสิ่งที่ต้องการสีพื้นหลัง ภาพเส้นขอบเหมือน padding, อัตรากำไรขั้นต้น เราจะพูดคุยเกี่ยวกับสิ่งที่ ทั้งหมดนั่นหมายความว่าในบิต 

ดังนั้นเราจึงได้ไปเพียงแค่ข้างหน้าและ เปิดทั้งสองของผู้ที่ขึ้นมาใน Gedit ดังนั้นนี่คือ index.html และนี่คือ main.css ดังนั้น main.css มีอะไร ALLISON Buchholtz-AU: สไตล์ไม่เพื่อให้ห่างไกล TOMAS REIMERS: ไม่มี และในขณะที่คุณจะเห็นมัน เว็บไซต์ที่น่าเกลียดจริงๆ ALLISON Buchholtz-AU: มันเป็นธรรมดาเพียง TOMAS REIMERS: ใช่ ใช่มันไม่ได้น่าเกลียด มันเป็นเพียงเรียบง่าย และแล้วที่นี่เรามี index.html และเพื่อให้ได้อย่างรวดเร็ว สรุปของ HTM​​L, แอลลิสัน คุณต้องการเพียงแค่พูดคุยเกี่ยวกับหน้า? 

ALLISON Buchholtz-AU: ใช่ ดังนั้นเห็นได้ชัดว่าเรามี HTML ของเรา แท็กซึ่งเพียงแค่ชื่อไฟล์ HTML เรามีส่วนหัวของเราที่นี่ด้วย CSS Awesomeness, which-- ถ้าคุณกลับไป ที่ว่าคืออะไร? 

TOMAS REIMERS: โอ้ ใช่คุณสามารถดู ALLISON Buchholtz-AU: และแจ้งให้ทราบส่วนหัว เป็นส่วนหัวของแท็บนี้ขวาขึ้นที่นี่ และแล้ว "สวัสดีโลก!" เป็น ข้อความที่เรามีเพียงแค่ การแสดงบนเว็บ หน้าซึ่งเป็นเท่าไหร่กลับไป กลับ ซึ่งเป็นเพียงในร่างกายของเรา ตรงนี้ข้อความธรรมดา นอกจากนี้สิ่งหนึ่งที่ แจ้งให้ทราบถ้าคุณดูที่นี่ โทมัสเปลี่ยนขึ้นเหล่านี้ สองจากสไลด์ของเรา ดังนั้นตราบใดที่คุณมีทั้งหมด สามเหล่านี้คุณจะสบายดี พวกเขาสามารถเป็นในสิ่งที่พวกเขาต้องการเพื่อ สิ่งที่สำคัญที่สุดก็คือ คุณมีแต่ละคนสามสิ่ง 

TOMAS REIMERS: โทน เพิ่มประเภทเอกสาร? ALLISON Buchholtz-AU: ใช่ TOMAS REIMERS: ใช่ เย็น ALLISON Buchholtz-AU: เห็นได้ชัดว่า ไมโครโฟนของฉันไม่ชอบฉัน TOMAS REIMERS: โอ้ให้เราเพียงแค่วินาที ในขณะที่แอลลิสันสวิทช์ออกไมค์เธอ เพื่อใช่ ดังนั้นเราจึงมีหน้าหลักของเรา เป็นชนิดของ Unstyled เราไม่ได้มีมาก เพียงแค่เรามีพื้นข้อความ เรามีสไตล์ชีท เรามีชื่อ ดังนั้นเพียงแค่เปลือยกระดูก ส่วนประกอบทำเว็บไซต์ 

ดังนั้นจากที่นั่นให้ พูดคุยเกี่ยวกับสิ่งที่ CSS เป็น และสิ่งที่มันดูเหมือนและทุกที่ ดังนั้นสำหรับ that-- ALLISON Buchholtz-AU: กลับไปที่ภาพนิ่ง TOMAS REIMERS กลับไปยังสไลด์ และอัลลิสันสามารถใช้เวลามากกว่า 

ALLISON Buchholtz-AU: วู ตกลง ดังนั้นในไฟล์ CSS ของคุณ คุณกำลังจะมี จำนวนมากของสิ่งเหล่านี้เรียกว่าเตอร์ นั่นจะเป็นเพียง พื้นฐานของไฟล์ CSS ของคุณ มันเป็นเพียงแค่ไปได้ จำนวนมากและจำนวนมากของเหล่านี้ ดังนั้นตัวเลือก นี่เป็นเพียงกายวิภาคศาสตร์ทั่วไป เรากำลังจะผ่านไป ตัวอย่างเพราะถ้าพวกคุณไม่เคย ดูในส่วนของฉันฉันรู้สึก เช่นเดียวกับสิ่งที่อยู่ในนามธรรม ไม่ทำให้รู้สึกจริงๆ มันก็จะช่วยให้เห็นตัวอย่าง 

ดังนั้นเราจึงมีตัวเลือกบาง ที่จะเป็นตัวบ่งชี้สำหรับบางคน สิ่งที่เราต้องการรูปแบบเพื่อนำไปใช้ และจากนั้นเราจะได้มีใด ๆ ชุดของกฎและค่านิยม ดังนั้นเตอร์ที่คุณอาจจะเห็น อาจจะเป็นสิ่งที่ต้องการของร่างกาย หรือวรรคกับ P, หรือส่วนหัวหรืออะไรก็ตาม สิ่งที่คุณต้องการแท็กของคุณจะ 

ดังนั้นในกรณีนี้เรามีร่างกาย และเรามีกฎบางอย่าง ซึ่งนี้สอดคล้อง กับสิ่งที่สไตล์ของคุณนำไปใช้กับ ดังนั้นในกรณีนี้เรามี สีพื้นหลังและน้ำหนักตัวอักษร ดังนั้นนี่จะเปลี่ยน พื้นหลังของอะไร ภายในแท็กร่างกายใด ๆ ของไฟล์ HTML ของเรา และมันก็จะให้ มันนี้ค่าแสงสีฟ้า 

ดังนั้นมันจะทำให้ พื้นหลังสีฟ้าอ่อน และแล้วสิ่งที่อยู่ภายในร่างกายเป็น จะมีน้ำหนักตัวหนาตัวอักษร ดังนั้นมันจึงเป็นเพียงการไป ตัวหนาข้อความทั้งหมดของเรา และนี่เป็นเพียงหนึ่งในตัวเลือก แต่คุณอาจจะมีหลายอย่างเหล่านี้ และในขณะที่เรากำลังจะแสดง ต่อมานิด ๆ หน่อย ๆ เป็นวิธีการ ที่ผลงานและตัวอย่างที่มากขึ้นมี สิ่งที่คุณต้องการที่จะเพิ่ม? 

TOMAS REIMERS: เลขที่ แอลลิสันได้รับมัน เรากำลังจะตัดขึ้น ตัวอย่างเช่นที่นี่ในเว็บไซต์ตัวอย่างของเรา ดังนั้นขอให้จริงใช้เวลานี้ มันสมบูรณ์แบบ ดังนั้นฉันแค่จะคัดลอกและวาง ด้านขวาที่เป็นไฟล์ main.css ของเรา และฉันจะเก็บมันไว้ และจากนั้นเราจะใช้มัน สังเกตด้านดังนั้นหนึ่งของ สิ่งที่น่าผิดหวังมากที่สุด คือถ้าคุณไม่ได้บันทึกแฟ้มและ แล้วคุณเช่นโหลดหน้า และเหมือนว่าทำไมไม่ได้ การเปลี่ยนแปลงที่เกิดขึ้น? มันเกิดขึ้น ดังนั้นที่นี่เราเห็นว่าเราทำของเรา เว็บไซต์พื้นหลังสีฟ้าอ่อน และบางข้อความตัวหนา 

ฉันควรจะพูดถึงถ้าคุณ คนมีคำถามเกี่ยวกับอะไร ที่เรากำลังทำโปรด อิสระที่จะหยุดเราและขอให้เรา เรายินดีอย่างสิ้นเชิง คำถามฟิลด์ 

ALLISON Buchholtz-AU: เห็นได้ชัดว่ามี CSS, ทุกอย่างที่สร้างขึ้นเอง ดังนั้นหากสิ่งหนึ่งที่ไม่ได้ ทำให้ความรู้สึกตอนนี้เรา ไม่ต้องการที่จะชะงักลงในภายหลัง 

TOMAS REIMERS: งั้นเรามา ชนิดของการผ่านี้ ดังนั้นคุณต้องการที่จะเริ่มต้น ด้วยตัวเลือกที่นี่? 

ALLISON Buchholtz-AU: ใช่ ขณะที่ผมกำลังบอกว่าก่อนที่ร่างกาย เป็นเพียงตัวเลือกของเราที่นี่ ดังนั้นหากเราย้อนกลับไปไปยังอา index-- ของเรา 

TOMAS REIMERS: ซึ่งผมเพิ่งปิด ให้ฉันที่สอง ดังนั้นไฟล์, เปิด, index.html ALLISON Buchholtz-AU: โทน ดังนั้นถ้าคุณสังเกตเห็นที่นี่เรา มีแท็กร่างกายเหล่านี้ใช่มั้ย? ดังนั้นตัวเลือกเพียงสอดคล้องกับ แท็กที่เรากำลังพูดถึง เพื่อให้ร่างกายที่นี่ ดังนั้นสิ่งที่เรากำลังจะบอกว่าเป็น everything-- เราสามารถกลับไป? ฉันหวังว่าฉันจะทำได้เพียงแค่ เช่นเดียวกับหน้าจอสัมผัส มันต้องการจะเป็นอย่างนั้นเย็นมาก 

ดังนั้นสิ่งที่ผู้ที่อยู่ใน แท็กร่างกายที่เราเห็น เป็นเพียงเช่นข้อความ และร่างกายโดยทั่วไป หมายถึงเช่นพื้นหลัง หากคุณเคยต้องการที่จะ เปลี่ยนพื้นหลัง, ที่เป็นไปได้ในแท็กร่างกาย เพียงแค่มีกฎระเบียบเหล่านี้นำไปใช้กับพวกเขา 

ดังนั้นถ้าเราจะไป index.html and-- จริง เราสามารถมีบางสิ่งบางอย่าง ด้านนอกของร่างกาย? ถ้าเรามีเช่นส่วนท้ายหรือ บางสิ่งบางอย่างมันจะไม่นำไปใช้นี้ แต่สิ่งที่อยู่ภายใน แท็กร่างกายเหล่านี้จะ ที่จะได้รับผลกระทบจากร่างนี้ ตัวเลือกที่เราได้ทำ ดังนั้นถ้าคุณมีการพิมพ์ อย่างอื่นตรงนี้ 

TOMAS REIMERS: ลองขับรถกลับบ้านที่ ดังนั้นถ้าเรามี div-- เพื่อให้เป็น เพียงแค่แท็กที่คุณสามารถมี ฉันจะปิดมัน หรือขอให้นี้วรรค ดังนั้น P ย่อมาจากวรรค และภายในย่อหน้าที่ แล้วผมก็พูดว่า "นี่คือข้อความ". เย็น แล้วฉันทำกฎนี้นำไปใช้กับ วรรคแทนของร่างกาย คุณจะเห็นว่ามันมีผลเฉพาะกับ เพิ่งตั้งขึ้นใหม่วรรคขวา ไม่ได้สิ่งที่ทั้ง ไม่ว่าทำให้รู้สึก? 

ALLISON Buchholtz-AU: ดังนั้นนี่คือร่างกายทั้งหมด แต่ตอนนี้ตัวเลือกของเราเพียงแค่ สอดคล้องกับวรรค ดังนั้นเราก็ต้องเป็นตัวหนาและสีฟ้า ย่อหน้านี้โดยเฉพาะ เพราะนี่คือสิ่งเดียว ที่ถูกปิดล้อมอยู่ในแท็กพี 

TOMAS REIMERS: ที่ทำให้รู้สึกการจัดเรียง ว่าสิ่งห่อหุ้มสิ่งอื่น ๆ ? ALLISON Buchholtz-AU: นอกจากนี้เพียงแค่ ที่จะบอกว่าเหมือนเป็นหนึ่งในวิธีที่ดีที่สุด จริงๆได้รับความสะดวกสบายกับ CSS คือการทำสิ่งที่ต้องการนี​​้ เพียงแค่พยายามที่จะออก มันง่ายมากที่จะพิมพ์อะไรบางอย่าง ออกตีรีเฟรชและดูสิ่งที่เกิดขึ้น และเช่นเดียวกับซีมากที่สุด การทดลองมักจะสามารถ นำไปสู่​​การที่ดีมาก เข้าใจง่าย มากยิ่งขึ้นดังนั้นกว่าเราเพียง ชอบพูดคุยกับคุณ 

TOMAS REIMERS: แน่นอน 100% เห็นด้วยกับประเด็นที่ ดังนั้นหากเรากลับไปที่นี้ขอเริ่มต้น ผ่าว่าสิ่งที่ทั้งสองทำ ดังนั้นเราจึงมีสองกฎเกี่ยวกับเรื่องนี้ ดังนั้นคนแรกเป็นสีพื้นหลัง และคุณจะเห็นว่าเราได้ตั้งค่า เท่ากับค่า, สีฟ้าอ่อน 

ดังนั้นใน CSS, CSS คือการจัดเรียง หลวมมากเกี่ยวกับวิธีการ คุณได้รับอนุญาตในการกำหนดสี ดังนั้นคุณสามารถกำหนดให้พวกเขาโดยใช้ชื่อ นอกจากนี้คุณยังสามารถทำบางสิ่งบางอย่างเช่น "สีแดง". แล้วถ้าเรากลับไปนี้ คุณจะเห็นว่าพื้นหลังเป็นสีแดง นอกจากนี้คุณยังจะได้รับนะฉันคิดว่าคุณ จะได้รับความรักความคิดสร้างสรรค์กับนี้ คุณไม่สามารถ? 

ALLISON Buchholtz-AU: ผม คิดว่าคุณสามารถใช้ฐานสิบหก คุณไม่สามารถ? 

TOMAS REIMERS: ใช่ ดังนั้นคุณจึงสามารถใช้ฐานสิบหก แต่ฉันคิดว่าชื่อที่ชาญฉลาด ไม่ได้มี? ALLISON Buchholtz-AU: ที่คุณสามารถทำได้ค่อนข้างน้อย สวยมากเช่นสีที่มากที่สุดที่คุณ สามารถ name-- เช่นผมคิดว่าเป็นหนึ่งในปลาแซลมอน 

TOMAS REIMERS: พวกเราจะลองปลาแซลมอน ALLISON Buchholtz-AU: ผม คิดโศกอยู่ในนั้น TOMAS REIMERS: ใช่ ดู? เพื่อให้คุณสามารถได้รับการสร้างสรรค์สวย 

ALLISON Buchholtz-AU: คุณ อาจได้รับการสร้างสรรค์สวย เช่นถ้าคุณสามารถคิด ชื่อสีก็อาจจะอยู่ในนั้น ถ้าคุณอยากปรับ รายละเอียดคุ​​ณสามารถไปฐานสิบหก 

TOMAS REIMERS: ใช่ ดังนั้นเลขฐานสิบหก ถ้าพวกคุณจำกลับนี้ จาก PSET เก่าของคุณภาพการกู้คืน พวกคุณมีการจัดการ ที่มีค่าฐานสิบหกเหล่านี้ และการเรียงลำดับของการสรุปสิ่งที่เป็น ฐานสิบหกได้สามค่าเก็บไว้ในนั้น ดังนั้นจึงเป็นในกลุ่มของสองเพิ่มขึ้น สองคนแรกเป็นตัวแทนของค่าสีแดง หนึ่งสองหมายถึง ค่าสีเขียว และสุดท้ายคือสีฟ้า? 

ดังนั้น FF ที่เกิดขึ้นเพื่อเป็นตัวแทนของ เลขฐานสิบหก 255 เพื่อให้คุณมี 255 สีแดง 255 สีเขียวและสีฟ้าสำหรับ 0 และช่วงค่าระหว่าง 0 และ 255 

ผู้ชม: ขวา เพื่อเป็นหลักเราสามารถค้นหา อินเทอร์เน็ตสำหรับสีใด ๆ ที่เราต้องการ และระบุจริงที่รู้จักกัน คำสั่งผสมสเปกตรัมสี และจากนั้นเราสามารถนำมันมีอะไรบ้าง? ALLISON Buchholtz-AU: แน่นอน เพื่อให้คุณมีการควบคุมที่สมบูรณ์สวยมาก กว่าสีที่คุณต้องการภายใน CSS เราจะพูดคุยเกี่ยวกับ ภาพพื้นหลังภายหลังได้หรือไม่ หรือทำเราต้องการที่จะทำเช่นนั้น? 

TOMAS REIMERS: ใช่ อย่างแน่นอน ดังนั้นก่อนเพียงเพื่อแสดงให้เห็นว่า สีแดงและสีเขียวเป็นสีเหลือง และถ้าคุณต้องการบางอย่าง ช่วยหานี้คุณ บางสิ่งบางอย่างสามารถของ Google เช่น "เลือกสี". ALLISON Buchholtz-AU: โอ้มันเป็นสิ่งที่ดีดังนั้น ฉันรักตัวเลือกสี 

TOMAS REIMERS: colorpicker.com เป็นตัวอย่างที่ดี และที่นี่คุณจะเห็นว่าคุณมี เต็มรูปแบบเลือกสี Photoshop เหมือน 

ALLISON Buchholtz-AU: MM-HM นอกจากนี้สิ่งดีๆที่คุณ สามารถสร้างรูปแบบสี เพื่อที่คุณจะได้มี เช่นการปะทะกันสี TOMAS REIMERS: แล้ว นี่เป็นค่า hex ขึ้นที่นี่ เพื่อให้คุณสามารถค้นหาออนไลน์โดยทั่วไป สถานที่ที่จะได้รับค่าฐานสิบหกจาก มันไม่ได้เรียงลำดับของที่เพิ่งเช่นเรา เห็นสีของโลกในตัวเลข มันเป็นเรื่องที่เราไปออนไลน์ และค้นหาสิ่งที่สีที่เราต้องการ แล้วใช้จำนวนลง เพราะมันเป็นเพียงเรื่องง่าย วิธีที่จะอ้างอิงสิ่งที่อยู่ใน CS 

ALLISON Buchholtz-AU: แล้วมี also-- ลืมชื่อที่แน่นอนของเว็บไซต์ แต่มีแน่นอนผม คิดว่าบางสิ่งบางอย่างจาก Adob​​e ที่สร้างรูปแบบสีสำหรับคุณ ซึ่งเป็นเย็นจริงๆเพราะคุณ definitely-- มันเป็นบางครั้ง ยากที่จะคิดออก โอ้ถ้าผมต้องการที่จะใช้สีนี้ สิ่งที่อาจจะเป็นอีกคนหนึ่งที่มีประโยชน์ ที่จะใช้ที่อื่น ๆ บนเว็บไซต์ของฉันไป เหมือนทำให้มันที่ดีและเหนียว 

TOMAS REIMERS: อัลลิสันพูดคุยเกี่ยวกับ หนึ่งโดย Adob​​e Kuler เรียกว่าผมคิดว่า มันเป็น K-U-L-E-R ALLISON Buchholtz-AU: ผมคิดอย่างนั้น ผมค่อนข้างแน่ใจว่าเป็นอย่างใดอย่างหนึ่ง 

TOMAS REIMERS: ที่ชื่นชอบของฉันมี รับเสมอดีไซน์แบบสี 

ALLISON Buchholtz-AU: โอ 

TOMAS REIMERS: ซึ่งเป็น now-- 

ALLISON Buchholtz-AU: Ah นี้เป็นสิ่งที่สวยงาม 

TOMAS REIMERS: และคุณ โดยทั่วไปสามารถพูดได้เช่น ฉันต้องการสามสีติดกัน แล้วให้ทำสิ่งที่ดี แล้วคุณจะได้รับตัวอย่างเช่น ของสิ่งที่อาจมีลักษณะเหมือน แล้วถ้าคุณเลื่อนเมาส์ไปใด ๆ ของ พวกเขาก็จะช่วยให้คุณค่า hex 

ดังนั้นเพียงแค่เป็นวิธีที่ดีที่จะเริ่ม คิดเกี่ยวกับรูปแบบสี หรือสิ่งที่สีที่มีในเว็บไซต์ อาจจะไปด้วยกันได้ดี เพราะนั่นอาจจะเป็นที่น่าแปลกใจ ไม่ได้เป็นเรื่องง่ายที่จะเลือกอย่างที่คุณคิด และแล้วสิ่งดีๆอื่น ๆ ฉันได้พบเสมอเกี่ยวกับเว็บไซต์นี้ คือถ้าคุณตีตัวอย่างก็จะ แสดงสิ่งเช่นเว็บไซต์ อาจมีลักษณะเหมือนกับการใช้โทนสีที่ ยังไงก็ตาม 

กลับไปที่ CSS ที่เกิดขึ้นจริง ALLISON Buchholtz-AU: แต่เห็นได้ชัดว่าเรา รู้ว่าการอ้างอิงเหล่านี้อาจจะมีประโยชน์ TOMAS REIMERS: ไม่มีพวกเขา แน่นอนจะมีประโยชน์ ดังนั้นกฎข้อที่สองแอลลิสัน? 

ALLISON Buchholtz-AU: ใช่ กฎข้อที่สองเป็นเพียง สอดคล้องกับตัวอักษรของเรา น้ำหนักตัวอักษรดังนั้นเป็นชนิดเพียง เเล้ดังนั้นน้ำหนักจะ ถ้าคุณต้องการเพียงแค่ชอบ ปกติหรือเช่นแบบอักษรทินเนอร์ หรือในกรณีนี้เช่นตัวหนา ฉันลืม อะไรถ้าคุณอยากพูดไปจะมี หนึ่งบางกว่าเพียงแค่เหมือนปกติ? TOMAS REIMERS: ฉันทำไม่ได้จริง ทราบว่ามีหนึ่งทินเนอร์ ALLISON Buchholtz-AU: ผมลืม น้ำหนักตัวอักษรดังนั้นเราจึงมักจะ เพียงแค่ใช้สำหรับเป็นตัวหนา ถ้าคุณต้องการที่จะได้รับจริงๆเป็น มันเราจะแสดงให้คุณ W3Schools มีทั้งหมดที่แตกต่างกัน สิ่งที่คุณสามารถทำได้สำหรับแบบอักษร แต่โดยทั่วไปหากคุณเคยต้องการ ที่จะเปลี่ยนอะไรเกี่ยวกับตัวอักษร มันเป็นไปได้เสมอ เหมือนตัวอักษรบางสิ่งบางอย่าง ดังนั้นมันจะเป็นเหมือนครอบครัว font ถ้าคุณ พยายามที่จะเปลี่ยนชนิดที่เกิดขึ้นจริง มันจะเป็นตัวอักษรแบบถ้าคุณ ต้องการที่จะให้มันเหมือนเล่นหาง หรือตัวเอียงหรือ whatnot หรือแม้แต่ตัวอักษรสีถ้า เราต้องการที่จะเปลี่ยนที่ 

TOMAS REIMERS: Yup ดังนั้นคุณสามารถเปลี่ยนที่ และการจัดเรียงของเพียงเพื่อ สรุปตอนนี้เพื่อให้คุณสามารถ เห็นว่าเรามีตัวเลือกขึ้นที่นี่ เรามีวงเล็บปีกกาเหล่านี้ และจากนั้นเราจะมีกฎระเบียบ คั่นด้วยเครื่องหมายอัฒภาค ไม่ว่าทำให้รู้สึก? ใช่? เย็น ดังนั้นถ้าเป็น good-- 

ALLISON Buchholtz-AU กลับ TOMAS REIMERS: ให้พูดคุยโดยเฉพาะ เกี่ยวกับชนิดของเตอร์เรามี เพราะตอนนี้เราได้ การเรียงลำดับของการแสดงเพียงแค่แท็ก แต่พวกคุณจะได้เห็นมันเป็นไปได้ สมมติว่าคุณมีสองวรรค บนหน้าเว็บและคุณ ต้องการที่จะสามารถให้เข้ากับสไตล์ แต่ไม่ได้อื่น ๆ คุณไม่เพียงต้องการที่จะ จำกัด ตัวเอง ที่จะมีการใช้ภาษา HTML ที่เกิดขึ้นจริงที่แตกต่างกัน แท็กเพื่อให้พวกเขามีสไตล์ที่แตกต่าง 

ดังนั้นเราจึงมีสามขั้นพื้นฐาน ประเภทเตอร์ ALLISON Buchholtz-AU: ใช่ ดังนั้นเราจึงมีแท็กซึ่งเป็นสิ่งที่ เราได้รับการพูดถึงในขณะนี้ นั่นคือชนิดเช่นร่างกายหรือพีของคุณ แล้วเราได้เรียนซึ่งเป็น เมื่อเรากำหนดไว้ในไฟล์ CSS ของเรา ก็มักจะได้รับการจุดใด คุณต้องการให้ชื่อของชั้นเรียนของคุณจะเป็น และนี้สามารถนำไปใช้กับหลายสิ่ง 

สมมติว่าคุณมีห้าวรรค และสองในสามของพวกเขา จะต้องมีสไตล์เดียวกัน คุณจะใช้ชั้นไป และนี่เป็นเพียงวิธีที่เราทำมัน เราจะให้คุณตัวอย่างของ ที่นี้จริงแสดงให้เห็นถึง แต่ถ้าคุณมีแท็กอาจจะบาง p, หลังจากที่มันคุณจะเขียน ชั้นเท่ากับสิ่งที่เรียน คุณต้องการที่จะนำไปใช้กับมัน ดังนั้นสิ่งเตอร์ระดับที่เราต้องการ เพื่อนำไปใช้วรรคนี้โดยเฉพาะ เราก็สามารถเขียนเช่นนี้ แน่นอนผมคิดว่าตัวอย่างเช่น จะทำให้มันเป็นรูปธรรมมากขึ้น 

คนอื่น ๆ ที่เรามี เป็น id ที่เราแสดง กับกัญชาหรือปอนด์หรือ hashtag TOMAS REIMERS: Octothorpe ALLISON Buchholtz-AU: Octothorpe ทำงานที่มากเกินไป และหนึ่งนี้จริงๆควรจะไม่ซ้ำกัน พวกเขาควรจะนำไปใช้กับ สิ่งหนึ่งบนหน้าของคุณ ดังนั้นไม่ว่าจะเป็นวรรคที่เฉพาะเจาะจง หรือบางรายการในรายการหรืออะไรก็ตาม นี้ควรจะไม่ซ้ำกัน และในทางเดียวกันว่าเราเพียงแค่ พูดเหมือน class = "Class1 class2" เพียงแค่นี้อาจจะเป็น id ของสิ่งที่เรามี TOMAS REIMERS: ใช่ ดังนั้นเรามาพูดคุยแน่นอน เกี่ยวกับตัวอย่างที่นี่ และฉันก็จะไปดำน้ำ ตรงกลับเป็นรหัส ดังนั้นให้ดูที่ HTML ของเรา และเพื่อให้เราตอนนี้มีวรรคหนึ่ง นี่คือข้อความ ฉันแค่ไปที่จะปรับเปลี่ยน มัน "นี่คือข้อความที่ 1" และจากนั้นเรากำลังจะไป มี "นี่คือข้อความ 2" 

ALLISON Buchholtz-AU: สองหนึ่ง TOMAS REIMERS: Yup ดังนั้นตอนนี้เรามี "นี่คือข้อความที่ 2" ใช่มั้ย? และเรากำลังจะไปดูว่าถ้าเราโหลด หน้าสิ่งที่เรากำลังจะไปหา คือเราจะ find-- ALLISON Buchholtz-AU: โอ TOMAS REIMERS: ใช่ เรากำลังจะไปหา "นี่คือ ข้อความที่ 1 "และ" นี่คือข้อความ 2 " 

ALLISON Buchholtz-AU: และ สีน่ารักออกสีเหลือง 

TOMAS REIMERS: และคุณจะเห็น ที่เลือกของเราในขณะนี้ ซึ่งจะนำไปใช้ต่อหรือ ย่อหน้าส่งผลกระทบต่อทั้งสองของพวกเขา เนื่องจากทั้งสองของพวกเขาตอบสนองความ เงื่อนไขที่ว่าพวกเขาทั้งสองแท็กพี ที่ทำให้รู้สึกทั้งหมด ดังนั้นคำถามคือ, ดี, สิ่งที่ ถ้าเราต้องการที่จะได้รับหรือไม่ ดังนั้นเหมือนแอลลิสันได้รับการกล่าวว่า เรามีสองวิธีอื่นที่จะทำเช่นนั้น ฉันจะเริ่มต้นด้วย id 

ALLISON Buchholtz-AU: เริ่มต้นให้กับ id 

TOMAS REIMERS: และทั้งสอง เหล่านี้เป็นคุณลักษณะ ดังนั้นคุณลักษณะที่มีอยู่ในรูปแบบ HTML และสิ่งที่พวกเขาเป็น บางสิ่งบางอย่างที่คุณเพิ่ม ในแท็กซึ่งเป็น แยกออกจากชื่อแท็ก ดังนั้นคุณจึงสามารถมีแอตทริบิวต์หลาย ใช่? 

ALLISON Buchholtz-AU: ผมก็แค่ไป ที่จะบอกว่าจากตัวอย่างของคุณจาก PSET 7 ถ้าใด ๆ ของคุณพยายามที่จะจัด สิ่งที่ศูนย์ คุณอาจได้ใช้ "ข้อความ align = center." และคุณอาจจะสังเกตเห็นมัน ควรจะเป็นศูนย์กลาง ข้อความหรือแถบนำทางของคุณ เพื่อให้เป็นเพียงแค่ยังแอตทริบิวต์ ที่คุณอาจจะคุ้นเคยกับ TOMAS REIMERS: มีพวงของ ของแอตทริบิวต์ที่คุณจะเห็น ใช่ เช่นเดียวกับการอ้างอิงที่ดีที่จะ PSET 7 เรามี id นอกจากนี้คุณยังสามารถมี ระดับสิ่งเช่นนี้ แท็กเดียวสามารถมีหลายลักษณะ ดังนั้นเริ่มต้นด้วย id ให้แกล้งเรา ต้องการที่จะมี id เเล้ผมไม่ทราบ เราจะเรียกมันพิเศษ เพราะอันนี้เราไม่ จะทำให้ตัวหนาและ ขีดเส้นใต้และสิ่ง ALLISON Buchholtz-AU: มัน จะเป็นพิเศษสุด TOMAS REIMERS: ดังนั้นนี่ หนึ่งเรามี id พิเศษ ดังนั้นวิธีการที่จะเลือกว่าก็คือ ใน main.css มากกว่ามีแท็กพี, คุณทำ #special, OK? และที่เลือก สิ่งที่มี id พิเศษ นี้ไม่ได้ทำให้ความรู้สึกที่ทุกคนหรือไม่ ผู้ชม: ใช่ TOMAS REIMERS: โทน ดังนั้นตอนนี้ถ้าเรากลับไป เราจะดูหน่อยขออภัย ใช่ เราจะเห็นว่ามันเลือก หนึ่งที่มีรหัสพิเศษ ใช่? เสียงเย็น ใช่ 

ผู้ชม: สิ่งที่สามารถมี แอตทริบิวต์ของทั้งสองเรียนและ id? 

TOMAS REIMERS: ใช่ ผู้ชม: ตกลง และแล้วสิ่งที่เกิดขึ้นถ้าคุณแล้วให้ มันบางกฎใน CSS ความขัดแย้งที่? TOMAS REIMERS: แน่นอน เรากำลังจะไปแน่นอน ที่จะพูดคุยเกี่ยวกับการที่ ดังนั้นสิ่งที่คุณได้รับ ที่คุณยังสามารถมีชั้นเรียน ดังนั้นเรามาแกล้งผมมี วรรคสามและฉัน ต้องการที่จะรูปแบบเป็นครั้งแรก สอง แต่ไม่สาม ดีความคิดแรกของคุณอาจจะดีฉัน ก็สามารถให้คนที่สอง id แต่คุณไม่สามารถเพราะ id, เหมือนแอลลิสันได้รับการกล่าวว่า จะต้องมีเอกลักษณ์ 

ดังนั้นแทนที่จะ id สิ่งที่คุณ สามารถใช้เป็นที่คุณสามารถใช้ในชั้นเรียน และ class-- สิ่งที่จะช่วยให้ คุณจะทำอย่างไรจะเป็นพื้นพูดว่า นี้เป็นเป็นส่วนหนึ่งของกลุ่ม ในกรณีนี้กลุ่มของเรา เรียกว่าพิเศษ และสิ่งที่เรากำลังจะทำนั้นคือ เรากำลังจะ say-- มากกว่าปอนด์ เรากำลังจะใช้จุด OK? และแจ้งให้ทราบว่าปอนด์และจุด เพียง แต่อยู่ในไฟล์ CSS, ไม่ได้อยู่ใน HTML ALLISON Buchholtz-AU: ใช่ แตกต่างที่สำคัญ 

TOMAS REIMERS: ฉันมี มีการต่อสู้มาก เพราะผมใส่กัญชาใน HTML และ แล้วรู้สึกว่าโง่มาเป็นเวลานาน มาดูกันว่าจะมีการคัดเลือกทั้งสอง คนที่มีชั้นเรียนที่? เย็น 

ตอนนี้สิ่งที่สามารถมีหลายชั้นเรียน สมมติว่าผมอยากจะทำครั้งแรก สองมีพื้นฐานของสีเหลือง และครั้งที่สองทั้งสองมี สีตัวอักษรสีฟ้า ตกลง ผมไม่ทราบจริงๆว่าทำไมฉันต้องการ ต้องการที่จะทำอย่างนั้น แต่ฉันสามารถ 

ALLISON Buchholtz-AU: อาจจะไม่ แนะนำสำหรับเว็บไซต์ของคุณ แต่สำหรับวัตถุประสงค์ของเราก็จะทำ 

TOMAS REIMERS: มันไม่ได้ โทนสีที่ดี ALLISON Buchholtz-AU: ดี, สีเหลือง และสีฟ้าเป็นสีที่โรงเรียนมัธยมของฉัน ผมไม่ทราบว่าแม้ว่า TOMAS REIMERS: อัลลิสันสูง โรงเรียนมีโทนสีที่ดี [หัวเราะ] ดังนั้นแล้วสิ่งที่เราสามารถเรียกสิ่งนี้ว่าเป็น ขอเรียกเจ้านี่เพื่อให้เรามีพิเศษ และเรามีพริตตี้ ผมขอแนะนำสำหรับนี้คุณใช้ ชื่อพรรณนามากขึ้น ALLISON Buchholtz-AU: ใช่ฉันจะ เรียกสิ่งนี้เช่นสีเหลืองหรือสีฟ้า 

TOMAS REIMERS: เราไม่ได้ จริงๆการทำเว็บไซต์จริง ซึ่งเป็นเหตุผลที่เราไม่ได้ทำอย่างนั้น แต่ถ้าคุณจริง มีเว็บไซต์ที่จริงคุณ อาจจะมีเช่นหัวบทความ บทความเนื้อหาคำแรก สิ่งที่ต้องการที่ซึ่งจะช่วยให้ คุณจะมากอธิบายเพิ่มเติม เหล่านี้จริงๆเช่นเดียวกับตัวแปร พวกเขาควรจะมีชื่ออยู่ในวิธีการที่ คุณสามารถ like-- ใช่เป็นเช่นนี้ สมบูรณ์ 

สีพื้นหลังดังนั้น และจากนั้นเรากำลังจะ say-- ดังนั้น วิธีที่จะเปลี่ยนสีเป็นเพียง "สี". และเรากำลังจะทำให้มันเป็นสีฟ้า ที่เย็น ดังนั้นตอนนี้เรามี สองคนแรกที่ได้เป็นพิเศษ อย่างใดอย่างหนึ่งต่อไปจะ มี "class = สวย." ALLISON Buchholtz-AU: แล้วคุณจะ ต้องการเพิ่ม "สวย" เพื่อตรงกลางหนึ่ง TOMAS REIMERS: Yup และจากนั้นไปที่ตรงกลางหนึ่ง เพื่อเพิ่ม "สวย" สิ่งที่เกิดขึ้น คือคุณเพียงมีพื้นที่ว่าง ดังนั้นแอตทริบิวต์คลาส เป็นรายการพื้นที่แยก ของทุกชั้นเรียน ที่ใช้กับแท็กที่ OK? มันไม่ได้เป็นเช่นนี้เป็นของ ชนิดของการเรียนพิเศษบางอย่างที่เรียกว่า "พิเศษ, พื้นที่, สวย." มันเป็นสอง classes-- พิเศษและสวย ใช่? เย็น 

แล้วถ้าเรามอง ที่สิ่งที่เกิดขึ้นเราไม่ จะเห็นว่าคนแรกที่มี พื้นหลังสีเหลืองตัวอักษรสีดำ one-- สอง 

ALLISON Buchholtz-AU: --has ตัวหนา พื้นหลังสีเหลืองที่มีข้อความสีฟ้า และสุดท้ายเราก็มี ข้อความสีฟ้าที่เรากำหนดให้มัน 

TOMAS REIMERS: เย็น? วิธีการทำงานเตอร์? น่ากลัว 

ALLISON Buchholtz-AU: เราต้องการที่จะ พูดคุยเกี่ยวกับความขัดแย้งในขณะนี้แล้ว? 

TOMAS REIMERS: เพื่อใช่ อย่างแน่นอน ดังนั้นสิ่งที่เกิดขึ้นถ้าคุณ มีความขัดแย้งใช่มั้ย? ลองทำเป็นครั้งแรกหนึ่ง ตั้งค่าบางอย่าง like-- ALLISON Buchholtz-AU: บางที นี้การเปลี่ยนแปลงพื้นหลัง? TOMAS REIMERS: ใช่ ดังนั้นเรากำลังจะทำให้ "สวย" เปลี่ยนพื้นหลังให้กับปลาแซลมอน ALLISON Buchholtz-AU: คุณเพียงกับ ทุกสีที่ดีในวันนี้โทมัส TOMAS REIMERS: ใช่ เพราะผมพบว่าฉันสามารถ ใช้ปลาแซลมอนเป็นสีจริง ดังนั้นเราเท่านั้นจะทำอย่างนั้น ผมยังคิดว่าซันเซ็ทเป็นสีจริง ผู้ชม: Sunset เป็นสีจริง? ALLISON Buchholtz-AU: ลองมัน TOMAS REIMERS: หลังจากการสาธิตนี้ เพียงเพราะในกรณีที่มัน messes ขึ้น ฉันไม่ต้องการที่จะแก้จุดบกพร่อง ดังนั้นเราจึงรู้ว่าปลาแซลมอนเป็นสีจริง ดังนั้นคาดเดาใด ๆ สิ่งที่จะเกิดขึ้น? 

ALLISON Buchholtz-AU: ความคิดใด? 

ผู้ชม: [ไม่ได้ยิน] 

TOMAS REIMERS: ใช่ เพื่อให้คุณได้รับมันตรงขวา โดยทั่วไปจะใช้เวลา กฎสุดท้ายที่มันได้รับ 

ALLISON Buchholtz-AU: ดังนั้นนี่คือ ที่ซ้อนมีผลบังคับใช้ 

TOMAS REIMERS: ดังนั้นจำไว้ว่าเรา มีที่สไตล์ชีท? ดังนั้นโดยที่เราหมายถึงชนิดของ ที่เรามีพวงของกฎระเบียบ ซึ่งใช้ด้านบนของแต่ละอื่น ๆ และ พวกเขายังสามารถแทนที่กัน 

ALLISON Buchholtz-AU: ดังนั้น สิ่งที่ด้านล่าง จะแทนที่สิ่งที่ด้านบน คุณอาจมีกฎที่สมบูรณ์ ปฏิเสธบางสิ่งบางอย่างก่อน นั่นเป็นเหตุผลที่คุณต้องการที่จะ ระวังเมื่อคุณจัดแต่งทรงผม เพื่อให้คุณไม่สร้างกฎที่ คุณเพียงแค่เอาชนะอย่างสมบูรณ์ 

TOMAS REIMERS: หรือบางทีคุณอาจ ไม่ต้องการที่จะเขียนทับกฎ 

ALLISON Buchholtz-AU: หรือบางทีคุณอาจจะทำ ใช่ 

TOMAS REIMERS: แกล้งคุณมี ชั้นที่นำไปใช้กับสิ่งที่ส่วนใหญ่ แต่สมมติว่าคุณต้องการที่จะเปลี่ยน สีพื้นหลังเป็นสีแดงและตัวอักษร น้ำหนักตัวหนามากที่สุด สิ่ง แต่สำหรับหนึ่ง คุณเพียงต้องการสีพื้นหลัง จะเป็นสีแดง แต่คุณต้องการอื่น ๆ ทั้งหมด คุณสมบัติที่คุณสามารถทำบางสิ่งบางอย่าง เช่น "font-size = น้ำหนักปกติ" ซึ่งก็จะยกเลิกการเปลี่ยนแปลงที่เป็นตัวหนา ใช่? อีกครั้งวิธีที่ดีที่สุดที่ฉันคิดว่า แอลลิสันกล่าวว่ามันเป็นเพียงแค่การปฏิบัติ 

ALLISON Buchholtz-AU: การทดลอง 

TOMAS REIMERS: ฝึกปฏิบัติ การปฏิบัติและการทดลอง ฉันรู้ว่าคนจำนวนมากที่คิดว่า CSS เป็นเพียงมากของการคาดเดาและตรวจสอบ ในตอนท้ายของวันที่ถ้า คุณต้องการที่จะทำบางสิ่งบางอย่างเช่น, คุณมีความคิดที่หยาบ แต่ คุณยังอาจจำเป็นต้องมี เพื่อพยายามที่จะออกเพื่อให้แน่ใจว่า คุณรู้ว่าสิ่งที่ดูเหมือนว่า 

ผู้ชม: เมื่อคุณใช้ เรียนมากกว่าหนึ่ง วรรคเดียวกัน หรือส่วนไม่ได้ ว่าสิ่งที่คุณสามารถทำได้เพื่อ พิมพ์พวกเขาเป็นคำพูดหรือไม่ 

TOMAS REIMERS: ไม่มีไม่ได้ทั้งหมด 

ALLISON Buchholtz-AU: อะไรคือสิ่งที่สำคัญ สินค้าได้ภายในแผ่นลักษณะ CSS ของคุณ ผู้ชม: คุณสามารถทำซ้ำคำถาม? TOMAS REIMERS: โอ้ ALLISON Buchholtz-AU: ภายใน ระดับเมื่อคุณให้เรียน บางสิ่งบางอย่างใน HTML ไม่ มันสำคัญที่การสั่งซื้อสินค้าที่พวกเขากำลังมีอะไรบ้าง? มันไม่สำคัญว่าคำสั่ง สิ่งที่สำคัญคือคำสั่งของ เตอร์ชั้นภายใน CSS ของคุณ ภายในแผ่นสไตล์ของคุณ 

TOMAS REIMERS: เสียงดีหรือไม่? 

ALLISON Buchholtz-AU: น่ารัก 

TOMAS REIMERS: แล้ว เรากำลังจะดำเนินการต่อไป to-- ALLISON Buchholtz-AU: เรามีอะไรต่อไป? ฉันลืม โอ้เราก็มีตัวอย่าง แต่เราได้ทำชนิดของผู้ เราได้ทำตัวอย่างได้ทันที 

TOMAS REIMERS: เราจะได้รับการ รวมเตอร์เร็ว ๆ นี้ 

ALLISON Buchholtz-AU: โอ้ เราได้รับที่จะรวมเตอร์ TOMAS REIMERS: ดังนั้นบาง ตัวอย่างก็คือเรามี # ปอนด์ dog-- หรือ hashtag, หรือ octothorpe หรืออะไรก็ตาม คุณต้องการโทรคม that-- 

ALLISON Buchholtz-AU: สุนัขคม 

TOMAS REIMERS: แล้วคุณมี .pets อะไรบางอย่างที่มี id ของสุนัข, มีเพียงหนึ่งสุนัขบนหน้าเว็บ อะไรบางอย่างที่มี id ของ แมวมีเพียงหนึ่งแมว อาจจะมีสัตว์เลี้ยงจำนวนมากบนหน้าเว็บ นั่นเป็นเหตุผลที่เราให้ที่เรียน คุณมีตัวอย่างของพี และแล้วดังนั้นหนึ่งของ ตัวอย่างเช่นที่ผ่านมาซึ่ง เป็นสิ่งที่เรายังไม่ได้พูดคุยเกี่ยวกับ เป็นสิ่งที่เกิดขึ้นเมื่อคุณรวมพวกเขา ดังนั้น p.pets 

ดังนั้นการที่ปล่อยให้กลับไป รหัสและแนะนำ another-- ใช่ ดังนั้นกลับมาที่นี่ 

ALLISON Buchholtz-AU: ผม รู้สึกเช่นนี้เป็นนะ เช่นเพียงแค่มองผ่านตัวอย่าง จริงๆวิธีการเรียนรู้นี้ นั่นคือสิ่งที่เรากำลังทำ 

TOMAS REIMERS: งั้นเรามาหลอกเรา เพียง แต่ต้องการที่จะเลือกข้อความ 2 ใช่มั้ย? ดังนั้นเราจึงไม่สามารถแน่นอน ทำที่มี id ดีที่เราสามารถดำเนินการได้ด้วย id แต่มันไม่ได้มี id ฉันสามารถเพิ่มหนึ่ง แต่ขอแกล้ง ว่าผมไม่ได้ต้องการที่จะเพิ่มอีกหนึ่ง หรือมันมีอยู่แล้วเป็นอย่างอื่น ฉันไม่สามารถทำอย่างนั้นกับที่ แท็กแน่นอนไม่ซ้ำกันใช่มั้ย? และไม่เป็นชั้น แต่คุณสามารถรวมสิ่งเหล่านี้ สมมุติว่าเราอยากจะทำอะไร ซึ่งจะนำไปใช้กับสิ่งที่ มีเรียนพิเศษและ ที่มีชั้นสวย 

ดังนั้นสิ่งที่คุณสามารถทำได้คือใน main.css, คุณสามารถพูดให้เป็นครั้งแรกลบ คุณสามารถรวมเหล่านี้ ดังนั้นคุณสามารถทำ .special ไม่มีช่องว่าง เพียงแค่ .special.pretty สิ่งที่หมายถึงบางสิ่งบางอย่าง ซึ่งเป็นทั้งพิเศษและสวย ไม่ว่าทำให้รู้สึก? และถ้าเราไปที่นี่สิ่งที่ คุณกำลังจะไปดู กฎนี้ใช้เฉพาะกับ คนที่สองซึ่งมีทั้งของผู้ที่ และคุณสามารถทำที่สำหรับสิ่งต่างๆมากมาย คุณสามารถ say-- ขอ หลอกฉันเพียงต้องการ ที่จะทำสิ่งที่มีชั้นสวย และนอกจากนี้ยังมีแท็กวรรค ดังนั้น p.pretty ลองแกล้งทำเป็นว่าผมมี บางสิ่งบางอย่างสวยในร่างกายแท็ก OK? ผมสามารถทำงานนี้และฉัน จะเห็นว่ามันเป็นเพียง จะนำไปใช้กับสิ่งที่ ย่อหน้ากับชั้นสวย และคุณสามารถรวมเหล่านี้ โดยทั่วไปมากเท่าที่คุณต้องการ ดังนั้นคุณก็สามารถเอามารวมกัน ไม่ว่าทำให้รู้สึก? ALLISON Buchholtz-AU: ดังนั้น นี้เป็นชนิดของมีประโยชน์มากขึ้น เมื่อโทมัสบอกว่าก่อนหน้านี้อาจจะ คุณมีเว็บไซต์ที่มีความซับซ้อนมาก และคุณมีอยู่แล้วจำนวนมาก กฎเหล่านี้เป็นลายลักษณ์อักษร และคุณเพียงแค่ต้อง รวมสองจากก่อน เช่นเดียวแทนการเขียนทั้ง ตัวเลือกใหม่และการเปลี่ยนแปลงมันมี คุณก็สามารถรวม พวกเขาที่มันทับซ้อนกัน 

TOMAS REIMERS: หรือคุณ อาจพบว่าบางครั้งแทนดู มีชั้นหนึ่งซึ่ง ทำให้สีตัวอักษรเช่นสีฟ้า และมีชั​​้นอื่นซึ่ง ทำให้พื้นหลังสีฟ้า และนั่นก็จะไม่ทำงาน ดังนั้นคุณเขียนเป็นกรณีพิเศษที่ like-- แต่ถ้ามันมีทั้งสิ่งที่คุณกำลัง จะทำคือคุณกำลังจะไป ทำให้หนึ่งนี้ร่มเงาของสีฟ้า และหนึ่งนี้เฉดสีอื่น ๆ ของสีฟ้า ใช่มั้ย? 

ALLISON Buchholtz-AU: ดี สำหรับชนิดของข้อยกเว้น TOMAS REIMERS: ดังนั้นเพื่อ คิดเกี่ยวกับปัญหาที่เกิดขึ้น ที่อาจเกิดขึ้นเมื่อคุณรวมพวกเขา เย็น เพื่อกลับไปนำเสนอ ALLISON Buchholtz-AU: เราเกือบจะมี TOMAS REIMERS: และมัน ได้หยุดการเชื่อมต่อ ALLISON Buchholtz-AU: โอ้ไม่ ALLISON Buchholtz-AU: CS ที่ สำนักงานอินเทอร์เน็ตไปลง โอ้ประชด 

TOMAS REIMERS: ดังนั้นโชคดีที่เราสามารถทำได้ นำเสนอโดยไม่ต้องอินเทอร์เน็ตผมเดาว่า เพราะเรามีภาพนิ่งทั้งหมดที่นี่ ดังนั้นเรามาพูดคุยเกี่ยวกับ ความสัมพันธ์ของแท็ก ALLISON Buchholtz-AU: ขวา ดังนั้นเพียงแค่ชนิดของการไป ออกจากสิ่งที่โทมัสกล่าวว่า นี้เป็นเพียงวิธีการที่จะทำมัน ดังนั้นเราจึงมีผู้ปกครองบางส่วน เลือกตัวเลือกที่มีเด็ก ดังนั้นในตัวอย่างนี้ที่นี่เรามีบางส่วน ร่างกายกับ navbar ชั้นปุ่มชั้น อา 

TOMAS REIMERS: โอ้ขอโทษ 

ALLISON Buchholtz-AU: และ โดยทั่วไปสิ่งนี้หมายความว่า คือเลือกทั้งหมดของเด็กเช่น ทุกประเภทนี้เตอร์, ภายในตัวเลือกหลักนี้ และผู้ที่เป็นคนเดียว ก็เคยไปใช้กับ ผมไม่ทราบว่าคุณ มีวิธีที่ดีกว่าเเล้ TOMAS REIMERS: ดังนั้นผม คิดว่าวิธีการที่จะคิดว่า เกี่ยวกับเรื่องนี้จำได้ว่าก่อนที่จะว่า เราจัดเรียงของชอบเอามารวมกัน และแล้วนั่นหมายความว่าองค์ประกอบหนึ่ง ซึ่งตรงกับสิ่งเหล่านี้ สิ่งนี้จะบอกคือผม อยากให้ตรงกับทุกอย่าง ภายใน some-- ฉันต้องการ คุณสามารถค้นหาตัวเลือก และจากนั้นภายในที่ฉันต้องการ คุณเพื่อให้ตรงกับสิ่งใหม่ ๆ ใช่มั้ย? ดังนั้นใน CSS, มันคือทั้งหมดที่เกี่ยวกับการจัดเรียงของ ความสามารถเพื่อให้ตรงกับรายการเหล่านี้ และคุณสามารถลองเพื่อให้ตรงกับ รายการที่อยู่ในรายการอื่น ๆ 

ดังนั้นขอให้ทำจริงตัวอย่างเช่น และเราคิดว่าจะชี้แจง ดังนั้นเรามาหลอกเรามีพิเศษ พิเศษสวยสิ่งที่ แล้วเรามีการเชื่อมโยง, OK? ดังนั้นจำคือการเชื่อมโยง มันไม่ได้เป็นไปได้ทุกที่ และเราจะให้มัน การเชื่อมโยงการเรียนฉันเดา ขอให้มัน class-- ให้ฉันคิด ALLISON Buchholtz-AU: โทน TOMAS REIMERS: Coo-- ขอ ไปคนชั้นสวย ทำไมไม่? 

ALLISON Buchholtz-AU: ตกลง TOMAS REIMERS: ดังนั้น ตอนนี้สิ่งที่สวย กำลังจะทำให้พื้นหลัง สีฟ้า, สีพื้นหลังของปลาแซลมอน ที่ทำให้รู้สึก และถ้าเราทำเจ้านี่ 

ALLISON Buchholtz-AU: คุณต้องการที่จะเพิ่มข้อความ เพื่อเชื่อมโยงหลายมิติจริงแสดงขึ้นมา? TOMAS REIMERS: นั่น จะเป็นสายที่ดี ALLISON Buchholtz-AU: 'สาเหตุขวา ตอนนี้เรากำลังเพียง gonna ได้รับอะไร TOMAS REIMERS: ดังนั้นนี่คือการเชื่อมโยง "นี่คือการเชื่อมโยง". อ้อและนี้เป็นไป จะต้องมีการเชื่อมโยงอื่น ขอให้มันคลาส "เย็น." คุณขวา เย็น ดังนั้นตอนนี้เรากำลังจะคว้านี้ เรากำลังจะไปโยนหนึ่ง เรามีหนึ่งใน แท็กพิเศษและเรายัง จะมีหนึ่งในแท็กสวย และตอนนี้สิ่งที่เรากำลังจะไป ทำคือเรากำลังจะทำให้ cool-- ทำในสิ่งที่เราต้องการจะทำอย่างไร? ALLISON Buchholtz-AU: เราสามารถทำให้มันใหญ่? TOMAS REIMERS: ขอให้มันชายแดน ALLISON Buchholtz-AU: เราสามารถชายแดน TOMAS REIMERS: ใช่ ดังนั้นเรากำลังจะทำบางสิ่งบางอย่าง เหมือนเป็นเท่าไหร่ชายแดนและเรา จะอธิบายทั้งหมดนี้ในครั้งที่สอง สำหรับ now-- 

ALLISON Buchholtz-AU: เพื่อรูปแบบกล่อง TOMAS REIMERS: แต่ตอนนี้เราไม่ เพียงแค่จะให้มันชายแดน ดังนั้นสิ่งที่หมายถึงคือคุณ จะไปดูการเชื่อมโยงเหล่านี้ และคุณจะเห็นว่าพวกเขามี เหล่านี้เช่นเดียวกับเส้นขอบสีดำน่าเกลียดซึ่​​ง มีอากาศเย็นสบาย 

ALLISON Buchholtz-AU: เว็บไซต์ของเราเพื่อให้สวย 

TOMAS REIMERS: ใช่ เว็บไซต์ของเราเป็นที่น่ากลัว ดังนั้นทั้งสองมีการเชื่อมโยงและพวกเขาจะปรากฏ ตอนนี้ขอแกล้งฉัน ต้องการเพียงเพื่อที่จะทำเช่นนี้ ถ้ามันเป็นสิ่งที่ไม่ได้อยู่ใน ซึ่งมีพื้นหลังของปลาแซลมอน ดังนั้นจำไว้ว่าคนนี้ มีพื้นหลังของปลาแซลมอน, เพราะมันเป็นเรื่องของชั้นสวย 

แต่เราอยากจะบอกว่ามีเพียงเย็น ที่อยู่ในชั้นเรียนพิเศษไม่ได้อยู่ในชั้นเรียน สวยควรมีชายแดนที่ ดีสิ่งที่คุณสามารถทำได้คือคุณ สามารถพูด .special พื้นที่ .cool และสิ่งที่ทำเมื่อคุณคิดว่า เกี่ยวกับเรื่องนี้คือมันเป็นพื้นพูดว่า ตกลงหาฉันทุกอย่าง ที่ตรงกับความพิเศษ จากนั้นภายในแท็กเหล่านั้นพบว่า ฉันทุกอย่างที่เย็น ALLISON Buchholtz-AU: ดังนั้นวิธีอื่น ที่อาจจะมีดีที่จะคิดเกี่ยวกับเรื่องนี้ นำมันกลับไปที่ C คือ เช่นเดียวกับความคิดของขอบเขต ดังนั้นเมื่อคุณมีบาง ตัวเลือกเช่นเดียวกับคน ที่เราได้รับการทำงานก่อนหน้านี้ หน้าเว็บทั้งหมดของคุณทั้งหมดของ HTM​​L ของคุณ อยู่ในขอบเขตของคุณใช่ไหม? แต่เมื่อเราได้เหล่านี้ ความสัมพันธ์กับผู้ปกครองเด็ก มันเหมือนกับว่าคุณกำลังแคบลงที่ คุณกำลังมองหาสถานที่ที่เฉพาะเจาะจง ราวกับว่าเหมือนเรากำลังมองหาภายใน ฟังก์ชั่นที่เฉพาะเจาะจงแทน ของไฟล์ทั้งหมดของเรา ผู้ชม: ดังนั้นด้วยที่ในใจก็จะ มันมีความสำคัญถ้าเรามี changed-- ALLISON Buchholtz-AU: เพื่อ? ผู้ชม: ชั้น --The ใน CSS เพื่อ .cool พื้นที่ .special? ALLISON Buchholtz-AU: ใช่แล้วเพราะว่า จะพูดว่าขอบเขตมันไป ทุกอย่างที่มีอากาศเย็น แล้วมองสิ่งที่ has-- ผมหมายถึงเช่นในกรณีนี้ ฉันไม่คิดว่ามันจะมีการเปลี่ยนแปลงมัน 

TOMAS REIMERS: ถ้าเราได้กล่าวว่าสิ่งที่? ขอโทษ 

ALLISON Buchholtz-AU: ถ้าเรา ขอบเขตให้เย็นแล้ว มองหาสิ่งที่ออกจากพิเศษ มันจะเหมือนกันจริง 

TOMAS REIMERS: ดังนั้นมันจะไม่เป็น 

ALLISON Buchholtz-AU: มันจะไม่? โอ้โอ้ดี ฉันผิด 

TOMAS REIMERS: ดังนั้นเหตุผล มันต่างออก mistake-- ทั่วไป คือว่าในขณะนี้เท่านั้น การเชื่อมโยงมีเย็นใช่มั้ย? ผมคิดว่าคำถามของฉันเพื่อที่พวกคุณคือ สิ่งที่อยู่ในหน้านี้ถูกจับคู่โดย .cool? มีสองแท็กที่นี่ขวาคืออะไร? ซึ่งเป็นหนึ่งและหนึ่งนี้ ทั้งเย็นแข่งขัน ไม่มีอะไรอื่นไม่ ดังนั้นถ้าคุณกล่าวว่า .cool พื้นที่ .special สิ่งที่คุณจะพูดคือ ภายในแท็กเหล่านี้สิ่งที่เป็นพิเศษหรือไม่? ALLISON Buchholtz-AU: Hm นั่นคือสิ่งที่พูดไปขวา เพราะมันเป็นเหมือนสิ่งที่เพียงที่นี่ 

TOMAS REIMERS: ดังนั้นจะเลือกอะไร 

ALLISON Buchholtz-AU: ในขณะที่มี พิเศษเราไม่ภายในแท็กเหล่านี้ที่นี่ 

TOMAS REIMERS: ผู้และผู้ที่ ผู้ชม: ตกลง ดังนั้นผู้ที่มาจากแท็กทับ? 

TOMAS REIMERS: ใช่ ไม่ว่าทำให้รู้สึก? วิธีการที่จะเป็นพื้น พยายามที่จะ จำกัด ขอบเขต ALLISON Buchholtz-AU: ใช่ ผมคิดว่าน่าจะเป็น วิธีที่ง่ายที่สุดที่จะคิดเกี่ยวกับมัน 

TOMAS REIMERS: ดังนั้นเราจึงพบนี้และ เราพบว่าการจับคู่นี้ทั้งสองพิเศษ และจากนั้นเรากำลังขอภายใน คนเหล่านี้คือสิ่งที่เย็น? และภายในหนึ่งนี้ของเย็นนี้ ภายในหนึ่งนี้ไม่มีอะไรเย็น ดังนั้นนี่คือแท็กเท่านั้นที่ยังคงอยู่ 

ALLISON Buchholtz-AU: ในขณะที่เย็น เป็นเพียงภายในแท็กเหล่านี้มี TOMAS REIMERS: แน่นอน และสิ่งที่พิเศษภายในเหล่านั้นหรือไม่ ไม่มีอะไร ตอนนี้สิ่งที่ผมจะบอกก็คือ ถ้ามีพื้นที่ไม่มี คุณถามว่ามีอะไรเย็นและ special-- หรือสิ่งที่สวยและพิเศษใช่ไหม? ถ้าคุณบอกว่า .special.pretty ที่ เช่นเดียวกับ .pretty.special 

เพราะสิ่งที่เอาพื้นที่เป็น ถามคือเมื่อคุณพูด ​​.special, คุณกำลังถามตกลง คนที่เป็นพิเศษ? และแล้วเหล่านั้นซึ่ง นอกจากนี้ยังมีคนที่สวย ซึ่งเป็นเดียวกันไวยากรณ์ ขอเป็นสิ่งที่สวย และจากนั้นในบรรดาสิ่งที่ยังเป็นพิเศษหรือไม่? ใช่มั้ย? มันเป็นความแตกต่างของ สิ่งที่อยู่ภายในสิ่งที่เป็น ผู้ชม: ตกลง TOMAS REIMERS: ใช่ น่ากลัว ดังนั้นด้วยที่ในใจ then-- 

ALLISON Buchholtz-AU: ผมคิดว่าที่ผ่านมาของเรา สิ่ง (IN FANCY BRITISH สำเนียง) รูปแบบกล่อง 

TOMAS REIMERS: box-- [หัวเราะเบา ๆ ] ฉันรักวิธีที่อัลลิสันกล่าวว่า ดังนั้นสิ่งที่รูปแบบกล่อง 

ALLISON Buchholtz-AU: เพียงแค่มี กล่องผมจะเป็นรูปแบบกล่องของคุณ TOMAS REIMERS: ดังนั้นขอพูดคุยเกี่ยวกับการที่ ดังนั้นตอนนี้เราได้ใช้เวลามาก เวลาพูดคุยเกี่ยวกับเตอร์ โดยตอนนี้พวกคุณอาจจะชอบ ต้นแบบของ selectors-- คุณรู้ว่า วิธีการเลือกว่าเนื้อหาที่ คุณต้องการที่จะจัดการบนหน้าจอของคุณ 

ดังนั้นตอนนี้คำถามคือวิธี ว่าคุณสามารถจัดการมันได้หรือไม่ ดังนั้นผมคิดว่าพื้นฐานที่สุด วิธีการที่จะคิดเกี่ยวกับการที่ คือดีว่าสิ่งที่ เป็นองค์ประกอบใน CSS? เราได้ใช้เวลามาก พูดคุยเกี่ยวกับสิ่งที่เป็นแท็ก หรือสิ่งที่เป็นพื้นฐานที่สุด การเป็นตัวแทนของแท็ก? 

วิธีที่ดีที่จะคิดเกี่ยวกับ นั่นคือสิ่งที่รูปร่างเป็นปลาแซลมอน? อะไรคือสิ่งที่รูปร่างเหมือน พื้นหลังสีปลาแซลมอน? 

ผู้ชม: มันเป็นรูปสี่เหลี่ยมผืนผ้า 

TOMAS REIMERS: มันเป็นรูปสี่เหลี่ยมผืนผ้าใช่มั้ย? 

ALLISON Buchholtz-AU: ไม่ได้คำถามเคล็ดลับ [หัวเราะ] 

TOMAS REIMERS: ไม่ได้พยายาม เพื่อหลอกลวงให้พวกคุณปลายนี้ ดังนั้นเราจึงมีรูปสี่เหลี่ยมผืนผ้านี้ และแท็กคือ P ใช่มั้ย? เพื่อที่จะช่วยให้เราดี ความเชื่อที่ว่าวรรค จะแสดงเป็นรูปสี่เหลี่ยมผืนผ้าที่ อย่างน้อยในใจของเบราว์เซอร์ซึ่ง มันเป็น 

ALLISON Buchholtz-AU: ผมหมายถึง เบราว์เซอร์มักจะเป็นรูปสี่เหลี่ยมผืนผ้า จึงทำให้รู้สึก 

TOMAS REIMERS: คิดที่นี่คือ ว่าทั้งหมดของแท็กภายใน CSS จะแสดงเป็นรูปสี่เหลี่ยมผืนผ้า และสี่เหลี่ยมทุกคนมีสี่ ส่วนตาม CSS, OK? คุณมีเนื้อหาที่เกิดขึ้นจริง นั่นคือสิ่งที่ข้อความอยู่ 

ALLISON Buchholtz-AU: บางทีภาพของคุณ 

TOMAS REIMERS: ใช่ คุณมีช่องว่างภายในซึ่งเป็น เพียงบางชนิดของพื้นที่สีขาว แล้วคุณมีชายแดน แล้วคุณจะมีอัตรากำไรขั้นต้นที่ เป็นพื้นที่สีขาวที่ด้านนอกของ เพื่อที่จะทำให้รู้สึกไม่ กับทุกคนดังนั้นเรา จะพูดคุยเกี่ยวกับว่าเป็นครั้งที่สอง ดังนั้นที่นี่สิ่งที่เรากำลังจะทำ คือเรากำลังจะสร้าง divs บาง OK? ขอโทษนะในขณะที่ I-- 

ALLISON Buchholtz-AU: ฉันรู้สึกเหมือน เราควรจะนำภาพที่น่ารักใน 

TOMAS REIMERS: แน่นอนเราควร 

ALLISON Buchholtz-AU: ฉันรู้สึกเหมือนทุกคน จะได้ประโยชน์จาก ภาพที่น่ารักคือทั้งหมด 

TOMAS REIMERS: เราสามารถ ได้รับประโยชน์จากเเรก 

ผู้ชม: ใช่แน่ใจว่า TOMAS REIMERS: ตกลงเย็น ดังนั้นเราจึงควรใส่น่ารัก ภาพในที่ใดที่หนึ่ง ALLISON Buchholtz-AU: ฉันรู้สึกเหมือน กระต่ายน่ารักอาจจะมีประโยชน์ในขณะนี้ TOMAS REIMERS: แน่นอน ALLISON Buchholtz-AU: ปลายสัปดาห์ มีบางสิ่งบางอย่าง adorab-- 

TOMAS REIMERS: การแข่งขันลูกแมวได้อย่างไร? 

ALLISON Buchholtz-AU: ลูกแมวทำงานมากเกินไป 

TOMAS REIMERS: โทนเพราะ มีเว็บไซต์ที่ มันเรียกว่า PlaceKitten ALLISON Buchholtz-AU: ที่ดี TOMAS REIMERS: ใช่ ALLISON Buchholtz-AU: เพียงแค่ชอบ, ภาพตัวยึดในเว็บไซต์ของคุณ TOMAS REIMERS: MM-HM นอกจากนี้ยังมี PlacePuppy และมี PlaceBacon 

ALLISON Buchholtz-AU: PlaceBacon? จริงเหรอ? 

TOMAS REIMERS: โอ้ที่เราทำไม่ได้ มีการเข้าถึงอินเทอร์เน็ตที่นี่ 

ALLISON Buchholtz-AU: [groans] อนาถ TOMAS REIMERS: มิฉะนั้น ผมจะแสดงให้พวกคุณ วิธีที่จะนำภาพในเว็บไซต์ของคุณ เราจะพยายามที่จะได้รับนี้ การทำงานก่อนที่เราจะต้องไป แต่ตอนนี้เราไม่เพียง จะพูดคุยในสีแล้ว เราต้องการที่จะนำภาพของ kittens-- 

ALLISON Buchholtz-AU: เราได้ 

TOMAS REIMERS: อินเทอร์เน็ต --The ลงสำหรับช่วงเวลาที่เป็น ดังนั้นเราจึงมีสอง divs และเรา จะให้พวกเขาสองรหัส เราจะเรียกมันว่า "ครั้งแรก" และ "สอง". ดังนั้น id = "ครั้งแรก". และเราจะให้พวกเขาสองสี ดังนั้นเราจะเลือกบางสิ่งบางอย่าง มี id ของ "ครั้งแรก"? ALLISON Buchholtz-AU: Dot หรือกัญชา? ผู้ชม: ชาร์ป TOMAS REIMERS: ชาร์ปที่สมบูรณ์แบบ ชาร์ป, กัญชา, สิ่ง we-- 

ALLISON Buchholtz-AU: จำนวนมากของสิ่งที่เรียกว่า 

TOMAS REIMERS: ตกลง เรากำลังจะไปตั้งถิ่นฐานอยู่บน hashtag และ นั่นคือสิ่งที่เรากำลังจะไปกับ OK? 

ALLISON Buchholtz-AU: แฮชแท็ก 

TOMAS REIMERS: ดังนั้น hashtag เป็นครั้งแรก 

ALLISON Buchholtz-AU: ดังนั้น คุณสามารถ tweet seminar-- CSS hashtag, hashtag เย็น TOMAS REIMERS: Hashtag Awesomeness ALLISON Buchholtz-AU: hashtag Awesomeness ใช่ TOMAS REIMERS: ตกลง ดังนั้นเราจึงมี "ครั้งแรก" และ "สอง". ครั้งแรกดังนั้นเรากำลังจะมี สีพื้นหลังของสีแดง ALLISON Buchholtz-AU: เอ่อ, ลำไส้ใหญ่ TOMAS REIMERS: Yup ALLISON Buchholtz-AU: ฉันจะเป็นจุดตรวจของคุณ TOMAS REIMERS: อัลลิสันมีฉัน background-color ของ blue-- 

TOMAS REIMERS ม่วง! 

TOMAS REIMERS ม่วง ALLISON Buchholtz-AU: ใช่ สีม่วงสีที่ชื่นชอบ และเราไม่ได้ใช้มันเลย 

TOMAS REIMERS: สีม่วง ALLISON Buchholtz-AU: สีม่วง ที่ทำงาน 

TOMAS REIMERS: ดังนั้นเรา จะมีสอง divs พวกเขากำลังจะเป็นที่ว่างเปล่าโดยสิ้นเชิง เราอาจจะมีข้อความบางส่วน ดังนั้น "ครั้งแรก" เป็นไปได้ "สวัสดี". และ "สอง" จะ say-- 

ALLISON Buchholtz-AU: ลา 

ผู้ชม: - "โลก". สวัสดีลา ALLISON Buchholtz-AU: ผมเห็น พวกเขาในคอนเสิร์ตสัปดาห์ TOMAS REIMERS: The Beatles? ALLISON Buchholtz-AU: สำหรับจำนวนจริง พวกเขากำลังไม่ว่าดี ฉันไม่ชอบมัน 

TOMAS REIMERS: เรามี "สวัสดี" และ "ลาก่อน". และอีกครั้ง, CSS จะน่ากลัวเพียง เพราะตระหนักถึงสีของเรา ไม่จำเป็นต้องที่จะได้ กังวลว่าพวกเขามีอยู่ พวกเขาทำ 

ALLISON Buchholtz-AU: พวกเขาอยู่ 

TOMAS REIMERS: ดังนั้น CSS ผมคิดว่ามี 255 คำที่จะพูดคุยเกี่ยวกับสี ถ้าคุณสามารถคิดของสีภายนอก ผู้ที่ 255 เช่นเดียวกับผมจะต้องประทับใจ ALLISON Buchholtz-AU: ใช่ ผมคิดว่าพวกคุณอาจจะมี มาเพียงแค่ในทันทีหลังจากที่ 

TOMAS REIMERS: ดังนั้นที่นี่ คุณจะเห็นเรามีสองกล่อง ขวาด้านบนของแต่ละอื่น ๆ ใช่มั้ย? สวัสดีและ GOODBYE 

ALLISON Buchholtz-AU: มีพื้นที่ในระหว่างไม่ได้ พวกเขากำลัง smooshed เพียง ขวาด้านบนของแต่ละอื่น ๆ 

TOMAS REIMERS: ดังนั้นสิ่งแรกที่ ผมคิดว่าเราควรจะพูดคุยเกี่ยวกับ จะขอยัง say-- ใช่ ดังนั้นพวกเขาแสดงให้เห็นถึง CSS เป็นจัดเรียงของกล่อง และเป็นกล่องที่พวกเขามีเนื้อหา และเนื้อหาที่เหมาะสมในขณะนี้คือการจัดเรียงของ สวัสดีหรือ GOODBYE และที่มัน OK? 

ดังนั้นหนึ่งในสิ่งแรกที่คุณ สามารถทำได้คือคุณสามารถเพิ่มขยาย padding กล่าวว่าพื้นที่เท่าใด มันควรจะออกในแต่ละด้าน ดังนั้นสมมติว่าฉันต้องการจะบอก 10 พิกเซลในแต่ละด้าน และผมจะผ่าว่าในครั้งที่สอง ALLISON Buchholtz-AU: ทุกสิ่งเหล่านี้ที่นี่ จะไปเป็นส่วนใหญ่ในพิกเซล สำหรับส่วนที่เหลือของการสัมมนา คุณจะเห็นว่ามันมี พื้นที่บางส่วนรอบ ๆ มันใช่มั้ย? ดังนั้นสิ่งที่คุณไม่เห็นที่นี่มี นี้การจัดเรียงที่มองไม่เห็นของการขยาย ในแต่ละด้านที่กล่าวเช่น ตกลงคุณมีกล่องของคุณ content-- 

ALLISON Buchholtz-AU: คุณต้องการ เพียงแค่ดึงองค์ประกอบตรวจสอบ? 

TOMAS REIMERS: ใช่ว่าเป็นความคิดที่ดี ALLISON Buchholtz-AU: นอกจากนี้ผมพบว่า ว่าองค์ประกอบการตรวจสอบเป็นวิธีที่ดี คิดว่าบางสิ่งบางอย่างไป ผิดบางสิ่งบางอย่างที่ไม่คาดคิดเกิดขึ้น การตรวจสอบแท็กและเห็นสิ่งที่ มันก็เหมือนการเขียนทับจะเป็นประโยชน์ 

TOMAS REIMERS: ดังนั้นผมไม่แน่ใจว่า ถ้าพวกคุณจะได้เห็นสีนี้ คุณสามารถ? คุณจะเห็นช่องว่างนี้ ในการจัดเรียงของขอบ แล้วคุณจะเห็นที่เกิดขึ้นจริง เนื้อหาในสีฟ้าใช่มั้ย? เพื่อให้เป็นมาก พื้นฐานของรูปแบบกล่อง คุณมีเนื้อหาที่ แล้วคุณมีช่องว่างภายใน 

ผู้ชม: ทำไมคุณไม่เพียง ใช้กล่องภายในยกกำลัง 

ALLISON Buchholtz-AU: ขวา เพราะมันเป็นเพียงแค่การเลือก องค์ประกอบในขณะนี้ 

TOMAS REIMERS: Yup สิ่งอื่น ๆ ดังนั้นขอพูดคุยเกี่ยวกับการที่ คำสั่ง padding เป็นครั้งที่สอง ดังนั้นใน CSS วัด จำเป็นที่จะต้องมีหน่วย ดังนั้นก่อนที่คุณมีจำนวนเงินที่ ดังนั้นในกรณีนี้เราได้กล่าวว่า 10 และจากนั้นต่อไป เราได้กล่าวว่าเป็นพิกเซล, พิกเซล คนอื่น ๆ ที่คุณอาจมีอยู่ สิ่งที่ต้องการเซนติเมตรนิ้ว คุณสามารถทำสิ่งที่ชอบ สิ่งที่เป็น 10 นิ้ว? และมันก็เป็นไปได้ที่ไร้สาระ 

ALLISON Buchholtz-AU: โอ้เด็ก 

ผู้ชม: ว้าว 

โทมัสและ ALLISON: ใช่ TOMAS REIMERS: เพื่อให้เป็นช่องว่างทั้งหมด ฉันจะกลับไปพิกเซล 

ALLISON Buchholtz-AU: พิกเซล มีแนวโน้มที่จะเป็นเหมือนมาตรฐาน เมื่อคุณดูที่เว็บไซต์จำนวนมาก, พวกเขาส่วนใหญ่ทำงานในพิกเซล TOMAS REIMERS: คุณกำลังจะไปดู ทั้ง pixels-- คนอื่น ๆ ที่คุณเห็น เป็น em ซึ่งเป็นหนึ่ง em เป็น เท่ากับความสูงของตัวอักษร ที่คุณกำลังใช้ 

ALLISON Buchholtz-AU: mm TOMAS REIMERS: มันเป็นวิธีที่ดีที่จะบอกว่า เช่นผมต้องการพื้นที่มากที่สุดเท่าที่ตัวอักษรของฉัน คือการ ALLISON Buchholtz-AU: ไม่ทราบว่า คุณเรียนรู้สิ่งใหม่ทุกวัน TOMAS REIMERS: มีอยู่ จำนวนมากของการวัดใน CS ผมแนะนำให้คุณดูพวกเขา สำหรับกรณีของคุณผมคิดว่า พิกเซลควรจะเพียงพอ และพวกเขากำลังยังเป็นสิ่งที่ คุณกำลังจะไปดู ในส่วนของตัวอย่างที่ทำผ่านทางออนไลน์ ดังนั้นเราจะปล่อยให้มันเป็นพิกเซล 

คุณยังสามารถฉันควร say-- ดังนั้น ชุด padding ทุก paddings นอกจากนี้คุณยังสามารถทำสิ่งที่ชอบ "padding-top" เพียงแค่ถึงตรง ALLISON Buchholtz-AU: บางที เราจะได้รับ "Hello" ของเรากลับมา TOMAS REIMERS: --to เพิ่งตั้ง padding ด้านบนและไม่มีอะไรอื่น ดังนั้นคำสั่งที่สี่ padding-top, padding ด้านล่าง padding ซ้าย และ padding ขวา 

ALLISON Buchholtz-AU: เช่นเดียวกับ คุณจะคาดหวังสำหรับกล่อง 

TOMAS REIMERS: ใช่ ไม่มีอะไรเกินไปบ้ามี ไม่ว่าทำให้รู้สึก? เพื่อให้เป็นช่องว่าง ฉันจะตั้งค่าทั้งหมด paddings กลับไปที่ 10 และจากนั้นผมจะย้ายไปยังชายแดน 

ดังนั้นสิ่งที่ชายแดนเป็น ชายแดนเป็นคำสั่งแปลก ๆ มันต้องใช้การเรียงลำดับของสามสิ่งในครั้งเดียว ดังนั้นก่อนที่เป็นวิธีใหญ่คุณ ต้องการที่จะเป็นวัด อีกครั้งฉันก็แค่ใช้พิกเซล และสิ่งสุดท้ายที่ฉัน ควรเพิ่มการตรวจวัด เป็นสิ่งหนึ่งที่ ไม่จำเป็นต้องมีหน่วยเป็น 0 มันเป็นเรื่องที่ไม่ถูกต้องจริง ที่จะให้ 0 หน่วย เพราะเป็น 0 0 ทั่วนิ้ว พิกเซล, เซนติเมตรสิ่งที่ ทุกอย่างก็หมายความ 0 ใช่มั้ย? ดังนั้นก่อนที่คุณจะให้มันวัด 

แล้วคุณจะให้มันสไตล์ ดังนั้นผมจะบอกว่า "มั่นคง". และเราจะพูดคุยเกี่ยวกับสิ่งที่หมายถึง และแล้วในที่สุดคุณจะให้มันสี ดังนั้นฉันจะบอกว่า "สีดำ". และเหล่านี้คือทุกสิ่งที่เราได้ เห็นตอนนี้ก่อนที่จะยกเว้นสำหรับสไตล์ แต่เราจะพูดคุยเกี่ยวกับการที่ ดังนั้นพวกคุณได้เห็นวัด และคุณได้เห็นสี และสิ่งที่เกิดขึ้นคือเราได้รับนี้ ขอบสีดำรอบ ๆ มันมีความสุขใช่มั้ย? พวกคุณเห็นวิธีการที่เราทำอย่างนั้น? 

ผู้ชม: ใช่ 

TOMAS REIMERS: โทน ดังนั้นสิ่งที่? อย่างแรกเลยก็เป็นหนึ่งพิกเซล นั่นเป็นตัวเองชัดเจนพอใช่มั้ย? เหมือนมันเป็นหนึ่งพิกเซลหนา หรือมันจะเป็นหนึ่งพิกเซล แต่ฉัน ซูมดังนั้นจึงเป็นเรื่องเล็กน้อยมาก ไปกว่านั้น 

ALLISON Buchholtz-AU: และเรามี นี้ความละเอียดของทีวีไร้สาระ 

TOMAS REIMERS: ใช่ คุณสามารถทำให้มันใหญ่ขึ้น ขนาดเล็กสิ่งที่ ดังนั้นนี่คือชายแดนสองพิกเซล คุณจะเห็นว่ามันเป็นสองเท่าของความหนา สิ่งต่อไปที่คุณต้องเป็นสี ที่ไม่น่าสนใจ ผมไม่อยากจะพูดคุย เกี่ยวกับที่จริงๆ 

ALLISON Buchholtz-AU: แต่สไตล์ อาจจะมีเพียงเล็ก ๆ น้อย ๆ ที่น่าสนใจ 

TOMAS REIMERS: ใช่ ดังนั้นรูปแบบที่มีคนไม่กี่ ที่ผมเห็นที่ใช้กันทั่วไป คนแรกของของแข็งหนึ่งถัดไป ประและประหนึ่งที่ผ่านมา และนี่เป็นจุด คุณจะเห็นว่าพวกเขากำลัง พวงของจุดใช่มั้ย? วิธีที่ดีในการจัดเรียงของจะได้รับขอบมีความสุข ไปขีดกลางยังเป็นที่นิยมสวย 

ALLISON Buchholtz-AU: และแน่นอนผม แน่ใจว่ามีมากมายอื่น ๆ รูปแบบที่คุณจะได้รับ และเรามีชุดที่ดีของ การเชื่อมโยงที่ตอนท้ายสำหรับคุณผู้ชาย ชนิดของการอ่านและ ดู CSS เย็นมากขึ้น 

TOMAS REIMERS: แล้ว สิ่งสุดท้ายที่เราไม่ จะพูดคุยเกี่ยวกับ กล่องรุ่นจริงอย่างรวดเร็ว โอ้แล้วชายแดน เหมือน padding, คุณยังมีสิ่งที่ต้องการ ขอบซ้ายขอบขวา, ขอบด้านบน ขอบล่างซึ่งช่วยให้คุณ ที่จะได้รับที่ชายแดนที่เฉพาะเจาะจง ดังนั้นนี่เป็นเพียงชายแดนซ้ายที่กำหนดไว้ ไม่ว่าจะทำให้ความรู้สึก? 

ALLISON Buchholtz-AU: มันเป็นเย็น วิธีที่จะเน้นสิ่งที่หรือเพิ่ม เส้นแบ่งระหว่างองค์ประกอบที่แตกต่างกัน TOMAS REIMERS: แน่นอน เพื่อให้เป็นชายแดนของเรา และอัตรากำไรขั้นต้นหนึ่งที่ผ่านมา padding เช่น Margin ของ ยกเว้นว่ามันจะไม่ within-- ALLISON Buchholtz-AU: มัน ไม่รอบองค์ประกอบของคุณ แต่ที่จริงรอบทั้งหมด กล่องที่เราเคยเห็น 

TOMAS REIMERS: ใช่ แอลลิสันกล่าวว่ามันได้อย่างสมบูรณ์แบบ มันไม่ได้เป็นเช่นเดียวกับภายในของคุณ องค์ประกอบก็รอบกล่องทั้งหมด นั่นหมายถึงสิ่งที่ต้องการ พื้นหลังไม่สามารถใช้กับมัน และโดยทั่วไปกล่าวว่า เหมือนฉันไม่ต้องการอะไร ในพื้นที่นี้มากสำหรับฉัน ดังนั้นเหมือนที่นี่เรามี ขอบของ 10 พิกเซล ดังนั้นไม่มีอะไรภายใน 10 พิกเซล ควรจะไปกับผม ที่ชนิดของ พื้นที่ แต่ชนิดไม่ เพื่อให้เป็นมาก พื้นฐานของรูปแบบกล่อง ไม่ว่าทำให้รู้สึก? เย็นเย็น ALLISON Buchholtz-AU: น่ากลัว ดังนั้นตอนนี้ผมคิดว่าเราเพียงแค่ มีทรัพยากรเย็นของเรา ที่เราจะพาพวกคุณ ผ่านไปอย่างรวดเร็ว และเราจะที่จริงดี เราจะมีอินเตอร์เน็ตยัง? 

TOMAS REIMERS: Let 's ดูว่าฉันสามารถเปิด up-- ให้ฉันเพียงแค่ดูว่าฉัน สามารถรับอินเทอร์เน็ตได้อย่างรวดเร็ว ในขณะที่แอลลิสันพูดเกี่ยวกับอะไร แอลลิสันต้องการที่จะพูดคุยเกี่ยวกับ ALLISON Buchholtz-AU: basically-- ดังนั้นผมจึงทำไม่ได้ รู้ว่าอะไรที่ผมสามารถพูดได้ที่จุดนี้ แต่เหล่านี้เป็นบางส่วน ทรัพยากรที่ดีจริงๆ เหล่านี้เป็นคนที่ โทมัสและฉันได้ใช้ และที่เราจริง ที่ใช้ในการเตรียมการสำหรับการนี​​้ W3Schools เป็นสิ่งหนึ่งที่คุณ คนที่ควรจะได้เห็นมาก่อน เราขอแนะนำสำหรับ สิ่งต่างๆมากมายด้วย CSS ฉันรู้ว่าฉันแนะนำให้ ส่วนของฉันตลอดเวลา 

หนึ่งในสิ่งที่ดีก็คือว่ามัน ช่วยให้คุณสามารถชนิดของยุ่งกับ CSS และเห็นการเปลี่ยนแปลง ทันทีในเรื่องนี้ เช่นเดียวกับมุมมองของสองหน้าต่างที่มันมี ดังนั้นคุณจึงไม่ต้องกังวลเกี่ยวกับ การตั้งค่าหน้าเว็บของคุณเอง หรือการตั้งค่า vhost ในของคุณ เครื่องใช้ไฟฟ้าในท้องถิ่นและโฮสต์ท้องถิ่น และได้รับทุกอย่างที่ทำงานสิ่งที่ มันจะถูกฝังขวาในหน้า 

และก็จะมีเล็ก ๆ น้อย ๆ เหล่านี้ บทเรียนที่คุณสามารถ ผ่านการเรียนรู้ เรื่องเกี่ยวกับ selector หรือเรียนรู้เกี่ยวกับการจัดการของคุณ ตัวอักษรหรือพื้นหลังหรือภาพ และคุณมีเหล่านี้ ผลทันทีที่คุณ ไม่ได้มีการดำเนินการใด ๆ เตรียมงานอื่น ๆ สำหรับ ดังนั้นฉันรัก W3Schools มันเป็นเรื่องที่เหลือเชื่อ มันจะทำงาน? 

TOMAS REIMERS: ใช่ ไม่มีก็ไม่ได้ คุณต้องการให้ฉันไปลอง และรีสตาร์ทคอมพิวเตอร์ของฉันได้อย่างไร หรือว่าเราต้องการ to-- 

ALLISON Buchholtz-AU: ผมหมายถึง ดีนี้ยังจะออนไลน์ ภาพนิ่งทั้งหมดจะออนไลน์ ดังนั้นผมจึงขอแนะนำให้เพียงแค่การทำเหล่านี้ 

นี่คือที่ดีเป็นเพียงแค่ เช่นแผ่นโกง มันเป็นเพียงพื้นฐานทั้งหมด คำสั่งที่คุณมี มันยิ่งใหญ่เมื่อคุณครั้งแรก เริ่มออกเว็บไซต์ของคุณ เพราะบางทีคุณอาจจะทำไม่ได้ ต้องการที่จะได้รับในทุก nitty ที่จริงผมหงอก สิ่งที่ออกแบบหนัก คุณเพียงแค่ต้องจัดรูปแบบในลักษณะ ว่าจะทำให้ความรู้สึกและความปรารถนา ทำในเวลานั้น และถ้าคุณต้องการจริงๆ ที่จะได้รับในนั้นฉันรู้ว่า นี้เป็นเหมือนหนึ่ง โทมัสอ้างอิงที่ชื่นชอบของ เราได้ใช้มันเพื่อ เตรียมและมันเป็นนิยาย มันพัฒนาจาก Mozilla 

TOMAS REIMERS: ดังนั้น Mozilla เป็น คนที่ทำให้ Firefox และมันก็เป็นเพียงแค่การพัฒนาของพวกเขาเอง อ้างอิงซึ่งผมคิดว่าเป็นสิ่งที่น่ากลัว และก็จะมีที่ยอดเยี่ยม รายการของทรัพยากร ดังนั้นเราจึง have-- 

ALLISON Buchholtz-AU: และจากนั้นก็บันทึกล่าสุดคือ เมื่อคุณกำลังพยายามที่จะ ออกแบบเว็บไซต์ของคุณ วาดแรงบันดาลใจจากสิ่งที่ ที่คุณคิดว่าจะสวย การตรวจสอบองค์ประกอบ การตรวจสอบรหัสแหล่งที่มา จะมีประโยชน์สุด พยายามที่จะคิดออก วิธีการรูปแบบเว็บไซต์ของคุณเอง 

บ่อยครั้งที่ฉันรู้สึกเหมือนที่ดีที่สุด วิธีที่นอกเหนือจากการทดลอง เป็นเพียงการไปดูที่ สิ่งที่มีความสวย ฉันคิดว่ามันเป็นเรื่องยากที่จะเพียงแค่ ชนิดของการออกแบบสิ่งที่ตัวคุณเอง โดยเฉพาะอย่างยิ่งในการเริ่มต้น ดังนั้นโปรดดูที่เว็บไซต์ ว่าคุณจะสนุกกับการมองหาที่ คิดออกสิ่งที่ทำให้ พวกเขาน่าสนใจให้กับคุณ และแล้วรู้สึกฟรีเพื่อ และพยายามทำซ้ำที่ 

TOMAS REIMERS: ขวา แม้เช่นเว็บไซต์ เช่นนี้คุณสามารถดู มีแน่นอน div ที่ด้านบน แล้วคุณมี div อื่นภายใน ที่นี่ซึ่งเป็น Awesomeness CSS แล้วคุณมีพวงของการเชื่อมโยงที่นี่ หากคุณจริงๆเพียงแค่ตรวจสอบ องค์ประกอบคุณสามารถเรียงลำดับของ เริ่มต้นที่จะเห็นสิ่งที่ทำเว็บไซต์ มีลักษณะและวิธีการที่ฉันสามารถ สร้างว่าถ้าผมต้องการที่จะ ไม่ว่าทำให้รู้สึก? ดังนั้นเราจึงมีเพียงสามนาทีที่เหลือ ดังนั้นคำถาม? ๆ ของพวกเขา? ใช่ 

ผู้ชม: สำหรับสี สี่เหลี่ยมผืนผ้าวิธีที่คุณจะ have-- ถ้าคุณไม่อยากให้มัน ไปทั่วทั้งหน้าอาจ ที่คุณได้ทำมันไปทั่วเท่านั้น ครึ่งหน้าหรือเพียงแค่ข้อความ? 

TOMAS REIMERS: ใช่อย่างแน่นอน ดังนั้นให้ฉันดูจริง ฉันมีสองความคิด ดังนั้นครั้งแรกของทุกท่าน ยังสามารถใช้ร้อยละ 

ผู้ชม: จริงเหรอ? 

ALLISON Buchholtz-AU: ดังนั้นบางสิ่งบางอย่าง ที่จะมองขึ้นคือการวางตำแหน่งของญาติ มันเป็นสิ่งที่เรา ไม่ได้มีเวลาที่จะได้รับเข้าไป แต่มันเป็นสิ่งที่ฉันแน่นอน ขอแนะนำให้พวกคุณตรวจสอบจาก 

TOMAS REIMERS: ร้อยละดังนั้น และดูว่าเราทำมัน เพียง 50% ของความกว้าง? ALLISON Buchholtz-AU: ถ้าคุณ รู้จริงจำนวนพิกเซล, คุณสามารถจะแม่นยำมากขึ้นด้วยวิธีการที่ คุณสามารถทำเล่น ๆ กับมัน แต่ 50% ถ้าเราจะปรับขนาดเบราว์เซอร์ของเรา มันจะทำให้มีขนาดเล็กลง 

TOMAS REIMERS: ดีก็ โดยทั่วไป 50% ตอนนี้ผมคิดว่า มันเป็น 50% และอัตรากำไรขั้นต้นแล้ว ได้รับการบันทึกว่า CSS มีจำนวนมากนิสัยใจคอ ดังนั้นตอนนี้นี้ 50% ของความกว้างหน้า แต่จำไว้ว่าคุณมี 10 พิกเซลเอาออกจากแต่ละด้าน ดังนั้นถ้าคุณกำลังจะย้ายที่กับ ขอบด้านซ้ายของเบราว์เซอร์ แล้วมันจะมีลักษณะเหมือน 50% อีกอย่างที่ผมบอก CSS สามารถ เป็นจำนวนมากของการคาดเดาและตรวจสอบ เช่นเดียวกับที่คุณคิดว่าบางสิ่งบางอย่าง จะทำงานในลักษณะอย่างใดอย่างหนึ่ง แต่มันจะทำงานวิธีที่แตกต่างกันโดยสิ้นเชิง 

ALLISON Buchholtz-AU: และคุณก็จะได้รับอย่างชาญฉลาด และคุณก็จะได้รับดีกว่า สัญชาตญาณของมันในขณะที่คุณย้ายไปตาม 

TOMAS REIMERS: และมัน ได้รับแย่ลงและแย่ ดังนั้นจึงเป็นจริงๆเพียงแค่การแข่งขัน 

ALLISON Buchholtz-AU: นั่นคือให้กำลังใจสุด เราต้องการให้พวกเขาชอบ CSS 

TOMAS REIMERS: CSS เป็นที่น่ากลัว โปรดจำไว้ว่า คำถามอื่น ๆ ? 

ALLISON Buchholtz-AU: สิ่งหนึ่งที่ อะไรอีกหรือไม่ เย็น 

TOMAS REIMERS: น่ากลัว 

ALLISON Buchholtz-AU: ดีถ้าคุณ คนมีคำถามใด ๆ ในภายหลัง เรามักจะใช้ได้ตามปกติ คุณอาจจะเห็นบางส่วน ของเราสำหรับโครงการสุดท้าย และแน่นอนที่ Hackathon 

TOMAS REIMERS: แน่นอน และที่เป็นธรรม 

ALLISON Buchholtz-AU: และที่ยุติธรรม โอ้ 

TOMAS REIMERS: มองไปข้างหน้าเพื่อ เห็นทุก awesome-- ของคุณ 

ALLISON Buchholtz-AU: เราจะเห็น ทั้งหมดของเว็บไซต์ของคุณน่ากลัว ที่จะสวยงาม TOMAS REIMERS: คุณสามารถเสมอ เห็นเช่นเดียวกับเว็บไซต์ ที่มีเช่น CSS ที่ดีและ เช่นเดียวกับผู้ที่ไม่ได้พยายามที่จะทำ CSS ALLISON Buchholtz-AU: นอกจากนี้อีก สิ่งที่อีกหนึ่งสิ่งที่จะมองเข้าไป เป็น Bootstrapping ดังนั้นเงินทุนที่ดีมาก 

TOMAS REIMERS: Google ว่าถ้า you-- 

ALLISON Buchholtz-AU: Google มัน มันเป็นเรื่องที่เหลือเชื่อ คุณจะรักมัน และตอนนี้ที่คุณมี ความเข้าใจพื้นฐานของ CSS, มันจะทำให้ความรู้สึกมากขึ้น น่ากลัว ขอบคุณครับ 

TOMAS REIMERS: ขอบคุณมาก