Embedded Files
LV 21. Pseudoklase i pseudoelementi
Petar Lovaković i Filip Marangunić 3.A
PRIPREMA
1.
Selektori u CSS-u koriste se za odabir određenih HTML elemenata na koje želimo primijeniti stilove. Osnovna sintaksa za primjenu selektora izgleda ovako:
selector {
property: value;
}
- selector: Označava HTML element(e) koje želimo stilizirati.
- property: Specifična svojstva koja želimo primijeniti na odabrane elemente.
- value: Vrijednost koju želimo dodijeliti odabranim svojstvima.
Primjer selektora koji cilja sve `<p>` paragrafe:
p {
color: blue;
font-size: 16px;
}
2. CSS svojstva koja uključuju mjerne jedinice za veličinu:
Kada postavljate veličinu u CSS-u, često morate koristiti određene mjerne jedinice. Evo pet primjera svojstava koja uključuju mjerne jedinice:
- `width` i `height`: Postavljaju širinu i visinu elementa.
- `font-size`: Postavlja veličinu fonta teksta
- `margin` i `padding`: Postavljaju vanjski (margin) i unutarnji (padding) razmak oko elemenata.
- `border-width`: Postavlja debljinu granice elementa.
- `line-height`* Postavlja visinu reda unutar teksta.
VJEŽBA
1.
2.
3.
4.
1. - Jedinice koje se koriste za apsolutne veličine u CSS-u uključuju `px` (pikseli), `pt` (točke), `in` (inči) i slične. Ove jedinice pružaju točno određene veličine neovisno o postavkama korisnikovog preglednika.
- Mogu se koristiti kada je potrebna precizna kontrola nad veličinama elemenata. Međutim, nisu uvijek preporučljive jer ne pružaju prilagodljivost različitim veličinama ekrana ili postavkama korisnika.
2. - Relativne jedinice uključuju `%` (postotak), `em`, `rem`, `vw` (viewport width) i `vh` (viewport height).
- Relativne jedinice su bolje jer omogućuju prilagodljivost različitim veličinama ekrana i poboljšavaju responsivnost dizajna.
- `em` se odnosi na veličinu fonta roditeljskog elementa, dok se `rem` odnosi na veličinu fonta korijenskog elementa (obično `<html>`).
- `vw` i `vh` pružaju skalabilnost u odnosu na širinu i visinu preglednika.
3. - Specificity u CSS-u određuje redoslijed primjene pravila oblikovanja kada se sukobe.
- Primjenjuje se kada imate više pravila koja se odnose na isti element, određujući koje će pravilo prevladati.
4. - Inline stilovi (`style` atributi u HTML-u): Najviša specifičnost.
- ID selektori.
- Klasni selektori, atribut selektori i pseudo-klasni selektori.
- Element selektori: Najniža specifičnost.
5. - Specificitet se izračunava kao četveroznamenkasti broj (a, b, c, d), gdje svaka znamenka predstavlja težinu jedne kategorije.
- Pravilo s većom specifičnošću pobjeđuje.
- Ako su izračunate vrijednosti jednake, pravilo koje se pojavi posljednje u kodu primijenit će se.
-Specificitet u CSS-u predstavlja se četveroznamenkastim brojem (abcd), gdje:
a = Broj inline stilova (1 ako postoje, 0 inače)
b = Broj ID selektora
c = Broj klasnih selektora, atribut selektora i pseudo-klasnih selektora
d = Broj element selektora
6. - `!important` se koristi kako bi se navelo da je određeno pravilo prioritetno i da se ne može poništiti.
- Može dovesti do problema s održavanjem i čitanjem koda jer narušava uobičajeni redoslijed specificiteta.
7. - Problem može nastati kada se `!important` zloupotrebljava, otežavajući održavanje koda.
- Opravdano je koristiti `!important` u iznimnim situacijama kada je potrebno osigurati da se određeno pravilo primijeni bez obzira na ostale specifičnosti, ali treba biti oprezan s njegovom upotrebom.
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ispit iz Hrvatskog Jezika</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
p {
color: #555;
}
.answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.answer {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.answer:hover {
background-color: #e0e0e0;
}
.correct {
background-color: #00FF00;
border-color: #c3e6cb;
}
.intro::first-letter{
background-color: #FF0000;
}
</style>
</head>
<body>
<h1>Zadatak iz Hrvatskog Jezika</h1>
<p>
Pronađi redak u kojemu je točan genitiv od natrijev klorid, Borovo Selo i njihov uspjeh.
</p>
<div class="answers">
<div class="answer intro">A. <span>Natrijevog klorida, Borovog Sela, njihova uspjeh</span></div>
<div class="answer intro">B. <span>Natrijevoga klorida, Borovoga Sela, njihovoga uspjeha</span></div>
<div class="answer correct">C. <span>Natrijeva klorida, Borova Sela, njihova uspjeha C</span></div>
<div class="answer intro">D. <span>Natrijeva klorida, Borova Sela, njihovoga uspjeha</span></div>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse