สำรวจเวิร์กโฟลว์ใหม่ในข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งเกี่ยวข้องกับการดูและการเปลี่ยน CSS
โปรดดูที่ดูและเปลี่ยน CSS เพื่อเรียนรู้พื้นฐาน
เลือกองค์ประกอบ
แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณดูหรือเปลี่ยน CSS ขององค์ประกอบได้ทีละองค์ประกอบ
ในภาพหน้าจอ องค์ประกอบ h1
ที่ไฮไลต์สีน้ำเงินในแผนผัง DOM คือองค์ประกอบที่เลือก
ทางด้านขวา รูปแบบขององค์ประกอบจะแสดงในแท็บรูปแบบ ทางด้านซ้าย ระบบจะไฮไลต์องค์ประกอบในวิวพอร์ต แต่เพียงเพราะเมาส์วางอยู่เหนือองค์ประกอบในแผนผัง DOM
ดูบทแนะนำที่ดู CSS ขององค์ประกอบ
การเลือกองค์ประกอบทำได้หลายวิธี ดังนี้
- ในวิวพอร์ต ให้คลิกขวาที่องค์ประกอบและเลือกตรวจสอบ
- ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกเลือกองค์ประกอบ หรือกด Command+Shift+C (Mac) หรือ Control+Shift+C (Windows, Linux) แล้วคลิกองค์ประกอบในวิวพอร์ต
- ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกองค์ประกอบในแผนผัง DOM
- ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เรียกใช้การค้นหา เช่น
document.querySelector('p')
ในคอนโซล คลิกขวาที่ผลลัพธ์ จากนั้นเลือกแสดงในแผงองค์ประกอบ
ดู CSS
ใช้แท็บองค์ประกอบ > รูปแบบและที่คำนวณแล้วเพื่อดูกฎ CSS และวินิจฉัยปัญหา CSS
นำทางด้วยลิงก์
แท็บรูปแบบจะแสดงลิงก์ไปยังที่ต่างๆ ซึ่งรวมถึงแต่ไม่จำกัดเพียงสิ่งต่อไปนี้
- ข้างกฎ CSS ไปยังสไตล์ชีตและแหล่งที่มาของ CSS ลิงก์ดังกล่าวจะเปิดแผงแหล่งที่มา หากมีการลดขนาดของสไตล์ชีต โปรดดูทำให้ไฟล์ที่ถูกลดขนาดอ่านได้
- ในส่วนรับค่าจาก ... ไปยังองค์ประกอบระดับบน
- ในการเรียก
var()
ไปยังการประกาศพร็อพเพอร์ตี้ที่กำหนดเอง - ในพร็อพเพอร์ตี้ชวเลข
animation
ไปยัง@keyframes
- ลิงก์ดูข้อมูลเพิ่มเติมในเคล็ดลับเครื่องมือเอกสารประกอบ
- และอื่นๆ อีกมากมาย
ตัวอย่างไฮไลต์มีดังนี้
ลิงก์อาจมีรูปแบบแตกต่างออกไป หากไม่แน่ใจว่าลิงก์ใดเป็นลิงก์ ให้ลองคลิกลิงก์ดังกล่าวเพื่อดู
ดูเคล็ดลับเครื่องมือพร้อมเอกสารประกอบ CSS, ความเฉพาะเจาะจง และค่าพร็อพเพอร์ตี้ที่กำหนดเอง
องค์ประกอบ > รูปแบบ แสดงเคล็ดลับเครื่องมือพร้อมด้วยข้อมูลที่เป็นประโยชน์เมื่อคุณวางเมาส์เหนือองค์ประกอบที่เฉพาะเจาะจง
ดูเอกสารประกอบของ CSS
หากต้องการดูเคล็ดลับเครื่องมือพร้อมคำอธิบาย CSS สั้นๆ ให้วางเมาส์เหนือชื่อพร็อพเพอร์ตี้ในแท็บรูปแบบ
คลิกดูข้อมูลเพิ่มเติมเพื่อไปที่การอ้างอิง MDN CSS ในพร็อพเพอร์ตี้นี้
หากต้องการปิดเคล็ดลับเครื่องมือ ให้เลือก ไม่แสดง
หากต้องการเปิดอีกครั้ง ให้ไปที่ การตั้งค่า > ค่ากำหนด > องค์ประกอบ > แสดงเคล็ดลับเครื่องมือเอกสารประกอบ CSS
ดูความเฉพาะเจาะจงของตัวเลือก
วางเมาส์เหนือตัวเลือกเพื่อดูเคล็ดลับเครื่องมือที่มีน้ำหนักความเฉพาะเจาะจง
ดูค่าของพร็อพเพอร์ตี้ที่กำหนดเอง
วางเมาส์เหนือ --custom-property
เพื่อดูค่าในเคล็ดลับเครื่องมือ
ดู CSS ที่ไม่ถูกต้อง ลบล้าง ไม่ได้ใช้งาน และ CSS อื่นๆ
แท็บรูปแบบรับรู้ปัญหา CSS ได้หลายประเภทและไฮไลต์ปัญหาเหล่านั้นในรูปแบบต่างๆ
ดูทำความเข้าใจ CSS ในแท็บสไตล์
ดูเฉพาะ CSS ที่ใช้กับองค์ประกอบหนึ่งๆ จริงๆ
แท็บรูปแบบจะแสดงกฎทั้งหมดที่ใช้กับองค์ประกอบ รวมถึงการประกาศที่ถูกลบล้าง เมื่อไม่สนใจการประกาศที่ถูกลบล้าง ให้ใช้แท็บที่คำนวณแล้วเพื่อดูเฉพาะ CSS ที่กำลังใช้กับองค์ประกอบ
- เลือกองค์ประกอบ
- ไปที่แท็บที่คำนวณในแผงองค์ประกอบ
เลือกช่องทำเครื่องหมายแสดงทั้งหมดเพื่อดูคุณสมบัติทั้งหมด
ดูทำความเข้าใจ CSS ในแท็บที่คำนวณแล้ว
ดูพร็อพเพอร์ตี้ CSS ตามลำดับตัวอักษร
ใช้แท็บที่คำนวณแล้ว ดูดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริงๆ
ดูพร็อพเพอร์ตี้ CSS ที่รับช่วงมา
เลือกช่องทำเครื่องหมายแสดงทั้งหมดในแท็บคำนวณ ดูดูเฉพาะ CSS ที่มีผลกับองค์ประกอบจริงๆ
หรือเลื่อนแท็บรูปแบบและหาส่วนที่ชื่อInherited from <element_name>
ดูกฎ At-rules ของ CSS
กฎ "@" คือคำสั่ง CSS ที่ให้คุณควบคุมลักษณะการทำงานของ CSS ได้ องค์ประกอบ > รูปแบบ แสดงกฎ @ ต่อไปนี้ในส่วนเฉพาะ
ดูกฎที่กฎ @property
รายการ
@property
กฎหลักของ CSS ช่วยให้คุณกำหนดคุณสมบัติที่กำหนดเองของ CSS ได้อย่างชัดเจนและลงทะเบียนในสไตล์ชีตโดยไม่ต้องใช้ JavaScript ใดๆ
วางเมาส์เหนือชื่อของพร็อพเพอร์ตี้นั้นในแท็บรูปแบบ เพื่อดูเคล็ดลับเครื่องมือที่มีค่า ตัวบ่งชี้ และลิงก์ไปยังการลงทะเบียนของพร็อพเพอร์ตี้ในส่วน @property
ที่ยุบได้ที่ด้านล่างของแท็บรูปแบบ
หากต้องการแก้ไขกฎ @property
ให้ดับเบิลคลิกชื่อหรือค่าของกฎนั้น
ดูกฎที่กฎ @supports
รายการ
แท็บรูปแบบจะแสดงกฎ @ ของ CSS @supports
รายการหากนำไปใช้กับองค์ประกอบ ตัวอย่างเช่น ตรวจสอบองค์ประกอบต่อไปนี้
หากเบราว์เซอร์รองรับฟังก์ชัน lab()
องค์ประกอบจะเป็นสีเขียว มิฉะนั้นจะเป็นสีม่วง
ดูกฎที่กฎ @scope
รายการ
แท็บรูปแบบจะแสดง CSS @scope
ในกฎหากมีการนำไปใช้กับองค์ประกอบ
กฎ @ ใหม่ @scope
เป็นส่วนหนึ่งของข้อกำหนดเกี่ยวกับ CSS Cascading และการรับค่าระดับ 6 ของ CSS กฎเหล่านี้ช่วยให้คุณกำหนดขอบเขตสไตล์ CSS กล่าวคือ ใช้รูปแบบกับองค์ประกอบที่เฉพาะเจาะจงอย่างชัดแจ้ง
ดูกฎ @scope
ในตัวอย่างต่อไปนี้
- ตรวจสอบข้อความในการ์ดในตัวอย่าง
- ในแท็บรูปแบบ ให้ค้นหากฎ
@scope
ในตัวอย่างนี้ กฎ @scope
จะลบล้างการประกาศ CSS background-color
ส่วนกลางสำหรับองค์ประกอบ <p>
ทั้งหมดภายในองค์ประกอบที่มีคลาส card
หากต้องการแก้ไขกฎ @scope
ให้ดับเบิลคลิกกฎ
ดูกฎที่กฎ @font-palette-values
รายการ
กฎการทำงานของ CSS @font-palette-values
ช่วยให้คุณปรับแต่งค่าเริ่มต้นของพร็อพเพอร์ตี้ font-palette
ได้ องค์ประกอบ > รูปแบบ แสดงกฎพื้นฐานนี้ในส่วนเฉพาะ
ดูส่วน @font-palette-values
ในตัวอย่างถัดไป
- ตรวจสอบข้อความบรรทัดที่ 2 ในตัวอย่าง
- ในรูปแบบ ให้ค้นหาส่วน
@font-palette-values
ในตัวอย่างนี้ ค่าชุดสีแบบอักษร --New
จะลบล้างค่าเริ่มต้นของแบบอักษรสี
หากต้องการแก้ไขค่าที่กำหนดเอง ให้ดับเบิลคลิกค่านั้น
ดูกฎที่กฎ @position-try
รายการ
กฎ CSS @position-try
พร้อมด้วยพร็อพเพอร์ตี้ position-try-options
ช่วยให้คุณกำหนดตำแหน่ง Anchor ทางเลือกสำหรับองค์ประกอบได้ ดูข้อมูลเพิ่มเติมได้ในการเปิดตัว API การวางตำแหน่ง Anchor ของ CSS
องค์ประกอบ > รูปแบบ จะใส่ค่า position-try-options
และลิงก์แต่ละตัวเลือกเข้ากับส่วน @position-try --name
โดยเฉพาะ
ตรวจสอบค่า position-try-options
และส่วน @position-try
ในตัวอย่างถัดไป
- ในตัวอย่าง ให้เปิดเมนูย่อย ซึ่งก็คือ คลิกบัญชีของคุณ แล้วคลิกหน้าร้าน
- ตรวจสอบองค์ประกอบโดยใช้
id="submenu"
ในตัวอย่าง - ในรูปแบบ ให้ค้นหาพร็อพเพอร์ตี้
position-try-options
แล้วคลิกค่า--bottom
ของพร็อพเพอร์ตี้นั้น แท็บรูปแบบจะนำคุณไปยังส่วน@position-try
ที่เกี่ยวข้อง
หากต้องการแก้ไขค่าในส่วน ให้ดับเบิลคลิกค่านั้น
ดูโมเดลกล่องขององค์ประกอบ
หากต้องการดูโมเดลกล่องขององค์ประกอบ ให้ไปที่แท็บรูปแบบ แล้วคลิกปุ่ม แสดงแถบด้านข้างในแถบการทำงาน
หากต้องการเปลี่ยนค่า ให้ดับเบิลคลิกค่านั้น
ค้นหาและกรอง CSS ขององค์ประกอบ
ใช้ช่องตัวกรองในแท็บรูปแบบและคำนวณเพื่อค้นหาคุณสมบัติหรือค่า CSS ที่เจาะจง
หากต้องการค้นหาพร็อพเพอร์ตี้ที่รับช่วงมาในแท็บที่คำนวณด้วย ให้เลือกช่องทำเครื่องหมายแสดงทั้งหมด
หากต้องการไปยังแท็บที่คำนวณแล้ว ให้จัดกลุ่มพร็อพเพอร์ตี้ที่กรองไว้เป็นหมวดหมู่ที่ยุบได้โดยการเลือกกลุ่ม
จำลองหน้าที่โฟกัส
หากคุณเปลี่ยนโฟกัสจากหน้าไปที่เครื่องมือสำหรับนักพัฒนาเว็บ องค์ประกอบการวางซ้อนบางอย่างจะซ่อนโดยอัตโนมัติหากถูกเรียกใช้จากโฟกัส ตัวอย่างเช่น รายการแบบเลื่อนลง เมนู หรือเครื่องมือเลือกวันที่ ตัวเลือก check_box จำลองหน้าที่โฟกัสจะช่วยให้คุณแก้ไขข้อบกพร่องขององค์ประกอบดังกล่าวเสมือนเป็นโฟกัสได้
ลองจำลองหน้าที่โฟกัสในหน้าสาธิตนี้
- โฟกัสองค์ประกอบอินพุต ส่วนอีกองค์ประกอบหนึ่งจะปรากฏใต้องค์ประกอบนั้น
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ ตอนนี้หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บอยู่ในโฟกัสแทนที่หน้าแล้ว องค์ประกอบจึงหายไปอีกครั้ง
- ในองค์ประกอบ > รูปแบบ ให้คลิก :hov เลือก check_box จำลองหน้าที่โฟกัส และตรวจสอบว่าเลือกองค์ประกอบอินพุตแล้ว ตอนนี้คุณตรวจสอบองค์ประกอบที่อยู่ภายใต้องค์ประกอบได้แล้ว
คุณยังดูตัวเลือกเดียวกันในแผงการแสดงผลได้ด้วย
สลับคลาส Pseudo
วิธีสลับคลาสเทียม เช่น :active
, :focus
, :focus-within
, :target
, :hover
, :visited
หรือ focus-visible
- เลือกองค์ประกอบ
- ในแผงองค์ประกอบ ให้ไปที่แท็บรูปแบบ
- คลิก :hov
- เลือกคลาส Pseudo ที่ต้องการเปิด
ในวิวพอร์ต คุณจะเห็นว่าเครื่องมือสำหรับนักพัฒนาเว็บใช้การประกาศ background-color
กับองค์ประกอบ แม้ว่าจริงๆ แล้วองค์ประกอบจะไม่ได้วางเมาส์เหนือองค์ประกอบก็ตาม
ดูบทแนะนำแบบอินเทอร์แอกทีฟได้ในเพิ่ม Pseudostate ในชั้นเรียน
ดูองค์ประกอบเทียมไฮไลต์ที่รับช่วงมา
องค์ประกอบจำลองช่วยให้คุณจัดรูปแบบส่วนที่เฉพาะเจาะจงขององค์ประกอบได้ องค์ประกอบเทียมของไฮไลต์คือส่วนของเอกสารที่มีสถานะ "เลือกแล้ว" และมีการกำหนดสไตล์เป็น "ไฮไลต์" เพื่อระบุสถานะนี้ให้ผู้ใช้ทราบ ตัวอย่างเช่น องค์ประกอบเทียมดังกล่าวคือ ::selection
, ::spelling-error
, ::grammar-error
และ ::highlight
ดังที่กล่าวไว้ในข้อกำหนด เมื่อสไตล์หลายสไตล์ขัดแย้งกัน การเรียงซ้อนจะกำหนดรูปแบบที่ชนะ
คุณดูองค์ประกอบเทียมไฮไลต์ที่รับช่วงมาได้ เพื่อให้เข้าใจการสืบทอดและลำดับความสำคัญของกฎได้ดีขึ้น
-
ฉันสืบทอดสไตล์ไฮไลต์องค์ประกอบเทียมของระดับบนสุด เลือกฉัน!
เลือกข้อความบางส่วนด้านบน
ในแท็บรูปแบบ ให้เลื่อนลงเพื่อหาส่วน
Inherited from ::selection pseudo of...
ดูเลเยอร์การเรียงซ้อน
เลเยอร์ Cascade ช่วยให้ควบคุมไฟล์ CSS ได้ชัดเจนยิ่งขึ้นเพื่อป้องกันความขัดแย้งของสไตล์ที่เจาะจง ซึ่งจะเป็นประโยชน์สำหรับฐานของโค้ดขนาดใหญ่ ระบบการออกแบบ และการจัดการรูปแบบของบุคคลที่สามในแอปพลิเคชัน
หากต้องการดูเลเยอร์การเรียงซ้อน ให้inspectองค์ประกอบถัดไป แล้วเปิดองค์ประกอบ > รูปแบบ
ในแท็บรูปแบบ ให้ดูเลเยอร์การเรียงซ้อน 3 เลเยอร์และสไตล์ ได้แก่ page
, component
และ base
หากต้องการดูลำดับเลเยอร์ ให้คลิกชื่อเลเยอร์หรือปุ่ม สลับมุมมองเลเยอร์ CSS
เลเยอร์ page
มีความเฉพาะเจาะจงสูงสุด พื้นหลังขององค์ประกอบจึงเป็นสีเขียว
ดูหน้าในโหมดการพิมพ์
หากต้องการดูหน้าในโหมดการพิมพ์ ให้ทำดังนี้
- เปิดเมนูคำสั่ง
- เริ่มพิมพ์
Rendering
แล้วเลือกShow Rendering
- สำหรับเมนูแบบเลื่อนลงจำลองสื่อ CSS ให้เลือกพิมพ์
ดู CSS ที่ใช้และไม่ได้ใช้ด้วยแท็บการครอบคลุม
แท็บ "การครอบคลุม" จะแสดง CSS ที่หน้าเว็บใช้จริง
- กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) ขณะที่เครื่องมือสำหรับนักพัฒนาเว็บอยู่ในโฟกัสเพื่อเปิดเมนูคำสั่ง
เริ่มพิมพ์
coverage
เลือกแสดงความครอบคลุม แท็บ ความครอบคลุม จะปรากฏขึ้น
คลิก โหลดซ้ำ หน้าจะโหลดซ้ำและแท็บการครอบคลุมจะแสดงภาพรวมของจำนวน CSS (และ JavaScript) ที่ใช้ในแต่ละไฟล์ที่เบราว์เซอร์โหลด
สีเขียวแสดง CSS ที่ใช้ สีแดงหมายถึง CSS ที่ไม่ได้ใช้
คลิกไฟล์ CSS เพื่อดูรายละเอียดทีละบรรทัดเกี่ยวกับ CSS ที่ CSS ใช้ในการดูตัวอย่างด้านบน
ในภาพหน้าจอ ไม่ได้ใช้บรรทัดที่ 55-57 และ 65-67 ของ
devsite-google-blue.css
แต่ใช้บรรทัดที่ 59 ถึง 63
บังคับใช้โหมดแสดงตัวอย่างการพิมพ์
ดูบังคับให้เครื่องมือสำหรับนักพัฒนาเว็บอยู่ในโหมดแสดงตัวอย่างก่อนพิมพ์
คัดลอก CSS
คุณสามารถคัดลอกกฎ CSS, การประกาศ, คุณสมบัติ ค่า แยกต่างหากได้จากเมนูแบบเลื่อนลงเดียวในแท็บรูปแบบ
นอกจากนี้ คุณยังคัดลอกพร็อพเพอร์ตี้ CSS ในไวยากรณ์ JavaScript ได้อีกด้วย ตัวเลือกนี้จะมีประโยชน์หากคุณใช้ไลบรารี CSS-in-JS
วิธีคัดลอก CSS
- เลือกองค์ประกอบ
- ในแท็บองค์ประกอบ > รูปแบบ ให้คลิกขวาที่พร็อพเพอร์ตี้ CSS
เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากเมนูแบบเลื่อนลง
- คัดลอกการประกาศ คัดลอกพร็อพเพอร์ตี้และค่าในไวยากรณ์ CSS ดังนี้
css property: value;
- คัดลอกพร็อพเพอร์ตี้ คัดลอกเฉพาะชื่อ
property
- คัดลอกค่า คัดลอกเฉพาะ
value
- คัดลอกกฎ คัดลอกกฎ CSS ทั้งหมด ดังนี้
css selector[, selector] { property: value; property: value; ... }
- คัดลอกประกาศเป็น JS คัดลอกพร็อพเพอร์ตี้และค่าในไวยากรณ์ JavaScript ดังนี้
js propertyInCamelCase: 'value'
- คัดลอกประกาศทั้งหมด คัดลอกพร็อพเพอร์ตี้และค่าทั้งหมดในกฎ CSS ดังนี้
css property: value; property: value; ...
คัดลอกประกาศทั้งหมดเป็น JS คัดลอกพร็อพเพอร์ตี้ทั้งหมดและค่าในไวยากรณ์ JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
คัดลอกการเปลี่ยนแปลง CSS ทั้งหมด คัดลอกการเปลี่ยนแปลงที่คุณทำในแท็บรูปแบบในประกาศทั้งหมด
ดูค่าที่คำนวณแล้ว นําคุณไปยังแท็บที่คำนวณแล้ว
- คัดลอกการประกาศ คัดลอกพร็อพเพอร์ตี้และค่าในไวยากรณ์ CSS ดังนี้
เปลี่ยน CSS
ส่วนนี้จะแสดงวิธีทั้งหมดที่คุณสามารถเปลี่ยน CSS ในองค์ประกอบ > รูปแบบ
นอกจากนี้ คุณยังทำสิ่งต่อไปนี้ได้ด้วย
เพิ่มการประกาศ CSS ในองค์ประกอบ
เนื่องจากลำดับของการประกาศจะมีผลต่อการจัดรูปแบบองค์ประกอบ คุณจึงเพิ่มการประกาศได้หลายวิธี ดังนี้
- เพิ่มการประกาศในบรรทัด เทียบเท่ากับการเพิ่มแอตทริบิวต์
style
ใน HTML ขององค์ประกอบ - เพิ่มการประกาศในกฎของรูปแบบ
คุณควรใช้เวิร์กโฟลว์ใด ในสถานการณ์ส่วนใหญ่ คุณควรใช้เวิร์กโฟลว์การประกาศในบรรทัด การประกาศแบบอินไลน์มีความเฉพาะเจาะจงสูงกว่าประกาศภายนอก เวิร์กโฟลว์แบบอินไลน์จึงช่วยให้การเปลี่ยนแปลงมีผลกับองค์ประกอบตามที่คุณคาดไว้ ดูประเภทตัวเลือกสำหรับข้อมูลเพิ่มเติมเกี่ยวกับความเฉพาะเจาะจง
หากคุณแก้ไขข้อบกพร่องรูปแบบขององค์ประกอบและต้องการทดสอบว่าจะเกิดอะไรขึ้นโดยเฉพาะเมื่อมีการกำหนดการประกาศไว้ในที่ที่แตกต่างกัน ให้ใช้เวิร์กโฟลว์อื่น
เพิ่มการประกาศในบรรทัด
วิธีเพิ่มการประกาศในบรรทัด
- เลือกองค์ประกอบ
- ในแท็บรูปแบบ ให้คลิกระหว่างวงเล็บของส่วน element.style เคอร์เซอร์จะโฟกัสเพื่อให้คุณป้อนข้อความ
- ป้อนชื่อพร็อพเพอร์ตี้และกด Enter
ป้อนค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นั้นแล้วกด Enter ใน DOM Tree คุณจะเห็นว่ามีการเพิ่มแอตทริบิวต์
style
ลงในองค์ประกอบในภาพหน้าจอ มีการใช้พร็อพเพอร์ตี้
margin-top
และbackground-color
กับองค์ประกอบที่เลือก ในแผนผัง DOM คุณจะเห็นการประกาศที่อยู่ในแอตทริบิวต์style
ขององค์ประกอบ
เพิ่มการประกาศในกฎของรูปแบบ
วิธีเพิ่มการประกาศลงในกฎสไตล์ที่มีอยู่
- เลือกองค์ประกอบ
- ในแท็บรูปแบบ ให้คลิกระหว่างวงเล็บของกฎสไตล์ที่คุณต้องการเพิ่มการประกาศ เคอร์เซอร์จะโฟกัสเพื่อให้คุณป้อนข้อความ
- ป้อนชื่อพร็อพเพอร์ตี้และกด Enter
- ป้อนค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นั้นแล้วกด Enter
ในภาพหน้าจอ กฎสไตล์จะได้รับการประกาศ border-bottom-style:groove
ใหม่
เปลี่ยนชื่อหรือค่าการประกาศ
ดับเบิลคลิกชื่อหรือค่าของประกาศเพื่อเปลี่ยน ดูเปลี่ยนค่าที่แจกแจงได้ด้วยแป้นพิมพ์ลัดสำหรับแป้นพิมพ์ลัดสำหรับการเพิ่มหรือลดค่าเป็น 0.1, 1, 10 หรือ 100 อย่างรวดเร็ว
เปลี่ยนค่าที่แจกแจงได้ด้วยแป้นพิมพ์ลัด
ขณะแก้ไขค่าที่แจกแจงได้ของการประกาศ เช่น font-size
คุณสามารถใช้แป้นพิมพ์ลัดต่อไปนี้เพื่อเพิ่มค่าเป็นจำนวนคงที่ได้
- Option+Up (Mac) หรือ Alt+Up (Windows, Linux) เพิ่มขึ้น 0.1
- ขึ้น เพื่อเปลี่ยนค่าเป็น 1 หรือคูณ 0.1 หากค่าปัจจุบันอยู่ระหว่าง -1 ถึง 1
- Shift+Up เพื่อเพิ่มครั้งละ 10
- Shift+Command+Up (Mac) หรือ Control+Shift+Page Up (Windows, Linux) เพื่อเพิ่มค่าขึ้น 100
การลดก็ใช้ได้เช่นกัน เพียงแทนที่ Up แต่ละรายการที่กล่าวถึงก่อนหน้านี้ด้วย Down
เปลี่ยนค่าความยาว
คุณสามารถใช้ตัวชี้เพื่อเปลี่ยนคุณสมบัติให้มีความยาวต่างๆ เช่น ความกว้าง ความสูง ระยะห่างจากขอบ ระยะขอบ หรือเส้นขอบ
วิธีเปลี่ยนหน่วยความยาว
- วางเมาส์เหนือชื่อหน่วย แล้วสังเกตว่ามีการขีดเส้นใต้
คลิกชื่อหน่วยเพื่อเลือกหน่วยจากรายการแบบเลื่อนลง
วิธีเปลี่ยนค่าความยาว
- วางเมาส์เหนือค่าหน่วย แล้วสังเกตเห็นว่าตัวชี้เปลี่ยนเป็นลูกศร 2 หัวแนวนอน
ลากในแนวนอนเพื่อเพิ่มหรือลดค่า
หากต้องการปรับค่าเป็น 10 ให้กด Shift ค้างไว้ขณะลาก
เพิ่มคลาสในองค์ประกอบ
วิธีเพิ่มคลาสลงในองค์ประกอบ
- เลือกองค์ประกอบในแผนผัง DOM
- คลิก .cls
- ป้อนชื่อชั้นเรียนในช่องเพิ่มชั้นเรียนใหม่
- กด Enter
จำลองค่ากำหนดธีมสว่างและมืดและเปิดใช้โหมดมืดอัตโนมัติ
หากต้องการสลับโหมดมืดอัตโนมัติ หรือจำลองธีมสว่างหรือมืดที่ผู้ใช้ต้องการ ให้ทำดังนี้
- ในแท็บองค์ประกอบ > รูปแบบ ให้คลิกสลับการจำลองการแสดงผลทั่วไป
เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง
- ชอบ-สี-รูปแบบ: สว่าง บ่งบอกว่าผู้ใช้ต้องการธีมสว่าง
- prefers-color-scheme: มืด บ่งบอกว่าผู้ใช้ชอบธีมมืด
- โหมดมืดอัตโนมัติ แสดงหน้าเว็บในโหมดมืดแม้ว่าคุณจะไม่ได้ติดตั้งใช้งานก็ตาม และจะตั้งค่า
prefers-color-scheme
เป็นdark
โดยอัตโนมัติด้วย
รายการแบบเลื่อนลงนี้เป็นทางลัดสำหรับตัวเลือกจำลองฟีเจอร์สื่อ CSSprefers-color-scheme
และเปิดใช้โหมดมืดอัตโนมัติของแท็บการแสดงผล
เปิด/ปิดชั้นเรียน
วิธีเปิดหรือปิดใช้คลาสในองค์ประกอบ
- เลือกองค์ประกอบในแผนผัง DOM
- เปิดส่วนคลาสองค์ประกอบ ดูเพิ่มคลาสในองค์ประกอบ ใต้ช่องเพิ่มชั้นเรียนใหม่คือคลาสทั้งหมดที่ใช้กับองค์ประกอบนี้
- เปิด/ปิดช่องทำเครื่องหมายข้างชั้นเรียนที่คุณต้องการเปิดหรือปิดใช้
เพิ่มกฎของรูปแบบ
วิธีเพิ่มกฎของรูปแบบใหม่
- เลือกองค์ประกอบ
- คลิกกฎของรูปแบบใหม่ เครื่องมือสำหรับนักพัฒนาเว็บจะแทรกกฎใหม่ ใต้กฎ element.style
ในภาพหน้าจอ เครื่องมือสำหรับนักพัฒนาเว็บเพิ่มกฎสไตล์ h1.devsite-page-title
หลังจากคลิกกฎรูปแบบใหม่
เลือกสไตล์ชีตที่จะเพิ่มกฎ
เมื่อเพิ่มกฎของสไตล์ใหม่ ให้คลิกกฎสไตล์ใหม่ค้างไว้ เพื่อเลือกสไตล์ชีตที่จะเพิ่มกฎสไตล์
เปิด/ปิดการประกาศ
วิธีเปิดหรือปิดการประกาศรายการเดียว
- เลือกองค์ประกอบ
- ในแท็บรูปแบบ ให้วางเมาส์เหนือกฎที่กำหนดการประกาศ ช่องทำเครื่องหมายจะปรากฏ ข้างการประกาศแต่ละรายการ
- เลือกหรือล้างช่องทําเครื่องหมายข้างการประกาศ เมื่อคุณล้างการประกาศ เครื่องมือสำหรับนักพัฒนาเว็บจะขีดฆ่าประกาศเพื่อบอกว่าไม่มีการใช้งานอีกต่อไป
ในภาพหน้าจอ คุณสมบัติ color
ขององค์ประกอบที่เลือกอยู่ในปัจจุบันปิดอยู่
แก้ไของค์ประกอบเทียม ::view-transition
ระหว่างภาพเคลื่อนไหว
โปรดดูส่วนที่เกี่ยวข้องในภาพเคลื่อนไหว
โปรดดูข้อมูลเพิ่มเติมที่หัวข้อการเปลี่ยนรุ่นอย่างราบรื่นและเรียบง่ายด้วย View Transitions API
จัดตำแหน่งรายการในตารางกริดและเนื้อหาด้วยเครื่องมือแก้ไขตารางกริด
ดูส่วนที่เกี่ยวข้องในตารางกริดตรวจสอบ CSS
เปลี่ยนสีด้วยตัวเลือกสี
ดูตรวจสอบและแก้ไขข้อบกพร่องของสีแบบ HD และที่ไม่ใช่ HD ด้วยตัวเลือกสี
เปลี่ยนค่ามุมด้วยนาฬิกา Angle
นาฬิกา Angle มี GUI สำหรับการเปลี่ยน <angle>
ในค่าคุณสมบัติ CSS
หากต้องการเปิดนาฬิกา Angle ให้ทำดังนี้
- เลือกองค์ประกอบที่มีการประกาศมุม
ในแท็บรูปแบบ ให้ค้นหาการประกาศ
transform
หรือbackground
ที่ต้องการเปลี่ยนแปลง คลิกช่องแสดงตัวอย่างมุมถัดจากค่ามุมนาฬิกาขนาดเล็กทางด้านซ้ายของ
-5deg
และ0.25turn
คือตัวอย่างมุมคลิกตัวอย่างเพื่อเปิดนาฬิกา Angle
เปลี่ยนค่ามุมโดยคลิกที่วงกลมนาฬิกา Angle หรือเลื่อนเมาส์เพื่อเพิ่ม / ลดค่ามุมลง 1 ค่า
มีแป้นพิมพ์ลัดเพิ่มเติมสำหรับเปลี่ยนค่ามุม ดูข้อมูลเพิ่มเติมในแป้นพิมพ์ลัดสำหรับแผงรูปแบบ
เปลี่ยนช่องและเงาข้อความด้วยเครื่องมือแก้ไขเงา
Shadow Editor มี GUI สำหรับเปลี่ยนการประกาศ CSS ของ text-shadow
และ box-shadow
วิธีเปลี่ยนเงาด้วยเครื่องมือแก้ไขเงา
เลือกองค์ประกอบที่มีการประกาศเงา เช่น เลือกองค์ประกอบถัดไป
ในแท็บรูปแบบ ให้มองหาไอคอนเงา ข้างการประกาศ
text-shadow
หรือbox-shadow
คลิกไอคอนเงาเพื่อเปิดเครื่องมือแก้ไขเงา
เปลี่ยนคุณสมบัติของเงา
- ประเภท (สำหรับ
box-shadow
เท่านั้น) เลือกเริ่มต้นหรือแทรก - ออฟเซ็ต X และ Y ลากจุดสีน้ำเงินหรือระบุค่า
- เบลอ ลากแถบเลื่อนหรือระบุค่า
- กระจาย (สำหรับ
box-shadow
เท่านั้น) ลากแถบเลื่อนหรือระบุค่า
- ประเภท (สำหรับ
สังเกตการเปลี่ยนแปลงที่ใช้กับองค์ประกอบ
แก้ไขภาพเคลื่อนไหวและกำหนดเวลาการเปลี่ยนด้วยเครื่องมือแก้ไขการค่อยๆ เปลี่ยน
เครื่องมือแก้ไขการค่อยๆ เปลี่ยนมี GUI สําหรับการเปลี่ยนค่าของ transition-timing-function
และ animation-timing-function
วิธีเปิดเครื่องมือแก้ไขการค่อยๆ เปลี่ยน
- เลือกองค์ประกอบที่มีการประกาศฟังก์ชันการจับเวลา เช่น องค์ประกอบ
<body>
ในหน้านี้ - ในแท็บรูปแบบ ให้ค้นหาไอคอน สีม่วงข้างการประกาศ
transition-timing-function
,animation-timing-function
หรือพร็อพเพอร์ตี้ชวเลขtransition
- คลิกไอคอนเพื่อเปิดเครื่องมือแก้ไขการค่อยๆ เปลี่ยน
ใช้ค่าที่กำหนดล่วงหน้าเพื่อปรับเวลา
หากต้องการปรับเวลาด้วยการคลิก ให้ใช้ค่าที่กำหนดล่วงหน้าในเครื่องมือแก้ไขการค่อยๆ เปลี่ยน ดังนี้
- ในเครื่องมือแก้ไขการค่อยๆ เปลี่ยน หากต้องการตั้งค่าค่าคีย์เวิร์ด ให้คลิกปุ่มเครื่องมือเลือกใดปุ่มหนึ่งต่อไปนี้
- เชิงเส้น
- ค่อยๆ เข้า-ออก
- ค่อยๆ เข้า
- ค่อยๆ ออก
ในตัวสลับค่าที่กำหนดล่วงหน้า ให้คลิกปุ่ม หรือ เพื่อเลือกค่าที่กำหนดล่วงหน้าค่าใดค่าหนึ่งต่อไปนี้
- ค่าที่กำหนดล่วงหน้าแบบเชิงเส้น:
elastic
,bounce
หรือemphasized
- ค่าที่กำหนดล่วงหน้าของเบซิเยร์รูปลูกบาศก์:
- ค่าที่กำหนดล่วงหน้าแบบเชิงเส้น:
คีย์เวิร์ดตามระยะเวลา | ค่าที่กำหนดล่วงหน้า | เบซิเยร์รูปลูกบาศก์ |
---|---|---|
ค่อยๆ เข้า-ออก | ขาเข้า ไซน์ | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
เข้าแล้ว ออกกำลังสอง | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
เข้าออก ลูกบาศก์ | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
ช้าๆ หน่อย | cubic-bezier(0.4, 0, 0.2, 1) |
|
เข้า ออก กลับ | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
ค่อยๆ เข้า | ใน ไซน์ | cubic-bezier(0.47, 0, 0.75, 0.72) |
ใน ค่ากำลังสอง | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
ใน ลูกบาศก์ | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
เข้า กลับ | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
ออกอย่างรวดเร็ว แทรกซ้อนเข้า | cubic-bezier(0.4, 0, 1, 1) |
|
ค่อยๆ ออก | ออก ไซน์ | cubic-bezier(0.39, 0.58, 0.57, 1) |
ออก เป็นกำลังสอง | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
ออก ลูกบาศก์ | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
เชิงเส้น ค่อยๆ เข้า | cubic-bezier(0, 0, 0.2, 1) |
|
ออก กลับ | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
กำหนดค่าการกำหนดเวลาที่กำหนดเอง
หากต้องการตั้งค่าที่กำหนดเองสำหรับฟังก์ชันการจับเวลา ให้ใช้จุดควบคุมบนเส้นดังนี้
สำหรับฟังก์ชันเชิงเส้น ให้คลิกที่ใดก็ได้บนเส้นเพื่อเพิ่มจุดควบคุมและลากจุดนั้น ดับเบิลคลิกเพื่อนำจุดออก
สำหรับฟังก์ชันเบซิเยร์รูปลูกบาศก์ ให้ลากจุดควบคุมจุดใดจุดหนึ่ง
การเปลี่ยนแปลงจะทริกเกอร์ภาพเคลื่อนไหวของลูกบอลในตัวอย่างที่ด้านบนของตัวแก้ไข
(ทดลอง) คัดลอกการเปลี่ยนแปลง CSS
เมื่อเปิดใช้การทดลองนี้ แท็บรูปแบบจะไฮไลต์การเปลี่ยนแปลง CSS ของคุณเป็นสีเขียว
หากต้องการคัดลอกการเปลี่ยนแปลงการประกาศ CSS รายการเดียว ให้วางเมาส์เหนือการประกาศที่ไฮไลต์แล้วคลิกปุ่ม คัดลอก
หากต้องการคัดลอกการเปลี่ยนแปลง CSS ทั้งหมดในการประกาศพร้อมกัน ให้คลิกขวาที่การประกาศ แล้วเลือกคัดลอกการเปลี่ยนแปลง CSS ทั้งหมด
นอกจากนี้ คุณสามารถติดตามการเปลี่ยนแปลงที่ทำในแท็บการเปลี่ยนแปลง