Saraksti un izvēlnes CSS3

Uz izveidot dinamiskas izvēlnes mūsu tīmekļa lapām Mūsdienās ir ļoti ierasts programmēt HTML5 formātā un pēc tam piešķirt tai personisku izskatu CSS3 ka tā ir valoda, kuras pamatā ir stila lapas, tas ir, kods, kas piešķir mūsu lapai formu, krāsu un struktūru, nonāk atsevišķā failā, kas kodēts ārpus pašas lapas, kuru mēs rakstām.

Pirmkārt, mēs redzēsim, kā izveidot sarakstus, jo galu galā izvēlne ir saraksts, kas veidots tā, lai padarītu to redzami elegantāku. Tādā veidā mēs esam strukturēti Html kā saišu saraksts, un pēc tam mēs ievietojam personalizētu izskatu jau ar CSS3.

Ir divu veidu saraksti - pasūtīti un nesakārtoti. Ja mēs izmantosim sarakstu, lai vēlāk konfigurētu izvēlni, visticamāk, mēs izmantosim nesakārtotu sarakstu, tomēr mēs redzēsim iespējas.

Tie ir radīti tieši tādi paši, vienīgā atšķirība slēpjas rezervētajā vārdā, kas pasūtītajam būs

un nekārtīgajiem

HTML kods ir šāds:

Pirmais elements
Otrais elements
Trešais elements


Pirmais elements
Otrais elements
Trešais elements

Un tā rakstīšanas ekrāna rezultāts ir šāds:

1. Pirmais elements
2. Otrais elements
3. Trešais elements

Vai tieši tas pats bez kārtas kārtas:

Pirmais elements
Otrais elements
Trešais elements

HTML sistēmā, veidojot sarakstu, ir noteikti sākotnējie formāti, tas ir, ir noteikta mala, fonta krāsa, aizzīme, polsterējums utt. kas parādās pēc noklusējuma, veidojot mūsu sarakstu. Sliktais ir tas, ka vizuāli tas neizskatās ļoti labi, labais ir tas, ka to ir ārkārtīgi viegli mainīt pēc mūsu vēlmēm, pateicoties CSS.

Mēs sāksim, aplūkojot dažāda veida vinjetes, kuras mēs varam ievietot savā ēdienkartē. Pēc noklusējuma katram saraksta vienumam ir melns aplis. Tomēr no faila mēs varam ievietot kvadrātus, tukšus apļus vai attēlu.

Kods, lai modificētu aizzīmi CSS3, ir šāds:

 #izvēlne {list-style-type: square;} 

Tur mēs varam ievietot rezervētos vārdus kvadrāts, lai parādās kvadrāti, aplis tukšiem apļiem vai URL, piemēram, url (myimagenes / midubujo.jpg.webp). Tomēr es domāju, ka visizplatītākais būs tas, ka mēs neliekam nevienu vinjeti, ja mūsu ēdienkarte ir dinamiska. Tādā gadījumā lietotā vārda nebūs.

Lai modificētu piemali, izmantojot izvēlnes piemēru, ir tikpat vienkārši kā izmantot šo kods CSS3:

 #izvēlne {margin: 0px;} 

Tur mēs varam novietot vēlamo vērtību, un mēs varam izvēlēties mēru procentos pikseļos utt. Un ir svarīgi teikt, ka dažās pārlūkprogrammās vai to versijās var rasties problēmas, tāpēc papildus rezerves rakstīšanai ieteicams rakstīt polsterējumu. To veic ar polsterējumu:

 #izvēlne {piemale: 0 pikseļi; polsterējums: 2px; } 

Lai izvēlētos mūsu ēdienkartes un katra elementa robežu, mēs aplūkosim sekojošo CSS3 kods:

 #izvēlne {robeža: 2 pikseļi;} 

