CSS keurders. tipes keurders

, elk van wat jy wil 'n spesifieke kleur te stel. Hoe om dit te doen? Standard CSS keurders is nie geskik vir etikette, hulle die parameters vir al die blokke te dui op 'n keer. Die oplossing is eenvoudig. Toewys klaslede. Byvoorbeeld, die eerste ontvang div class = "rooi", tweede - klas = 'blou', derde - class = "groen". Nou kan hulle gekies word met behulp van CSS tafels.

Die sintaksis is soos volg: Dui 'n punt (. ""), Gevolg deur die skryf van die naam van die klas. Om die eerste eenheid te bestuur, gebruik die konstruksie .red. Tweede - .blue en so aan.

Belangrik! Dit word aanbeveel om betekenisvolle waardes van die klas kenmerk te gebruik. Dit word beskou as slegte vorm om transliterasie (bv krasiviy-blok) of ewekansige kombinasies van letters / nommers (ojfh834871) gebruik. In hierdie kode, is jy gebind deurmekaar te kry, nie om die probleme wat in die gesig staar diegene wat betrokke sal wees in die projek nadat jy noem. Die beste opsie - om enige metode gebruik, soos BEM.

Voordele - relatief hoë buigsaamheid.

Nadele - die verskeie elemente kan een en dieselfde klas, wat beteken dat hulle gelyktydig sal geredigeer wees. Die probleem is opgelos met behulp van die metode sowel as erfenis van preprocessors. Maak seker dat jy jou hande minder, Sass of 'n ander voorverwerker kry, hulle die werk grootliks vereenvoudig.

ID selector

Oor hierdie weergawe mening coders en programmeerders is dubbelsinnig. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Sommige CSS tutoriale nie die gebruik van ID beveel, want in onakkurate aansoek kan hulle probleme met erfenis veroorsaak. Daar is egter baie kenners is aktief rangskik hulle in die hele uitleg. Jy besluit. # »), затем имя блока. Die sintaksis is soos volg: die pond teken ( "#"), dan is die naam van die blok. #red. Byvoorbeeld, #red.

отличается от класса по нескольким параметрам. ID is anders as die klas op verskeie maniere. ID. In die eerste plek kan die bladsy nie twee identiese ID wees. Hulle is 'n unieke naam opgedra. In die tweede plek, soos 'n keurder het 'n hoër prioriteit. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Dit beteken dat as jy 'n eenheid klas rooi spesifiseer en spesifiseer in CSS tafels rooi agtergrond, en dan wys dit dieselfde id blou en spesifiseer die kleur blou, sal die eenheid blou draai.

Voordele - jy kan die spesifieke element te beheer, te ignoreer style van etikette en klasse.

ID и class. Nadele - maklik om verlore te raak in 'n groot aantal van ID en klas.

Belangrik! ID вам, в общем-то, не нужны. As jy 'BEM metode (of sy analoë), ID vir julle, in die algemeen, is nie nodig nie. Hierdie tegniek behels die gebruik van uitleg unieke klasse wat baie meer gerieflik.

universele selector

{}. Sintaksis: starlets teken ( "*") en draadjies, dit wil sê, {*} ...

Gebruik om sekere eienskappe keer al die elemente van die bladsy wys. Wanneer hierdie nuttige kan wees? box-sizing: border-box. Byvoorbeeld, as jy wil hê dat die bladsy eiendom boks-grootte stel: grens-box. div *{}. Kan nie net gebruik word om al die komponente van die dokument, te bestuur nie, maar ook aan al die kinders van die gespesifiseerde blok, byvoorbeeld beheer, div * {}.

Voordele - jy kan 'n groot aantal items te beheer op 'n slag.

Nadele - nie genoeg buigsame opsie. Daarbenewens het die gebruik van hierdie selector, in sommige gevalle vertraag die bladsy werk.

deur eienskappe

Maak dit moontlik om die element te beheer met 'n spesifieke kenmerk. Byvoorbeeld, jy het 'n aantal insette tags met 'n ander kenmerk tipe. Een van hulle - teks, die tweede - wagwoord, die derde - nommer. Natuurlik, kan jy elke klas of ID stel, maar dit is nie altyd maklik. CSS keurders van eienskappe maak dit moontlik om waardes spesifiseer vir sekere etikette met 'n maksimum akkuraatheid. Byvoorbeeld, soos volg:

insette [ 'teks' type =] {}

Hierdie selector sal al die eienskappe met die tipe insette teks te kies.

Die instrument is redelik buigsaam en kan gebruik word met enige van die etikette, waarin daar eienskappe kan wees. Maar dis nie al nie! Die CSS spesifikasie het die vermoë om die elemente te beheer met nog meer gemak!

Stel jou voor dat jou bladsy het insette met die kenmerk plekhouer = "Tik 'n naam" en insette plekhouer = "Tik wagwoord". Hulle kan ook gekies word met behulp van die selector! Om dit te doen, gebruik die volgende struktuur:

insette [plekhouer = "Tik die naam"] {} of insette [plekhouer = "Tik die wagwoord"]

Miskien meer buigsaam werk met eienskappe. Kom ons sê jy het 'n aantal etikette met 'n soortgelyke eienskappe titel (byvoorbeeld, "Kaspiese" en "Kaspiese"). Om beide te kies, gebruik die volgende keuses:

[Titel * = "Kaspiysk"]

CSS sal al die items in die titel van wat daar is simbole van "Kaspiese", dit wil sê. E., En "Kaspiese" en "Kaspiese" kies.

Jy kan ook etikette wat begin met 'n sekere karakter eienskappe kies:

[Titel ^ = "karakter wat jy wil"] {}

of beëindig hulle:

[Titel $ = "reg karakter"] {}.

Voordele - maksimum buigsaamheid. Jy kan enige bestaande bladsy elemente te kies sonder geknoei met die klasse.

Nadele - gebruik relatief selde, net in spesifieke gevalle. Baie web ontwerpers verkies om metodologie, aangesien die punt klas is makliker as om talle reël vierkantige hakies en tekens "gelyke". Daarbenewens het hierdie keurders nie werk in Internet Explorer weergawes 7 en onder. Maar wat is nou nodig die ou Internet Explorer?

pseudo-klas keurders

Dui op 'n pseudo-status element. Byvoorbeeld ,: hover - wat gebeur met die deel van die bladsy as jy hover ,: besoek - die besoek skakel. Dit sluit ook elemente soos: eerste-kind en: laaste kind.

Hierdie tipe van selector is aktief gebruik in moderne uitleg, want te danke aan dit kan jy 'n bladsy "live" te maak sonder die gebruik van JavaScript. Byvoorbeeld, wil jy om seker te maak dat wanneer jy hover oor die knoppie met die klas van BTN sy kleur verander. Om dit te doen, gebruik ons die volgende struktuur:

.btn: hover {

agtergrond-kleur: rooi,

}

Skoonheid kan gespesifiseer word in die basiese eienskappe van die knoppie, die oorgang eiendom, byvoorbeeld, 0.5s - in hierdie geval, die knoppie sal nie onmiddellik bloos, en binne 'n halwe sekonde.

Deugde - is wyd gebruik word vir die "herlewing" van bladsye. Maklik om te gebruik.

Nadele - hulle is nie. Dit is werklik 'n handige hulpmiddel. Dit kan egter onervare web ontwerpers verdwaal in die oorvloed van pseudo-klasse. Die probleem is opgelos studie en praktyk.

pseudo-keurders

"Pseudo" - dit is die dele van die bladsy wat nie in HTML, maar hulle kan nog steeds bestuur word. Jy het dit nie verstaan? Dit is baie makliker as wat dit lyk. Byvoorbeeld, jy wil die eerste letter in die string groot en rooi maak, die verlaat van die ander klein en swart teks. Natuurlik, kan dit afgelei word dat brief in 'n span met 'n sekere klas, maar dit is 'n lang en vervelige. Dit is baie makliker om die hele paragraaf te kies en te gebruik pseudo :: eerste-letter. Dit gee die geleentheid om die voorkoms van die eerste brief te beheer.

Daar is nogal 'n groot aantal pseudo-elemente. Lys hulle in 'n enkele artikel is onwaarskynlik om te slaag. Jy kan die betrokke inligting in jou gunsteling soekenjin vind.

Voordele - bied die buigsaamheid om die voorkoms van die bladsy pas.

Nadele - nuwe hulle is dikwels verwar. Baie keuses van hierdie tipe van werk net in sekere blaaiers.

om op te som

Selector - 'n kragtige instrument vir die dokument vloei beheer. Te danke aan hom, kan jy elke enkele komponent van die bladsy kies (daar is selfs net gedeeltelik). Maak seker dat jy al die opsies te leer beskikbaar, of selfs skryf dit neer. Dit is veral belangrik as jy komplekse bladsye met 'n moderne ontwerp en baie interaktiewe elemente te skep.