✅ Sąrašai ir meniu CSS3

Turinys

Į sukurti dinaminius meniu mūsų tinklalapiams Šiandien labai įprasta programuoti HTML5 formatu ir tada suteikti jam asmeninę išvaizdą CSS3 kad tai kalba, pagrįsta stiliaus lapais, tai yra, kodas, suteikiantis mūsų puslapiui formą, spalvą ir struktūrą, patenka į atskirą failą, užkoduotą už paties mūsų rašomo puslapio ribų.

Visų pirma, mes pamatysime, kaip sudaryti sąrašus, nes galų gale meniu yra sąrašas, sukurtas taip, kad jis būtų akivaizdžiai elegantiškesnis. Tokiu būdu mes susisteminami HTML kaip nuorodų sąrašas, o tada jau suasmeniname išvaizdą CSS3.

Sąrašai yra dviejų tipų - užsakyti ir nesutvarkyti. Jei vėliau naudosime sąrašą, norėdami sukonfigūruoti meniu, greičiausiai naudosime neorganizuotą sąrašą, tačiau matysime parinktis.

Jie sukurti lygiai tokie patys, vienintelis skirtumas yra rezervuotame žodyje, kuris bus užsakytas

HTML kodas yra toks:


Pirmasis elementas
Antras elementas
Trečias elementas


Pirmasis elementas
Antras elementas
Trečias elementas

1. Pirmasis elementas
2. Antrasis elementas
3. Trečias elementas

Arba lygiai tas pats be eilės:

Pirmasis elementas
Antras elementas
Trečias elementas

Kuriant sąrašą, HTML yra tam tikri išankstiniai formatai, tai yra, yra tam tikra paraštė, šrifto spalva, kulka, užpildymas ir kt. kuris pagal numatytuosius nustatymus rodomas kuriant mūsų sąrašą. Blogai yra tai, kad vizualiai jis neatrodo labai gerai, geras dalykas yra tai, kad CSS dėka jį labai lengva pakeisti pagal savo skonį.

Pradėsime žiūrėdami į įvairių tipų vinjetes, kurias galime įdėti į savo meniu. Pagal numatytuosius nustatymus prieš kiekvieną sąrašo elementą yra juodas apskritimas. Tačiau iš savo failo galime įdėti kvadratus, tuščius apskritimus ar vaizdą.

Kodas, skirtas pakeisti kulką CSS3, yra toks:

 #menu {list-style-type: square;}

Jei norite pakeisti paraštę naudodami pavyzdinį meniu, tai padaryti taip paprasta kodą CSS3:

 #meniu {paraštė: 0 taškų;}

 #meniu {paraštė: 0px; paminkštinimas: 2 taškai; }

CSS3 kodas

 #meniu {kraštas: 2px;}

Be storio, kraštas yra laukas, turintis daug galimybių, mes galime pasirinkti stilių, spalvą, gradientą … ir pamatysime keletą variantų.

Pasienio stilius
Pradedant nuo krašto stiliaus, pasienio stiliaus, dažniausiai naudojamos šios galimybės:

Nė vienasTai pašalina patį kraštą. Tai yra numatytoji parinktis, todėl paprastai, kai mes kuriame meniu sąrašus, kraštinės nebus rodomos, jei to nenurodysime.

TvirtasTai yra kraštas, kuris gali būti naudojamas daugiausia. Tai ištisinė siena, juodos spalvos.
PaslėptasO paslėptas yra dar viena galimybė, kurioje mes neįsivaizduojame jokių kraštų, nes jie yra paslėpti. Tačiau programavimo tikslais jis egzistuoja. Jis naudojamas riboms su kitomis gretimomis ląstelėmis ar lentelėmis atriboti, net jei nenorime, kad būtų matomas storas kraštas.
RidgeMes įdėsime šį pranašumą, jei norime, kad jis išsiskirtų iš kitų. Atrodo, kad kraštinė yra išdėstyta vienu lygiu virš likusio ekrano.
Iš pradžiųKaip ir ankstesnis, jis yra išsikišęs kraštas, tačiau neatrodo, kad jis yra lygiu virš ekrano paviršiaus, nei jis yra viduje.
GriovelisSkirtingai nuo kraigo su šiuo sienų stiliumi, atrodo, kad elementas yra nuskendęs žemiau likusio.
ĮterptiPanašiai kaip „Groove“, šis kraštas neatrodo įdubęs, bet iš tikrųjų yra vienu lygiu žemiau likusio.
TaškuotasNaudodami šį stilių mes sugeneruojame kraštinę, kurią sudaro punktyrinė linija, pagal numatytuosius nustatymus juoda ir tarpai.
DvigubasKaip sako pats žodis, tai yra dviguba siena, kurią sudaro dvi ištisinės juodos linijos, atskirtos tarpu.

