วิธีกำหนดสไตล์ลิงก์โดยใช้ CSS: บทช่วยสอนสำหรับผู้เริ่มต้นโดยละเอียด

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

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

มาตรฐานของลิงก์และการจัดรูปแบบลิงก์เริ่มต้น

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

 <a href="https://torquemag.io/">TorqueMag</a>

อย่างที่คุณเห็นประกอบด้วยหลายส่วน:

• <a> – นี่คือตัวดำเนินการสำหรับสร้างองค์ประกอบลิงก์ ทำไม a ? เนื่องจากใน HTML ลิงก์จะเรียกอีกอย่างว่า แท็กสมอ
• href="" – สิ่งใดก็ตามที่อยู่ในเครื่องหมายคำพูดคู่คือตำแหน่งที่ลิงก์นี้ชี้ไป เป็นที่อยู่ของผู้ที่คลิกเข้าไป
• TorqueMag – นี่คือข้อความลิงก์ที่ปรากฏบนหน้าเว็บ เช่น แบบนี้ (อย่าคลิกเลย ลิงก์นี้ไม่มีที่ไหนเลย)
• </a> – ส่วนที่ปิดองค์ประกอบลิงก์และบอกเบราว์เซอร์ว่าข้อความลิงก์สิ้นสุดที่นี่

จนถึงตอนนี้ง่ายมาก

ลิงก์มีลักษณะอย่างไรตามค่าเริ่มต้น

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

หากคุณประกาศลิงก์เก่าในเอกสาร HTML และไม่ระบุข้อมูลการจัดรูปแบบ ระบบจะใช้การจัดรูปแบบเริ่มต้น:

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

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

เรียนรู้เกี่ยวกับสถานะลิงก์

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

• a – นี่คือแท็กสมอดังกล่าว กำหนดเป้าหมายลิงก์ทั้งหมดในทุกขั้นตอน
• a:link – สำหรับลิงค์ปกติที่ไม่ได้เยี่ยมชม ในแง่เทคนิค :link กำหนดเป้าหมายแท็ก anchor ทั้งหมดที่มีแอตทริบิวต์ href อันที่จริงก็ไม่ค่อยได้ใช้เท่าไหร่ ผู้คนจำนวนมากใช้ a เนื่องจากแท็ก anchor ที่ไม่มีแอตทริบิวต์ href นั้นค่อนข้างหายาก ดังนั้นจึงมักไม่จำเป็นต้องสร้างความแตกต่างประเภทนี้
• a:visited – อธิบายลิงก์ที่ผู้ใช้ปัจจุบันเคยเข้าชมมาก่อน หมายความว่ามีอยู่ในประวัติของเบราว์เซอร์
• a:hover – กำหนดรูปแบบเป้าหมายที่ปรากฏขึ้นเมื่อผู้ใช้วางเคอร์เซอร์เมาส์เหนือลิงก์
• a:active – รูปแบบที่มองเห็นได้ในเวลาสั้นๆ ในระหว่างการคลิกลิงก์
• a:focus – ลิงก์ที่เน้น เช่น ที่ผู้ใช้นำทางไปยังโดยใช้ปุ่มแท็บ hover และ focus มักถูกจัดรูปแบบร่วมกัน

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

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

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

เติมเต็มความคาดหวังของผู้ใช้

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

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

ในทางปฏิบัติหมายความว่า:

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

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

วิธีเปลี่ยนสไตล์ของข้อความลิงก์ของคุณผ่าน CSS

ก่อนอื่นเรามาพูดถึงวิธีการเปลี่ยนส่วนข้อความของลิงค์กันก่อน เพราะนั่นคือสิ่งที่ประกอบขึ้นเป็นเนื้อของมัน

การแก้ไขสีของข้อความลิงก์

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

คุณสามารถเปลี่ยนสีของข้อความลิงก์ได้หลายวิธี: คำสีและระบบสัญลักษณ์สีต่างๆ เช่น รหัส HEX, rgb() / rgba() , hsl() / hsla() เป็นต้น

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

นี่คือสิ่งที่ด้านบนดูเหมือนในหน้า:

โดยทั่วไป คุณจะใช้บางอย่างเช่น HEX หรือ rgb() การใช้ชื่อสีนั้นหายากมากนอกกรณีทดสอบทั่วไป

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

ปรับสีพื้นหลัง

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

นี่คือมาร์กอัปสำหรับตัวอย่างด้านบน:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

