เป้าหมายใน css คืออะไร เหตุการณ์การคลิก CSS ล้วนๆ โดยไม่มี: เป้าหมาย วิธีสร้างไฮเปอร์ลิงก์ใน HTML โดยใช้ href

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

คืออะไร: เป้าหมาย?

h1 (แบบอักษร: ตัวหนา 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;) h1: เป้าหมาย (ขนาดแบบอักษร: 50px; การตกแต่งข้อความ: ขีดเส้นใต้; สี: # 37aee4;)

เพิ่มแอนิเมชั่น

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

h1 (แบบอักษร: ตัวหนา 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: สี 0.5s ความง่าย; -moz-transition: ความง่ายของสี 0.5s; -o-transition: สี 0.5 s ง่าย; -ms-transition: ความง่ายของสี 0.5s; การเปลี่ยนแปลง: ความง่ายของสี 0.5s;) h1: เป้าหมาย (ขนาดตัวอักษร: 50px; text-decoration: ขีดเส้นใต้; สี: # 37aee4;)

การจัดการอ็อบเจ็กต์ที่ไม่ใช่เป้าหมาย

สมมติว่าเราต้องการเปลี่ยนรูปแบบของย่อหน้าที่ตามหัวเรื่องที่เลือก

มันง่ายมากที่จะทำสิ่งนี้ด้วยรหัสต่อไปนี้ ดูการสาธิต

h1: เป้าหมาย + p (พื้นหลัง: # f7f7f7; ช่องว่างภายใน: 10px;)

การสร้างสไลด์โชว์อย่างง่ายด้วย CSS

นักพัฒนามีแอพมากมายที่ใช้ pseudo-class : เป้า... ตัวเลือกหลอกนี้มีประโยชน์เมื่อสร้างแท็บ หรือแม้แต่สไลด์โชว์ เรามาดูกันว่าคุณจะใช้งานอย่างหลังได้อย่างไร

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

หนึ่ง

สอง

สาม

โฟร์

ห้า

มาเพิ่มสไตล์ของเรากัน:

* (ขอบ: 0px; ช่องว่างภายใน: 0px;) #slideshow (ระยะขอบ: 50px อัตโนมัติ; ตำแหน่ง: สัมพันธ์; ความกว้าง: 400px;) ul (แบบรายการ: ไม่มี;) li (ลอย: ซ้าย; ล้น: ซ่อน; ระยะขอบ: 0 20px 0 0;) li a (สี: # 222; text-decoration: none; แบบอักษร: 15px / 1 Helvetica, sans-serif; -webkit-transition: สี 0.5s ความง่าย; -moz-transition: ความง่ายของสี 0.5s; -o-transition: ความง่ายของสี 0.5s; -ms-transition: ความง่ายของสี 0.5s; การเปลี่ยนสี: ความง่ายของสี 0.5s;) li a: โฮเวอร์ (สี: # 50b0df;) li img (ตำแหน่ง: สัมบูรณ์; บนสุด: 50px; ซ้าย: 0; ดัชนี z: -1; -webkit-transition: ความทึบ 1s ง่ายเข้า - ออก -moz-transition: ความทึบ 1s ง่ายเข้า - ออก -o-transition: ความทึบ 1s ง่ายเข้า - ออก; -ms-transition: ความทึบ 1s ความง่ายในการเข้าออก การเปลี่ยนแปลง: ความทึบ 1s ความง่ายในการเข้าออก;) li img: เป้าหมาย (ดัชนี z: 1;) li img: ไม่ (: เป้าหมาย) (ความทึบ: 0;)

มาเพิ่มกันก่อน ลอย: ซ้ายองค์ประกอบทั้งหมดของรายการของเรา เราใช้การวางตำแหน่งแบบสัมบูรณ์และแบบสัมพัทธ์สำหรับองค์ประกอบ

ถัดไป ติดตั้ง ดัชนี z: -1สำหรับภาพทั้งหมดแล้วตั้งค่า ดัชนี z: 1สำหรับภาพเป้าหมาย ซึ่งจะทำให้รูปภาพเปลี่ยนไปเมื่อคุณคลิกที่รายการ เพื่อให้การเปลี่ยนแปลงราบรื่นขึ้น เราจะตั้งค่าความทึบสำหรับรูปภาพอื่นๆ 0 .

ดูการสาธิตสไลด์โชว์ CSS ล้วนๆ

ความเข้ากันได้ข้ามเบราว์เซอร์

หลอกคลาส : เป้าเป็นตัวเลือก CSS ระดับ 3 ซึ่งหมายความว่ารองรับเกือบทุกเบราว์เซอร์ ยกเว้น (คุณจะไม่เดา) ... IE ลาเก่าที่ดีรองรับเฉพาะตัวเลือก CSS3 ในเวอร์ชัน 9 และ 10

เช่นเดียวกับปัญหาการแสดงผลตัวเลือก CSS3 ใน IE สิ่งนี้ค่อนข้างง่ายในการแก้ไขด้วย Selectivizr

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

บทสรุป

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

: เป้าเป็นตัวอย่างที่ดี เพียงให้แน่ใจว่าคุณไม่หักโหมกับสไตล์

อีกกรณีการใช้งานที่น่าสนใจ : เป้า

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

ไวยากรณ์

...

คุณสมบัติที่จำเป็น

ค่า

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

Blank โหลดหน้าลงในหน้าต่างเบราว์เซอร์ใหม่ _self โหลดหน้าลงในหน้าต่างปัจจุบัน _parent โหลดหน้าไปยังเฟรมหลัก หากไม่มีเฟรม ค่านี้จะทำงานเหมือน _self _top ยกเลิกเฟรมทั้งหมดและโหลดหน้าในหน้าต่างเบราว์เซอร์แบบเต็ม หากไม่มีเฟรม ค่านี้จะทำงานเหมือน _self

ค่าเริ่มต้น

การตรวจสอบความถูกต้อง

การใช้แอตทริบิวต์นี้ถูกคัดค้านโดยข้อกำหนด HTML โค้ดที่ถูกต้องจะได้รับโดยใช้ transient . เท่านั้น .

HTML5 IE Cr Op Sa Fx

แท็กแอตทริบิวต์เป้าหมาย

เปิดในหน้าต่างใหม่

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

ตัวระบุใน URI มีอักขระ “#” ตามด้วยชื่อตัวระบุที่ตรงกับค่าของแอตทริบิวต์ NSองค์ประกอบในเอกสาร

สนับสนุน

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

ฉันจะใช้: เป้าหมายได้อย่างไร

คลาสหลอกนี้สามารถมีสไตล์ของตัวเองได้ เช่นเดียวกับคลาสหลอก : โฮเวอร์, : คล่องแคล่วหรือ : จุดสนใจสำหรับลิงค์ เช่นเดียวกับคลาสเทียมดังกล่าว : เป้าใช้ในการกระทำบางอย่างกับเว็บไซต์ โดยเฉพาะอย่างยิ่งเมื่อใช้ตัวระบุส่วนย่อยดังนี้: http://example.com/index.html#lorem-ipsum

สาธิต

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

มาร์กอัป HTML

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

บล็อก 1
บล็อก 2
บล็อก 3
บล็อก 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ Donec tempus, felis ที่ varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit ใน

Sed lobortis placerat กำจัดอาการชั่วคราว Nam dignissim euismod quam nec ชั่วคราว. Sed tortor lorem, ultricies a auctor nec, auctor ut neque Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, รหัส accumsan turpis metus ac ante Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus.

Pellentesque quis tortor vitae elit cursus vulputate และ vel dui Nunc commodo pretium arcu ใน ultricies Nunc vel velit enim, และ tincidunt leo. คลาส aptent taciti sociosqu และ litora Torquent ต่อ conubia nostra ต่อ inceptos himenaeos

Quisque eget ชั่วคราว เซเปียน Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue นั่ง amet id diam. Sed ใน lectus ut augue euismod porta. Quisque ไม่ใช่ lacus odio Nunc ornare อ้วนลงพุง

CSS

โค้ด CSS ต่อไปนี้ช่วยให้คุณได้เอฟเฟกต์ที่ต้องการ โดยเลือกบล็อกที่มี ID ที่เกี่ยวข้อง (เงาปรากฏขึ้นรอบสี่เหลี่ยมผืนผ้า)

/ * เพิ่มช่องว่าง * / ul, div (margin-bottom: 10px;) / * Default block style * / div (padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border-radius : 5px;) / * เปลี่ยนมุมมองของผลลัพธ์หากตรงกับ * / div: target (border-color: # 9c9c9c; -moz-box-shadow: 0 0 4px # 9c9c9c; -webkit-box-shadow: 0 0 4px # 9c9c9c ; กล่องเงา: 0 0 4px # 9c9c9c;)

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

มีวิธีจัดการกับเหตุการณ์การคลิกใน CSS โดยไม่ต้องใช้ JavaScript หรือไม่ คุณสามารถใช้วิธีการกับ : เป้า... แต่ถ้าใช้ไม่ได้ล่ะ? มีอีกวิธีหนึ่ง

ชมการสาธิต มันเสร็จสิ้นใน CSS ไม่ใช่ JavaScript บรรทัดเดียว มันขึ้นอยู่กับการใช้งานดั้งเดิมของ: ใช้งานอยู่ และ: ตัวเลือกโฮเวอร์

คำอธิบาย

ขั้นแรก คุณต้องสร้างคอนเทนเนอร์ที่ประกอบด้วยปุ่มและบล็อกที่แสดงขึ้นโดยการคลิกเมาส์ โครงสร้างมาร์กอัปจะเป็นดังนี้:

Lorem ipsum dolor นั่งสบาย

Consectetur adipiscing อิลิท

ปุ่ม

คุณต้องทำให้มองไม่เห็น .content จนกว่าจะกดปุ่มเมาส์บน .wrapper ในการแก้ปัญหา ให้ตั้งค่าคุณสมบัติ display: none สำหรับ .content จากนั้นเมื่อเราคลิกที่ .wrapper เราจะเปิดใช้งานคุณสมบัติ display: block สำหรับ .content เมื่อต้องการทำสิ่งนี้ ให้ตั้งค่าคุณสมบัติ display: block สำหรับ .wrapper: active .content ในสถานะนี้ .content จะปรากฏเฉพาะเมื่อกดปุ่มเมาส์เท่านั้น หากคุณปล่อยมันไป .content จะหายไปอีกครั้ง สำหรับการแก้ไข เราจะทำเพื่อให้เมื่อเคอร์เซอร์ของเมาส์อยู่เหนือ .content คุณสมบัติ display: block ถูกกำหนดให้กับองค์ประกอบ นั่นคือ เราตั้งค่าคุณสมบัติ display: block สำหรับ .content: hover โค้ด CSS จะมีลักษณะดังนี้:

เนื้อหา (แสดง: ไม่มี;) .wrapper: ใช้งาน .content (แสดง: บล็อก;) .เนื้อหา: โฮเวอร์ (แสดง: บล็อก;)

มันยังคงอยู่เพียงเพื่อ "หวี" ลักษณะที่ปรากฏและให้ความชัดเจน:

Wrapper (ตำแหน่ง: ญาติ;) .ปุ่ม (พื้นหลัง: สีเหลือง ความสูง: 20px ความกว้าง: 150px;) .content (ตำแหน่ง: สัมบูรณ์; padding-top: 20px;) .content li (พื้นหลัง: สีแดง;)

ข้อความปุ่มในโค้ดด้านบนจะมีพื้นหลังสีเหลือง และข้อมูลที่แสดงเมื่อกดปุ่มเมาส์จะมีพื้นหลังสีแดง

The: target pseudo-class เลือกองค์ประกอบในเอกสารที่ชี้ไปที่ส่วนย่อยของ URL ตัวอย่างเช่น ข้อความชิ้นนี้ถูกห่อด้วยองค์ประกอบ ด้วย ID # target-test หากคุณไปตามลิงก์ องค์ประกอบนั้นจะกลายเป็นเป้าหมายและสไตล์ของ: target pseudo-class จะมีผล

ปีที่แล้ว ฉันเขียนเกี่ยวกับ: target pseudo-class ใน 5 ตัวเลือก CSS ที่ไม่ได้ใช้ (และแอปพลิเคชันของพวกเขา) ตัวอย่างแรกคือการใช้: target pseudo-class เพื่อเน้นส่วนของหน้าที่นำทางไป อาจเป็นเช่นการเพิ่มสีพื้นหลังหรือเส้นขอบตามตัวอย่างด้วย

แต่เมื่อเร็ว ๆ นี้ ฉันได้ข้อสรุปว่าเราสามารถใช้: target pseudo-class ได้ดีขึ้นโดยการสร้างองค์ประกอบแบบโต้ตอบบนหน้าเว็บโดยไม่ต้องใช้ JavaScript

ตัวอย่าง # 1: การซ่อนและแสดงเนื้อหา

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

แสดงความคิดเห็น #comments: not (: target) (display: none;) #comments: target (display: block;)

ตัวอย่าง # 2: เลื่อนการนำทางออก

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

#nav (ตำแหน่ง: คงที่; ด้านบน: 0; ความสูง: 100%; ความกว้าง: 80%; ความกว้างสูงสุด: 400px;) #nav: ไม่ (: เป้าหมาย) (ขวา: -100%; การเปลี่ยนแปลง: ขวา 1.5 วินาที;) #nav: เป้าหมาย (ขวา: 0; การเปลี่ยนแปลง: ขวา 1s;)

ตัวอย่าง # 3: โมดอลป๊อปอัป

การนำแนวคิดนี้ไปใช้เพิ่มเติม เราสามารถสร้างโมดอลที่เติมทั้งหน้าได้

# modal-container (ตำแหน่ง: คงที่; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: rgba (0,0,0,0.8); display: flex; justify-content: center; จัดรายการ: ศูนย์;) .modal (ความกว้าง: 70%; พื้นหลัง: #fff; padding: 20px; text-align: center;) # modal-container: not (: target) (ความทึบ: 0; การมองเห็น: ซ่อน; การเปลี่ยนแปลง: ความทึบ 1s, การมองเห็น 1s;) # modal-container: เป้าหมาย (ความทึบ: 1; การมองเห็น: มองเห็นได้; การเปลี่ยนแปลง: ความทึบ 1s, การมองเห็น 1s;)

ตัวอย่าง # 4: การเปลี่ยนรูปแบบสากล

ตัวอย่างสุดท้ายไม่สามารถเรียกได้ว่าถูกต้องในแง่ของความหมายคือการประยุกต์ใช้: target pseudo-class กับองค์ประกอบ ด้วยการเปลี่ยนรูปแบบหรือเค้าโครงหน้าในภายหลัง

#body: not (: target) (main (ความกว้าง: 60%;) ด้านข้าง (width: 30%;) .show-sidebar-link (display: none;)) #body: target (main (ความกว้าง: 100%; ) กัน (แสดง: none;) .hide-sidebar-link (แสดง: none;))

ความหมายและความสามารถในการเข้าถึงเป็นอย่างไร

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

เท่าที่ฉันสามารถบอกได้ว่าวิธีนี้มีข้อเสียที่เป็นไปได้สองประการ:

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

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