CSS valitsimet. tyyppisiä valitsimet

, joista jokainen haluat määrittää tietyn värin. Miten se tehdään? CSS-valitsimet eivät sovellu tunnisteita, ne osoittavat parametrit kaikki lohkot kerralla. Ratkaisu on yksinkertainen. Määritä luokan jäseniä. Esimerkiksi, ensimmäinen vastaanotettu div class = 'punainen', toinen - class = 'sininen', kolmas - class = 'vihreä'. Nyt ne voidaan valita CSS taulukoita.

Syntaksi on seuraava: Osoittaa piste ( ""), sen jälkeen kirjoittamalla luokan nimi. Hallita ensimmäinen yksikkö, käyttävät rakentamisen .red. Toinen - .blue ja niin edelleen.

Tärkeää! On suositeltavaa käyttää mielekästä arvoja luokan määrite. Sitä pidetään epäkohteliasta käyttää translitterointia (esim krasiviy-Blok) tai satunnaisia yhdistelmiä numeroita / kirjaimia (ojfh834871). Tässä koodin, sinun on pakko hämmentyä, puhumattakaan vaikeudet, joita kohtaavat ne, jotka saadaan päälle projektin jälkeen. Paras vaihtoehto - käyttää mitään menetelmää, kuten BEM.

Edut - suhteellisen suuri joustavuus.

Haitat - useita elementit voivat olla yksi ja sama luokka, mikä tarkoittaa, että ne voidaan muokata samanaikaisesti. Ongelma on ratkaistu käyttäen menetelmää, sekä perintöosasta esiprosessorit. Varmista, että saat kätesi vähemmän, Sass tai jokin muu esikäsittelijään ne yksinkertaistavat työtä.

ID-valitsin

Tästä versiosta lausunnon kooderit ja ohjelmoijat ovat moniselitteisiä. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Jotkut CSS opetusohjelmia eivät suosittele tunnus, koska virheellisesti asian ne voivat aiheuttaa ongelmia perintö. Kuitenkin monet asiantuntijat ovat aktiivisesti järjestää niitä koko asettelua. Sinä päätät. # »), затем имя блока. Syntaksi on seuraava: ruutumerkillä ( "#"), sitten nimi lohkon. #red. Esimerkiksi, #red.

отличается от класса по нескольким параметрам. ID eroaa kärkisijoille useilla tavoilla. ID. Ensinnäkin sivu voi olla kahta samanlaista tunnus. Ne annetaan yksilöllinen nimi. Toiseksi tällainen valitsin on korkeampi prioriteetti. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Tämä tarkoittaa, että jos määrittää osuussarja punainen ja ilmoitettava CSS taulukoiden punaisella taustaväri, ja sitten määrittää se sama tunnus sininen ja määritä väri sininen, laite muuttuu siniseksi.

Edut - voit ohjata tiettyyn osaan, välittämättä tyylejä tageja ja luokat.

ID и class. Haitat - helppo eksyä useita ID ja luokan.

Tärkeää! ID вам, в общем-то, не нужны. Jos käytät BEM menetelmiä (tai sen kaltaisten), ID sinulle, yleensä ei tarvita. Tässä tekniikassa käytetään asettelun ainutlaatuista luokkaa, että paljon kätevämpää.

yleisvalitsimeen

{}. Syntaksi: tähtöset sign ( "*") ja henkselit, eli {*} ...

Käytettävä määrättäessä tiettyjä ominaisuuksia, kun kaikki sivun elementtejä. Kun tämä voi olla hyödyllistä? box-sizing: border-box. Jos esimerkiksi haluat määrittää sivun kiinteistön box-mitoitus: border-box. div *{}. Ei voi käyttää vain hallita kaikkia osia asiakirjasta, vaan myös hallita kaikkia lapsia määritetyn lohkon, esimerkiksi div * {}.

Edut - voit hallita useita kohteita kerrallaan.

Miinukset - ole tarpeeksi joustava vaihtoehto. Lisäksi käyttö valitsin, joissakin tapauksissa hidastaa sivun työhön.

ominaisuuksien

Mahdollistavat hallita elementin erityisen laatunsa. Esimerkiksi, sinulla on useita input tunnisteet eri attribuuttityyppiä. Yksi heistä - tekstiä, toinen - salasanan, kolmas - numeron. Tietenkin voit asettaa kunkin luokan tai tunnus, mutta se ei ole aina mukavaa. CSS-valitsimet määritteiden avulla on mahdollista määritellä arvot tietyille tunnisteet mahdollisimman tarkasti. Esimerkiksi näin:

input [type = 'text'] {}

Tämä valitsin valitsee kaikki attribuutteja tyypin syöttää tekstiä.

