โฮมเพจ » การเข้ารหัส » ตัวเลือกคุณสมบัติของ CSS3 การกำหนดเป้าหมายประเภทไฟล์

    ตัวเลือกคุณสมบัติของ CSS3 การกำหนดเป้าหมายประเภทไฟล์

    บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน.

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

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

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

    การสนับสนุนไวยากรณ์และเบราว์เซอร์

    ประเภทไฟล์ จะอยู่ท้ายชื่อไฟล์เสมอ ดังนั้นเพื่อเลือกว่า ประเภทไฟล์ เราสามารถใช้ไวยากรณ์ต่อไปนี้ [attr $ = "ค่า"]. ไวยากรณ์นี้ใช้ $ = ผู้ประกอบการที่จะกำหนดเป้าหมายในตอนท้ายของค่าแอตทริบิวต์ตัวอย่างเช่น:

     a [href $ = ". pdf"]: ก่อนหน้า background: url ('… /images/document-pdf-text.png') ไม่ต้องทำซ้ำ  

    ตัวอย่างด้านบนจะเลือกทุกลิงก์ที่ค่าแอตทริบิวต์นั้นลงท้ายด้วย .รูปแบบไฟล์ PDF และแทรกไอคอนคำ - เอกสารใน :ก่อน องค์ประกอบหลอก.

    แหล่งไอคอน PDF: ไอคอนความทรงจำ

    แม้ว่านี่จะเป็นการใช้งานทั่วไปของตัวเลือกนี้เราสามารถไปได้ไกลกว่านั้น.

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

    ตัวอย่าง

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

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

    • JPG
    • PNG
    • GIF

    รูปภาพแต่ละรูปด้านบนมีรูปแบบหรือส่วนขยายต่อไปนี้, JPG, PNG, และ GIF. พวกเขายังมีคำบรรยายภาพที่แสดงถึงการขยายภาพ คำบรรยายภาพนี้จะทำหน้าที่เป็นป้ายกำกับภาพ.

    ดังนั้นนี่คือแผนเราจะให้สีพื้นหลังที่แตกต่างกันสำหรับคำอธิบายภาพสำหรับส่วนขยายภาพที่แตกต่างกัน ภาพ JPG จะได้รับ สีเขียว สีคำบรรยายภาพ PNG จะได้รับ สีน้ำเงิน, และท้ายสุด GIF จะได้รับ สีม่วง.

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

     รูป ตำแหน่ง: ญาติ;  

    เพิ่มการตกแต่งเล็กน้อยสำหรับภาพที่มีเส้นขอบและเงา.

     img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5) กล่องเงา: 1px 1px 3px 0px rgba (0, 0, 0, .5)  

    จากนั้นเรากำหนดรูปแบบและตำแหน่งเริ่มต้นสำหรับคำบรรยายภาพ คำบรรยายภาพหรือป้ายกำกับจะมีขนาด 50px.

     img + figcaption color: #fff; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: 0; ความกว้าง: 50px; ความสูง: 50px; line-height: 50px; จัดข้อความ: ศูนย์;  

    ตอนนี้ได้เวลาเพิ่มสีพื้นหลัง ในการทำเช่นนั้นเราสามารถรวมตัวเลือกคุณลักษณะเข้ากับตัวเลือกพี่น้องที่อยู่ติดกัน, +.

     img [src $ = ". jpg"] + figcaption background-color: # a8b700;  

    ตัวอย่างด้านบนจะกำหนดเป้าหมายทุกภาพด้วยแอตทริบิวต์ต้นทางที่ลงท้ายด้วย .JPG, จากนั้นตัวเลือกที่อยู่ติดกันจะพบองค์ประกอบถัดจากมัน ในกรณีนี้ figcaption จะถูกเพิ่มด้วย # a8b700 สีพื้นหลัง.

    และนี่คือรหัสทั้งหมดสำหรับรูปแบบส่วนที่เหลือ, .png และ. gif.

     img [src $ = ". png"] + figcaption background-color: # 389abe;  img [src $ = ". gif"] + figcaption background-color: # 8960a7;  

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

    • การสาธิต
    • แหล่งดาวน์โหลด

    แหล่งที่มาของภาพมีดังนี้: MacPro 1, MacPro 2 และ MacPro 3

    ข้อสรุป

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

    จริงๆแล้วมีตัวเลือกใหม่อีกสองประเภทซึ่งเราจะกล่าวถึงในโพสต์ถัดไปดังนั้นโปรดติดตาม.