10 ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

10 ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

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





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



1. รหัส CSS พื้นฐานสำหรับการจัดรูปแบบย่อหน้าอย่างง่าย

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





สมมติว่าคุณต้องการทุกย่อหน้า (

หนึ่งในแท็ก HTML ที่ทุกคนควรรู้) ให้ใหญ่กว่าปกติเล็กน้อย และด้วยข้อความสีเทาเข้มแทนที่จะเป็นสีดำ

ที่เกี่ยวข้อง: แผ่นโกง HTML



รหัส CSS สำหรับสิ่งนี้คือ:

p { font-size: 120%; color: dimgray; }

เรียบง่าย! ตอนนี้ เมื่อใดก็ตามที่เบราว์เซอร์แสดงย่อหน้า ข้อความจะรับช่วงขนาด (120 เปอร์เซ็นต์ของปกติ) และสี ('dimgray')



หากคุณสงสัยว่าคุณสามารถใช้สีข้อความธรรมดาสีใดได้บ้าง ให้ลองดูสิ่งนี้ รายการสี CSS จากมอซซิลา

2. ตัวอย่าง CSS เพื่อเปลี่ยนตัวพิมพ์ใหญ่และตัวพิมพ์

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



p.smallcaps { font-variant: small-caps; }

ในการสร้างย่อหน้าที่เป็นตัวพิมพ์เล็กทั้งหมด ให้ใช้แท็ก HTML ที่ต่างออกไปเล็กน้อย นี่คือสิ่งที่ดูเหมือน:

Your paragraph here.

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

หากคุณต้องการเปลี่ยนชุดข้อความเป็นกรณีเฉพาะ ให้ใช้ตัวอย่างโค้ด CSS เหล่านี้:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

ตัวสุดท้ายเป็นตัวพิมพ์ใหญ่ของตัวอักษรตัวแรกของทุกประโยค

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

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

ด้วยลิงก์ 'a' แต่ละตัวจะตามด้วยโคลอน ไม่ใช่จุด

การประกาศแต่ละรายการจะเปลี่ยนสีของลิงก์ในบริบทเฉพาะ ไม่จำเป็นต้องเปลี่ยนคลาสของลิงก์เพื่อเปลี่ยนสี

แม้ว่าข้อความที่ขีดเส้นใต้จะระบุลิงก์อย่างชัดเจน แต่บางครั้งการที่ขีดเส้นใต้นั้นอาจดูดีกว่า ทำได้ด้วยแอตทริบิวต์ 'text-decoration' ตัวอย่าง CSS นี้แสดงวิธีลบขีดเส้นใต้บนลิงก์:

a { text-decoration: none; }

สิ่งใดก็ตามที่มีแท็กลิงก์ ('a') จะไม่ถูกขีดเส้นใต้ ต้องการขีดเส้นใต้เมื่อผู้ใช้วางเมาส์เหนือมันหรือไม่ เพียงเพิ่ม:

a:hover { text-decoration: underline; }

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

ต้องการดึงดูดความสนใจไปที่ลิงก์ของคุณมากขึ้นหรือไม่? ปุ่มลิงก์เป็นวิธีที่ดีในการดำเนินการ อันนี้ต้องการอีกสองสามบรรทัด:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

มาอธิบายโค้ดตัวอย่าง CSS นี้กัน

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

สีพื้นหลังถูกกำหนดด้วยสีพื้นหลัง และสีข้อความพร้อมสี Padding กำหนดขนาดของกล่อง---ข้อความถูกเสริมด้วย 10px ในแนวตั้งและ 25px ในแนวนอน

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

ทัชแพดของฉันไม่ทำงาน

โค้ด CSS 'display: inline-block' ซับซ้อนกว่าเล็กน้อย กล่าวโดยย่อ ช่วยให้คุณสามารถกำหนดความสูงและความกว้างของวัตถุได้ นอกจากนี้ยังช่วยให้แน่ใจว่าจะเริ่มขึ้นบรรทัดใหม่เมื่อมีการแทรก

6. โค้ดตัวอย่าง CSS สำหรับสร้าง Text Box

ย่อหน้าธรรมดาไม่น่าตื่นเต้นมาก หากคุณต้องการเน้นองค์ประกอบบนหน้าของคุณ คุณอาจต้องการเพิ่มเส้นขอบ ต่อไปนี้คือวิธีดำเนินการด้วยสตริงโค้ด CSS อย่างง่าย:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

อันนี้ตรงไปตรงมา มันสร้างเส้นขอบสีม่วงทึบ กว้างห้าพิกเซล รอบย่อหน้าระดับสำคัญใดๆ หากต้องการให้ย่อหน้าสืบทอดคุณสมบัติเหล่านี้ ให้ประกาศดังนี้:

Your important paragraph here.

สิ่งนี้จะใช้ได้ไม่ว่าย่อหน้าจะใหญ่แค่ไหน

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

border-width: 5px 8px 3px 9px;

ส่งผลให้มีขอบบน 5 พิกเซล ขอบขวา 8 ด้านล่าง 3 และขอบซ้าย 9 พิกเซล

7. จัดองค์ประกอบให้อยู่ตรงกลางด้วยโค้ด CSS พื้นฐาน

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

สำหรับองค์ประกอบบล็อก (โดยปกติคือรูปภาพ) ให้ใช้แอตทริบิวต์ระยะขอบ:

.center { display: block; margin: auto; }

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

img { margin: auto; }

หากต้องการเรียนรู้ว่าเหตุใดจึงทำงานในลักษณะนี้ ให้ดูที่ คำอธิบายโมเดลกล่อง CSS ที่ W3C .

แต่ถ้าคุณต้องการจัดกึ่งกลางข้อความด้วย CSS ใช้ CSS ตัวอย่างนี้:

.centertext { text-align: center; }

ต้องการใช้คลาส 'ข้อความกลาง' เพื่อจัดข้อความให้อยู่ในย่อหน้าหรือไม่ เพียงเพิ่มคลาสนั้นไปที่

แท็ก:

This text will be centered.

8. ตัวอย่าง CSS สำหรับการปรับช่องว่างภายใน

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

สมมติว่าคุณต้องการให้ทุกภาพมีช่องว่างภายใน 20 พิกเซลที่ด้านซ้ายและด้านขวา และ 40 พิกเซลที่ด้านบนและด้านล่าง การเรียกใช้โค้ด CSS พื้นฐานที่สุดสำหรับสิ่งนี้คือ:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

อย่างไรก็ตาม มีคำสั่ง CSS ที่สั้นกว่า ซึ่งแสดงข้อมูลทั้งหมดนี้ในบรรทัดเดียว:

img { padding: 40px 25px 40px 25px; }

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

img { padding: 40px 25px }

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

9. เน้นแถวตารางด้วยการเข้ารหัส CSS

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

tr:hover { background-color: #ddd; }

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

10. ตัวอย่าง CSS สำหรับการย้ายรูปภาพระหว่างโปร่งใสและทึบแสง

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

img { opacity: 0.5; filter: alpha(opacity=50); }

แอตทริบิวต์ 'ตัวกรอง' ทำหน้าที่เหมือนกับ 'ความทึบ' แต่ Internet Explorer 8 และรุ่นก่อนหน้าไม่รู้จักการวัดความทึบ สำหรับเบราว์เซอร์รุ่นเก่า ควรรวมไว้ด้วย

ตอนนี้รูปภาพมีความโปร่งใสเล็กน้อย คุณสามารถทำให้ทึบแสงได้อย่างเต็มที่เมื่อวางเมาส์:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 ตัวอย่าง CSS พร้อมซอร์สโค้ด

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

สรุปตัวอย่างโค้ด CSS ง่ายๆ 10 ตัวอย่าง:

  1. การจัดรูปแบบย่อหน้าอย่างง่าย
  2. เปลี่ยนตัวพิมพ์ใหญ่
  3. เปลี่ยนสีลิงค์
  4. ลบลิงค์ที่ขีดเส้นใต้
  5. สร้างปุ่มลิงค์
  6. สร้างกล่องข้อความ
  7. จัดวางองค์ประกอบให้อยู่ตรงกลาง
  8. ปรับช่องว่างภายใน
  9. เน้นแถวตาราง
  10. ทำให้ภาพไม่ชัด

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

แบ่งปัน แบ่งปัน ทวีต อีเมล แผ่นโกงคุณสมบัติ CSS3 ที่จำเป็น

ฝึกฝนไวยากรณ์ CSS ที่จำเป็นด้วยชีตคุณสมบัติ CSS3 ของเรา

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • ออกแบบเว็บ
  • CSS
  • การเขียนสคริปต์
เกี่ยวกับผู้เขียน Christian Cawley(ตีพิมพ์บทความ 1510)

รองบรรณาธิการด้านความปลอดภัย, Linux, DIY, การเขียนโปรแกรม และผู้ผลิตพอดคาสต์ที่มีประโยชน์มาก โดยมีประสบการณ์อย่างกว้างขวางในการสนับสนุนเดสก์ท็อปและซอฟต์แวร์ Christian เป็นผู้สนับสนุนนิตยสาร Linux Format เป็นนักประดิษฐ์ Raspberry Pi คนรักเลโก้และแฟนเกมย้อนยุค

เพิ่มเติมจาก Christian Cawley

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก