ทฤษฎีบทสุดท้ายของแฟร์มาต์

เอ็กซ์ ^น+ย ^น
=ซ ^น

โดยที่ n เป็นจำนวนเต็ม > 2

ข้อความใดที่จะเน้นเป็นสีแดงโดยใช้สไตล์ SUP + SUP ( สี: สีแดง; )

1. วินาที "n"
2. "n" ตัวที่สองและสาม

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

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

ตัวเลือกสากล

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

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

* ( ตระกูลแบบอักษร: Tahoma, Arial, Helvetica, sans-serif; /* แบบอักษรข้อความ */ สี: #646464; /* สีข้อความ */ ขนาดแบบอักษร: 75%; /* ขนาดข้อความ */ text-align : ซ้าย; /* ตำแหน่งข้อความ */ )

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

ตัวเลือก CSS ที่อยู่ติดกัน

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

ทีนี้ลองมาย่อหน้าข้อความที่กำหนดโดยแท็ก p ซึ่งจะรวมแท็ก b, i และแท็กใหญ่เป็นแท็กย่อย กำหนดรูปแบบข้อความ ตัวหนา ตัวเอียง และตัวหนาตามลำดับ:

วรรคนี้ใช้ ขแท็ก, ฉันแท็ก, แท็กใหญ่.

และด้วยความช่วยเหลือของเครื่องมือแก้ไข CSS และ HTML ซึ่งสร้างขึ้นในเวอร์ชันล่าสุดของเบราว์เซอร์ยอดนิยมทั้งหมด ( , ) และเป็นอะนาล็อกของปลั๊กอินที่มีชื่อเสียงสำหรับเบราว์เซอร์ Firefox () เราจะแทรกย่อหน้านี้ไว้ที่ใดก็ได้อย่างแน่นอน หน้าเว็บใดก็ได้ (ฉันทำถูกต้องในหน้าของบทความที่แล้วในย่อหน้าแรก) ตัวอย่างเช่น เครื่องมือนี้ใน Chrome เรียกโดยการกดปุ่ม F12 สามารถใช้เพื่อฝึกฝนเนื้อหาใน HTML Basics และ CSS Tutorials ดังนั้นฉันจึงแทรกข้อความในรูปแบบของย่อหน้าแรก:

ย่อหน้านี้จะเป็นการทดลองและเราจะพิจารณาใบสมัครโดยใช้ตัวอย่าง ตัวเลือกที่อยู่ติดกัน. อย่างที่ฉันบอกไป แท็ก b, i และแท็กใหญ่เป็นแท็กย่อยของแท็กย่อหน้า p เนื่องจากแท็กทั้งหมดอยู่ในคอนเทนเนอร์ p โดยตรง ที่นี่ แท็ก b และ i อยู่ติดกัน เช่นเดียวกับ i และ big ตอนนี้ใช้กฎ CSS สำหรับตัวเลือกที่อยู่ติดกัน:

B+i (สี: แดง;) i+ใหญ่ (สี: เขียว;)

หลังจากใช้สไตล์เหล่านี้แล้ว ย่อหน้าจะมีลักษณะดังนี้:

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

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

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

H3 ( ขนาดฟอนต์: 1.7em; /* ขนาดฟอนต์ */ text-align: center; /* ตำแหน่งข้อความ */ font-weight: normal; /* น้ำหนักข้อความปกติ */ font-family: Tahoma, Arial, Helvetica, sans-serif; /* รูปแบบตัวอักษร */ สี: #646464; /* สีข้อความ */ )

เพื่อเน้นชื่อเรื่องของโน้ตหรือเชิงอรรถ เรากำหนดคลาสพิเศษ เช่น ใส่:

H3.put ( color: red; /* Text color */ margin-left: 5px; /* Left padding */ margin-top: 0.5em; /* Top padding */ padding: 10px; /* Padding around text */ text-align: left; /* ตำแหน่งข้อความ */ )

ตอนนี้ ให้ใช้ตัวเลือกที่อยู่ติดกันเพื่อสร้างสไตล์ย่อหน้าเชิงอรรถพิเศษ ย่อหน้านี้จะวางไว้ใต้ส่วนหัวโดยตรงด้วยสไตล์ "h3.put":

H3.put+p ( พื้นหลัง: #ffefd5; /* สีพื้นหลัง */ ระยะขอบซ้าย: 15px; /* ระยะขอบด้านซ้าย */ ระยะขอบด้านขวา: 120px; /* ระยะขอบด้านขวา */ ระยะขอบด้านบน: 0.5em; /* ช่องว่างภายในด้านบน */ ช่องว่างภายใน: 5px; /* ระยะขอบรอบข้อความ */ )

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

ความสนใจ!

จากนั้นเราเขียนข้อความของเชิงอรรถ:

เนื้อหาที่นำเสนอในเอกสารนี้มีความสำคัญมากในแง่ของการเรียนรู้พื้นฐานของ CSS (Cascading Style Sheets)

หลังจากทำท่าทางเหล่านี้แล้ว เราจะได้ย่อหน้าเชิงอรรถต่อไปนี้บนหน้าเว็บ (โปรดจำไว้ว่าฉันได้แทรกย่อหน้านี้ไว้ที่ส่วนท้ายของบทความก่อนหน้าของฉันเกี่ยวกับตัวเลือกลูกและบริบท):

ตอนนี้ในบล็อกหรือเว็บไซต์ เมื่อผูกคลาส "ใส่" กับแท็ก h3 เชิงอรรถดังกล่าวจะปรากฏบนหน้าเว็บ นอกจากนี้ เฉพาะย่อหน้าแรกหลังแท็ก h3 ที่มี “class=“put”” เท่านั้นที่จะได้รับการออกแบบด้วยวิธีพิเศษ แต่นั่นคือสิ่งที่เราต้องการใช่ไหม

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

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

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

CSS Combinators (ตัวเลือกเพื่อนบ้าน ลูก และบริบท)

เครื่องผสมเป็นประเภทของตัวเลือก css ที่ผูกกฎสไตล์กับองค์ประกอบหน้าเว็บตามตำแหน่งที่สัมพันธ์กับองค์ประกอบอื่นๆ

สัญลักษณ์คอมบิเนเตอร์ตัวแรก บวก(+) หรือ ตัวเลือกที่อยู่ติดกัน. บวกถูกตั้งค่าระหว่างสองตัวเลือก:

<селектор 1> + <селектор 2> { <стиль> }

สไตล์ในกรณีนี้ใช้กับ ตัวเลือก 2แต่ถ้ามันอยู่ติดกับ ตัวเลือก 1และตามไปทันที พิจารณาตัวอย่าง:

แข็งแรง + ฉัน (

}
...

นี่คือข้อความธรรมดา นี่คือข้อความตัวหนา, ข้อความธรรมดา, ข้อความสีแดง

นี่คือข้อความธรรมดา นี่คือข้อความตัวหนา, ข้อความธรรมดา, และนี่คือข้อความธรรมดา.

ผลลัพธ์:

สไตล์ที่อธิบายในตัวอย่างจะใช้กับข้อความแรกที่อยู่ในแท็กเท่านั้น , เพราะ มันมาหลังแท็กทันที .

เครื่องผสม ตัวหนอน(~) ใช้กับตัวเลือกที่อยู่ติดกันด้วย แต่คราวนี้อาจมีองค์ประกอบอื่นอยู่ระหว่างนั้น ในกรณีนี้ ตัวเลือกทั้งสองจะต้องซ้อนอยู่ในแท็กหลักเดียวกัน:

<селектор 1> ~ <селектор 2> { <стиль> }

สไตล์จะถูกนำไปใช้กับ ตัวเลือก 2ที่ควรปฏิบัติตาม ตัวเลือก 1. พิจารณาตัวอย่าง:

แข็งแกร่ง ~ ฉัน (
สี: แดง; /* สีตัวอักษรสีแดง */
}
...

นี่คือข้อความธรรมดา นี่คือข้อความตัวหนา, ข้อความธรรมดา, ข้อความสีแดงมีการใช้กฎตัวเลือกที่อยู่ติดกัน

นี่คือข้อความธรรมดา นี่คือข้อความตัวหนา, ข้อความธรรมดา, นี่คือข้อความสีแดง.

ผลลัพธ์:

อย่างที่คุณเห็น เวลานี้กฎสไตล์ใช้ได้กับทั้งข้อความที่อยู่ในแท็ก แม้ว่าในกรณีที่สองระหว่างแท็ก และ คุ้มค่ากับแท็ก .

เครื่องผสม > อ้างถึง ตัวเลือกเด็ก. อนุญาตให้คุณแนบสไตล์ CSS กับองค์ประกอบหน้าเว็บที่ซ้อนอยู่ภายในองค์ประกอบอื่นโดยตรง:

<селектор 1> > <селектор 2> { <стиль> }

สไตล์จะผูกติดกับ ตัวเลือก 2ซึ่งซ้อนอยู่ใน ตัวเลือก 1.

div > แข็งแกร่ง (

}
...

นี่คือข้อความธรรมดา นี่คือข้อความตัวเอียงตัวหนา.

นี่คือข้อความธรรมดา นี่เป็นข้อความตัวหนาปกติ.

และผลลัพธ์:

ดังที่คุณเห็นในรูป กฎสไตล์มีผลกับแท็กแรกเท่านั้น ซึ่งซ้อนอยู่ในแท็กโดยตรง

. และพาเรนต์ของแท็กที่สอง คือแท็ก

ดังนั้นกฎนี้จึงใช้ไม่ได้

พิจารณาต่อไป ตัวเลือกบริบท<пробел> . ช่วยให้คุณสามารถผูกสไตล์ CSS กับองค์ประกอบที่ซ้อนอยู่ในองค์ประกอบอื่น และสามารถซ้อนกันในระดับใดก็ได้:

<селектор 1> <селектор 2> { <стиль> }

สไตล์จะถูกนำไปใช้กับ ตัวเลือก 2ถ้ามันซ้อนอยู่ใน ตัวเลือก 1.

พิจารณาตัวอย่างก่อนหน้านี้ เมื่ออธิบายกฎ CSS เท่านั้น จะใช้ตัวเลือกบริบทได้:

div ที่แข็งแกร่ง (
รูปแบบตัวอักษร: italic /* Italic */
}
...

นี่คือข้อความธรรมดา นี่คือข้อความตัวเอียงตัวหนา.

นี่คือข้อความธรรมดา และนี่คือข้อความตัวหนาตัวเอียงด้วย.

ข้อความธรรมดาและ เพียงข้อความตัวหนา

ผลลัพธ์:

อย่างที่คุณเห็น เวลานี้กฎมีผลกับทั้งสองแท็ก แม้แต่อันที่ซ้อนอยู่ในคอนเทนเนอร์

และในย่อหน้า

. ต่อแท็ก ซึ่งซ้อนอยู่ภายในย่อหน้า

กฎ css ไม่ทำงาน

ตัวเลือกแอตทริบิวต์แท็ก

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

1. ตัวเลือกแอตทริบิวต์อย่างง่าย

ดูเหมือน:

<селектор>[<имя атрибута тега>] { <стиль> }

และผูกสไตล์กับองค์ประกอบเหล่านั้นภายในซึ่งมีการเพิ่มแอตทริบิวต์ที่ระบุ ตัวอย่างเช่น:

แข็งแกร่ง(
สี:แดง;
}
...

รถยนต์มันเป็นมอเตอร์เชิงกลที่ไม่มีร่องรอย ยานพาหนะถนนมีล้ออย่างน้อย 4 ล้อ

ผลลัพธ์:

ในรูป คุณจะเห็นว่ามีการใช้กฎ css (สีข้อความสีแดง) กับองค์ประกอบ แข็งแกร่งซึ่งแอตทริบิวต์ถูกเพิ่มเข้าไป ชื่อ.

2. ตัวเลือกแอตทริบิวต์พร้อมค่า

ไวยากรณ์สำหรับตัวเลือกนี้คือ:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

ผูก สไตล์ไปยังองค์ประกอบที่มีแท็กที่มีแอตทริบิวต์ที่ระบุ ชื่อและ ความหมาย. ตัวอย่าง:

ก(
สี:แดง;
ขนาดตัวอักษร:150%;
}
...
.ru" target="_blank">ลิงก์ในหน้าต่างใหม่

ผลลัพธ์:

อย่างที่คุณเห็น องค์ประกอบทั้งสองของประเภทการเชื่อมโยงหลายมิติมีแอตทริบิวต์ เป้าแต่กฎ css ที่ขยายข้อความลิงก์ 1.5 เท่าและเปลี่ยนสีเป็นสีแดงถูกนำไปใช้กับแท็ก คุณลักษณะของใคร เป้ามีความหมาย "_ว่างเปล่า".

3. หนึ่งในหลายค่าแอตทริบิวต์

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

{
สี:แดง;
ขนาดตัวอักษร:150%;
}
...

โทรศัพท์ของเรา: 777-77-77

ที่อยู่ของเรา: มอสโกเซนต์ โซเวียต 5

รับผลลัพธ์ต่อไปนี้:

กฎถูกนำไปใช้กับองค์ประกอบโดยที่ระหว่างค่าแอตทริบิวต์ ระดับมีความหมาย โทร.

4. ยัติภังค์ในค่าแอตทริบิวต์

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

[attribute|="value"] ( สไตล์ )
ตัวเลือก[แอตทริบิวต์|="ค่า"] ( สไตล์ )

สไตล์ถูกนำไปใช้กับองค์ประกอบที่มีค่าแอตทริบิวต์เริ่มต้นด้วยค่าที่ระบุตามด้วยยัติภังค์ ตัวอย่างเช่น:

{
สี:แดง;
ขนาดตัวอักษร:150%;
}
...

• วรรค 1


• จุดที่ 2


• จุดที่ 3


• ข้อ 4

ผลลัพธ์:

ในตัวอย่าง กฎสไตล์จะใช้กับองค์ประกอบรายการที่มีชื่อคลาสขึ้นต้นด้วยค่าเท่านั้น "เมนู".

5. ค่าแอตทริบิวต์เริ่มต้นด้วยข้อความเฉพาะ

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

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

ก(
สี:สีเขียว;
น้ำหนักตัวอักษร: ตัวหนา;
}
...

ผลลัพธ์:

ตัวอย่างแสดงวิธีการแสดงลิงก์ภายนอกและลิงก์ภายในที่แตกต่างกัน ลิงก์ภายนอกจะขึ้นต้นด้วยสตริง "http://" เสมอ ดังนั้น ในตัวเลือก เราจึงระบุว่าสไตล์นั้นใช้กับลิงก์ที่มีแอตทริบิวต์เท่านั้น hrefเริ่มมีค่า http://.

6. ค่าแอตทริบิวต์ลงท้ายด้วยข้อความบางข้อความ

ผูกสไตล์กับองค์ประกอบที่มีค่าแอตทริบิวต์ลงท้ายด้วยข้อความที่ระบุ มีไวยากรณ์ดังต่อไปนี้:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

img(
เส้นขอบ: 5px สีแดงทึบ;
}
...

ภาพ gif

รูปภาพรูปแบบ png

ผลลัพธ์:

ในตัวอย่าง รูปภาพทั้งหมดที่มีนามสกุล gif จะแสดงโดยมีขอบสีแดงหนา 5 พิกเซล

7. ค่าแอตทริบิวต์มีสตริงที่ระบุ

ตัวเลือกนี้ผูกสไตล์กับแท็กที่มีค่าแอตทริบิวต์ที่มีข้อความที่ระบุ ไวยากรณ์:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

สไตล์เชื่อมโยงกับองค์ประกอบที่มี คุณลักษณะด้วยชื่อที่ระบุและค่าของมันประกอบด้วยที่ระบุ สตริงย่อย. ตัวอย่างเช่น:

img(
เส้นขอบ: 5px สีแดงทึบ;
}
...

รูปภาพจากโฟลเดอร์แกลเลอรี

รูปภาพจากโฟลเดอร์อื่น

ผลลัพธ์:

ในตัวอย่าง ลักษณะถูกนำไปใช้กับรูปภาพที่โหลดจากโฟลเดอร์ "แกลเลอรี่".

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

ตัวเลือก[attribute1="value1"][attribute2="value2"] ( สไตล์ )

นอกจากนี้ ฉันขอเตือนคุณเกี่ยวกับตัวเลือก CSS พิเศษ:

• การใช้สัญลักษณ์ "+" และ "~" จะเกิดขึ้น
• สัญลักษณ์ ">" ผูกสไตล์ css กับ เด็กแท็ก;
• เครื่องหมาย<пробел>สร้างตัวเลือกบริบท

ในบทความต่อไปนี้ เราจะดูองค์ประกอบเทียมและคลาสเทียมซึ่งมีเครื่องมือจัดการสไตล์ที่มีประสิทธิภาพ

แค่นั้นแหละ จนกว่าเราจะได้พบกันใหม่

ไม่นานมานี้ เบราว์เซอร์ Internet Explorer เวอร์ชันใหม่ที่แปดได้เปิดตัว และเว็บมาสเตอร์ทุกคนก็ถอนหายใจด้วยความโล่งอก ในที่สุดเบราว์เซอร์จาก Microsoft แม้ว่าจะมีความล่าช้ามาก แต่ก็เริ่มเคารพข้อกำหนดของ HTML และ CSS มากขึ้นหรือน้อยลงและแสดงหน้าเว็บอย่างเพียงพอ โดยทั่วไปแล้วทุกคนคาดหวังสิ่งนี้จากรุ่นที่เจ็ด อย่างไรก็ตาม เมื่อมองแวบแรก มันไม่ได้นำอะไรใหม่มาเลย ยกเว้นการรองรับการใช้แท็บ แต่นี่เป็นเพียงการมองแวบแรกเท่านั้น... มีคนไม่กี่คนที่รู้เกี่ยวกับนวัตกรรมที่สำคัญอีกอย่างใน IE7: ในเวอร์ชันนี้เบราว์เซอร์เริ่มรองรับตัวเลือก CSS ประเภทใหม่เป็นครั้งแรก

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

ตัวเลือกที่อยู่ติดกัน

ระบุว่ากฎ CSS ใช้กับองค์ประกอบเฉพาะเมื่ออยู่ติดกับองค์ประกอบอื่น ตัวอย่าง:

องค์ประกอบเรียกว่าเพื่อนบ้านเมื่ออยู่ในรหัสหน้าพวกเขา และระหว่างพวกเขา ไม่มีองค์ประกอบอื่น

นี่คือแท็กที่อยู่ติดกัน และ , และ และ . แท็ก และ ไม่ได้อยู่ใกล้เคียงเพราะมีสิ่งแปลกปลอม "ลิ่ม" ระหว่างพวกเขา .

ไวยากรณ์สำหรับการเขียนตัวเลือกที่อยู่ติดกันมีดังนี้:

องค์ประกอบ I + องค์ประกอบ II (...)

ลองสร้างกฎสำหรับตัวอย่างของเรา:

แข็งแรง + em ( สี: สีแดง; )
แข็งแรง + ins ( สี: น้ำเงิน; )

นี่คือลักษณะของผลลัพธ์:

อย่างที่คุณเห็น รูปแบบมีการเปลี่ยนแปลงสำหรับแท็กเท่านั้น และแท็ก ไม่ได้รับผลกระทบ สิ่งนี้แสดงให้เห็นถึงกฎการอยู่ติดกันได้เป็นอย่างดี

มาทำการทดลองอื่นกัน - แทนที่ในตัวอย่างของเรา บน :

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

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

เพราะมันจะไม่เป็นเพื่อนบ้านอีกต่อไปสำหรับ .

ตัวเลือกลูก

ระบุว่ากฎ CSS ใช้กับองค์ประกอบเมื่อเป็นองค์ประกอบย่อยขององค์ประกอบอื่นเท่านั้น ตัวอย่าง:

องค์ประกอบถูกกล่าวว่าเป็นลูกขององค์ประกอบที่ซ้อนอยู่หากเป็นเช่นนั้น เป็น ทันทีลูกหลานองค์ประกอบนี้

ที่นี่เด็ก ๆ เป็นแท็ก เกี่ยวกับแท็ก

และ ต่อ . แท็ก เกี่ยวกับแท็ก

ไม่ใช่เด็กเพราะไม่ใช่พ่อแม่โดยตรง

ไวยากรณ์การเขียนมีดังนี้:

องค์ประกอบ I > องค์ประกอบ II ( … )

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

พี >
p > em (สี: น้ำเงิน; ) /* ตัวเลือกลูก */

เราจะได้ผลลัพธ์ดังนี้

ในกรณีของเรา แท็ก ไม่ใช่ลูกของ

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

ตอนนี้เรามาแทนที่ตัวเลือกลูกด้วยตัวเลือกบริบท:

p > แข็งแรง ( สี: แดง; ) /* ตัวเลือกลูก */
p em (สี: สีน้ำเงิน; ) /* ตัวเลือกบริบท */

ผลลัพธ์สามารถคาดเดาได้:

ซึ่งแตกต่างจากตัวเลือกลูก ตัวเลือกบริบท "ทำงาน" ในกรณีนี้เนื่องจากไม่สนใจความลึกของระดับการซ้อน

ตัวเลือกแอตทริบิวต์

ระบุว่ากฎ CSS ใช้กับองค์ประกอบที่มีแอตทริบิวต์ที่ระบุในตัวเลือกเท่านั้น ตัวอย่าง:

CSS เป็นเทคโนโลยีที่สำคัญมากโดยที่ไม่สามารถสร้างเว็บไซต์ที่เหมาะสมได้

แนวคิดพื้นฐานของ CSS ได้แก่ กฎสไตล์ ตัวเลือก คุณสมบัติ และค่าต่างๆ

ในที่นี้ เฉพาะย่อหน้าแรกเท่านั้นที่มีพารามิเตอร์ที่กำหนดขึ้นเอง (หรือแอตทริบิวต์ ซึ่งเป็นสิ่งเดียวกัน) จัดเรียง ดังนั้น กฎ CSS สำหรับตัวเลือกแอตทริบิวต์การจัดตำแหน่งจะใช้กับย่อหน้าแรกเท่านั้น

ไวยากรณ์สำหรับรายการตัวเลือกแอตทริบิวต์คือ:

[คุณลักษณะ] ( ... )

ลองสร้างกฎสำหรับตัวอย่างของเรา (เพื่อความชัดเจน นอกจากแอตทริบิวต์แล้ว เราจะระบุแท็กด้วย ซึ่งควรพิจารณาด้วย):

p ( สี: เขียว; น้ำหนักตัวอักษร: ตัวหนา; )

คาดเดาได้ง่ายว่าจะเกิดอะไรขึ้นในตอนท้าย:

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

[แอตทริบิวต์ = "ค่า"] ( ... )

ใช้กับองค์ประกอบที่มีค่าที่ระบุสำหรับแอตทริบิวต์นี้เท่านั้น

[แอตทริบิวต์^=”ค่า”] ( … )

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

[แอตทริบิวต์$="value"] ( ... )

ในทำนองเดียวกันด้วยความแตกต่างที่นี่แอตทริบิวต์ต้องลงท้ายด้วยค่าที่ระบุ

[แอตทริบิวต์*=”ค่า”] ( … )

สัญลักษณ์นี้บ่งชี้ว่าค่าสามารถเกิดขึ้นได้ทุกที่ในแอตทริบิวต์

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

ผู้เขียนบทความ: Alexey Antonov ผู้สร้างและผู้ดูแลบล็อกเกี่ยวกับเทคโนโลยีเว็บ www.lounwolf.ru
=====================================================================