BrūkšniuotasTai yra specialus kraštinės tipas, panašus į taškuotą, išskyrus tai, kad taškai tampa didesnėmis linijomis, tai yra, tai yra tam tikra sulaužyta linija.

Kaip ir kraštinės, taip ir kraštinės stiliumi, galime pasirinkti apibrėžti vienos pusės, abiejų, viršutinės, apatinės arba visos, kraštą. Jei parašysime tik vieną reikšmę, ji bus uždėta ant visų kraštų, o jei vietoj vienos parašysime du variantus, pirmasis skirtas viršutiniam ir apatiniam kraštui, o antrasis - šonams.

Dabar mes nustatėme sieną, dydį ir stilių, tačiau meniu išlieka labai paprastas ir vizualiai nėra labai gražus. Galime norėti vertikalių meniu, nes jie yra sukurti pagal numatytuosius nustatymus, tačiau jei norime, kad jie būtų horizontalūs, turime pridėti raktinį žodį „float“, kad kiekvienas sąrašo elementas būtų šalia kito.

Aš tai paaiškinu šiek tiek išsamiau, kiekvienas sąrašo elementas, kurį kodavome „li“, pagal nutylėjimą elgiasi kaip bloko elementas, tai yra, po įdėjimo jis sukuria eilutės pertrauką ir neleidžia įdėti kito elemento jo pusėje. Jei norime, kad kiekvienas mūsų sąrašo elementas būtų šalia ankstesnio, turime panaikinti šį blokavimo elgesį.

Tam kodas būtų toks:

 #menu {sąrašo stilius: nėra; paraštė: 0 taškų; paminkštinimas: 0; } #meniu li {paraštė: 2px; paminkštinimas: 2 taškai; kraštas: 2 pikselių kietas; plūdė: kairė; }

horizontalus meniu

Dabar, jei norime, kad mūsų sąrašas veiktų kaip meniu ir nukreiptų mus ten, kur norime, turime pridėti nuorodą prie savo elementų. Tai labai paprasta. Į savo kodą, esantį Html, pridedame:


Pirmasis elementas
Antras elementas
Trečias elementas

Galiausiai pamatysime keletą išvaizdos variantų.

Teksto savybės
PlotisJei norime įdėti fiksuotą plotį. Pavyzdžiui, plotis: 100 px;
Teksto dekoravimasJei norime, kad mūsų elemento tekstas būtų kažkaip dekoruotas. Yra daug galimybių, tačiau kai kurios iš labiausiai paplitusių yra:

pabraukti: jei norime, kad viskas būtų pabraukta
overline: tas pats kaip pabraukimas įterpia eilutę į visą tekstą, bet šį kartą vietoj žemiau esančio aukščiau.
mirksėti: Sukurkite šviečiantį tekstą, kuris su pertrūkiais mirksi.
linija: Mes parašysime šią parinktį, jei norime, kad mūsų tekstas būtų perbrauktas.
nė vienas: tai yra perteklius, nes pagal numatytuosius nustatymus tekstas pateikiamas su šia verte be jokių dekoracijų. Tačiau kartais bus naudinga, jei norėsime grįžti prie pradinės parinkties po to, kai panaudosime efektą naudodami išteklių pavadinimą „hover“, kurį pamatysime toliau.

Teksto lygiavimasBūkite atsargūs, kokia kryptimi bus skelbiamas mūsų blokinių elementų turinys, o ne pats tekstas, kurį vėliau pamatysime su krypties ypatybe. Variantai yra labai paprasti: kairėn, jei norime, kad ji eitų iš kairės, dešinėn, jei norime, kad ji eitų iš dešinės į kairę, centre, jei norime, kad tekstas būtų centre, ir pateisinkite, jei norime, kad tekstas būtų pagrįstas.

KryptisNaudodami šią parinktį nustatysime rašomo teksto kryptį, šiuo atveju yra tik dvi parinktys:

ltr: tai yra ta, kuri pagal numatytuosius nustatymus rodoma naršyklėse, nes, išskyrus kai kurias kalbas, kuriose ji rašoma iš dešinės į kairę, įprasta rašyti iš kairės į dešinę, būtent tai ir apibrėžia šią parinktį.
rtl: tai yra kitas galimas teksto kryptingumas iš dešinės į kairę, kurį naudosime, jei norime parašyti, pavyzdžiui, arabiškus tekstus.

Teksto įtraukaTai, kad jis gaunamas iš įtraukų ar lentelių, yra savybė, atsakinga už minėto kriterijaus nustatymą pirmoje mūsų blokų elementų eilutėje, taip pat lentelėse. Yra trys variantai:

matuoti
procentas
paveldėti

Juose, jei naudosime procentą, turėsime omenyje elemento, kuriame jis yra, plotį.
Be to, visuose galime naudoti teigiamus arba neigiamus bet kurio matavimo vieneto, esančio css3, pikselių, ems, skaičius …

Teksto transformavimasPaskutinė su tekstu susijusi ypatybė, kurią matysime, susijusi su didžiosiomis ir mažosiomis raidėmis:

rašyti didžiosiomis raidėmis: pasirinkus šią parinktį, tik pirmoji kiekvieno žodžio raidė bus rodoma didžiosiomis raidėmis.
didžiosios raidės: visas tekstas rodomas didžiosiomis raidėmis.
mažosios raidės- Rodomas visas tekstas mažosiomis raidėmis.
nė vienas: palieka tekstą tokį, koks buvo parašytas. Tai yra tas, kuris ateina pagal numatytuosius nustatymus.

Tarpas tarp žodžiųNors jis tiesiogiai nesusijęs su tekstu, jis tai daro erdvėje, kurią paliekame tarp žodžių. Jo vertės gali būti „normalios“ arba tinkama priemonė. Jei įdėsime matą, jo vertė bus pridėta prie įprastos priemonės, kuri yra numatytoji.

Dabar pereikime prie šrifto savybių.

Šrifto ypatybės
ŠriftasŠi savybė yra pati išsamiausia iš visų, susijusių su šriftu, ir turi keletą galimybių ją naudoti. Pirma, galite pradėti nuo vieno, dviejų, trijų arba nė vienos iš „šrifto stiliaus“, „šrifto varianto“ ir „Šrifto svorio“ reikšmių.

Tada mes turime nurodyti raidės dydį su „šrifto dydžiu“, po kurio eina atstumas, nurodytas „eilutės aukštyje“ ir visada baigiasi šriftų šeimos tipu „font-family“. Galiausiai turėsite pateikti vieną iš šių verčių:

antraštė- Mygtukai ar išskleidžiamieji sąrašai, tai yra valdikliai ir formos laukai.
Meniu: jei ketiname sukonfigūruoti išskleidžiamuosius meniu ar kitų tipų meniu.
piktogramą: tekstams, rodomiems po piktogramomis.
žinučių dėžutė-Dialogo langai, nesvarbu, ar tai būtų iššokantys langai, informacijos iššokantieji langai ir pan.
status-baA: lango būsenos juostoms.
mažas-caption - Mažiems formos laukams ir valdikliams.

Šrifto ypatybėje naudojome kai kurias kitas parinktis, kurių dar nematėme ir kurias paaiškinsime toliau:

Šrifto stiliusSu juo mes apibrėšime Šrifto stilius. Vertės, kurias jis gali turėti, yra „normalios“, kurios yra numatytosios, „kursyvas“, jei norime, kad mūsų raidė būtų kursyvu, tai yra, kursyvu; arba „įstrižai“, jei norime turėti įstrižąją raidę, kuri yra tam tikra kursyvo forma, kai tik simboliai yra pasvirę, o ne visi kaip kursyvu.

Šrifto variantasMes jį naudosime nustatydami šriftų variantai ir mes turime tik dvi parinktis: „įprastą“, kuri yra numatytoji, ir „mažųjų raidžių“ variantą, dar vadinamą mažomis raidėmis, todėl didžiosios raidės atrodo tokio paties dydžio kaip mažosios raidės.

