Kā izmantot ID atlasītāju CSS
Dažās pēdējās pamācībās mēs apspriedām divus no trim CSS noteikumu veidiem. Pirmais veids ir HTML atlasītājs, kas balstās uz atbilstošā HTML taga stilu un kontrolē to. Otrais tips ir klases atlasītājs, kas darbojas kā vispārējs stils, ko var pielietot jebkuram tīmekļa lapas elementam.

Tagad ir laiks apspriest trešo CSS noteikumu tipu, ko sauc par ID atlasītāju. Tāpat kā klases atlasītāju, ID atlasītāju var lietot jebkuram elementam tīmekļa vietnē. Tomēr tas ir domāts lietošanai tikai vienu reizi lapā. Tas padara ID atlasītāju par ļoti noderīgu dinamiskajam HTML un JavaScript. Teorētiski, ja ID atlasītāju vienā lapā izmantojat vairāk nekā vienu reizi, tīmekļa pārlūks ignorē nākamos. Tomēr ne vienmēr tas tā ir. Ir ļoti grūti paļauties uz tīmekļa pārlūkprogrammu paredzamību. Tāpēc, izvēloties izmantot ID selektoru, esiet piesardzīgs, lai to lietotu tikai vienreiz. Apskatīsim piemēru.

Pamata kods




. . .

Piemērs




. . .



ID atlasītājs
Tagu iekšpusē jūs pamanīsit, ka ID atlasītājs sākas ar hash simbolu (#) un tam seko nosaukums, kuru piešķirat ID atlasītājam. Tāpat kā klases atlasītāju, jūs varat izmantot jebkuru vēlamo vārdu, bet vislabāk, ja nosaukums norāda, kam tiks izmantots ID atlasītājs. Šajā piemērā mēs to izmantojam, lai identificētu īpašu teksta sadaļu.

{īpašums: vērtība;}
Arī tagu iekšpusē ID atlasītājam seko viens vai vairāki īpašuma vērtības pāri, kas izvietoti starp cirtainiem iekavām. Šie īpašuma un vērtības pāri nosaka stila īpašības. Piemērā rindkopai ar īpašnieka_teksta ID atlasītāju teksts būs sarkanā krāsā.

. . .
Ja Web lapas pamattekstā izmantosit ID atlasītāju, atvēršanas HTML tagā izmantosit atribūtu id. ID atribūta vērtība ir unikāls nosaukums, kas piešķirts ID atlasītājam, šajā gadījumā "special_text". (id = "vērtība") Tādējādi atlasītājs “savieno” stilu ar to vienu HTML tagu, kuram vēlaties piemērot stilu. Iepriekš minētajā piemērā ID atlasītājs tiks ievietots tikai vienā

tags tīmekļa vietnē. Citos HTML tagos vietnē nedrīkst būt ID atlasītāja, kas atrodas sākuma tagā.





Video Instrukcijas: PHP for Web Development (Maijs 2024).