Ar vārdu robeža mēs varam norādīt, kādu izmēru vai biezumu mēs vēlamies. Robežu var attiecināt uz robežu kopumā, bet mēs varam arī norādīt, vai mēs vēlamies, lai tā būtu tikai sānu robeža vai apakšējā vai augšējā robeža. To panāk, pievienojot apmali apakšā, augšā, labajā vai kreisajā pusē.

Papildus biezumam robeža ir lauks, kuram ir daudz iespēju, mēs varam izvēlēties stilu, krāsu, gradientu … un mēs redzēsim dažas iespējas.

Apmales stils
Sākot ar malu stilu, robežas stilā, visbiežāk izmantotās iespējas ir:

NavTas noņem pašu malu. Šī ir noklusējuma opcija, tāpēc parasti, veidojot sarakstus savām izvēlnēm, netiks rādītas robežas, ja vien mēs to nenorādīsim.

CietsŠo malu var izmantot visvairāk. Tā ir nepārtraukta robeža, melnā krāsā.
SlēptsO slēpta ir vēl viena iespēja, kurā mēs neredzam nevienu malu, jo tās ir paslēptas. Tomēr programmēšanas nolūkos tas pastāv. To izmanto, lai norobežotu robežas ar citām blakus esošajām šūnām vai tabulām, pat ja mēs nevēlamies redzēt biezu apmali.
RidžsMēs ieliksim šo malu, ja vēlamies, lai tā izceļas no pārējām. Šķiet, ka apmale ekrānā ir novietota vienu līmeni virs pārējā.
SākotnējiTāpat kā iepriekšējā, tā ir izvirzīta mala, tomēr šķiet, ka tā nav līmeņa virs ekrāna virsmas nekā tā, kas atrodas iekšpusē.
GrooveAtšķirībā no kores ar šo apmales stilu šķiet, ka elements ir nogrimis zem pārējā.
IevietotTāpat kā Groove, šī mala, šķiet, nav iegremdēta, bet patiesībā ir vienu līmeni zem pārējās.
PunktotsIzmantojot šo stilu, mēs izveidojam apmali, ko veido punktēta līnija, pēc noklusējuma melna un atstarpes.
DubultāKā saka pats vārds, tā ir dubultā robeža, ko veido divas nepārtrauktas melnas līnijas, kuras atdala atstarpe.

SvītrainaTas ir īpašs apmales veids, kas līdzīgs punktveida, izņemot to, ka punkti kļūst par lielākām līnijām, tas ir, tā ir sava veida pārtraukta līnija.

Tāpat kā ar robežu, arī ar robežas stilu mēs varam izvēlēties noteikt vienas puses robežu, abas, augšējo robežu, apakšējo robežu vai visu. Ja mēs rakstām tikai vienu vērtību, tā tiek uzlikta uz visām malām, un, ja mēs uzrakstām divas iespējas vienas vietā, pirmā ir augšējai un apakšējai malai, bet otrā - malām.

Tagad mēs esam definējuši robežu, izmēru un stilu, tomēr izvēlne paliek ļoti vienkārša un vizuāli nav ļoti skaista. Mēs varam vēlēties vertikālas izvēlnes, jo tās ir izveidotas pēc noklusējuma, bet, ja vēlamies, lai tās būtu horizontālas, mums jāpievieno atslēgvārdu pludiņš, lai katrs saraksta vienums tiktu novietots blakus nākamajam.

Es to izskaidroju nedaudz sīkāk, katram saraksta elementam, ko esam kodējuši ar "li", pēc noklusējuma ir bloka elementa uzvedība, tas ir, pēc ievietošanas tas ģenerē rindas pārtraukumu un neļauj ievietot citu elementu viņa pusē. Ja mēs vēlamies katru saraksta elementu novietot blakus iepriekšējam, šī bloķēšanas darbība ir jānovērš.

Šim nolūkam kods būtu šāds:

 #izvēlne {saraksta stils: nav; mala: 0 pikseļi; polsterējums: 0; } #menu li {margin: 2px; polsterējums: 2px; apmale: 2 pikseļi cieta; pludiņš: pa kreisi; } 

