หน้าแรก
หน้าแรก
display คุณสมบัติเป็นส่วนสำคัญในการจัดวางหน้าเว็บ คุณสมบัติการแสดงผลกำหนดวิธีการแสดงองค์ประกอบที่สัมพันธ์กับองค์ประกอบรอบ ๆ มีหลายค่าสำหรับคุณสมบัติ CSS นี้ ค่าที่ใช้มากที่สุด ได้แก่ inline , block และ inline-block . ในบทความนี้ เราจะพูดถึงการใช้งานและความแตกต่างระหว่างค่าที่แสดง CSS ทั้งสามค่านี้
ไอคอนทำงานได้ดีสำหรับการแสดงตัวอย่างการดำเนินการที่ผู้ใช้สามารถทำได้ในแอปพลิเคชัน มีไลบรารีไอคอนหลายแห่งพร้อมใช้ ต่อไปนี้คือบางส่วน: Font Awesome – https://fontawesome.com/ Flaticon – https://www.flaticon.com/ ไอคอนดีไซน์ Material – https://material.io/resources/icons/ มีมากกว่าที่กล่าวไว้ข้าง
CSS Flexbox Model ถูกสร้างขึ้นเพื่อปรับปรุง CSS Box Model ที่สร้างขึ้น โมเดล Flexbox ยังคงมีองค์ประกอบหลักของ Box Model (ระยะขอบ ช่องว่างภายใน เส้นขอบ และเนื้อหา) แต่ให้ความยืดหยุ่นในการเติมพื้นที่ว่างให้ดีที่สุดด้วยลูกของคอนเทนเนอร์/พาเรนต์ บทช่วยสอนนี้จะช่วยให้คุณเข้าใจโมดูล flexbox ได้ดีขึ้นเล
ในบทช่วยสอน CSS นี้ เราจะพูดถึงวิธีจัดข้อความและบล็อกองค์ประกอบให้อยู่ตรงกลาง มีเทคนิคหลายอย่างที่คุณสามารถใช้เพื่อจัดวางองค์ประกอบในแนวนอนและแนวตั้งในเลย์เอาต์ได้ จัดกึ่งกลางองค์ประกอบข้อความ หากต้องการจัดข้อความให้อยู่กึ่งกลางภายในองค์ประกอบที่ใหญ่ขึ้น ให้ใช้ text-align: center; ดังที่เห็นด้านล่
คุณสมบัติ border-image ใน CSS นั้นค่อนข้างซับซ้อนในตอนแรก ในบทความนี้ เราจะพูดถึงคุณสมบัติของ border-image วิธีการใช้ และคุณลักษณะเฉพาะของมันเมื่อต้องใช้งานในเบราว์เซอร์ต่างๆ ณ จุดนี้ในการศึกษา CSS ของเรา เราควรรู้ว่าคุณสมบัติชายแดนคืออะไร ในการรีเฟรช เป็นคุณสมบัติที่ใช้การจดชวเลขเพื่อระบุเส้นขอบ
ไม่ควรสับสนกับส่วนท้ายที่ติดหนึบกับส่วนท้ายแบบตายตัว – ส่วนท้ายแบบติดหนึบคือรูปแบบที่ส่วนท้ายจะติดอยู่ที่ด้านล่างของหน้าจอเสมอ (ในกรณีที่เนื้อหาไม่เต็มหน้า) หรือติดที่ด้านล่างของเนื้อหาหน้าเว็บ . ส่วนท้ายคงที่จะอยู่ที่ด้านล่างของหน้าจอเมื่อผู้ใช้เลื่อนหน้า ตัวอย่างโปรแกรมแก้ไขโค้ดเหล่านี้แยกแยะความแ
<span> องค์ประกอบเป็นองค์ประกอบ HTML ทั่วไปที่คล้ายกับ <div> . หากคุณจำได้ว่า div เป็นคอนเทนเนอร์ทั่วไปที่ใช้สำหรับเลย์เอาต์ของหน้าเว็บเป็นหลักและใช้พื้นที่ให้มากที่สุดเพราะเป็นบล็อก องค์ประกอบ. ช่วงเป็น อินไลน์ องค์ประกอบ. พวกเขาใช้พื้นที่มากเท่าที่จำเป็นเท่านั้นและส่วนใหญ่จะใช้เพื่อ
คุณสมบัติ CSS วัตถุพอดีปรับขนาดองค์ประกอบให้อยู่ภายในความกว้างและความสูงของคอนเทนเนอร์ที่อยู่ในนั้น ภาพพื้นหลังเป็นองค์ประกอบทั่วไปที่สุดที่คุณจะเจอในฐานะนักพัฒนาที่ใช้คุณสมบัตินี้ มีค่าที่เป็นไปได้ห้าค่าสำหรับคุณสมบัติพอดีกับวัตถุ เราจะใช้รูปภาพเป็นตัวอย่างในการแสดงค่าต่างๆ: วัตถุพอดี:มี – เม
แถบเลื่อนและประสบการณ์ผู้ใช้ ขณะนี้ผู้ใช้คุ้นเคยกับประสบการณ์บางอย่างเมื่อนำทางไปยังเว็บไซต์ ตัวอย่างเช่น คุณคาดหวังให้โลโก้ของธุรกิจที่มุมบนซ้ายของไซต์นำคุณไปยังหน้าแรก แต่ถ้าไม่มีล่ะ? จะเกิดอะไรขึ้นถ้าทุกอย่างในไซต์นั้นตรงกันข้าม สิ่งที่คุณคิดว่ามันจะทำ? ลองนึกภาพว่ามีแถบเลื่อนอยู่หรือไม่ แต่เ
เมื่อเรียนรู้พื้นฐานของ CSS เรามักจะเน้นที่โมเดลกล่อง วิธีจัดตำแหน่งส่วนประกอบบนหน้า และองค์ประกอบของระบบการออกแบบ เช่น ตระกูลฟอนต์ และขนาดฟอนต์ หากเราเจาะลึกลงไปอีกว่าฟอนต์มีลักษณะอย่างไรบนหน้า เราต้องพิจารณาการจัดรูปแบบฟอนต์ การเว้นวรรคตัวอักษร และคุณสมบัติการเว้นวรรคคำ รายละเอียดเล็กๆ น้อยๆ เหล่า
มีหลายวิธีในการครอบตัดรูปภาพใน CSS; อย่างไรก็ตาม วิธีที่ง่ายที่สุดและมีประสิทธิภาพมากที่สุดคือ: การใช้ object-fit: เมื่อใช้ object-fit: cover เราสามารถครอบตัดรูปภาพได้อย่างง่ายดายและยังคงรักษาอัตราส่วนกว้างยาวของรูปภาพไว้ คุณสามารถใช้ object-fit พร้อมกับ object-position เพื่อครอบตัดรูปภาพใน CSS
คุณสมบัติการเยื้อง CSS หรือที่รู้จักในชื่อคุณสมบัติการเยื้องข้อความ ปรากฏคล้ายกับการเยื้องมาตรฐานในบรรทัดแรกของทุกย่อหน้าในเรียงความหรือกระดาษที่คุณอาจเขียนในโรงเรียน มันเยื้องบรรทัดแรกของทุกบล็อกของข้อความเช่นเดียวกับที่คุณจะเยื้องบรรทัดแรกของย่อหน้าเมื่อเขียนบทความ ตัวแก้ไขโค้ดด้านล่างแสดงวิธีส
สามารถเพิ่มตัวแบ่งบรรทัดในองค์ประกอบ HTML โดยไม่ต้องใช้การส่งคืนตัวแบ่ง <br> โดยใช้องค์ประกอบหลอก องค์ประกอบหลอกใช้เพื่อจัดรูปแบบส่วนเฉพาะขององค์ประกอบ เราจะใช้ ::after เพื่อกำหนดรูปแบบองค์ประกอบ HTML เพื่อเพิ่มตัวแบ่งบรรทัด <!DOCTYPE html> <html lang=en> <head> <meta
โอเวอร์เลย์เป็นเอฟเฟกต์ที่ใช้บนเว็บไซต์เพื่อนำทางผู้ใช้ไปยังทิศทางที่ถูกต้องของการดำเนินการถัดไปที่พวกเขาต้องทำ การใช้งานที่ถูกต้องสามารถสร้างประสบการณ์ที่ดีแก่ผู้ใช้ ซึ่งจะทำให้ผู้ใช้อยู่ในเว็บไซต์ของคุณ มีหลายวิธีในการสร้างภาพซ้อนทับ ไม่มีวิธีใดที่ถูกต้อง อยู่ที่การเลือกวิธีที่ดีที่สุดสำหรับไซต
เมื่อฉันเริ่มเรียนรู้วิธีเขียนมาร์กอัปโดยใช้ HTML และ CSS ครั้งแรก ฉันต้องใช้เวลาพอสมควรกว่าจะนึกถึงความแตกต่างระหว่างระยะขอบและช่องว่างภายในในโมเดลกล่อง ในบทความนี้ ฉันจะแบ่งปันว่าในที่สุดฉันก็สามารถแยกความแตกต่างระหว่างคนทั้งสองได้อย่างไร เมื่อพูดถึงระยะขอบและช่องว่างภายใน เป็นการดีที่สุดที่จะ
!important กฎใช้เพื่อแทนที่การจัดรูปแบบของหน้าเว็บ จริงๆ แล้ว มีอีกหลายกรณีที่ทำไมคุณไม่ควร ใช้กฎ !important เทียบกับเหตุผลที่คุณควรทำ มาพูดคุยกันถึงวิธีการใช้และทำไมจึงควรใช้เท่าที่จำเป็นเท่านั้น การเอาชนะสไตล์ชีต user-agent เมื่อเขียน CSS จะมีบางกรณีที่คุณต้องเขียนทับสไตล์ชีตที่ได้รับ หากใช้เฟ
ในฐานะผู้เขียนโค้ดและโปรแกรมเมอร์ในการสร้าง CSS Flexbox และ CSS Grid เรามักไม่พิจารณา CSS Clearfix CSS Flexbox และ Grid แก้ไขตำแหน่งขององค์ประกอบได้ดีขึ้นเล็กน้อย (และง่ายกว่าเล็กน้อย!) กว่าการใช้ floats อย่างไรก็ตาม เราทุกคนควรตระหนักถึงสิ่งนี้สำหรับบางกรณีที่เรากำลังทำงานกับโค้ดดั้งเดิมที่ใช้ f
วันนี้ เมนูแบบเลื่อนลงเป็นคุณลักษณะทั่วไปของเว็บไซต์สมัยใหม่ส่วนใหญ่ เมนูเหล่านี้ช่วยให้คุณสร้างคุณลักษณะการนำทางที่กำหนดเองได้มากขึ้น เพื่อให้ผู้ใช้สามารถค้นหาเนื้อหาที่กำลังมองหาบนเว็บไซต์ได้อย่างง่ายดาย นอกจาก HTML คุณสามารถใช้ CSS เพื่อสร้างเมนูแบบเลื่อนลงที่แสดงเนื้อหาเฉพาะเมื่อผู้ใช้วางเมาส
การจัดรูปแบบข้อความบนหน้าเว็บเป็นส่วนสำคัญของการออกแบบเว็บ ตัวอย่างเช่น คุณอาจต้องการให้ส่วนหัวปรากฏในแบบอักษรเฉพาะ หรือข้อความทั้งหมดบนหน้าเว็บเพื่อใช้ serif แบบอักษร นั่นคือที่มาของคุณสมบัติตระกูลฟอนต์ CSS คุณสมบัติตระกูลฟอนต์ CSS ช่วยให้คุณระบุตระกูลฟอนต์ตั้งแต่หนึ่งตระกูลขึ้นไป ซึ่งจะใช้เพื่อ
เมื่อออกแบบเว็บไซต์ คุณมักจะมีปุ่มที่คุณต้องการให้มีลักษณะเฉพาะ ตัวอย่างเช่น คุณอาจต้องการให้ปุ่มมีสีพื้นหลังที่แตกต่างจากองค์ประกอบของหน้าอื่นๆ เพื่อดึงดูดความสนใจของผู้ใช้ไปที่ปุ่ม การใช้ CSS นักพัฒนาสามารถสร้างปุ่มที่มีสไตล์ได้ CSS ช่วยให้คุณเปลี่ยนสีของปุ่ม ขนาดข้อความ เส้นขอบ ความกว้าง และคว