CSS lülitid. tüüpi lülitid

, millest igaüks soovite seada kindla värvi. Kuidas seda teha? Standard CSS valijad ei sobi silte, nad näitavad parameetrid kõik plaadid korraga. Lahendus on lihtne. Määra klassi liikmed. Näiteks esimene sai div class = "red", teine - class = "sinine", kolmas - class = "roheline". Nüüd nad saab valida CSS tabelites.

Süntaks on järgmine: Näitab punkti ( "."), Millele kirjutades nime klassis. Juhtida esimese seadme, kasutage ehitus .red. Teiseks - .blue ja nii edasi.

Tähtis! Soovitatav on kasutada mõtestatud väärtused klassi atribuut. Leitakse halb vorm kasutada transliteratsiooni (nt krasiviy-Blok) või juhuslikult kombinatsioone tähed / numbrid (ojfh834871). Selles koodi, olete kindlasti saada segaduses, rääkimata raskustest, mis nägu need, kes on tegelenud projekti pärast. Parim variant - kasutada mis tahes metoodika, nagu BEM.

Eelised - suhteliselt suurt paindlikkust.

Puudused - mitmekordse elemendid võivad olla üks ja sama klassi, mis tähendab, et neid toimetanud samaaegselt. Probleem on lahendatud kasutades meetodeid, samuti pärandist eelprotsessorid. Ole kindel, et su käed vähem, sass või mõne muu eeltöötluse nad oluliselt lihtsustada tööd.

ID valijat

Selle versiooni arvamuse coders ja programmeerijad on ebaselge. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Mõned CSS õpetused ei soovita kasutada ID, sest ebatäpse taotluse nad võivad põhjustada probleeme pärandist. Kuid paljud eksperdid on aktiivselt korraldada neid kogu kujundus. Sina otsustad. # »), затем имя блока. Süntaks on järgmine: naelamärk ( "#"), siis nimi blokeerida. #red. Näiteks #red.

отличается от класса по нескольким параметрам. ID erineb klassi mitmel viisil. ID. Esiteks ei saa lehte kaks identset ID. Nad on määratud unikaalne nimi. Teiseks, selline valija on kõrgem prioriteet. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. See tähendab, et kui teil määrata seadme klassi punane ja täpsustada CSS tabelite punane taustavärvi, ning seejärel määrata see sama id sinine ja täpsustada värvi sinine, lülitub seade sinine.

Eelised - saate kontrollida spetsiifilise elemendi, ignoreerides stiile silte ja klassi.

ID и class. Puudused - lihtne eksida suur hulk ID ja klassi.

Tähtis! ID вам, в общем-то, не нужны. Kui kasutate BEM metoodika (või selle analoogid), ID teile, üldiselt ei ole vaja. See meetod hõlmab kasutamist paigutus ainulaadne klassid, et palju mugavam.

universaalne valijat

{}. Süntaks: Starlets märk ( "*") ja traksid, st {*} ...

Kasutatud anda teatavaid omadusi, kui kõik elemendid lehel. Kui see võib olla kasulik? box-sizing: border-box. Näiteks, kui soovite määrata lehekülje vara kasti suuruse muutmine: border-box. div *{}. Ei saa kasutada ainult hallata kõiki komponente dokumendi, kuid ka kontrollida kõiki lastele määratud plokk, näiteks div * {}.

Eelised - saate kontrollida suur hulk esemeid korraga.

Miinused - ei piisa paindlik võimalus. Lisaks kasutavad seda valijat, mõnel juhul aeglustada lehekülg tööd.

atribuudid

Tee võimalik kontrollida elemendi eriomadus. Näiteks sul on mitu sisendit silte erineva atribuuditüüpi. Üks neist - tekst, teine - salasõna, kolmas - number. Loomulikult saab määrata iga klassi või ID, kuid see ei ole alati mugav. CSS valijad atribuutide abil on võimalik määrata väärtused teatud silte maksimaalse täpsusega. Näiteks nii:

input [type = 'teksti'] {}

See valija vali kõik tunnustel tüüpi teksti sisestada.

