คุณสามารถใช้ CSS ได้อย่างไร - เคล็ดลับและเทคนิคการออกแบบเว็บไซต์สำหรับผู้เริ่มต้น

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

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

แต่ก่อนอื่น CSS คืออะไร?

Cascading Style Sheets (CSS) คือโค้ดภาษาสไตล์ชีตที่นักพัฒนาธีมใช้เพื่ออธิบายและเปลี่ยนงานนำเสนอหรือรูปลักษณ์ของเอกสาร HTML

CSS ทำอะไร?

พูดง่ายๆ ไฟล์ CSS ทำให้หน้า HTML ดูดี

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

ไม่สำคัญว่าคุณจะใช้แพลตฟอร์มบล็อกใด

คุณจะมีตัวเลือกในการตั้งค่าธีมสำหรับ CSS แบบกำหนดเอง หรือ CSS เพิ่มเติม

คุณอาจไม่เคยดูตัวเลือกนี้เลย

หรือถ้าคุณมี คุณอาจคิดว่ามันยากเกินไปที่จะเรียนรู้วิธีเขียนโค้ด

แต่มันง่ายมาก

ฉันไม่รู้อะไรเลยเกี่ยวกับการพัฒนาเว็บหรือไวยากรณ์ CSS แต่ฉันสามารถเปลี่ยนแอตทริบิวต์สไตล์ได้ในไม่กี่วินาที

สิ่งที่คุณต้องทำคือใช้เครื่องมือสำหรับนักพัฒนาเว็บเบราว์เซอร์ Chrome หรือ Firefox และเรียนรู้เทคนิคและเคล็ดลับ CSS ง่ายๆ

มาดูกันว่ามันง่ายขนาดไหน

เหตุใดคุณจึงต้องการเรียนรู้วิธีแก้ไข CSS ของบล็อก

คุณอาจมีการตั้งค่ามากมายในธีมของบล็อก

แต่มีองค์ประกอบเล็ก ๆ มากมายที่อาจขาดหายไป

แม้แต่ในธีมพรีเมียมสำหรับ WordPress บางตัวเลือกก็ไม่สามารถใช้ได้ในตัวเลือกมาตรฐาน

นี่คือเหตุผลที่คุณสามารถช่วยให้ CSS ของคุณทำงานได้ดีขึ้นด้วยการแก้ไขและเปลี่ยนแปลงของคุณเอง

ด้วยการเปลี่ยนสไตล์ชีตภายนอก จะสามารถอ้างอิงหน้า HTML ทั้งหมดของคุณได้

หากคุณทำการเปลี่ยนแปลงส่วนหัว HTML ของคุณในหน้าเดียว การเปลี่ยนแปลงนั้นจะเปลี่ยนแท็ก HTML ในทุกหน้าของคุณ

การอ้างอิงเรียกว่าองค์ประกอบหลอก

หมายความว่าหากคุณเปลี่ยนรูปลักษณ์ของส่วนหัว H2 จะเป็นการเปลี่ยนส่วนหัว H2 ทั้งหมดบนไซต์ของคุณ

แต่คุณไม่จำเป็นต้องเรียนรู้ทั้งหมดเกี่ยวกับภาวะแทรกซ้อนเหล่านี้

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

เรามาเริ่มกันเลยกับเคล็ดลับ CSS ง่ายๆ สำหรับผู้เริ่มต้น

วิธีเปลี่ยน CSS แบบอินไลน์ของคุณอย่างง่ายๆ

ขั้นตอนแรกคือการเปิดบล็อกของคุณใน Firefox, Chrome หรือ Microsoft Edge

ในตัวอย่างด้านล่าง ฉันใช้ Firefox ฉันคิดว่ามันเป็นมิตรต่อการใช้งานมากกว่า Chrome เล็กน้อย

แต่ทั้งสองทำงานในลักษณะที่คล้ายกัน

เปิดบล็อกของคุณในแท็บหรือหน้าต่างใหม่ คุณสามารถนำทางไปยังหน้าที่คุณต้องการเปลี่ยน

ตอนนี้เปิด Developer Tools, Inspector จากเมนู Tools ใน Firefox หรือเมนู View ใน Chrome

คลิกที่ตัวตรวจสอบเพื่อเปิดบานหน้าต่างเครื่องมือ

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

เลื่อนเคอร์เซอร์ไปทั่วหน้าเพื่อเลือกองค์ประกอบ หรือคุณสามารถคลิกที่แต่ละองค์ประกอบในรายการ

คุณจะเห็นแต่ละองค์ประกอบที่คุณเลือกเน้นด้วยสีน้ำเงินในมุมมองเบราว์เซอร์ของหน้าเว็บ

ตอนนี้คุณพร้อมที่จะเปลี่ยนแปลงรูปลักษณ์ของเพจแล้ว

การใช้ตัวเลือก CSS

ในตัวอย่างของฉัน ฉันจะเปลี่ยนรูปลักษณ์ขององค์ประกอบหัวเรื่อง H2

คุณสามารถเลือกที่จะเปลี่ยนองค์ประกอบ H1 ข้อความเนื้อหา หรือคำบรรยายภาพ

ฉันต้องการเริ่มต้นด้วยการเปลี่ยนขนาดตัวอักษร สิ่งที่คุณต้องทำคือคลิกที่แท็กสไตล์ ขนาดตัวอักษร และเปลี่ยนตัวเลข

ฉันเปลี่ยนขนาดจาก 33px เป็น 56px คุณจะเห็นว่าตอนนี้ขนาดของหัวเรื่องใหญ่ขึ้น

ไม่ต้องกังวล. คุณยังไม่ได้เปลี่ยนหน้าบล็อกสดของคุณ สิ่งที่คุณเห็นในบานหน้าต่างเบราว์เซอร์เป็นเพียงตัวอย่างการเปลี่ยนแปลงของคุณเท่านั้น

คุณสามารถเล่นองค์ประกอบ HTML ใดก็ได้เท่าที่คุณต้องการ

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

ตอนนี้ฉันต้องการเปลี่ยนสีของข้อความ

หากคุณคลิกที่จุดสีระหว่าง แท็กสี และตัวเลข คุณจะเปิดตัวเลือกสี

ตอนนี้เพียงเลือกสีที่คุณต้องการใช้

เปลี่ยนสีแอตทริบิวต์ HTML ของคุณได้ง่ายๆ ที่นี่ฉันได้เปลี่ยนจากสีดำเป็นสีน้ำเงิน

ดูดี แต่ความสูงของเส้นน่าจะดีกว่านี้ ฉันจะเปลี่ยนมัน

การตั้งค่าปัจจุบันคือ 1.2 ซึ่งเป็นช่องว่างระหว่างบรรทัดมากเกินไป อยากให้เส้นใกล้กัน

ดังนั้นฉันจะเปลี่ยนเป็น 1.0

ที่ดูดีขึ้นมาก

ฉันได้ทำการเปลี่ยนแปลงสามอย่างกับลักษณะส่วนหัว H2 ของฉันในโหมดแสดงตัวอย่าง ฉันเปลี่ยนขนาดฟอนต์ สี และระยะห่างระหว่างบรรทัดแล้ว

ถึงเวลาเพิ่มการเปลี่ยนแปลงเหล่านี้ในไซต์สดของฉันแล้ว

วิธีรับรหัสสำหรับไซต์ของคุณ

คุณต้องคัดลอกบรรทัดโค้ดที่คุณแก้ไข

เลือกและคัดลอกรหัสทั้งหมด ตรวจสอบให้แน่ใจว่าคุณคัดลอกทุกบรรทัด รวมทั้งวงเล็บเหลี่ยมสุดท้าย

