70
70 points

CSS selektori nam služe za odabir elemenata koje želimo stilizirati.

Odabir elemenata se vrši preko HTML elemenata preko njihovog ID-a, klasa, tipova, svojstava (atributa), vrijednosti svojstava itd.

HTML element selektori

HTML element selektori odabiru HTML elemente po njihovom imenu.

Primjer: Mijenjanje izgleda svih <p> elemenata na stranici

Želite li unutar svih <p> tagova na stranici postaviti centralno poravnavanje teksta i obojiti tekst u plavu boju napisati ćemo u CSS stilu nešto u ovom stilu:

p {
text-align: center;
    color: red;
}

ID selektori

ID selektori koriste ID atribut HTML taga za odabir pojedinih elemenata.

ID može biti jedinstven unutar jedne stranice pa ga možete koristiti da odaberete i jedinstveni element.

Da biste deklarirali element sa određenim ID-om morate ispred njegovog naziva staviti znak #:

Da biste primjenili ID selektor na određeni element, morate tom element dodati:  id=”naziv”, gdje je “naziv” naziv  ID elementa

plus500

Primjer: Deklariranje i primjena ID selektora


<!DOCTYPE html>
<html>
<head>
<style>
/*Here is ID selector declared*/
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
/*Primjena ID selektora*/
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Class selektori

Primjer Class selektora


<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

Primjer Class selektora primjenjenog na samo jedan HTML elemenat


<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
 

Grupiranje selektora

Primjer grupiranja selektora


h1, h2, p {
text-align: center;
color: red;
}

Pogledajte ovaj interaktivni tester koji će vam demonstrirati različite selektore.

 


Like it? Share with your friends!

70
70 points
Admin

0 Comments

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format