Tööriist on üsna paindlik ja seda saab kasutada mis tahes silte, kus võib esineda atribuute. Aga see pole veel kõik! CSS spetsifikatsioon on võime kontrollida elemente veelgi mugavust!

Kujutage ette, et teie leht on sisend atribuut kohatäide = "Sisesta nimi" ja sisend kohatäide = "Sisesta parool". Nad võivad olla ka valitud kasutades valijat! Selleks, kasutage järgmist struktuuri:

input [kohahoidjat = "Sisesta nimi"] {} või sisendi [kohahoidjat = "Sisesta parool"]

Võibolla paindlikumaks töö atribuute. Oletame, et teil on mitmeid silte sarnaste omaduste pealkiri (näiteks "Kaspia" ja "Kaspia"). Et valida nii, kasutada järgmisi valikuid:

[Pealkirjas * = "Kaspiisk"]

CSS valib kõik üksused, mille nimetuse on sümbolid "Kaspia", st. E. ja "Kaspia" ja "Kaspia".

Võite ka valida silte, mis algavad teatud iseloomu atribuudid:

[Title ^ = "täht"] {}

või lõpetada nende:

[Pealkirjas $ = "right märk"] {}.

Eelised - maksimaalset paindlikkust. Saate valida olemasolevate leheelemente ilma messing klassi.

Puudused - kasutatud suhteliselt harva, ainult erijuhtudel. Paljud veebidisainerid eelistavad metoodika, kuna punkt klass on lihtsam kui korraldada arvukalt nurksulgudes ja märke "võrdne". Lisaks need valijad ei tööta Internet Explorer 7 ja allpool. Kuid kes on nüüd vaja vana Internet Explorer?

pseudo-klassi lülitid

Tähistab pseudo-staatuse element. Näiteks ,: hover - mis juhtub osa lehest, kui sa hõljuma ,: külastanud - külastatava link. See hõlmab ka selliseid elemente nagu: esimese lapse ja: viimase lapse.

Seda tüüpi valijat kasutatakse aktiivselt kaasaegse paigutus, sest tänu sellele saab teha lehel "live" ilma JavaScripti. Näiteks soovite veenduda, et kui viite kursori nuppu, millel on klassi btn oma värvi muutnud. Selleks me kasutame järgmise struktuuriga:

.btn: hõljutamine {

background-color: red;

}

Ilu saab määrata põhiomadused nuppu, üleminek vara, näiteks 0.5s - sel juhul nupp ei punastama koheselt jooksul ja pool sekundit.

Voorused - on laialdaselt kasutatav "taassünd" lehekülgi. Lihtne kasutada.

Puudused - nad ei ole. See on tõesti mugav tool. Kuid kogenematu veebidisainerid võib eksida arvukus pseudo-klassi. Probleem on lahendatud uuring ja praktika.

pseudo-selektoreid

"Pseudo" - need on lehe osi, mis ei ole HTML, kuid nad ikka saab hallata. Sa ei saanud aru? See on palju lihtsam kui tundub. Näiteks soovite teha esimene täht string suur ja punane, jättes muud väikesed ja must tekst. Muidugi, võib järeldada, et kirja span teatud klassi, kuid see on pikk ja igav. See on palju lihtsam valida kogu lõikes ja kasutada pseudo :: esimese kirja. See annab võimaluse kontrollida välimus esimene täht.

On üsna suur hulk pseudo-elemente. Nimekiri neist ühes artiklis on ebatõenäoline, et õnnestub. Võite leida asjakohast teavet oma lemmik otsingumootor.

Eelised - tagada paindlikkus, et välimuse lehel.

Puudused - uued neile on sageli segaduses. Paljud valikud seda tüüpi töö ainult teatud brauserites.

Kokkuvõtteks

Valija - võimas vahend dokumendi termostaat. Tänu temale saab valida iga osa leht (seal on isegi ainult osaliselt). Kindlasti õppida kõiki võimalusi või isegi kirjutada neid. See on eriti oluline, kui teil luua keerukaid lehekülgi kaasaegne disain ja palju interaktiivseid elemente.