CSS3ren aldaketa garrantzitsuak ulertu
CSS2 eta CSS3ren arteko desberdintasun handiena CSS3 zatitu egin da atal desberdinetan, modulu izenez ezagutzen direnak. Modulu hauetako bakoitza W3C bidez egiten ari da gomendio prozesuaren fase guztietan. Prozesu honek erraztu egin du CSS3 hainbat piezetan arduradunek hainbat fabrikatzaileek onartu eta inplementatu ahal izatea.
Prozesu hau CSS2-rekin gertatu zenarekin gertatu zenean, dena dokumentu bakar batera bidaltzen bazen Cascading Style Sheets informazio guztia barnean, gomendioa hautsi egin zen abantailak txikiagoak eta banakakoak bihurtuz. Modulu bakoitza banan-banan egiten ari denez, CSS3 moduluentzako arakatzailearen laguntza askoz zabalagoa da.
Esposizio berri eta aldakorreko bezala, ziurtatu zure CSS3 orriak probatu ahal dituzun nabigatzaile eta sistema eragile guztietan. Gogoan izan, helburua ez da arakatzaile guztietan berdin itxura duten web orriak sortzeko, baizik eta erabiltzen dituzun estiloak, CSS3 estiloak barne, ongi babesten dituzten nabigatzaileek itxura ona dutela eta atzera egiten dutela nabigatzaile zaharrak hobeto biltzeko. ez egin.
CSS3 hautagailu berriak
CSS3 modu berrien sorta bat eskaintzen du CSS arauak CSS hautatzaile berriekin idazteko, baita konbinazio berri bat eta sasi elementu berri batzuk ere.
Hiru atributuen hautagailu berriak:
- Atributua elementu zehatz batekin bat datorrenean hasten da [foo ^ = "bar"] Elementuak "bar" batekin hasten den foo izeneko atributua du.
- Atributu bukaerak elementu zehatzarekin bat etortzen dira [foo $ = "bar"] Elementuak "bar" batekin amaitzen den foo izeneko atributua du.
- Atributuaren elementu partekatua dauka [foo * = "barra"] Elementuak "barra" katea duen foo izeneko atributu bat du.
16 pseudo klase berriak:
- : erro
- Dokumentuaren erroko elementua. HTMLan hau beti dago.
- : n-ume (n)
- Erabili hau haurraren elementuak zehazteko edo erabili aldagaiak bat datozen txandakatzeko.
- : n-azken-ume (n)
- Zenbakizko haurren elementuekin bat datozen azkenekoz kontatuta.
- : n-of-mota (n)
- Elkartu ahizpa elementuekin izen berarekin dokumentu zuhaitzaren aurretik.
- : n-azken-of-mota (n)
- Konbinatu beheko zerrendan izen bereko elementuekin.
- : azken-alaben
- Elkartu gurasoaren azken haurraren elementua.
- : lehen-motaren
- Lotu lehenengo motako lehen anaia elementua.
- : azken-motaren-
- Zenbakizko azken elementuarekin lotu.
- : bakarrik eta seme-alaben
- Parekatu gurasoaren ume bakarra den elementua.
- : soilik motako of-
- Bere motako bakarra den elementua bat dator.
- : Hutsik
- Haurritu gabeko elementua lotu (testu-nodoak barne).
- : xede
- URI erreferentziaren helburua den elementu bat lotzea.
- : gaituta
- Elementua bat dator gaituta dagoenean.
- :desgaituta
- Elementua lotzen denean desgaituta dago.
- : hautatuta
- Elementua hautatuta dagoenean (irrati botoia edo kontrol-laukia).
- : Ez (k)
- Elementuak ez datoz bat selektibo sinpleekin.
Konbinazio berri bat:
- elementA ~ elementB
- Partekatzen denean elementB elementu baten ondoren nonbait jarraitzen du, ez nahitaez berehala.
Propietate berriak
CSS3 ere CSS propietate berri batzuk sartu ditu. Propietate horietako asko ikusizko estiloak sortuko lirateke, litekeena da Photoshop bezalako programa grafikoarekin erlazionatzea. Horietako batzuk, ertz-erradioa edo kutxa-itzala bezalakoak, sarrera izan zutenetik CSS3 bada. Beste batzuk, Flexbox edo are CSS Grid bezalakoak dira oraindik ere CSS3 irudiak sarritan kontuan hartzen dituzten estilo berriak.
CSS3n, kutxako eredua ez da aldatu. Baina zure koadroko atzeko plano eta ertzak estiloak lagun ditzakezun estilo estilo berrien sorta bat dago.
Atzeko plano anizkoitza
Atzeko planoko irudia, atzeko planoaren posizioa eta atzeko planoko errepikapena erabiliz, atzeko planoko irudiak hainbat alda ditzakezu laukian bata bestearen gainean geruzatuta. Lehenengo irudia erabiltzaileak hurbilen dagoen geruza da, atzean margotu diren ondorengoak. Atzeko planoko kolorea badaude, irudi geruzen azpian margotzen da.
Atzeko planoaren estiloaren propietate berriak
Atzeko planoko propietate berriak ere badira CSS3n.
- hondo-clip
- Propietate honek atzeko planoko irudia nola ebaki behar den definitzen du. Lehenetsia mugaren koadroa da, baina betegarria edo edukia kutxa daiteke.
- hondo-jatorria
- Propietate honek atzeko planoa betegarria den lekuetan, ertz-kutxan edo edukien koadroan zehazten du.
- hondo-tamaina
- Propietate honek atzeko planoko irudia adierazteko aukera ematen du. Irudi txikiagoak orrialdera egokitzeko aukera ematen du.
Existitzen den atzeko estiloaren propietateen aldaketak
Dagoen existentziaren atzeko planoko estiloen propietate batzuk ere badira:
- background-errepikatu
- Bi balio berri daude jabetza honetarako: espazioa eta biribila. Espazio-espazioak fitxa mosaiko berdinean kutxan uniformeki moztu gabe. Biribilek atzeko planoko irudia berrezartzen dute, koadro osoak hainbat aldiz margotzeko.
- hondo-eranskin
- "Tokiko" balio berria gehitzen da, atzealdea elementuaren edukia mugituko baita elementu honek korritzeko barra bat duenean.
- hondo
- Atzeko planoko propietateak tamaina eta jatorri propietateak gehitzen ditu.
CSS3 ertzeko propietateak
CSS3 ertzetan erabil daitezkeen estiloak izan daitezke (solidoak, bikoitzak, marratuak, etab.) Edo irudi bat izan daiteke. Plus, CSS3 txoko biribilduak sortzeko gaitasuna dakar. Irudiaren ertzak interesgarriak dira lau ertzetako irudia sortzen duzun eta gero CSSa zure mugen mugara nola aplikatu.
Estilo ertza estilo berria
Mugarik gabeko zenbait propietate daude CSS3n:
- border-radius
- ertz-goi-eskuin-erradioa , ertz-behe-eskuin-erradioa , ertz-behe-ezker-erradioa , ertz-goi-ezker-erradioa
- Propietate hauek ertzak biribildu ditzakezu mugetan.
- mugatik-image-iturria
- Erabili beharreko irudien iturburu fitxategia zehazten du, dagoeneko definitutako mugako estiloen ordez.
- mugatik-image-xerra
- Mugako irudien ertzetatik kanpoko konpentsazioak ordezkatzen ditu
- mugatik-irudi-zabalera
- Zure ertzaren irudirako zabaleraren balioa definitzen du.
- mugatik-image-hasieratik
- Mugako irudiaren eremua mugaren ertzetik haratago doan zenbatekoa zehazten du.
- mugatik-image-tarte
- Mugak irudiaren alboetan eta erdialdetan nola landu edo eskalatu behar diren zehazten du.
- mugatik-irudia
- Itzultzeko propietateak mugako irudien propietate guztiak ditu.
CSS3 propietate gehigarriak, ertzak eta atzeko planokoak
Kutxa hautsitakoa apurtzen denean, zutabe haustura lerro jauzia (elementu inlinersetarako) laukitxoa dekorazio-hutsuneak definitzen du nola kaxak berria estekarekin eta estalkia estaltzen dituzten. Aurrekariak banatzen dira jabetza hau erabiliz hautsitako laukizuzen artean.
Kutxa-itzalaren propietatea kutxako elementuei itzalak gehitzeko erabil daiteke.
CSS3-rekin, orain erraz konfigura dezakezu web orri bat zutabe anitzekin, taulen edo zatiketa etiketaren egitura konplexuekin. Arakatzaileari besterik ez diozu esan zenbat gorputz-zutabe dituen zutabeak eta nola zabal izan behar duten. Gainera, ertzak (arauak) gehitu ditzakezu, zutabearen altuera aldatzen duten atzeko planoak eta zure testua automatikoki zutabe guztien bidez igaroko da.
CSS3 zutabeak - Zutabeen kopurua eta zabalera zehaztu
Zutabe kopurua eta zabalera zehazteko aukera ematen duten hiru propietate berriak daude:
- Zutabe-zabalera
- Zutabeak zutabeak zehazten ditu. Arakatzaileak testua igaroko du zutabeak zutabeekin osatzeko.
- Zutabe-zenbaketa
- Orriaren zutabe kopurua zehazten du. Arakatzailea espazioan sartzeko nahikoa zabalera zutabeak sortuko ditu, baina zehaztutako zenbakia bakarrik.
- zutabeak
- Itzultzen propietateak, zeinak zabalera edo zenbakia zehazten duen (edo biak, baina oso gutxitan zentzua).
CSS3 zutabeen hutsuneak eta arauak
Zabalerak eta arauak zutabeen artean kokatzen dira kolore anitzeko eszenatoki berean. Zabuek zutabeak gainetik kenduko dituzte, baina arauak ez dute espazioik hartzen. Zutabe-araua hutsuneak baino zabalagoa bada, zutabeen ondoan kokatuko da. Bost arau eta hutsunetako bost ezaugarri berri daude:
- Zutabe-hutsune
- Zutabeen arteko hutsuneen zabalera zehazten du.
- Zutabe-rule-kolorea
- Arauaren kolorea zehazten du.
- Zutabe-arau-estilo
- Arauaren estiloa definitzen du (solidoa, puntuzkoa, bikoitza, eta abar).
- Zutabe-arau-zabalera
- Arauaren zabalera zehazten du.
- Zutabe-arau
- Hiru zutabeko arauaren propietateak aldi berean definitzen dituen taulen propietate bat.
CSS3 zutabea hautsi, zutabeak zabaldu eta zutabeak betetzea
Zutabeen hausteak CSS2 aukerak erabiltzen ditu, diseinatutako pausuetan zehaztutako aukerak erabiltzeko, baina hiru propietate berriekin: break-before , break-after eta break-inside .
Taulen arabera, zutabeen zuridun zutabeak zutabeak osatzeko elementuak konfigura ditzakezu. Horrek zutabe ugari baino gehiago jasotzen ditu egunkari bat bezala.
Zutabeak betetzeak zenbat edukia zutabe bakoitzean erabakiko du. Zutabe orekatuek zutabe bakoitzean edukia kopuru berdina jartzen saiatzen dira, autoak edukia bakarrik isurtzen du zutabea beteta dagoen bitartean eta gero hurrengoera joateko.
Ezaugarri gehiago CSS3an CSS2-n sartzen ez direnak
CSS2n ez dago CSS3ren funtzio osagarri ugari, besteak beste:
- CSS Txantiloia diseinatzeko modulua eta CSS3 sareta posizionatzeko modulua : sareak sortzea CSSrekin.
- CSS3 Testu modulua : Esleitu testua eta sortu itzalak CSS-rekin ere.
- CSS3 Kolore modulua : orain opakutasunarekin.
- Kutxa ereduaren aldaketak : IE etiketa bezala funtzionatzen duen markesaren propietate bat barne.
- CSS3 Erabiltzailearen interfazearen modulua : Kurtsore berriak emanez, ekintzak, beharrezkoak diren eremuak eta baita elementuen tamaina aldatzea ere.
- Media kontsultak : Media kontsultak aukera ematen dizu estilo-orri bat nola definitu behar den definitzeko. Esate baterako, 20em baino gehiagoko ikustaile bat duten eskuko gailuei bakarrik duten estilo-orri bat zehaztu ahal duzu.
- CSS3 Ruby modulua : testua ruby erabiltzen duten hizkuntzak dokumentuak ohar daitezkeen euskarria ematen du.
- CSS3 Paged Media modulua : multimedia pagedentzako laguntza handiagoa izateko (papera, gardenak, eta abar).
- Eduki sortua: L exekutatzen goiburuak eta oinak, oin-oharrak eta programazio sortutako beste edukia, batez ere, multimedia ordainketarako.
- CSS3 Hizketaren modulua : CAL auralaren aldaketak.