Työkalu on melko joustava ja sitä voidaan käyttää minkä tahansa tunnisteet, joissa voi olla ominaisuuksia. Eikä siinä vielä kaikki! CSS spesifikaation on kyky hallita elementtejä vieläkin enemmän mukavuutta!

Kuvittele, että sivulla on tulon määrite paikkamerkki = "Anna nimi" ja syötä paikkamerkki = "Anna salasana". Ne voidaan myös valita käyttämällä valitsimen! Voit tehdä tämän, käytä seuraavaa rakennetta:

input [paikkamerkki = "Anna nimi"] {} tai tulo [paikkamerkki = "Syötä salasana"]

Ehkä enemmän joustavampia attribuutteja. Oletetaan, että on useita tunnisteita, joilla on samanlaiset attribuutteja otsikko (esimerkiksi "Caspian" ja "Caspian"). Voit valita molemmat, käytä seuraavat valinnat:

[Otsikko * = "Kaspijsk"]

CSS valitsee kaikki kohteet otsikossa joita on symboloivat "Caspian" eli. E., ja "Caspian" ja "Caspian".

Voit myös valita tunnisteet, jotka alkavat tietyllä merkin määritteet:

[Title ^ = "merkin kohdalle"] {}

tai niiden lopettamisesta:

[Nimi $ = "oikea merkki"] {}.

Edut - mahdollisimman joustavasti. Voit valita minkä tahansa olemassa oleva sivuelementtejä sotkematta kanssa luokissa.

Haitat - käytetyt suhteellisen harvoin, vain erityistapauksissa. Monet web-suunnittelijat haluavat menetelmän, koska kohta luokka on helpompaa kuin järjestää lukuisia hakasulkeissa ja merkkejä "yhtäläinen". Lisäksi nämä valitsimet eivät toimi Internet Explorer versiot 7 ja alla. Kuitenkin jotka ovat nyt tarvitsevat vanhoja Internet Explorer?

näennäisluokka valitsimet

Merkitsee pseudo-asema elementti. Esimerkiksi ,: hääriä - mitä tapahtuu sivun osa, kun viet ,: käynyt - valitun linkin. Se sisältää myös elementtejä, kuten: first-child ja: viimeksi lapsi.

Tämäntyyppinen valitsimen aktiivisesti käytetään nykyaikaisia ulkoasu, koska sen ansiosta voit tehdä sivun "livenä" ilman JavaScriptiä. Esimerkiksi haluat varmistaa, että kun viet yli painiketta, jossa on luokan btn sen väri muuttui. Voit tehdä tämän, käytämme seuraavaa rakennetta:

.btn: hover {

background-color: red;

}

Kauneutta voidaan määritellä perusominaisuudet painiketta siirtyminen ominaisuus, esimerkiksi, 0,5 s - tässä tapauksessa painiketta ei punastua välittömästi, ja sisällä puoli toinen.

Hyveet - käytetään laajasti "herätys" sivuja. Helppokäyttöinen.

Haitat - ne eivät ole. Tämä on todella kätevä työkalu. Kuitenkin kokematon web-suunnittelijat voivat eksyä runsaasti näennäisluokkia. Ongelma on ratkaistu tutkimuksen ja käytännön.

pseudo-valitsimet

"Pseudo" - nämä ovat osia sivun, jotka eivät ole HTML, mutta silti voidaan hallita. Et ymmärtänyt? Se on paljon helpompaa kuin miltä se näyttää. Esimerkiksi haluat tehdä ensimmäinen kirjain jono iso ja punainen, jättäen muut pienet ja mustaa tekstiä. Tietenkin voidaan todeta, että kirje span tietyllä luokkaan, mutta se on pitkä ja tylsä. On paljon helpompaa valita koko kappaleen ja käyttää pseudo :: ensimmäinen-kirjain. Se antaa mahdollisuuden valvoa ulkonäkö ensimmäinen kirjain.

On varsin suuri määrä pseudo-elementtejä. Luetella niitä yhdessä artikkelissa ei todennäköisesti onnistu. Löydät tarvittavat tiedot suosikki hakukoneen.

Edut - tarjoavat joustavuutta muokata ulkoasua sivun.

Haitat - uudet niihin sekoitetaan usein. Monet valinnat tämän tyyppistä työtä vain tietyissä selaimissa.

Yhteenvetona

Valitsin - tehokas työkalu asiakirjan virtauksen ohjaus. Hänen ansiostaan voidaan valita jokainen osa sivun (ei edes osittain). Muista oppia kaikki vaihtoehdot, tai jopa kirjoittaa ne muistiin. Tämä on erityisen tärkeää, jos luot monimutkaisia sivuja, joissa on moderni sisustus ja paljon interaktiivisia elementtejä.