Ar to mēs izveidojam izvēlni un novietojam piemales un polsterējuma pamatīpašības līdz 0 un bez apmalēm, un pēc tam katram elementam, kas mūsu izvēlnē ir pievienots li, mēs ievietojam citas īpašības, 2 pikseļu malas un polsterējumu, 2 pikseļu cietās malas un ka tas peld pa kreisi, tas ir, nākamo elementu var novietot labajā pusē.
Tādā veidā mums jau ir savs horizontālā izvēlne.

Tagad, ja mēs vēlamies, lai mūsu saraksts darbotos kā izvēlne un novirzītu mūs uz vēlamo vietu, mums jāpievieno saite uz mūsu elementiem. Tas ir ļoti vienkārši. Html kodā mēs pievienojam šādu:

Pirmais elements
Otrais elements
Trešais elements

Tādā veidā katrs elements tiks pasvītrots un darbosies kā saite, kas mūs novedīs tur, kur mēs vēlamies.

Visbeidzot, mēs redzēsim dažas izskata iespējas.

Teksta īpašības
PlatumsJa mēs vēlamies ievietot fiksētu platumu. Piemēram, platums: 100 px;
Teksta dekorēšanaJa mēs vēlamies, lai mūsu elementa teksts tiktu kaut kādā veidā dekorēts. Iespēju ir daudz, bet dažas no visbiežāk sastopamajām ir šādas:

• pasvītrot: ja vēlamies, lai viss tiktu pasvītrots
• virslīnija: tāpat kā pasvītrojums visā tekstā ievieto līniju, bet šoreiz nevis zemāk.
• mirgot: Izveidojiet spīdīgu tekstu, kas periodiski mirgo kā gaisma.
• līnija: Mēs uzrakstīsim šo opciju, ja vēlamies, lai mūsu teksts tiktu pārsvītrots.
• neviena: šī ir atlaišana, jo pēc noklusējuma tekstam ir šī vērtība bez jebkādas dekorācijas. Tomēr dažreiz tas būs noderīgi, ja mēs vēlamies atgriezties pie sākotnējās opcijas pēc tam, kad esam izmantojuši efektu, izmantojot resursu, ko sauc par kursoru.

Teksta līdzināšanaTas ir virziens, kurā tiks publicēts mūsu bloka elementu saturs, esiet uzmanīgs, nevis pats teksts, ko mēs redzēsim vēlāk ar virziena īpašību. Iespējas ir ļoti vienkāršas: pa kreisi, ja vēlamies, lai tā iet no kreisās puses, pa labi, ja vēlamies, lai tā iet no labās uz kreiso pusi, centrā, ja vēlamies, lai teksts tiktu centrēts, un attaisnotu, ja vēlamies, lai teksts būtu pamatots.

VirziensIzmantojot šo opciju, mēs definēsim rakstāmā teksta virzienu, šajā gadījumā ir tikai divas iespējas:

• ltr: kas pēc noklusējuma parādās pārlūkprogrammās, jo, izņemot dažas valodas, kurās tas ir rakstīts no labās uz kreiso pusi, parasti tiek rakstīts no kreisās puses uz labo, kas nosaka šo iespēju.
• rtl: tā ir cita iespējamā teksta virzība no labās uz kreiso, ko mēs izmantosim, ja vēlamies, piemēram, rakstīt arābu tekstus.

Teksta atkāpeTas, ka tas nāk no ievilkuma vai tabulēšanas, ir īpašums, kas ir atbildīgs par minētā kritērija noteikšanu mūsu bloka elementu pirmajā rindā un arī tabulās. Ir trīs iespējas:

• mērs
• procentos
• mantot

Tajos, ja mēs izmantojam procentus, mēs atsaucamies uz tā elementa platumu, kurā tas atrodas.
Arī visos no tiem mēs varam izmantot pozitīvus vai negatīvus skaitļus jebkurai no css3, pikseļiem, ems esošajām mērvienībām …

Teksta pārveidošanaPēdējais īpašums, kas saistīts ar redzamo tekstu un ir saistīts ar lielajiem un mazajiem burtiem:

• kapitalizēt: izmantojot šo opciju, tikai katra vārda pirmais burts tiks parādīts ar lielajiem burtiem.
• lielie burti: parāda visu tekstu ar lielajiem burtiem.
• mazie burti- Parāda visu tekstu ar mazajiem burtiem.
• neviena: atstāj tekstu tādu, kāds tas bija uzrakstīts. Tas ir tas, kas nāk pēc noklusējuma.

Vārdu atstarpesLai gan tas tieši neattiecas uz tekstu, tas tiek darīts telpā, ko atstājam starp vārdiem. Tās vērtības var būt “normālas” vai derīgs mērs. Ja mēs ievietojam mēru, tā vērtība tiek pievienota parastajam mērījumam, kas ir pēc noklusējuma.

Tagad mēs ejam ar fonta īpašībām.

Fonta īpašības
FontsŠis īpašums ir vispilnīgākais no tiem, kas saistīti ar fontu, un tam ir vairākas iespējas, kas attiecas uz tā izmantošanu. Pirmkārt, varat sākt ar vienu, diviem, trim vai nevienu no “font-style”, “font-variant” un “Font-weight” vērtībām.

Pēc tam mums pēc burtu lieluma ir jāievada “fonta lielums”, pēc tam seko atstarpe, kas tiek dota ar “līnijas augstums” un vienmēr beidzas ar fontu saimes veidu “fontu saime”. Visbeidzot, jums būs jāievada viena no šīm vērtībām:

• paraksts- Pogām vai nolaižamajiem sarakstiem, tas ir, vadīklām un veidlapu laukiem.
• izvēlne: ja mēs konfigurēsim nolaižamās izvēlnes vai cita veida izvēlnes.
• ikona: tekstiem, kas tiek parādīti zem ikonām.
• ziņojumu lodziņš-Dialoglodziņiem, neatkarīgi no tā, vai tie ir kļūdu uznirstošie logi, informācijas uznirstošie logi utt.
• statussA: loga statusa joslām.
• mazs-caption - Maziem veidlapu laukiem un vadīklām.

Fonta īpašumā mēs esam izmantojuši dažas citas iespējas, kuras mēs vēl neesam redzējuši un kuras mēs izskaidrosim tālāk:

Fontu stilāAr to mēs definēsim fontu stils. Vērtības, kādas tam var būt, ir "normālas", kas ir noklusējuma, "slīpraksts", ja vēlamies, lai mūsu vēstule būtu slīprakstā, tas ir, slīprakstā; vai "slīpi", ja vēlamies, lai būtu slīps burts, kas ir sava veida slīpraksts, kur slīpi tikai rakstzīmes, nevis visas kā slīprakstā.

Fonta variantsMēs to izmantosim, lai izveidotu fontu varianti un mums ir tikai divas iespējas-“normālā”, kas ir noklusējuma versija, un “mazo burtu” variants, ko sauc arī par mazajiem burtiem, kas liek lielajiem burtiem izskatīties tādā pašā izmērā kā mazie burti.

Fonta svarsKopš tā laika tā ir viena no visbiežāk izmantotajām īpašībām mēs varam kontrolēt burtu biezumu (esiet uzmanīgi, tas nav tāds pats kā katra burta lielums, ko mēs redzēsim vēlāk). Skaitliski runājot, tam ir 9 iespējas, kas ir simtiem no 100 līdz 900, tas ir, 100, 200, 300, 400, 500, 600, 700, 800 un 900. Ir arī rakstiskas vērtības, "normālā", kas ir vienāda ar 400 , "treknraksts", kas atbilst 700 un ko mēs sauktu par treknrakstu un kas ziņkārīgi parādījās nevis fontu stilā, bet šeit. Ir arī vērtības "drosmīgākas" vai "vieglākas" un dažreiz citas, piemēram, "vidēja" vai "smaga", kas tiek piešķirtas skaitliskām vērtībām atkarībā no fontu biezuma.

