คอมพิวเตอร์, การเขียนโปรแกรม
CSS, หลอกหลอก: โฉบเด็กเป้าหมาย
โดยการรวม HTML และ CSS คุณสามารถควบคุมทุกอย่างองค์ประกอบของเว็บเพจ มีรูปแบบที่คุณสามารถเปลี่ยนรูปลักษณ์ของบล็อกใด ๆ หรือเส้น บ่อยครั้งที่ Coder จำเป็นต้องดำเนินงานที่ซับซ้อนมากขึ้น - เพื่อเปลี่ยนรูปลักษณ์ขององค์ประกอบของตัวเองที่ไม่ได้เป็นส่วนหนึ่งที่แยกต่างหากหรือรัฐโดยเฉพาะ ในกรณีนี้ให้ความช่วยเหลือของหลอกแบบ CSS
หลอกทำงานบนหลักการเช่นเดียวกับชั้นเรียนปกติในมาร์กอัป แต่ร่างกายพวกเขาจะไม่ได้อยู่ที่นี่ พวกเขาสามารถเลือกบนพื้นฐานขององค์ประกอบที่ไม่รวมอยู่ในข้อมูลเอกสารซึ่งจะได้เลือกตัวเลือกตามปกติ นี่คือตัวอย่างง่ายๆคุณมีปุ่มสีแดงและคุณต้องการเมื่อคุณเลื่อนมันก็กลายเป็นสีฟ้า ในทางทฤษฎีจะสามารถดำเนินการใน JavaScript แต่ทำไมมันเป็นเรื่องยากมาก? สะดวกสบายมากขึ้นที่จะใช้ : เลื่อน CSS ด้วยความช่วยเหลือของคุณสามารถให้หน่วยงานอื่นใดพารามิเตอร์ที่จะถูกเรียกเฉพาะเมื่อเคอร์เซอร์ของเมาส์
รายการของ CSS หลอกชั้นเรียนมีการปรับปรุงอย่างสม่ำเสมอ บางทีอาจจะเป็นในขณะที่คุณอ่านเนื้อหานี้คุณจะเห็นใหม่ไม่กี่ เพื่อเริ่มต้นการพิจารณาคนที่ปรากฏในข้อกำหนด CSS3 นี้
: ชับของประเภท
สมมติว่าคุณมีรายชื่อในที่ที่คุณต้องการที่จะใช้สลับสีเช่นบรรทัดแรกเป็นตัวอย่างเช่นเขียนด้วยตัวอักษรสีแดงและสอง - .. สีฟ้า, สีแดงอีกสามสี่อีกครั้งในสีฟ้า ก่อนหน้านี้คุณมีการสร้างคลาสใหม่ รูปแบบที่ผ่านมาเพิ่มเข้าไปในแต่ละองค์ประกอบในรายการระดับแล้วเปลี่ยนลักษณะของพวกเขาในสไตล์ มันไม่ได้สบายเกินไปและรูปแบบการก่อให้เกิดมลพิษ
ตอนนี้ทุกอย่างเป็นเรื่องง่าย ใช้ CSS หลอกชั้น: ที่ n ของประเภท นี้จะให้โอกาสที่จะได้รับผลภาพที่ต้องการโดยไม่ต้องเปลี่ยนแปลงอะไรในมาร์กอัป หลักการง่ายๆคือ: คุณป้อนตัวเลือกและในวงเล็บหลังชื่อเขียนสูตรหรือคำหลักที่จะได้พบกับองค์ประกอบที่จำเป็น ยกตัวอย่างเช่น ,: ที่ n ของประเภท (แม้) จะทั้งหมดแม้องค์ประกอบและ: ที่ n ของประเภท (แปลก) - แปลก มีเป็นจำนวนมากของสูตรที่ใช้ในการควบคุมได้อย่างแม่นยำ วงเล็บระบุจำนวนที่เป็นไปได้ - ในกรณีลักษณะนี้เพื่อนำไปใช้กับองค์ประกอบที่มีค่าดัชนีเท่ากับจำนวนนี้
: ชับเด็ก
นี้ CSS หลอกชั้นบนหลักการของการกระทำที่มีลักษณะคล้ายกับก่อนหน้านี้หนึ่ง แต่ไม่เหมือนมันทำงานเฉพาะกับเด็ก ๆ ในรายการที่เลือก ตัวอย่างเช่นถ้าคุณต้องการที่จะใช้ในการปรับแต่งลักษณะของ เป็นผู้ปกครอง
สำหรับการควบคุมที่แม่นยำของสูตรที่สามารถใช้ พวกเขาจะค่อนข้างยากสำหรับผู้เริ่มต้น แต่ก็คุ้มค่าเล็กน้อยลึกเข้าไปในไวยากรณ์ของวิธีการทุกอย่างจะกลายเป็นง่ายขึ้น สูตรดังต่อไปนี้: ภาพ + B ซึ่งเป็น - เป็นปัจจัยและ B - ชดเชย. ตัวอย่างเช่นถ้าในวงเล็บบ่งชี้ n, หลอกเด็กเลือกทุกองค์ประกอบ (เพราะมันไม่ได้ระบุเพิ่มเติมข้อตกลงในรูปแบบของ A และ B). ถ้าคุณระบุที่ n + 2 องค์ประกอบทั้งหมดยกเว้นครั้งแรก (เพราะชดเชยเท่ากับสอง) จะถูกเลือก ดีที่สุดของทั้งหมดในครั้งนี้เพื่อศึกษาในทางปฏิบัติ การทดสอบด้วยส่วนประกอบที่เด็กและสูตรที่แตกต่างกัน
: ล่าสุดเด็ก
ทุกอย่างเป็นเรื่องง่าย เด็ก CSS หลอกชั้นเรียนจะใช้ในการเลือกรายการเฉพาะ นี้จะเลือกสุดท้ายลูกของพ่อแม่องค์ประกอบ. ถูกนำมาใช้ค่อนข้างบ่อยตัวอย่างเช่นการเลือกแถวสุดท้ายของตารางหรือลบเยื้องจากบล็อกสุดท้ายที่จะหลีกเลี่ยงการโอนยังบรรทัดถัดไป
: ชับสุดท้ายเด็ก
โดยหลักการของการดำเนินงานมีความคล้ายคลึงกับที่กล่าวถึงก่อนหน้านี้ที่ n ของเด็ก แต่ทำหน้าที่ในทิศทางตรงกันข้ามคือจ. เมื่อใช้องค์ประกอบจะย้ายขึ้นไป นี้จะเป็นประโยชน์ถ้าคุณต้องการที่จะหาไม่กี่รายการสุดท้าย
คุณอาจจะคิดว่าสิ่งเหล่านี้หลอกชั้นเรียนและหลอกองค์ประกอบ CSS ไร้ประโยชน์เพราะคุณจะได้รับสิ่งที่ทำดีโดยการเรียนแบบเดิม ไม่เป็นเช่นนั้น : ที่ n-เด็ก ,: nth- สุดท้ายเด็ก และ analogs ของพวกเขามีความสะดวกมากเมื่อทำงานในโครงการขนาดใหญ่ - ตัวอย่างเช่นในกรณีที่บล็อกมีจำนวนมากของเด็ก จัดให้มีการเรียนอย่างหนักและยาวนานด้วยตนเอง
ควบคุมหลอกรัฐ
ถ้าคุณจำเป็นที่จะต้องเปลี่ยนแปลงลักษณะขององค์ประกอบในโดยเฉพาะอย่างยิ่งของรัฐ? กรณีนี้จะให้ CSS หลอกคลิกชี้และการกระทำอื่น ๆ ให้เราตรวจสอบในรายละเอียด
: การเชื่อมโยง
นี้หลอก CSS อ้างอิงไม่ได้ทั้งหมด แต่เฉพาะผู้ที่ยังไม่ได้เข้าเยี่ยมชม ในนั้นคุณสามารถระบุรูปแบบสำหรับองค์ประกอบ ซึ่งผู้ใช้ยังไม่ผ่าน
: เยี่ยมชม
อะนาล็อกของศูนย์รวมก่อนหน้านี้ซึ่งจะควบคุมเฉพาะการเชื่อมโยงเยี่ยมชมแล้ว รวมทั้งสองหลอกเรียนคุณสามารถปรับแต่งลักษณะของแท็ก ตรงตามที่คุณต้องการ แต่โปรดทราบว่ารัฐจะมีการคำนวณสำหรับเบราว์เซอร์ที่เฉพาะเจาะจงและออกจากโรงพยาบาลหลังจากที่ประวัติของการรักษา
หลอกชั้น: เป้าหมาย CSS
หนึ่งที่น่าสนใจที่สุดหลอกชั้นเรียนซึ่งถ้าใช้ไปบ้างแทนที่การใช้งานของ JavaScript ซึ่งจะช่วยให้การควบคุมที่ระบุรวมอยู่ในที่อยู่แถวหน้า ใช่ครั้งแรกที่มันเป็นเรื่องยากที่จะเข้าใจ พยายามที่จะแยกตัวอย่าง.
สมมติว่าเราอยู่ในหน้า 3 ช่วงตึก div บาง ID: id1, ID2, ID3 นอกจากนี้เรายังมีสามเชื่อมโยงไปยังค่าที่สอดคล้องกัน href: # id1 # ID2, # ID3 เมื่อคุณคลิกที่ลิงค์แรกที่อยู่แถวหน้าหลังจากที่เชื่อมโยงไปยังหมายเลขที่ตรงกันจะเป็นหน้าของตัวเอง
ซีเอสเอสำหรับบล็อกทั้งหมด div ระบุคุณสมบัติ display: none, นั่นคือพวกเขาจะไม่แสดงโดยค่าเริ่มต้น เราใช้เป้าหมาย: div และให้มันแสดงผลคุณสมบัติ: บล็อก ตอนนี้เมื่อคุณคลิกที่การเชื่อมโยงกับบาง href บล็อกด้วย ID ที่เกี่ยวข้องจะได้รับมอบหมายให้การแสดงผล: บล็อกและดังนั้นพวกเขาจะเริ่มต้นที่จะปรากฏบนหน้า! เมื่อคุณคลิกลิงก์เพื่อ href = http: // เว็บไซต์ / บทความ / . 319683 /% E2% 80% 9D # id1%% 80% 9D จะป้องกันด้วย id1 และอื่น ๆ E2 D.
ยังไม่เข้าใจอะไร? พยายามที่จะทดลอง สร้างรูปแบบหน้าและรูปแบบที่อธิบายไว้ข้างต้น ไม่กี่นาทีต่อมาคุณมีทุกอย่างที่ดีออกร่าง
หลอกว่าสามารถนำไปใช้องค์ประกอบใด ๆ
ส่วนใหญ่ของข้างต้นอธิบายหลอกเชื่อมโยงจำเป็นสำหรับงาน แต่ไม่ทุกองค์ประกอบต้อง หลาย embodiments สามารถนำไปใช้เป็นส่วนหนึ่งของหน้าใด ๆ สมบูรณ์
- : ใช้งานจะใช้ในองค์ประกอบของรูปแบบที่ผู้ใช้คลิกปุ่มเมาส์ซ้าย;
- : เลื่อน - CSS สำหรับองค์ประกอบที่ผู้ใช้เลื่อนผ่าน;
- : โฟกัส - สำหรับชิ้นส่วนเหล่านั้นของหน้าซึ่งขณะนี้อยู่ในโฟกัส หลอกชั้นนี้มักจะถูกใช้ในการทำงานที่มีรูปแบบ ตัวอย่างเช่นถ้าคุณต้องการที่จะเลือกชื่อผู้ใช้งานพรอมต์เมื่อผู้เข้าชมชุดเคอร์เซอร์ไปที่มันและเริ่มต้นตัวอักษรโทรออก
โปรดจำไว้ว่า: ใช้งานเฉพาะที่ถูกต้องในเวลาที่กด ทันทีหลังจากการสิ้นสุดของปุ่มซ้ายของเมาส์ที่ถูกกำหนดด้วยความช่วยเหลือของรูปแบบที่จะหายไปและรายการที่จะแสดงในขณะที่มันจะแสดงโดยค่าเริ่มต้น ในส่วนกรณีนี้หลอกชั้นจะใช้ในการทำงานด้วยปุ่ม. คุณสามารถตั้งค่าให้เป็นจำนวนมากของรัฐ ยกตัวอย่างเช่นปุ่มเริ่มต้นเป็นสีฟ้าโฉบเขียว - กด - สีแดง, ฯลฯ ...
แน่นอนเพียง แต่เรียนหลอกได้รับการสนับสนุนอย่างเต็มที่โดยเบราว์เซอร์ที่ทันสมัย ยกตัวอย่างเช่นใน IE6 และ 7 จะไม่สามารถที่จะใช้โฟกัสและเลื่อนและการใช้งานเฉพาะสำหรับงานอ้างอิงใน IE6 หวังว่าคุณจะไม่ต้องทำงานร่วมกับเบราว์เซอร์เหล่านี้ แต่ถ้าคุณยังคงต้องเกิดขึ้นให้ใช้เงื่อนไขความเห็น
หลอกเพิ่มเติม
ตัวเลือกที่ระบุไว้ข้างต้นรายการไม่ได้หยุดเพียงแค่นั้น องค์ประกอบรวมเท่านั้นที่สามารถกู้คืนได้ต้องขอบคุณ CSS ที่ทันสมัย (: เปิดใช้งาน) หรือเพียงแค่ตัดออก (: คนพิการ) เพียงสลับช่องทำเครื่องหมายทำเครื่องหมายและวิทยุ (: ตรวจสอบ) อธิบายตัวเลือกมากขึ้นไม่กี่แห่งที่คุณสามารถใช้สำหรับการควบคุมอย่างละเอียดมากขึ้นลักษณะของเนื้อหา
- เพียงเด็ก - วูบวาบไปได้ที่จะใช้สไตล์เพื่อองค์ประกอบซึ่งเป็นองค์ประกอบลูกเท่านั้น
- : lang - การทำงานร่วมกับองค์ประกอบที่ได้ให้ใช้ภาษาแอตทริบิวต์ lang;
- : ราก - ใช้ในการเลือกองค์ประกอบราก ดังนั้นเช่นแท็กคือ ;
- : ไม่ได้ - เครื่องมือที่มีประสิทธิภาพมาก จะช่วยให้คุณ จำกัด การใช้บางรูปแบบของเตอร์ นี่คือตัวอย่าง: .blue สี: ไม่ได้ (ช่วง ) ตัวเลือกที่จะใช้สไตล์กับองค์ประกอบทั้งหมดที่มีสีฟ้าสีชั้นถ้าพวกเขาไม่ได้
รายการเต็มรูปแบบของการหลอกเรียนไม่สามารถเหยียดยาวอยู่บนหน้าหนึ่ง ออกแบบเว็บส่วนใหญ่ใช้ในการปฏิบัติเพียงบางส่วนของพวกเขาเลือกที่จะจัดการสภาพที่มี JavaScript ใช่มันเป็นความสะดวกสบาย แต่มีบางช่วงเวลาที่ผลลัพธ์ที่มีประสิทธิภาพมากขึ้นจะประสบความสำเร็จได้ง่ายขึ้นโดยใช้หลอกเหมาะสม
Similar articles
Trending Now