เลือก ดูตัวเลือก CSS ประเภทของตัวเลือกที่รู้จัก
วลาด แมร์เซวิช
ตัวระบุ (เรียกอีกอย่างว่า "ตัวเลือกรหัส") กำหนดชื่อเฉพาะขององค์ประกอบ ดังนั้นจึงสามารถใช้เพื่อเปลี่ยนสไตล์และสไตล์เป็นชื่อใหม่ผ่านการเขียนสคริปต์
ไวยากรณ์สำหรับการจัดเตรียมตัวระบุที่ไม่เหมาะสม
ตัวเลือกสากล
วลาด แมร์เซวิช
บางครั้งคุณจำเป็นต้องติดตั้งสไตล์เดียวสำหรับองค์ประกอบทั้งหมดของหน้าเว็บพร้อมกัน เช่น ติดตั้งฟอนต์หรือข้อความรูปภาพ ด้วยวิธีนี้ ตัวเลือกสากลจะเพิ่มเติม ซึ่งตรงกับองค์ประกอบใดๆ ของหน้าเว็บ
สำหรับค่าของตัวเลือกสากล จำเป็นต้องมีอักขระทับ (*) และไวยากรณ์จะถูกโจมตี
* ( คำอธิบายของกฎสไตล์ )
ตัวเลือกแอตทริบิวต์
วลาด แมร์เซวิช
อุดมไปด้วยtegіvvіdrіznyayutsyaสำหรับієyu deієyu ในความเป็นจริงแล้วเนื่องจากคุณลักษณะได้รับชัยชนะในพวกเขา ตัวอย่างเช่นแท็ก คุณสามารถสร้างปุ่ม ช่องข้อความ และองค์ประกอบอื่นๆ ของฟอร์ม หรือเปลี่ยนค่าของแอตทริบิวต์ประเภท เมื่อเพิ่มกฎให้กับสไตล์ก่อนตัวเลือก INPUT สไตล์จะหยุดทันทีก่อนการสร้างทั้งหมดด้วยความช่วยเหลือของแท็กองค์ประกอบนี้ หากต้องการจัดรูปแบบองค์ประกอบที่คล้ายกันในแบบ gnuchko CSS ได้แนะนำตัวเลือกแอตทริบิวต์
ตัวเลือกลูก
วลาด แมร์เซวิช
องค์ประกอบลูกสาวเรียกว่าองค์ประกอบซึ่งไม่มีตรงกลางขึ้นไปตรงกลางขององค์ประกอบพ่อ เพื่อให้เข้าใจองค์ประกอบของเอกสารได้ดีขึ้น ลองวิเคราะห์รหัสขนาดเล็ก (12.1)
ตัวอย่าง 12.1 การแทรกองค์ประกอบในเอกสาร
HTML5 CSS 2.1 IE Cr Op Sa Fx
Susidni ตัวเลือก
วลาด แมร์เซวิช
Susidni เรียกว่าองค์ประกอบของหน้าเว็บหากกลิ่นเหม็นหายไปทีละรายการที่รหัสเอกสาร ลองมาดูตัวอย่างองค์ประกอบที่ใช้กัน
โลเรมอิปซัม โดลนั่งเอเมท.
แอปพลิเคชันที่มีแท็ก є เด็กตามแท็ก
เศษไวน์อยู่ตรงกลางภาชนะ วิดโปวิดโน
ทำตัวเหมือนพ่อ .
ตัวเลือกบริบท
วลาด แมร์เซวิช
ในช่วงเวลาของการสร้างหน้าเว็บ คุณมักจะต้องวางแท็กไว้ตรงกลางของแท็กอื่นๆ เพื่อให้สไตล์ของแท็กเหล่านี้ได้รับเลือกอย่างถูกต้อง เพื่อช่วยตัวเลือก เนื่องจากทำงานน้อยลงในบริบทการร้องเพลง ตัวอย่างเช่น ตั้งค่าสไตล์สำหรับแท็ก เฉพาะในกรณีที่ไวน์มี roztashovuetsya อยู่ตรงกลางภาชนะ
ด้วยวิธีนี้ คุณสามารถตั้งค่าสไตล์สำหรับแท็กหนึ่งๆ ได้ทันที เช่นเดียวกับแท็กที่อยู่ตรงกลางของแท็กอื่น
CSS (สไตล์ชีตเรียงซ้อน)- สไตล์ชีต Mova ซึ่งช่วยให้คุณแนบสไตล์ (เช่น ฟอนต์และสี) กับเอกสารที่มีโครงสร้าง (เช่น เอกสาร HTML และ XML addenda) เรียก CSS-styles เพื่อเปลี่ยนสไตล์ขององค์ประกอบของเว็บเพจและส่วนต่อประสานของคอร์ซึ่งเขียนใน ภาษา HTMLและ XHTML แต่ยังสามารถแปลงเป็นเอกสาร XML บางประเภท เช่น XML, SVG และ XUL การรวมรูปแบบการให้บริการเอกสารเข้ากับเอกสาร CSS จะทำให้การสร้างหน้าเว็บและการบำรุงรักษาไซต์ง่ายขึ้น
CSS สนับสนุนสไตล์ชีตสำหรับผู้สวมใส่เฉพาะ ดังนั้นผู้เขียนจึงสามารถปรับแต่งเอกสารของพวกเขาให้เหมาะกับเบราว์เซอร์ภาพ เครื่องช่วยฟัง เครื่องพิมพ์ สิ่งที่แนบมากับอักษรเบรลล์ สิ่งที่แนบมากับลำไส้ และอื่นๆ
สไตล์ชีตแบบเรียงซ้อนอธิบายกฎสำหรับการจัดรูปแบบองค์ประกอบด้วยพลังเพิ่มเติมและค่าที่ถูกต้องสำหรับพลังเหล่านั้น สำหรับองค์ประกอบของสกิน เป็นไปได้ที่จะเอาชนะชุดของพลังได้ พลังอื่นจะไม่ถูกเพิ่มเข้ามา
สไตล์ Goloschennya และสองส่วน: ตัวเลือกі การเปล่งเสียง. ชื่อองค์ประกอบ HTML ไม่คำนึงถึงขนาดตัวพิมพ์ ดังนั้น "h1" จึงทำงานในลักษณะเดียวกับ "H1" เสียงประกอบด้วยสองส่วน: ชื่อพลัง (เช่น สี) และค่าพลัง (สีเทา) ตัวเลือกจะบอกเบราว์เซอร์ว่าจะจัดรูปแบบองค์ประกอบใด และในบล็อกเสียง (รหัสในส่วนโค้งโค้ง) คำสั่งในการจัดรูปแบบจะถูกจัดลำดับใหม่ ซึ่งเป็นพลังของค่านั้น
ข้าว. 1. โครงสร้างเสียงพากย์ หากคุณต้องการให้ก้นชี้น้อยกว่าสองสามพาวเวอร์ที่จำเป็นสำหรับการแสดงผลเอกสาร HTML ตัวมันเองจะมีคุณสมบัติเป็นสไตล์ชีต เมื่อรวมกับสไตล์ชีตอื่นๆ (คุณลักษณะพื้นฐานอย่างหนึ่งของ CSS คือสไตล์ชีตถูกรวมเข้าด้วยกัน) กฎจะกำหนดส่วนที่เหลือของเอกสาร
ดูสไตล์ชีตแบบเรียงซ้อนและข้อมูลเฉพาะ
1. ดูสไตล์ชีต
1.1. สไตล์ชีทที่ทันสมัย
สไตล์ชีทที่ทันสมัยคือตัวเขาเอง ไฟล์ข้อความด้วย extensions.css ซึ่งใช้ตั้งค่าสไตล์ CSS ขององค์ประกอบ ไฟล์ถูกสร้างขึ้นในโปรแกรมแก้ไขโค้ด เช่นเดียวกับฝั่ง HTML ตรงกลางไฟล์ คุณสามารถมีสไตล์ได้มากขึ้นโดยไม่ต้องมีมาร์กอัป HTML สไตล์ชีตปัจจุบันเชื่อมต่อกับหน้าเว็บสำหรับแท็กเพิ่มเติม ,ขยายกลางกระจาย
. สไตล์เหล่านี้ใช้กับทุกด้านของไซต์คุณสามารถเพิ่มสไตล์ชีตให้กับหน้าเว็บสกิน โดยเพิ่มแท็กทีละแท็ก ระบุในแอตทริบิวต์ของแท็กสื่อการรับรู้ของตารางสไตล์ rel="stylesheet" ระบุประเภทของสังกัด (ใช้ได้กับสไตล์ชีต)
แอตทริบิวต์ type="text/css" ไม่ถูกผูกมัดโดยมาตรฐาน HTML5 ดังนั้นจึงอาจไม่จำเป็น ในฐานะแอตทริบิวต์ที่ไม่บังคับ จะมีการเลือกค่า type="text/css"
1.2. สไตล์การตกแต่งภายใน
สไตล์การตกแต่งภายในแพ้ภัยตัว
เอกสาร HTML จะแสดงตรงกลางแท็ก. สไตล์ภายในอาจมีความสำคัญเหนือสไตล์ภายนอก แต่ควรเสียสละสำหรับสไตล์ที่มีอยู่ (ตั้งค่าผ่านแอตทริบิวต์ style)...
1.3. สไตล์
เมื่อเราเขียน สไตล์ vbudovaniเราเขียนโค้ด CSS ในไฟล์ HTML ตรงกลางแท็กองค์ประกอบที่อยู่ด้านหลังแอตทริบิวต์สไตล์เพิ่มเติม:
ให้ความเคารพต่อข้อความทั้งหมด
รูปแบบดังกล่าวน้อยกว่าองค์ประกอบที่ได้รับกลิ่นเหม็น
1.4. @กฎการนำเข้า
@กฎการนำเข้าช่วยให้คุณสามารถปรับแต่งตารางสไตล์ที่มีอยู่ได้ เพื่อให้คำสั่ง @import ทำงาน จะต้องเปลี่ยนคำสั่งนั้นในสไตล์ชีต (ภายนอกหรือภายใน) ก่อนกฎอื่นๆ:
กฎ @import ยังใช้ได้กับแบบอักษรของเว็บด้วย:
@นำเข้า url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,ซีริลลิก);
2. ดูตัวเลือก
เลือกแสดงถึงโครงสร้างของเว็บไซต์ สำหรับความช่วยเหลือของพวกเขา กฎถูกสร้างขึ้นสำหรับการจัดรูปแบบองค์ประกอบของเว็บไซต์ ตัวเลือกสามารถเป็นองค์ประกอบ คลาสตัวระบุ และคลาสเทียมองค์ประกอบเทียม
2.1. ตัวเลือกสากล
ตอบกลับองค์ประกอบ HTML ใดๆ ตัวอย่างเช่น * (ขอบ: 0;) รีเซ็ตขั้นตอนการเรียกสำหรับองค์ประกอบทั้งหมดของไซต์ ตัวเลือกยังสามารถรวมกับคลาสหลอกหรือองค์ประกอบหลอก: *: หลัง (สไตล์ CSS), *: ทำเครื่องหมาย (สไตล์ CSS)
2.2. องค์ประกอบตัวเลือก
ตัวเลือกองค์ประกอบช่วยให้จัดรูปแบบองค์ประกอบทั้งหมดได้ ประเภทนี้ในทุกด้านของไซต์ ตัวอย่างเช่น h1 (ตระกูลแบบอักษร: Lobster, cursive;) กำหนดรูปแบบการจัดรูปแบบสำหรับส่วนหัว h1 ทั้งหมดให้เป็นรูปแบบตัวหนา
2.3. ตัวเลือกคลาส
ตัวเลือกคลาสช่วยให้คุณตั้งค่าสไตล์สำหรับองค์ประกอบหนึ่งรายการขึ้นไปที่มีชื่อคลาสเดียวกัน เช่น ตำแหน่งในพื้นที่ต่างๆ ของด้านข้างหรือด้านต่างๆ ของไซต์ ตัวอย่างเช่น เพื่อให้หัวเรื่องตรงกับคลาสพาดหัว คุณต้องเพิ่มแอตทริบิวต์ของคลาสให้กับค่าพาดหัวของแท็กที่แสดง
และใส่สไตล์ให้กับคลาสที่กำหนด สไตล์ที่สร้างขึ้นเพื่อช่วยเหลือคลาสสามารถขยายไปยังองค์ประกอบอื่นๆ ที่ไม่ได้ผูกมัดกับประเภทที่กำหนด
.headline (การแปลงข้อความ: ตัวพิมพ์ใหญ่ สี: ฟ้าอ่อน; )
หากองค์ประกอบสามารถนำมาประกอบกับคลาส ค่าจะถูกรวมเข้ากับช่องว่าง
คำแนะนำในการใช้คอมพิวเตอร์ส่วนบุคคล
2.4. ตัวเลือกตัวระบุ
ตัวเลือกตัวระบุช่วยให้สามารถจัดรูปแบบได้ หนึ่งองค์ประกอบเฉพาะ ค่ารหัสจะไม่ซ้ำกัน โดยด้านหนึ่งสามารถกำหนดขนาดได้มากกว่าหนึ่งครั้งและรับได้เพียงหนึ่งอักขระเท่านั้น ความหมายคือไม่มีความผิดในการแก้แค้น
ไม่มีเส้นขอบอื่น ๆ สำหรับผู้ที่สามารถใช้รูปแบบ id, zocrema ตัวระบุสามารถเกิดขึ้นได้จากตัวเลขเท่านั้น เริ่มจากตัวเลข เริ่มจากตัวอักษร รวมกันจากเครื่องหมายต่าง ๆ เท่านั้น ฯลฯ
ตัวระบุเฉพาะขององค์ประกอบอาจใช้ไม่ได้ผลสำหรับวัตถุประสงค์ที่แตกต่างกัน เพื่อใช้ระบุส่วนเฉพาะของเอกสารจากตัวระบุส่วนย่อยที่หลากหลาย เป็นวิธีการอ้างถึงองค์ประกอบในขณะที่เขียนสคริปต์ และเป็นวิธีการจัดรูปแบบ องค์ประกอบ CSS เฉพาะ
#แถบด้านข้าง (กว้าง: 300px; ลอย: ซ้าย; )
2.5. ตัวเลือกการตัดแต่ง
Selector nashchadkіv zastovat stylі to elementіv, scho stashirovanі ตรงกลางขององค์ประกอบคอนเทนเนอร์ ตัวอย่างเช่น ul li (การแปลงข้อความ: ตัวพิมพ์ใหญ่;) - เลือกองค์ประกอบทั้งหมดของ li ซึ่งเป็นตัวพิมพ์ใหญ่ขององค์ประกอบทั้งหมดของ ul
จำเป็นต้องจัดรูปแบบปก องค์ประกอบการร้องเพลงซึ่งองค์ประกอบต้องการคลาสสไตล์:
p.first a (สี: สีเขียว;) - สไตล์เดนมาร์ก zastosovuetsya สำหรับโพสต์ทั้งหมด, ย่อหน้าแรกในชั้นหนึ่ง;
p .first a (สี: สีเขียว;) - เพื่อเพิ่มตัวอย่าง จะมีสไตล์ ปักไว้ตรงกลางแท็กของชั้นเรียนใดๆ
ครั้งแรก (สี: สีเขียว;) - สไตล์นี้ zastosovaetsya จะเป็นบางสิ่งบางอย่าง, น่าระทึกใจตรงกลางขององค์ประกอบถัดไป, ทำเครื่องหมายโดยชั้นเรียน แรก.
2.6. ตัวเลือกลูก
องค์ประกอบลูกสาวเป็นแปรงโดยตรงเพื่อล้างแค้นองค์ประกอบโยโก คุณสามารถมีปลาทะเลชนิดหนึ่งได้ในองค์ประกอบเดียว องค์ประกอบเด็กและองค์ประกอบ batkivsky ในองค์ประกอบผิวอาจมีมากกว่าหนึ่ง ตัวเลือกลูกอนุญาตให้คุณแทรกสไตล์ขององค์ประกอบลูกเท่านั้นที่อยู่ถัดจากองค์ประกอบหลัก และไม่มีองค์ประกอบอื่นอยู่ระหว่างองค์ประกอบ ดังนั้นองค์ประกอบลูกจะไม่ซ้อนกันอีกต่อไป
ตัวอย่างเช่น p > แข็งแกร่ง - เลือกองค์ประกอบทั้งหมดที่แข็งแกร่งรวมถึงลูกขององค์ประกอบ p
2.7. พี่สาวเลือก
บลูส์ของน้องสาวแก้ต่างระหว่างองค์ประกอบเช่นพ่อที่หลับใหล ตัวเลือกองค์ประกอบน้องสาวช่วยให้คุณเลือกองค์ประกอบจากกลุ่มองค์ประกอบในระดับเดียวกัน
h1 + p - เลือกย่อหน้าแรกทั้งหมดโดยไม่มีแท็กกลาง
โดยไม่ยึดติดกับย่อหน้าอื่น
h1 ~ p - เลือกย่อหน้าทั้งหมดราวกับว่าพวกเขาเป็นพี่น้องกันโดยขยายไปยังหัวข้อ h1 และไปต่อจากย่อหน้าใหม่
2.8. ตัวเลือกแอตทริบิวต์
ตัวเลือกแอตทริบิวต์เลือกองค์ประกอบตามชื่อแอตทริบิวต์หรือค่าแอตทริบิวต์:
[แอตทริบิวต์] - องค์ประกอบทั้งหมดซึ่งควรระบุ แอตทริบิวต์ - องค์ประกอบทั้งหมด แอตทริบิวต์ alt สำหรับงานบางอย่าง
ตัวเลือก[แอตทริบิวต์] - องค์ประกอบของประเภทที่กำหนดซึ่งควรระบุโดยแอตทริบิวต์ img - รูปภาพเท่านั้นซึ่งตั้งค่าแอตทริบิวต์ alt
ตัวเลือก [attribute="value"] - องค์ประกอบของประเภทที่กำหนดเพื่อเลือกแอตทริบิวต์ ค่าเฉพาะ, img - รูปภาพทั้งหมด, ตั้งชื่อพวกเขาเพื่อล้างแค้นคำว่าดอกไม้;
ตัวเลือก[แอตทริบิวต์~="ค่า"] - องค์ประกอบที่มักจะถูกล้างแค้น ค่าที่กำหนดตัวอย่างเช่น เป็นองค์ประกอบ คลาสจำนวนหนึ่งจะได้รับผ่านการล้าง p - ย่อหน้า คลาส im'ya ของคุณลักษณะดังกล่าว ;
ตัวเลือก [แอตทริบิวต์ | = "value"] - องค์ประกอบรายการค่าแอตทริบิวต์ที่เริ่มต้นจากคำที่ระบุ p - ย่อหน้าที่เป็นของคลาสที่มีคุณลักษณะหรือเริ่มจากคุณลักษณะ
ตัวเลือก[attribute^="value"] - องค์ประกอบที่มีค่าแอตทริบิวต์ตามค่าที่ระบุ a - ค่าทั้งหมดที่ใช้ http://;
ตัวเลือก [attribute$="value"] - องค์ประกอบที่มีค่าแอตทริบิวต์ลงท้ายด้วยค่าที่ระบุ img - รูปภาพทั้งหมดในรูปแบบ png
ตัวเลือก[attribute*="value"] - องค์ประกอบ, ค่าของแอตทริบิวต์ที่จะล้างแค้นคำ, - เป็นไปได้ทั้งหมด, ตั้งชื่อสิ่งเหล่านั้นเพื่อล้างแค้น book .
2.9. ตัวเลือกระดับเทียม
Pseudo-classes มีระดับ แทบไม่ติดแท็ก HTML พวกเขาอนุญาตให้คุณส่งกฎ CSS ไปยังองค์ประกอบในเวลาที่มีการเปลี่ยนแปลงหรือทำตามกฎ คลาสหลอกแสดงลักษณะองค์ประกอบของพลังที่ก้าวหน้า:
:hover - ไม่ว่าจะมีองค์ประกอบที่จะเลื่อนเคอร์เซอร์ของเมาส์ไป;
:focus - องค์ประกอบแบบโต้ตอบซึ่งก่อนหน้านี้คุณใช้แป้นพิมพ์หรือเปิดใช้งานเมาส์
: ใช้งาน - องค์ประกอบการเปิดใช้งานโดย koristuvach;
:valid - ฟิลด์ของแบบฟอร์มซึ่งบางฟิลด์จะถูกตรวจสอบโดยเบราว์เซอร์เพื่อตรวจสอบความถูกต้องของประเภทข้อมูลที่กำหนด
: ไม่ถูกต้อง - ฟิลด์แบบฟอร์มที่ไม่ตรงกับประเภทข้อมูลที่ระบุ
: เปิดใช้งาน - ช่องแบบฟอร์มที่ใช้งานอยู่ทั้งหมด;
:disabled - ฟิลด์แบบฟอร์มถูกบล็อกเพื่อให้อยู่ในสถานะไม่ได้ใช้งาน
:in-range - ฟิลด์แบบฟอร์มค่าที่เปลี่ยนแปลงในช่วงที่กำหนด
:out-of-range - ฟิลด์แบบฟอร์มซึ่งไม่รวมค่าก่อนช่วงที่ตั้งไว้
:lang() - องค์ประกอบที่มีข้อความที่กำหนดให้ของฉัน;
:not(ตัวเลือก) - องค์ประกอบเพื่อไม่ให้พลาดตัวเลือกที่กำหนด - คลาส, ตัวระบุ, ตั้งชื่อประเภทของฟิลด์แบบฟอร์ม - :not() ;
:target - องค์ประกอบที่มีสัญลักษณ์ # ซึ่งใช้ในเอกสาร
:checked - view (เลือกด้วยชวเลข) องค์ประกอบแบบฟอร์ม
2.10. ตัวเลือกคลาสหลอกโครงสร้าง
คลาสหลอกโครงสร้างเลือกองค์ประกอบลูกได้อย่างเหมาะสมตามพารามิเตอร์ที่กำหนดให้กับแขนกลม:
:nth-child(คี่) - องค์ประกอบลูก unpaired;
:nth-child(คู่) - องค์ประกอบลูกของเด็ก;
:nth-child(3n) - ผิวองค์ประกอบที่สามในหมู่เด็ก;
:nth-child(3n+2) - เลือกองค์ประกอบสกินที่สามโดยเริ่มจากองค์ประกอบย่อยอื่น (+2);
:nth-child(n+2) - เลือกองค์ประกอบทั้งหมดโดยเริ่มจากองค์ประกอบอื่น
:nth-child(3) - เลือกองค์ประกอบลูกที่สาม
:nth-last-child() - จากรายการองค์ประกอบย่อย เลือกองค์ประกอบจากเดือนที่กำหนดของการถ่ายโอน คล้ายกับ :nth-child() แต่เริ่มจากส่วนที่เหลือที่สมุดส่งคืน
:first-child - อนุญาตให้ออกแบบองค์ประกอบลูกคนแรกของแท็กเท่านั้น
:last-child - อนุญาตให้จัดรูปแบบองค์ประกอบย่อยที่เหลือของแท็ก
:only-child - เลือกองค์ประกอบที่เป็นลูกคนเดียว
:empty - เลือกองค์ประกอบเพื่อไม่ให้พลาดองค์ประกอบย่อย
:root - เลือกองค์ประกอบที่เป็นรากของเอกสาร - องค์ประกอบ html
2.11. พิมพ์ตัวเลือก Pseudoclass โครงสร้าง
ระบุแท็กย่อยประเภทเฉพาะ:
:nth-of-type() - เลือกองค์ประกอบโดยเปรียบเทียบกับ: nth-child() โดยจำกัดประเภทขององค์ประกอบ
: first-of-type - เลือกองค์ประกอบย่อยตัวแรกของประเภทที่กำหนด
:last-of-type - เลือกองค์ประกอบสุดท้ายของประเภทที่กำหนด
:nth-last-of-type() - เลือกองค์ประกอบของประเภทที่กำหนดจากรายการองค์ประกอบขึ้นอยู่กับการโยนใหม่ที่ระบุโดยเริ่มจากจุดสิ้นสุด
:only-of-type - เลือกองค์ประกอบเดียวของประเภทที่กำหนดขององค์ประกอบลูกกลางขององค์ประกอบหลัก
2.12. ตัวเลือกองค์ประกอบหลอก
องค์ประกอบเสมือนถูกบิดเพื่อเพิ่มส่วนผสมที่สร้างขึ้นสำหรับเนื้อหาพลังงานเพิ่มเติม:
: ตัวอักษรตัวแรก - เลือกตัวอักษรตัวแรกของย่อหน้าสกิน, zastosovuetsya น้อยกว่าเพื่อบล็อกองค์ประกอบ;
:บรรทัดแรก - เลือกแถวแรกสำหรับข้อความขององค์ประกอบ zastosovuetsya เพื่อบล็อกองค์ประกอบเท่านั้น
:before - แทรกเข้าที่ซึ่งสร้างขึ้นก่อนองค์ประกอบ
:หลังจาก — เพิ่มในสิ่งที่สร้างขึ้นหลังจากองค์ประกอบ
3. การรวมกันของตัวเลือก
สำหรับการเลือกองค์ประกอบการจัดรูปแบบที่แม่นยำยิ่งขึ้น คุณสามารถเลือกชุดตัวเลือก:
img:nth-of-type(even) - เลือกรูปภาพผู้ชายทั้งหมด ข้อความทางเลือกเพื่อล้างแค้น css คำ.
4. ตัวเลือกการจัดกลุ่ม
รูปแบบเดียวและแบบเดียวกันสามารถ zastosuvat กับองค์ประกอบจำนวนมากในคราวเดียว สำหรับผู้ที่มีความจำเป็นในส่วนด้านซ้ายของเสียงเพื่อแทนที่ผู้ที่จำเป็นต้องใช้ตัวเลือก:
H1, h2, p, span (สี: มะเขือเทศ; พื้นหลัง: สีขาว; )
5. การสลายตัวและน้ำตก
Falloff และ Cascade เป็นสองแนวคิดพื้นฐานใน CSS ที่เกี่ยวข้องกันอย่างใกล้ชิด Spadkuvannya pogaєในองค์ประกอบใดและพลัง spadkovuyut ของพ่อของเขา (องค์ประกอบที่จะล้างแค้นพวกเขา) น้ำตกปรากฏอยู่ในทาง เห็นต่างสไตล์ชีตจะถูกเพิ่มลงในเอกสาร ราวกับว่ากฎที่ขัดแย้งกันถูกทบทวนทีละกฎ
5.1. ปฏิเสธ
ปฏิเสธมันเป็นกลไกสำหรับความช่วยเหลือจากเพลงแห่งพลังบางอย่างที่ส่งผ่านจากบรรพบุรุษไปยัง yogo naschadkiv ข้อมูลจำเพาะ CSS ผ่านการลดลงของอำนาจที่ไปด้านข้อความแทน เช่นสี แบบอักษร ระยะห่างระหว่างตัวอักษร ความสูงของบรรทัด สไตล์รายการ จัดข้อความ เยื้องข้อความ แปลงข้อความ การมองเห็น ขาว- ช่องว่างและคำ - ระยะห่าง สำหรับแบบอักษรที่หลากหลาย สะดวก ไม่จำเป็นต้องกำหนดขนาดของแบบอักษรและตระกูลแบบอักษรสำหรับองค์ประกอบสกินของหน้าเว็บ
พลังที่อยู่ในกระบวนการของการจัดรูปแบบบล็อกจะไม่ลดลง พื้นหลังทั้งหมด เส้นขอบ การแสดงผล ลอยและชัดเจน ความสูงและความกว้าง ระยะขอบ ความสูงต่ำสุดและสูงสุดและความกว้าง โครงร่าง โอเวอร์โฟลว์ ช่องว่างภายใน ตำแหน่ง ตกแต่งข้อความ จัดแนวตั้ง และดัชนี z
การลดลงของ Primus
เพื่อขอความช่วยเหลือ คำสำคัญสืบทอด คุณสามารถเปลี่ยนองค์ประกอบเพื่อลดไม่ว่าจะเป็นค่าขององค์ประกอบพ่อ Tse pratsyuє navit สำหรับเจ้าหน้าที่ที่เงียบสงบ yakіไม่ตกอยู่ในความคิด
วิธีกำหนดสไตล์ CSS นั้น
1) สไตล์สามารถลดลงจากองค์ประกอบ batkivsky (การลดอำนาจหรือสำหรับความหมายเพิ่มเติมของการสืบทอด);
2) สไตล์, ประดับประดาในตารางสไตล์ด้านล่าง, สไตล์, ประดับประดาในตารางด้านล่าง;
3) สามารถกำหนดสไตล์องค์ประกอบได้สูงสุดหนึ่งรายการจากสตริงที่แตกต่างกัน คุณสามารถตรวจสอบว่าสไตล์ใดถูกเลือกในโหมดผู้ค้าปลีกของเบราว์เซอร์ ซึ่งเหนือองค์ประกอบให้คลิกขวาที่เมาส์แล้วเลือกรายการ "ดูรหัส" (หรือคล้ายกัน) ทางด้านขวาจะมีอำนาจทั้งหมดที่ระบุไว้เช่นงานสำหรับองค์ประกอบนี้หรือการลดชื่อขององค์ประกอบพ่อเช่นเดียวกับไฟล์สไตล์ที่ระบุกลิ่นเหม็นและหมายเลขลำดับของแถวที่จะ รหัส.
ข้าว. 2. โหมดขายปลีกใน เบราว์เซอร์กูเกิลโครเมียม 4) ด้วยสไตล์ที่กำหนด เป็นไปได้ที่จะบิดว่าชุดค่าผสมของตัวเลือกคือตัวเลือกองค์ประกอบ คลาสเสมือนขององค์ประกอบ คลาสหรือตัวระบุองค์ประกอบ
div (เส้นขอบ: 1px solid #eee;) #wrap (ความกว้าง: 500px;) .box (float: left;) .clear (ชัดเจน: ทั้งคู่;)
5.2. น้ำตก
เรียงซ้อน- นี่คือกลไกซึ่งเป็นผลลัพธ์สุดท้ายของสถานการณ์หากองค์ประกอบมีกฎ CSS ต่างกันถึงหนึ่งองค์ประกอบ มีสามเกณฑ์ที่กำหนดลำดับของอำนาจการตั้งค่า - กฎ สิ่งสำคัญ ความเฉพาะเจาะจงคือลำดับในการรวมสไตล์ชีต
กฎ!
น้ำหนักของกฎสามารถเพิ่มหลังคีย์เวิร์ด !important ซึ่งเพิ่มถัดจากค่ายกกำลัง เช่น span (font-weight: bold!important;) กฎจะต้องวางไว้ที่ส่วนท้ายของสระก่อนที่จะปิดคันธนูโดยไม่หยุดพัก แม่ที่เปลือยกายเช่นนี้มีความสำคัญเหนือกฎอื่น ๆ กฎนี้อนุญาตให้คุณระบุค่าพลังงานและแทรกค่าใหม่สำหรับองค์ประกอบจากกลุ่มองค์ประกอบในแต่ละครั้ง หากไม่มีการเข้าถึงไฟล์โดยตรงด้วยสไตล์
ความเฉพาะเจาะจง
สำหรับกฎสกิน เบราว์เซอร์จะระบุ ความเฉพาะเจาะจงของตัวเลือกและในฐานะที่เป็นองค์ประกอบของความขัดแย้งระหว่างผู้มีอำนาจ กฎจึงถูกนำมาใช้เพื่อเคารพ ซึ่งเป็นกฎที่เฉพาะเจาะจงที่สุด ค่าความจำเพาะประกอบด้วยหลายส่วน: 0, 0, 0, 0 ความเฉพาะเจาะจงของตัวเลือกถูกกำหนดโดยอันดับการโจมตี:
สำหรับรหัสเพิ่ม 0, 1, 0, 0;
สำหรับชั้นเรียนเพิ่ม 0, 0, 1, 0;
สำหรับองค์ประกอบผิว องค์ประกอบหลอกนั้นจะถูกเพิ่ม 0, 0, 0, 1;
สำหรับสไตล์ vbudovanogo เพิ่มโดยตรงกับองค์ประกอบ - 1, 0, 0, 0;
ตัวเลือกสากลไม่สามารถเจาะจงได้
H1 (สี: ฟ้าอ่อน;) /*ความจำเพาะ 0, 0, 0, 1*/ em (สี: เงิน;) /*ความจำเพาะ 0, 0, 0, 1*/ h1 em (สี: ทอง;) /*ความจำเพาะ: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (สี: สีน้ำเงิน;) /*ความจำเพาะ: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (สี: สีเทา;) /*ความจำเพาะ 0, 0, 1, 0 */ #แถบด้านข้าง (สี: สีส้ม;) /*ความจำเพาะ 0, 1, 0, 0*/ li#แถบด้านข้าง (สี: น้ำ;) /*ความจำเพาะ: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
ผลลัพธ์ขององค์ประกอบมีกฎเหล่านั้นซึ่งมีความเฉพาะเจาะจงมากกว่า ตัวอย่างเช่น หากองค์ประกอบมีความจำเพาะสองค่าที่มีค่า 0, 0, 0, 2 และ 0, 1, 0, 1 ก็จะเล่นกฎอีกข้อหนึ่ง
ลำดับการเชื่อมต่อตาราง
คุณสามารถสร้างสำรับ โต๊ะเก่าสไตล์และเชื่อมต่อกับหน้าเว็บเดียว หากในตารางที่แตกต่างกันจะมีความแตกต่างในค่าพลังขององค์ประกอบหนึ่งจากนั้นในผลลัพธ์ก่อนองค์ประกอบกฎจะได้รับการแก้ไขซึ่งอยู่ในตารางสไตล์ซึ่งอยู่ต่ำกว่าในรายการ
เนื้อหานี้กำหนดให้กับพื้นฐานของสไตล์การออกแบบบนแหล่งข้อมูลทางอินเทอร์เน็ตสำหรับตัวเลือกเพิ่มเติม
ตัวเลือกใน CSS ถูกบิดเพื่อกำหนดเฉพาะ
องค์ประกอบในด้าน html ซึ่งคุณต้อง zastosuvat
หรือเปลี่ยนรูปแบบ CSS
ดูตัวเลือก CSS
ตัวเลือกหลังองค์ประกอบ
เพื่อให้สไตล์ CSS ที่จำเป็นเข้ามา ประเภทนี้โดยเฉพาะเนื่องจากตัวเลือกจะถูกบันทึกเป็นชื่อขององค์ประกอบ html ตัวอย่างเช่นมันเพียงพอที่จะเขียน สไตล์ที่ต้องการสำหรับหัวเรื่อง H1 หลังจากนั้นหัวเรื่องเหล่านี้จะดูจำเป็นสำหรับเรา รหัสแกนจะเป็นดังนี้:
H1(
ขนาดตัวอักษร: 11pt
}
Vipades มักใช้เมื่อต้องการหัวเรื่องในรูปแบบต่างๆ ที่นี่สำหรับการแก้ปัญหาตัวเลือกเพิ่มเติมตามคลาส
ตัวเลือกคลาส
ตัวเลือกคลาสเป็นสากลใน CSS คุณสามารถเขียน yogo ได้ดังนี้: ก่อนตั้งชื่อคลาส เราเขียนเส้นประ จากนั้นที่ส่วนโค้งโค้ง เราระบุสไตล์ที่เราต้องการ:
.สีแดง(
ตระกูลแบบอักษร: tahoma, sans-serif;
สี: แดง;
ขนาดตัวอักษร: 11pt
}
ก้นของการเลือกตัวเลือกสำหรับชั้นเรียน คุณสามารถใช้สไตล์นี้กับส่วนหัว H1 ได้ ด้าน html:
ส่วนหัวด้านข้าง
จากก้นคุณจะเห็นว่าแอตทริบิวต์ "คลาส" ติดอยู่จากชื่อที่กำหนด สไตล์ css "สีแดง".
ตัวอย่างที่สอง ที่ส่วน html เราเขียน:
Tsey มุ่งหน้าด้วยสีฟ้าเศษไปยังคลาส zastosovano vіdpovіdnyใหม่
รหัส".
สำหรับเอกสาร html จะมีลักษณะดังนี้:
กำหนดสไตล์สำหรับย่อหน้านี้
สำหรับเอกสาร CSS:
p#newstyle (สี: น้ำเงิน; ขนาดตัวอักษร: 12px;)ด้วยเหตุนี้ สำหรับย่อหน้านี้ แบบอักษรจะถูกตั้งค่าเป็นสีน้ำเงินและขนาด 12px
ตัวเลือกบริบท
ไม่มีองค์ประกอบที่จำเป็นน้อยกว่าє ตัวเลือกบริบท.
ตัวอย่างเช่น ไซต์ไวนิลต้องมีส่วนหัว "H1" แท็ก ตัวหนาดูด้วยสีแดง:H1 ตัวหนา (สี: แดง;)จามรี bachimo, หัวข้อ H1 เขียนไว้ข้างหน้าเรา, ใส่probіl, tag ตัวหนาจากนั้นเราก็มีสไตล์ คำว่า Virazity อาจเป็นดังนี้: "เนื่องจากความชัดเจนตรงกลางส่วนหัว H1 ของแท็กตัวหนา ข้อความจึงสามารถเป็นสีแดงได้"
ด้วยวิธีนี้ คุณยังสามารถแทรกสไตล์สำหรับรายการในรายการการทำเครื่องหมาย ตาราง และนำทางตรงกลาง ยิ่งกว่านั้น ด้วยการสนับสนุนในระดับที่แตกต่างกัน
ด้านก้าว -
ตัวเลือกใน css คืออะไร- คำอธิบายขององค์ประกอบนั้นหรือกลุ่มขององค์ประกอบ ซึ่งจะแสดงเบราว์เซอร์ว่าจะเลือกองค์ประกอบใดเพื่อปรับแต่งเป็นสไตล์ใหม่ มาดูตัวเลือก CSS พื้นฐานกัน
1) .X
.topic-title (สีพื้นหลัง: สีเหลือง; )ตัวเลือก CSS คลาส X. ความแตกต่างระหว่าง id และคลาสคือคลาสเดียวกันสามารถอยู่ในองค์ประกอบรูปลอกที่ด้านข้าง และ id จะไม่ซ้ำกันเสมอ คลาส varto vikoristovuvati สำหรับ zastosuvannya ที่มีลักษณะเดียวกันกับองค์ประกอบบางอย่าง
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
2) #X
#เนื้อหา (ความกว้าง: 960px; ขอบ: 0 อัตโนมัติ; )ตัวเลือก CSS พร้อมรหัส. ลงชื่อ ґrat ก่อนที่ตัวเลือก CSS X จะเลือกองค์ประกอบที่ id = X โปรดจำไว้เสมอว่ามันเป็นความผิดของรหัสที่ไม่ซ้ำกัน - มีเพียงรหัสเดียวเท่านั้นที่เป็นความผิดของรหัสที่อยู่ด้านข้าง . ดังนั้นจึงเป็นการดีที่จะชนะตัวเลือกสำหรับคลาส ชุดค่าผสมของคลาส หรือแท็กชื่อ ทิมก็ไม่น้อย ตัวเลือกโดย ID นั้นดีที่จะมีส่วนร่วมในการทดสอบอัตโนมัติ tk อนุญาตให้ vzaimodiyati ตัวเองด้วยองค์ประกอบที่จำเป็นและแม่vpevnenіst, scho ไวน์เพียงอันเดียวที่อยู่ด้านข้าง
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
3) *
* ( ขอบ: 0; ช่องว่างภายใน: 0; )ตัวเลือก CSS สำหรับองค์ประกอบทั้งหมด. สัญลักษณ์ของ zirochka เลือกองค์ประกอบทั้งหมด yakі єที่ด้านข้าง มี rozrobnikov vikorivuyut yogo จำนวนมากเพื่อตั้งค่า (ศูนย์) ค่าของระยะขอบ (ระยะขอบและช่องว่างภายใน) สำหรับองค์ประกอบทั้งหมดของหน้า ในทางปฏิบัติแล้ว Tim ก็ไม่น้อยไปกว่ากัน เป็นการดีกว่าที่จะไม่ทำงานเช่นนั้น เพื่อให้ตัวเลือก CSS ได้เปรียบเบราว์เซอร์อย่างมากโดยการจัดเรียงองค์ประกอบทั้งหมดที่อยู่ด้านข้าง
นอกจากนี้ยังสามารถบิดสัญลักษณ์ * เพื่อดูองค์ประกอบย่อยทั้งหมด:
#ส่วนหัว * ( เส้นขอบ: สีเทาทึบ 5px; )
ในก้นนี้ องค์ประกอบย่อยทั้งหมด (ครอบคลุม) ขององค์ประกอบ #header จะมองเห็นได้ และโปรดทราบว่าตัวเลือกนี้มีความสำคัญต่อเบราว์เซอร์
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
4) X
a ( สี: สีเขียว; ) ol ( ขอบซ้าย: 15px; )ประเภทตัวเลือก CSS. จะเลือกองค์ประกอบประเภทเดียวกันทั้งหมดได้อย่างไรทำไมไม่เหม็นและ id และ class? Varto บิดตัวเลือก CSS ด้านหลังประเภทองค์ประกอบ ตัวอย่างเช่น หากต้องการเลือกรายการสั่งซื้อทั้งหมดทางด้านข้าง ให้เลือก ol (...) ดังที่แสดงด้านบน
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
5) X วาย
li a ( น้ำหนักตัวอักษร: ตัวหนา; การตกแต่งข้อความ: ไม่มี; )ตัวเลือกส่วนหัว CSSหรือ ตัวเลือกลูก CSS vikoristovuetsya บ่อยที่สุด นอกจากนี้ยังจำเป็นต้องเลือกองค์ประกอบประเภทเดียวกันจากองค์ประกอบย่อยจำนวนหนึ่ง ตัวอย่างเช่น จำเป็นต้องดูพลังทั้งหมดที่อยู่ในองค์ประกอบ li ในเวลานี้ให้ปรับแต่งตัวเลือก Vykoristovuyuchi lansyuk ตัวเลือกดังกล่าว, ถามตัวเองเสมอ, และไคเป็นไปได้ที่จะเห็นองค์ประกอบนี้ vikoristovuvat ลำดับที่สั้นยิ่งขึ้นของตัวเลือก.
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
6) X+Y
div + p ( ตระกูลแบบอักษร: "Helvetica Neue", Arial, sans-serif; ขนาดตัวอักษร: 18px; )ตัวเลือกองค์ประกอบที่ชาญฉลาดปล้น เท่านั้นองค์ประกอบประเภท Y ซึ่งเหมือนกับองค์ประกอบ X ในสกินประเภทนี้ ย่อหน้าจะอยู่ถัดจาก div องค์ประกอบสกิน มีประเภทพิเศษและขนาดตัวอักษร
เบราว์เซอร์ใดบ้างที่รองรับ:
- IE7+
- ไฟร์ฟอกซ์
- โครเมียม
- ซาฟารี
- โครเมียม
7) X > Y
#content > ul ( เส้นขอบ: 1px สีเขียวทึบ; )ตัวเลือกส่วนหัว CSS. ความแตกต่างระหว่างตัวเลือก X Y і X > Y คือตัวเลือกซึ่งได้รับการพิจารณาแล้ว จะเลือกเฉพาะองค์ประกอบย่อยที่ไม่ใช่ระดับกลาง (เลือกเฉพาะป้ายกำกับโดยตรง) ตัวอย่างเช่น:
- รายการ
- ส่วนหัวขององค์ประกอบแรกในรายการ
- รายการ
- รายการ
ตัวเลือก CSS #content > ul เลือกเฉพาะ ul ซึ่งเป็นบล็อก div โดยตรงที่มี id = "container" ไม่เลือก ul ซึ่งเป็น li ตัวแรก การตรวจสอบความเร็วของตัวเลือก CSS นั้นคุ้มค่า
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
8) X ~ Y
ol ~ p ( ระยะขอบซ้าย: 10px; )ตัวเลือกองค์ประกอบน้องสาว (แม่แบบ) suvoriy nizh น้อยกว่า X + Y Vіn vibere จามรีก่อนและองค์ประกอบіnshі p, yakіไปหา ol
เบราว์เซอร์ใดบ้างที่รองรับ:
ก:ลิงก์ ( สี: สีเขียว; ) ก: เข้าชมแล้ว ( สี: สีเทา; )- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
ชั้นหลอก: ลิงค์ vikoristovuetsya สำหรับตัวเลือกที่ส่งทั้งหมด พวกเขายังไม่ได้คลิกเลย หากจำเป็นต้องร้องเพลงแบบ zastosuvat จนกว่าคุณจะได้เห็นมันแล้วคุณก็จะชนะใคร ชั้นหลอก: เยี่ยมชม.
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
10) X
ก (สี: แดง; )ตัวเลือก CSS ตามแอตทริบิวต์. สำหรับแอปพลิเคชันนี้ คุณเลือกข้อความเหล่านั้น เพื่อให้คุณสามารถตั้งค่าแอตทริบิวต์หัวเรื่อง
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
11) X
ก (สี: สีเหลือง; )เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
12) X
ก ( สี: #dfc11f; )Zirochka หมายความว่าความหมายสามารถ de-nebud ในแอตทริบิวต์ (ไม่ว่าจะเป็นส่วนหนึ่งของแอตทริบิวต์ href) ในอันดับดังกล่าวจะมีให้เลือกและคำอวยพรจากhttps://www..stijit
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
13) X
a ( พื้นหลัง: url(path/to/external/icon.png) ไม่ซ้ำ; ช่องว่างภายในซ้าย: 15px; )ในบางไซต์ ข้อความสั่งเพื่อนำไปสู่ไซต์อื่น ไอคอนขนาดเล็กพร้อมลูกศรถูกวางไว้เพื่อแสดงว่าข้อความคืออะไร กะรัต “^” เป็นสัญลักษณ์แทนซังของแถว ดังนั้น ในการเลือกแท็กทั้งหมดที่ href ขึ้นต้นด้วย http จำเป็นต้องเลือกตัวเลือก CSS ที่มีกะรัต ดังที่แสดงในตัวอย่าง
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
14) X
ก (สี: สีเขียว; )ที่นี่ viraz ปกติและสัญลักษณ์ $ ใช้เพื่อระบุจุดสิ้นสุดของแถว ที่บั้นท้ายนี้ เราพยายามอย่างเต็มที่ เช่น ขอรูปภาพที่มีนามสกุล
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
15) X
ก (สี: สีเขียว; )นี่เรางง ตัวเลือก CSS ที่อยู่เบื้องหลังแอตทริบิวต์ koristuvach. เราเพิ่มแอตทริบิวต์ data-filetype ของเราเองในการตั้งค่าสกิน:
บังคับ
ตอนนี้ ด้วยความช่วยเหลือของตัวเลือก CSS ที่แนะนำด้านบน คุณสามารถเลือกตัวเลือกทั้งหมดที่นำไปสู่รูปภาพที่มีนามสกุลใดก็ได้
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
16) X
ตัวหนอน (~) อนุญาตให้เห็นแอตทริบิวต์ sing จากรายการของแอตทริบิวต์ที่คั่นด้วยโพรบ เป็นไปได้ที่จะกำหนดแอตทริบิวต์ data-info ของคุณ ซึ่งคุณสามารถระบุการโรยคำสำคัญผ่านช่องว่างได้ ในระดับดังกล่าวคุณสามารถพูดได้ว่าข้อความถูกส่งไปยัง ovnishnim และนำไปสู่ภาพ
บังคับ
สำหรับแนวทางดังกล่าว เราสามารถเลือกองค์ประกอบที่มีคุณลักษณะที่จำเป็นร่วมกัน:
/* เลือกองค์ประกอบ แอตทริบิวต์ data-info ของค่าใดที่จะลบภายนอก */ a ( color: green; ) /* เลือกองค์ประกอบ data-info แอตทริบิวต์ของค่าใดที่จะลบภาพ */ a ( border: 2px dashed black; )
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
17) X:ตรวจสอบแล้ว
อินพุต: ตรวจสอบ ( เส้นขอบ: 3px เริ่มต้นสีดำ; )คลาสจำลองนี้มองเห็นองค์ประกอบเดียวกันน้อยกว่า เช่น ช่องทำเครื่องหมายหรือปุ่มตัวเลือก และเฉพาะเมื่อกลิ่นเหม็นอยู่ที่สถานีที่กำหนดแล้วเท่านั้น
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
18) X: หลังจาก
คลาสหลอก: ก่อนและหลัง: หลังจากอื่น corisne – กลิ่นเหม็นสร้างเนื้อหาก่อนครั้งแรกขององค์ประกอบที่เลือก
Clearfix:หลัง ( เนื้อหา: ""; จอแสดงผล: บล็อก; ชัดเจน: ทั้งสอง; การมองเห็น: ซ่อน; ขนาดตัวอักษร: 0; ความสูง: 0; ) .clearfix ( *display: inline-block; _height: 1%; )
ที่นี่เพื่อขอความช่วยเหลือจากคลาสหลอก: ติดตามกลุ่มด้วยคลาส clearfix สร้างแถวว่าง หลังจากนั้นจะถูกล้าง Tsej pіdkhіdvykoristovuєtsyaราวกับว่ามันเป็นไปไม่ได้ที่พลังงานจะล้น: ซ่อนอยู่
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
19) X: เลื่อน
div:hover ( สีพื้นหลัง: rgba(11,77,130,0.5); )Zastosovuєไปยังองค์ประกอบสไตล์เพลง หากเคอร์เซอร์ของเมาส์วางอยู่ Internet Explorer เวอร์ชันเก่ากว่า zastosovuyut: วางเมาส์ไว้จนกว่าจะถึงตำแหน่ง
A:hover ( border-bottom: 1px dotted blue; )
เบราว์เซอร์ใดบ้างที่รองรับ:
- IE 6+
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
20) X: ไม่ใช่ (ตัวเลือก)
div:not(#content) ( สี: เทา; )ชั้นหลอกไม่ได้ตัวอย่างเช่น จำเป็นต้องเลือก div ทั้งหมด ยกเว้น div ที่สามารถเป็น id="content" ได้
ตามหลักการเดียวกันนี้ คุณสามารถเลือกองค์ประกอบทั้งหมดได้ crim p:
*:ไม่ใช่(p) ( สี: สีน้ำเงิน; )
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
21) X::pseudoElement
p::บรรทัดแรก ( font-weight: bold; font-size: 24px; )องค์ประกอบหลอกสามารถบิดรูปแบบการพิมพ์เป็นชิ้นส่วนย่อยขององค์ประกอบได้ เช่น แถวแรกของย่อหน้าหรือตัวอักษรตัวแรกของคำ Zastosovuetsya น้อยที่จะบล็อกองค์ประกอบ
เลือกตัวอักษรตัวแรกของย่อหน้า:
P::อักษรตัวแรก ( font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )
เลือกแถวแรกของย่อหน้า:
P:บรรทัดแรก ( ขนาดตัวอักษร: 28px; น้ำหนักตัวอักษร: ตัวหนา; )
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า
22) X: ลูกคนแรก
ul li:ลูกคนแรก ( border-top: none; )ลูกคนแรกของชั้นหลอกเลือกเฉพาะสัมผัสแรกขององค์ประกอบ Batkiv การจัดเส้นขอบขององค์ประกอบแรกในรายการมักทำได้ยาก Tsei pseudoclass buv shche z ซีเอสเอส 1.
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า 3.5+
- แอนดรอยด์
23) X:ลูกคนสุดท้าย
ul > li:last-child ( border-bottom: none; )Pseudo-class ลูกคนสุดท้ายเลือกส่วนที่เหลือขององค์ประกอบ Batkiv ซีเอสเอส 3.
เบราว์เซอร์ใดบ้างที่รองรับ:
- IE9+ (IE8 รองรับลูกคนแรก ไม่ใช่ลูกสุดท้าย Microsoft (c))
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี
- โอเปร่า 9.6+
- แอนดรอยด์
24) X: ลูกคนเดียว
div p:only-child ( สี: สีเขียว; )ลูกคนเดียวของชั้นหลอกให้คุณเลือกองค์ประกอบเหล่านั้นราวกับว่าพวกเขาเป็นเพียงตัวพิมพ์ใหญ่ของบรรพบุรุษของคุณ
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์
- ซาฟารี 3.0+
- โอเปร่า 9.6+
- แอนดรอยด์
25)X:ลูกคนที่ n (n)
li:nth-child(3) ( สี: ดำ; )เลือกองค์ประกอบลูกหลังตัวเลข ระบุข้างพารามิเตอร์ ตัวเลือกลูกที่ nยอมรับจำนวนเต็มเป็นพารามิเตอร์ การทดสอบจะดำเนินการจาก 1 จากนั้น หากคุณต้องการเลือกรายการอื่นในรายการ ให้เลือก li:nth-child(2) มีเพียงไม่กี่ตัวเท่านั้นที่ปรากฏขึ้น ซีเอสเอส 3.
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์ 3.6+
- ซาฟารี 3.1+
- โอเปร่า 9.6+
- แอนดรอยด์ 2.1+
- iOS 2.0 ขึ้นไป
26) X:ลูกคนที่ n คนสุดท้าย(n)
li:n-ลูกคนสุดท้าย(2) ( สี: แดง; )คุณมีรายการองค์ประกอบที่ยอดเยี่ยมใน ul ได้อย่างไร และคุณต้องเลือกองค์ประกอบที่สามจากรายการหรือไม่ แทนที่จะเขียนว่า li:nth-child(109) คุณสามารถทวีตได้ ตัวเลือกที่เหลือลูกที่ n สุดท้าย. วิธีการทั้งหมดเหมือนกันกับวิธีก่อนหน้า แต่ดำเนินการตั้งแต่เริ่มต้น
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์ 3.6+
- ซาฟารี 3.1+
- โอเปร่า 9.6+
- แอนดรอยด์ 2.1+
- iOS 2.0 ขึ้นไป
27) X:ลำดับที่ n ของประเภท(n)
ul:nth-of-type(3) ( เส้นขอบ: 1px ประสีดำ; )ในทางกลับกัน มีบางรายการที่ไม่เรียงลำดับ และจำเป็นต้องตั้งค่าสไตล์ให้เหลือเพียงรายการที่สามซึ่งไม่มีรหัสเฉพาะ เพื่อแยกประเภทที่ n
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์ 3.6+
- ซาฟารี 3.1+
- โอเปร่า 9.6+
- แอนดรอยด์ 2.1+
- iOS 2.0 ขึ้นไป
28) X:nth-last-of-type(n)
ul:nth-last-of-type(3) ( เส้นขอบ: สีน้ำเงินสัน 2px; )Pseudo-class nth-last-of-type(n)การกำหนดตัวเลือกองค์ประกอบที่ n ของประเภทแรกตั้งแต่ต้น
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์ 3.6+
- ซาฟารี 3.1+
- โอเปร่า 9.6+
- แอนดรอยด์ 2.1+
- iOS 2.0 ขึ้นไป
29) X:เฉพาะประเภท
li:only-of-type ( น้ำหนักตัวอักษร: ตัวหนา; )Pseudo-class only-of-typeเลือกองค์ประกอบ วิธีทำ susides ที่ขอบขององค์ประกอบ Batkiv ตัวอย่างเช่น คุณสามารถเลือก ul ทั้งหมด แต่คุณสามารถแก้แค้นตัวเองได้เฉพาะ li เท่านั้น
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์ 3.5+
- ซาฟารี 3.1+
- โอเปร่า 9.6+
- แอนดรอยด์ 2.1+
- iOS 2.0 ขึ้นไป
30) X:คนแรกของประเภท
ul:first-of-type > li:nth-child(3) ( รูปแบบตัวอักษร: ตัวเอียง; )ประเภทหลอกชั้นหนึ่งเลือกองค์ประกอบแรกของประเภทที่กำหนด
เบราว์เซอร์ใดบ้างที่รองรับ:
- โครเมียม
- ไฟร์ฟอกซ์ 3.5+
- ซาฟารี 3.1+
- โอเปร่า 9.5+
- แอนดรอยด์ 2.1+
- iOS 2.0 ขึ้นไป
Cascading Style Sheets CSS (Cascading Style Sheets) เป็นมาตรฐานสไตล์ที่เผยแพร่โดยสมาคม W3C ภาคเรียน เรียงซ้อนชี้ให้เห็นถึงความเป็นไปได้ของสไตล์ประเภทต่างๆ และการลดลงของสไตล์โดยแท็กภายในของสไตล์ต่างๆ
CSS เป็นสาระสำคัญของภาษา ซึ่งก็คือการล้างแค้นให้กับชุดของอำนาจที่กำหนดให้กับเอกสารที่ดูเก่า ข้อกำหนด CSS กำหนดสิทธิ์ให้กับภาษาคำอธิบายสำหรับการเชื่อมโยงองค์ประกอบ HTML
CSS เป็นนามธรรมซึ่งมีรูปลักษณ์ที่ทันสมัยของเอกสารบนเว็บ
เบราว์เซอร์ทั้งหมดไม่รองรับสไตล์จริง อย่างไรก็ตาม สามารถรับรู้ได้ว่ามีสไตล์หรือไม่ ซึ่งสไตล์ที่ไม่รองรับจะถูกเพิกเฉย
คุณอาจจำเป็นต้องทราบสิ่งต่อไปนี้:
สำหรับวิธีการเพิ่มสไตล์ในเอกสารจะแบ่งสไตล์ออกเป็น 3 ประเภท
สไตล์การตกแต่งภายใน
สไตล์ภายในถูกกำหนดแอตทริบิวต์ สไตล์แท็กเฉพาะ สไตล์ภายในมีเฉพาะในแท็กองค์ประกอบเท่านั้น วิธีนี้ดูคล้ายกับ HTML แบบดั้งเดิมเล็กน้อย
ก้น
ย่อหน้าที่มีข้อความเป็นสีฟ้า
ผลลัพธ์:
ย่อหน้าที่มีข้อความเป็นสีฟ้า
ย่อหน้า h ข้อความสีแดง
อย่าเขียนทับรูปแบบภายในบ่อยเกินไป เนื่องจากเอกสารบนเว็บนี้ดูเหมือนว่าจะถูกเขียนทับโค้ด และสิ่งสำคัญคือต้องเปลี่ยนรูปลักษณ์ภายนอก
สไตล์สากล
สไตล์ CSS ส่วนกลางจะอยู่ในคอนเทนเนอร์ , ซ่อนไว้ตามสายของตนที่ภาชนะ ... .
คุณลักษณะ พิมพ์ = "ข้อความ / css"ความหนืดของรองเท้าก่อนหน้านี้สำหรับแท็ก .........
สีซีเรียสำหรับข้อความในทุกย่อหน้าของเว็บไซด์