ตอนนี้วางลงในโปรแกรมแก้ไขข้อความ คุณสามารถใช้ Notepad บนพีซีหรือ Text Editor บน Mac

การเปลี่ยนแปลงอื่น ๆ ที่เราทำคือสี เราต้องคัดลอกบรรทัดนี้ด้วย

คุณต้องคัดลอกเส้นสำหรับสีเท่านั้น

คุณจะเห็นว่าองค์ประกอบ H2 เป็นตัวหนาในภาพด้านบน หมายความว่ามันเป็นองค์ประกอบหลอกเดียวกับรหัสแรกของเรา คุณจึงสามารถใช้ร่วมกันได้

คัดลอกบรรทัด

ตอนนี้เพิ่มบรรทัดในโปรแกรมแก้ไขข้อความของคุณ

คุณอาจต้องเพิ่มหรือลบช่องว่างบางส่วนเพื่อให้เส้นสีของคุณเยื้องเหมือนกัน

ตอนนี้คุณพร้อมที่จะเพิ่มการเปลี่ยนแปลงทั้งสามนี้ไปยังไซต์ที่ใช้งานจริงของคุณแล้ว

เพิ่มโค้ดลงในไซต์ของคุณ

ไปที่ตัวเลือกธีมและเลือกตัวเลือก CSS

ในธีม WordPress จะอยู่ใน Theme Customizer และเรียกว่า CSS เพิ่มเติมหรือ Custom CSS

จะถูกเรียกว่าสิ่งที่คล้ายกันบนแพลตฟอร์มบล็อกอื่นๆ

ตอนนี้คัดลอกโค้ดทั้งหมดจากโปรแกรมแก้ไขข้อความของคุณ แล้ววางลงในแท็บ Customizer

ทันทีที่คุณวางโค้ด ตัวแสดงตัวอย่างของคุณจะแสดงการเปลี่ยนแปลงที่คุณทำ

คลิกเผยแพร่และคุณทำเสร็จแล้ว

นี่คือการเปรียบเทียบก่อนและหลังการเปลี่ยนแปลงของฉัน

คุณสามารถทำอะไรได้อีกมาก

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

คุณสามารถทำอะไรได้อีกมากหากต้องการทดลองและพยายามเปลี่ยนแปลงองค์ประกอบอื่นๆ

การเพิ่มเส้นขอบหรือเงาให้กับรูปภาพ ย้ายข้อความไปทางซ้ายหรือขวา หรือปรับขนาดความกว้างของข้อความในเนื้อหานั้นเป็นเรื่องง่าย

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

มีตัวเลือกมากมายให้คุณเลือกแก้ไข

โปรดจำไว้ว่าเมื่อคุณทำงานในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ คุณจะไม่ส่งผลกระทบต่อไซต์ของคุณ

การเปลี่ยนแปลงใดๆ ที่คุณทำจะเป็นการแสดงตัวอย่างและมองเห็นได้ภายในหน้าต่างเบราว์เซอร์นั้นเท่านั้น

ไม่สำคัญว่าคุณจะลองทำอะไรแล้วหรือยังได้ผลหรือไม่

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

อยากรู้อยากเห็น แล้วคุณจะสนุกไปกับการเรียนรู้ทักษะใหม่นี้ด้วยเคล็ดลับเหล่านี้เกี่ยวกับ CSS สำหรับผู้เริ่มต้น

เคล็ดลับโบนัสก้อนใหญ่ด้วยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

เมื่อคุณเปิดกรอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แล้ว มีสิ่งหนึ่งที่เรียบร้อยมากที่คุณสามารถทำได้

คุณสามารถทดสอบความเร็วไซต์ของคุณได้

สิ่งที่คุณต้องทำคือคลิกที่แท็บเครือข่าย

จากนั้นคลิก CTRL + R

คุณจะเห็นเวลาความเร็วหน้าเว็บที่โหลดเต็มเป็นสีแดงที่บรรทัดด้านล่างที่มีลูกศรกำกับไว้