ตัวเลือกการจัดรูปแบบข้อความอื่นๆ

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

สิ่งนี้อาจสมเหตุสมผลสำหรับการออกแบบบางอย่าง อย่างไรก็ตาม สิ่งเหล่านี้เป็นวิธีที่ใช้กันทั่วไปในการจัดสไตล์ลิงก์ผ่าน CSS

นี่คือมาร์กอัปเพื่อให้ได้เอฟเฟกต์ด้านบน:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

ทำงานกับการขีดเส้นใต้

ตามที่เราได้เรียนรู้ในตอนเริ่มต้น ลิงก์จะถูกขีดเส้นใต้โดยค่าเริ่มต้น หากคุณต้องการกำจัดสิ่งนั้น คุณสามารถใช้ text-decoration: none; (ซึ่งเป็นการใช้งานทั่วไปของคุณสมบัติ text-decoration )

 a { text-decoration: none; }

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

 a { text-decoration: none; } a:hover { text-decoration: underline; }

นอกจากนี้ คุณสามารถใช้ border: bottom; แทนการ text-decoration: underline; เพื่อเพิ่มบรรทัดใต้ลิงก์ของคุณ ผู้คนเคยใช้สิ่งนี้เพราะมีตัวเลือกการจัดสไตล์ที่ดีกว่า อย่างไรก็ตาม วันนี้เรามีคุณสมบัติใหม่สำหรับวิธีการ underline มาตรฐานที่อนุญาตให้ปรับแต่งได้มากขึ้น

ตัวอย่างเช่น text-underline-offset ช่วยให้คุณสามารถควบคุมระยะห่างระหว่างข้อความและบรรทัดด้านล่างเมื่อใช้ text-decoration text-decoration-thickness ช่วยให้คุณสามารถกำหนดความกว้างของบรรทัดที่กำหนดเองได้ ดังนั้นการไปตาม border จึงไม่จำเป็นอย่างที่เคยเป็นมาอีกต่อไป

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

การเปลี่ยนรูปแบบเคอร์เซอร์บน Hover

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

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

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

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

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

 a { cursor: pointer; }

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

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

 a { cursor: url(../images/hand.cur),pointer; }

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

เปลี่ยนแปลง a:focus

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

ทำไมต้อง outline และไม่ border ที่คุณถาม?

เนื่องจาก outline ไม่ใช้พื้นที่บนหน้า โดยวางอยู่บนพื้นหลังขององค์ประกอบแทน ด้วยวิธีนี้ การเน้นที่ลิงก์จะไม่เปลี่ยนรูปแบบหน้ากระโดดหรือคล้ายกัน

แล้วคุณมีตัวเลือกการจัดสไตล์อื่นๆ อะไรบ้างสำหรับลิงก์ที่โฟกัส

จำนวนมากของพวกเขา มันใช้ทุกอย่างตั้งแต่ background-color ไปจนถึง color , font-size , box-shadow คุณตั้งชื่อมัน

นี่คือวิธีการบรรลุผลข้างต้น:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

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

 a:focus { outline: 3px dotted green; }

นี่คือสิ่งที่ด้านบนดูเหมือนในหน้า:

ลิงค์ปุ่มและกล่อง

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

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

มีหลายวิธีในการบรรลุเป้าหมายนี้ ตั้งแต่การเพิ่มช่องว่างภายในไปยังระบบ เช่น flexbox หรือ grid ด้านล่างนี้เป็นเพียงตัวอย่างหนึ่งวิธีที่คุณทำได้ ยังมีตัวเลือกอีกมากมาย

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

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

รวมไอคอนในลิงก์ของคุณ

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

นี่คือวิธีการทำเช่นนั้น ขั้นแรกให้ HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

จากนั้น CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"] กำหนดเป้าหมายเฉพาะแท็กสมอที่มีที่อยู่ที่ขึ้นต้นด้วย http ใน href="" มาร์กอัปจะเพิ่มภาพพื้นหลัง ซึ่งเป็นไอคอน ตั้งค่าไม่ให้แสดงซ้ำ เลื่อนไปทางขวาจนสุด และจัดกึ่งกลางในแนวตั้ง มาร์กอัปที่เหลือกำหนดขนาดไอคอนและสร้างช่องว่างเล็กน้อยระหว่างไอคอนกับข้อความ

ความคิดสุดท้าย: การจัดรูปแบบ CSS สำหรับลิงก์

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

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