Šrifto svorisTai viena iš labiausiai naudojamų savybių, nes kartu su ja galime kontroliuoti raidžių storį (būkite atsargūs, tai ne tas pats, kaip kiekvienos raidės dydis, kurį pamatysime vėliau). Skaitmeniniu požiūriu jis turi 9 parinktis, kurios yra šimtai nuo 100 iki 900, tai yra 100, 200, 300, 400, 500, 600, 700, 800 ir 900. Taip pat yra rašytinių reikšmių, „normalių“, kurios prilygsta 400 , „paryškintas“, kuris atitinka 700 ir kurį mes pavadintume paryškintu ir kuris įdomu pasirodė ne šrifto stiliumi, bet čia. Taip pat yra reikšmių „drąsesnis“ arba „lengvesnis“, o kartais ir kitos, pvz., „Vidutinė“ arba „sunki“, kurios priskiriamos skaitinėms vertėms, atsižvelgiant į šrifto storį.

Šrifto dydisSu šiuo turtu, jei mes kontroliuosime šrifto dydį. Yra keturios vertės: „absoliutus dydis“, „santykinis dydis“, „procentinis vienetas“ ir „matavimo vienetas“. Yra daug absoliučių ir santykinių matavimo vienetų, apibrėžtų css, pvz., Em, kuris yra labiausiai naudojamas šioje nuosavybėje, pvz., Px,%, in, cm, mm, pt arba pc. Be šių priemonių, yra keletas žodžių, kurie veikia ir gali būti naudojami, pvz., „Xx-small“ mažiausiems, „x-small“, „small“, „medium“, „large“, „x-large“ arba „xx-large“, skirti didžiausioms. Šie šeši žodžiai atitinka skirtingų HTML pavadinimų žymų dydžius

į

ir tai yra absoliutus matmenų dydis, todėl jie visada atrodys vienodai, nepriklausomai nuo naršyklės ar ekrano skiriamosios gebos. Žodžiai „mažesnis“ ir „didesnis“ taip pat gali būti naudojami kaip santykiniai matavimai, kurie priklausys nuo elemento, kuriame jis yra, šrifto dydžio.

Linijos aukštisTai jau apibrėžta teksto ypatybėse.
Šrifto šeimaPlačiai naudojamas turtas, kurį mes leidžia pasirinkti šriftą ar šriftą. Pirmiausia įdedame šrifto pavadinimą arba šriftą, o pasirinktinai po jo gali būti nurodyti kiti šriftų pavadinimai, jei mūsų naršyklė ar sistema neturi pirmojo arba nepalaiko jo. Nėra numatytojo šrifto tipo, nes tai priklauso nuo mūsų naršyklės, nors labai paplitęs yra „Times New Roman“. Kai kurios bendrosios šrifto tipo vertės gali būti „serif“, kai įtraukiami kai kurie šriftai, tokie kaip „Times New Roman“, „Garamond“, „Georgia“ ar „Cambria“; „Sans-serif“ ir jo tipai Verdana, Arial, Tahoma, Helvetica arba Futura. „Monospace“ ir jo pavyzdžiai „Courier New“ arba „Monaco“. Ir „fantazija“ su „Comic sans“ ar „Impact“ tipais. Žinoma, yra daug daugiau šriftų, kuriuos galime pasirinkti.

Tarpai tarp raidžiųSu tuo mes galime valdyti tarpą tarp raidžių, ir jis veikia lygiai taip pat, kaip ir jo žodžių tarpų teksto savybių analogas, kurio reikšmės yra „normalus“ ir galiojantis matas.

SpalvaGaliausiai pamatysime spalvos, kurią norime įtraukti į savo tekstą, savybė. Pagal numatytuosius nustatymus jis yra juodas. Yra keletas spalvų pasirinkimo būdų, vienas iš jų yra per 17 skirtingų spalvų žodžių: vandens, juoda, raudona, geltona, mėlyna, fuksija, žalia, kalkių, oranžinė, pilka, kaštoninė, alyvuogių, tamsiai mėlyna, violetinė , sidabrinė, žalsvai mėlyna ir balta.

Kitas variantas - įdėti spalvą RGB procentas, tai tiesiog nurodo tris procentus, atitinkančius raudoną ®, žalią (G) ir mėlyną (B) spalvas:

 spalva: rgb (22%, 76%, 14%); (3 procentai neturi būti 100%)

Kitas būdas yra RGB dešimtainis kuris veikia lygiai taip pat, kaip ir procentinis RGB, tačiau vietoj trijų reikšmių įvedimo procentais jos pateikiamos kaip dešimtainės vertės: