Pozdrav, dragi čitatelji bloga. Danas će biti još jedan članak u kasici prasici. Usredotočit će se na dizajn koristeći pravila kaskadnih stilskih listova. Ovdje je sve vrlo jednostavno, ali ipak sam odlučio ovoj temi posvetiti zaseban post.
Malo ranije već smo uspjeli saznati kako, kako i kako možete raditi s. Pa, malo ranije smo detaljno pogledali sve vrste i njihove različite kombinacije kako bismo naznačili točno onaj element Html koda za koji će se morati primijeniti određena svojstva stila.
Stil liste - dizajn lista u HTML kodu
Dakle, u jeziku za označavanje stilova postoje tri zasebna pravila koja počinju sa stilom popisa, a koja služe za konfiguraciju izgled popisi (numerirani ili s grafičkim oznakama) u kodu web dokumenata. Osim toga, postoji unaprijed pripremljeno CSS pravilo stila popisa, koje vam omogućuje malo smanjenje količine koda. Ali prvo o svemu.
Ono što ćemo sada razmotriti može se koristiti i za Html LI elemente i za Ul i Ol elemente (popis s oznakama i numerirane liste). Koja će biti razlika između korištenja stila popisa za ove oznake?
Zapravo, možete saznati je li svojstvo naslijeđeno ili ne na web stranici validatora (pročitajte o tome na priloženoj poveznici) u odjeljku posvećenom specifikaciji kaskadnih stilskih listova. U stupcu "Naslijeđeno", "Da" će se pojaviti nasuprot naslijeđenih pravila:
Počnimo s lista-stil-tip, koji vam omogućuje postavljanje vrste označavanja za pojedine elemente Popis HTML-a. Za ovo pravilo vrijede sljedeće vrijednosti:
- Ništa - označavanje se uopće neće provesti (list-style-type:none; primijenjeno na ovu stavku i stoga nema oznaku)
- Disk je ispunjeni krug (list-style-type:disc; koristi se za ovaj redak)
- Krug - krug kao oznaka
- Kvadrat - kvadrat kao oznaka
- Decimalni - arapski brojevi (list-style-type:decimal;)
- lower-alpha - mala slova
- upper-alpha - velika latinična slova
- lower-roman — male rimske brojke
- upper-roman - rimski brojevi velikim slovima
Što mislite, što je korišteno za izradu gornjeg popisa, Ul ili Ol? Zeznuto pitanje. Ispostavilo se da to više nije bitno, iako sam u ovom konkretnom slučaju koristio Ol, ali promjenom u Ul izgled će ostati isti, jer je za svaki element postavljen sa svojim CSS vrijednost lista pravila tipa stila.
U stvari, Ul i Ol se razlikuju samo po zadanom ponašanju (Ul oznake i Ol brojevi). No, ako želite, možete jednostavno pretvoriti jedan stil popisa u drugi koristeći list-style-type. Font koji se koristi za označavanje brojeva ili slova potpuno je isti kao onaj koji ste definirali za sadržaj LI oznaka. Na primjer, promjenom boje fonta za popis promijenit ćemo i boja markera:
- Promijenila je boju teksta (list-style-type:lower-roman;color:red) i promijenila boju markera
Krenimo dalje sa sljedećim CSS svojstvom − lista-stil-pozicija. Pomoću njega možete postaviti položaj (postavljanje) područja s markerom. Postoje samo dvije moguće vrijednosti za to:
Oni. U osnovi, u poziciji stila popisa označavamo gdje treba postaviti područje s markerima - izvan elementa LI (izvan) ili unutar njega (unutar). Prema zadanim postavkama, područje s markerom je izvan granica, tj. koristi se vrijednost izvana.
Pogledajmo ovo na primjeru. U prvom elementu popisa posebno ću napisati list-style-position:inside i vidjet ćemo što će se dogoditi:
- Ovdje je sve zadano
- Ovako će izgledati postavljanje područja markera s unutrašnjošću. Imajte na umu da se drugi red u ovom elementu i marker nalaze na istoj razini
- Ovdje je sve zadano
List-style-image i prefab Css pravilo
Zatim imamo List-style-image - omogućuje vam da odredite sliku koja će se koristiti kao oznaka. Ovo je pravilo prema zadanim postavkama postavljeno na Ništa (tj. slika se ne koristi kao oznaka), ali možete napisati funkciju Url() tako da navedete stazu do slike, koja će kasnije djelovati kao oznaka na ovom popisu:
To bi moglo izgledati ovako:
Slika u stilu popisa: url(https://site/images/list_star.png);
- Ovdje je sve zadano
- Ovako bi moglo izgledati korištenje slike kao markera. Jasno je da možete odabrati prikladniju sliku za ovu svrhu.
- Na primjer, kao ovdje.
Kao što se sjećate, u članku o rekao sam da slike pripadaju inline elementima (zapravo, za preglednik je to isto slovo, ali ponekad vrlo veliko).
Ovdje slika zauzima mjesto markera (slova ili brojeva). U ovom slučaju, visina retka s elementom popisa povećat će se ako umetnete veliku sliku kao oznaku (kao što se dogodilo u drugom elementu primjera danog malo iznad).
U funkcionalnosti za sliku stila popisa možete navesti obje slike. Ako se slika ne učita, koristit će se zadani marker ili numeriranje ili ono što je navedeno u tipu stila popisa za ovaj element popisa.
Da biste napisali sva tri gore opisana CSS pravila u jedno, možete upotrijebiti List-style, koji je unaprijed pripremljen za dizajniranje popisa. Redoslijed kojim su navedene vrijednosti nije bitan. One vrijednosti koje ne navedete u stilu popisa preglednik će eksplicitno interpretirati sa zadanim vrijednostima.
Gdje mogu vidjeti zadane vrijednosti? Da, sve je tu - u CSS specifikaciji W3C validatora u stupcu "Initial value" nasuprot svojstvima koja vas zanimaju:
Vrijednosti za pojedinačna svojstva u prefab pravilu u stilu liste odvojene su razmacima. Mjesto, kao što je već spomenuto, nije važno:
U praksi bi to moglo izgledati ovako:
List-style: inside upper-roman url(https://site/images/list_star.png);
Vrijednosti možete koristiti bilo kojim redoslijedom i bilo kojim brojem (počevši od jedan). Inače, izbornici se na web stranicama najčešće kreiraju pomoću popisa, a koristi se svojstvo List-style za uklanjanje oznaka s popisa izbornika, koji su tu potpuno nepotrebni:
List-style-type:none;
List-style:none;
Sretno ti! Vidimo se uskoro na stranicama bloga
Moglo bi vas zanimati
Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza Html elemenata na web stranici Kako postaviti rotaciju boja pozadine redaka tablica, popisa i drugih Html elemenata na web mjestu koristeći pseudoklasu nth-child 
Float i clear u CSS-u - alati za blok raspored 
Pozicioniranje pomoću Z-indeksa i pravila CSS kursora za promjenu kursora miša 
Pozicija (apsolutna, relativna i fiksna) - načini pozicioniranja Html elemenata u CSS-u (pravila lijevo, desno, gore i dolje) 
Čemu služi CSS, kako povezati kaskadne stilske listove HTML dokument te osnove sintakse ovoga jezika 
CSS svojstva ukrasa teksta, okomito poravnanje, poravnanje teksta, uvlačenje teksta za oblikovanje teksta u Html 
Font (težina, obitelj, veličina, stil) i pravila visine retka za oblikovanje fontova u CSS-u 
Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, privitak) - sve za postavljanje boje pozadine ili pozadinske slike Html elemenata 
CSS - što je to, kako se povezuju kaskadni listovi stilova HTML kôd koristeći Stil i Link 
Prioriteti u CSS-u i njihovo povećanje zbog Važnog, kombinacije i grupiranja selektora, korisničkih i autorskih stilova
| preglednik | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Verzija | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Podržano | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da |
kratka informacija
Opis
Atribut koji vam omogućuje da istovremeno odredite stil markera, njegov položaj i sliku koja će se koristiti kao marker. Za više pojedinosti o argumentima pogledajte svojstva list-style-type, list-style-position i list-style-image za svaki parametar zasebno.
Sintaksa
stil-popisa: tip-stila-popisa || lista-stil-pozicija || lista-stil-slika
Argumenti
Bilo koja kombinacija triju vrijednosti koje definiraju stil markera, bilo kojim redoslijedom. Vrijednosti su odvojene razmakom. Nijedan argument nije potreban, tako da se neiskorištene vrijednosti mogu izostaviti.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Rezultat ovog primjera prikazan je na sl. 1.
Riža. 1. Korištenje parametra stila liste
Postavlja adresu slike koja služi kao oznaka popisa. Ovo se svojstvo nasljeđuje, pa se za pojedinačne stavke popisa vrijednost none koristi za vraćanje oznake.
kratka informacija
Sintaksa
lista-stil-slika: nijedan | url(<адрес>)
Oznake
| Opis | Primjer | |
|---|---|---|
| <тип> | Označava vrstu vrijednosti. | <размер> |
| A & & B | Vrijednosti se moraju ispisati navedenim redoslijedom. | <размер> && <цвет> |
| A | B | Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B). | normalno | malim slovima |
| A || B | Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom. | širina || računati |
| Vrijednosti grupa. | [ obrezivanje || križ ] | |
| * | Ponovite nula ili više puta. | [,<время>]* |
| + | Ponovite jednom ili više puta. | <число>+ |
| ? | Navedena vrsta, riječ ili grupa nisu obavezni. | umetak? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | <радиус>{1,4} |
| # | Ponovite jednom ili više puta odvojene zarezima. | <время># |
Vrijednosti
none Onemogućuje sliku kao oznaku za nadređeni element. url Relativna ili apsolutna staza do grafičke datoteke. Vrijednost se može navesti u jednostrukim, dvostrukim ili bez navodnika.
Primjer
- Lako je provjeriti da je afina transformacija monotona.
- Dokaz odlučno stabilizira integral negativne krivulje, jasno pokazujući besmislenost gore navedenog.
- Niz potencija, kao prva aproksimacija, rasipnički iskrivljuje višedimenzionalnu Möbiusovu traku, iz čega slijedi jednakost koja se dokazuje.
Rezultat ovog primjera prikazan je na sl. 1.
Riža. 1. Korištenje svojstva list-style-image
Objektni model
Objekt.style.listStyleImage
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobravanja.
- Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
- Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
- Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
- Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.
Preglednici
Preglednici
U tablici preglednika koriste se sljedeće oznake.
Građa iz Imenika web jezika
Korištene vrijednosti
sLokacija Crta, koji može definirati i uzeti jednu od sljedećih vrijednosti:Ovo se svojstvo može čitati/pisati za sve objekte osim za currentStyle (samo za čitanje). Zadana vrijednost je nikakav. Atribut Cascading Style Sheets (CSS) je naslijeđen.
Bilješke
Vlasništvo listStyleImage odnosi se na sve elemente za koje margina I prikaz:popis-stavka.
Kada je slika dostupna, ona zamjenjuje postavljenu sliku markera listStyleType.
Za prikaz slike popisa markera za svojstvo margina mora biti postavljen na minimum 30 pt.
Primjeri
Sljedeći primjeri ilustriraju korištenje imovine listStyleImage i atribut lista-stil-slika za postavljanje slike markera popisa.
Prvi primjer koristi selektor ul i atribut lista-stil-slika.
Drugi primjer koristi svojstvo listStyleImage za promjenu stila oznake kada se dogodi događaj prelazak mišem.