Fonta izmērsAr šo īpašumu, ja mēs kontrolēsim fonta lielumu. Ir pieejamas četras vērtības: "absolūtais izmērs", "relatīvais izmērs", "procentuālā vienība" un "mērvienība". Css ir definētas diezgan daudzas absolūtās un relatīvās mērvienības, piemēram, em, kas šajā īpašumā ir visbiežāk izmantotais, piemēram, px,%, in, cm, mm, pt vai pc. Papildus šiem pasākumiem ir daži vārdi, kas darbojas un var tikt lietoti, piemēram, xx-mazs mazākajam, x-mazais, mazais, vidējais, lielais, x-lielais vai xx-lielais lielākajam. Šie seši vārdi atbilst dažādu html virsrakstu tagu izmēriem

uz

un tie ir absolūti izmēri, tāpēc tie vienmēr izskatīsies vienādi neatkarīgi no pārlūkprogrammas vai ekrāna izšķirtspējas. Vārdus "mazāks" un "lielāks" var izmantot arī kā relatīvus mērījumus, kas būs atkarīgi no tā elementa fonta lieluma, kurā tas ir.

Līnijas augstumsTas jau ir definēts teksta rekvizītos.
Fontu ģimenePlaši izmantots īpašums, ko mēs ļauj izvēlēties burtveidolu vai fontu. Vispirms mēs ievietojam fonta nosaukumu vai burtveidolu, un pēc izvēles tam var sekot citi fontu nosaukumi, ja mūsu pārlūkprogrammā vai sistēmā nav pirmā vai tas netiek atbalstīts. Nav noklusējuma fonta veida, jo tas ir atkarīgs no mūsu pārlūkprogrammas, lai gan ļoti izplatīts ir "Times New Roman". Dažas vispārīgas fontu tipa vērtības var būt "serif", ja ir iekļauti daži fonti, piemēram, Times New Roman, Garamond, Georgia vai Cambria; "Sans-serif" un tā veidi Verdana, Arial, Tahoma, Helvetica vai Futura. "Monospace" un tā piemēri Courier New vai Monaco. Un "fantāzija" ar Comic sans vai Impact veidiem. Protams, ir daudz citu burtveidolu, no kuriem mēs varam izvēlēties.

Burtu atstarpesAr to mēs varam kontrolēt atstarpi starp burtiem, un tas darbojas tieši tāpat kā tā teksta rekvizītu vārdu atstarpes analogs ar vērtībām “normāls” un derīgu mēru.

KrāsaBeidzot mēs redzēsim krāsas īpašība, kuru vēlamies ievietot savā tekstā. Pēc noklusējuma tas ir melns. Ir vairāki veidi, kā izvēlēties krāsu, viens no tiem ir ar 17 dažādu krāsu vārdiem: ūdens, melns, sarkans, dzeltens, zils, fuksija, zaļš, kaļķis, oranžs, pelēks, sarkanbrūns, olīvu, tumši tumšs, violets , sudraba, zilganzaļa un balta.

Vēl viena iespēja ir ievietot krāsu RGB procenti, tas vienkārši norāda trīs procentus, kas atbilst krāsām sarkans ®, zaļš (G) un zils (B):

 krāsa: rgb (22%, 76%, 14%); (3 procentiem nav jānorāda 100%) 

Vēl viens veids ir RGB decimāldaļa kas darbojas tieši tāpat kā procentuālā RGB, bet tā vietā, lai trīs vērtības liktu procentos, tās tiek ievietotas kā decimāldaļas:

 krāsa: rgb (114, 29, 54);

Tādā pašā veidā mēs varam izvēlēties, ka mūsu RGB ir heksadecimāls:

 krāsa: rgb (# 23A556);

Izmantojot šīs iespējas, mēs varam labi pavadīt laiku, mainot un izmēģinot dažādus stilus, krāsas un fontus.

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu