Jak działa selektor w języku CSS3?
Jak wiadomo żadna reguła (deklaracja) nie zadziała jeśli nie odnosi się do konkretnego znacznika w pliku HTML.
Za powiązanie tych regół z obiektami na stronie internetowej idpowiedzialne są tzw selektory. Znasz już sposób na sformatowanie wyglądu
konkretnego znacznika. Klasycznym przykładem jest formatowanie paragrafu <p>. Aby to zrobić wystarczy w pliku CSS napisać kod:
p {
color: blue;
}
W ten sposób we wszystkich paragrafach na stronie internetowej czcionka będzie miała
kolor niebieski.
W jakim celu tworzy się klasy?
Odwoływanie się do konkretnego znacznika jest łatwe i wygodne, ale nie jest pozbawione wad. Wyobraź sobie sytuajcę w której chcesz aby wszystkie
paragrafy na stronie internetoweu wygladały inaczej. W tym celu w pliku HTML należy nazwać każdy z paragrafów. W takiej sytuacji w pliku CSS odwołujemy
się do tej nazwy, nie do znacznika.
Dla przykładu nazwijmy jeden z paragrafów "pierwszy" w pliku HTML:<p class="pierwszy">
W pliku CSS odwołujemy się tym razem do klasy, a nie do selektora. Nadajmy tym razem więcej deklaracji w ramach jednej klasy:
.pierwszy {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
Powyższy kod należy rozumieć w następujący sposób: czcionka koloru czerwonego na szarym tle. Czcionka z rodziny
Courier New w rozmiarze 30px.
.first {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
W jakim celu tworzy się identyfikatory?
Identyfikatora można użyć tylko raz na całej stronie internetowej, w przeciwieństwie do klas, które mogą powtarzać się wielokrotnie.
Dobrym przykładem może byc stworzenie identyfikatora dla menu głównego służącego do nawigacji po stronie internetowej:<div id="menu">
W pliku CSS odwołujemy się tym razem do identyfikatora, a nie do selektora lub klasy. Aby nadać kilka cech dla identyfikatora, należy
zrobić to w następujący sposób:
#menu {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
Powyższy kod należy rozumieć w następujący sposób: czcionka koloru czerwonego na szarym tle. Czcionka z rodziny
Courier New w rozmiarze 30px.
#menu {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
ZAPAMIĘTAJ!
- Odwołując się do selektora, musisz nazwać selektor dokładnie tak samo jak znacznik.
HTML:<body>,
CSS:body {
font-color: red;
}
- Gdy tworzysz klasę, w pliku css musisz przed jego nazwą wpisać kropkę:
HTML:<p class="pierwszy">,
CSS:.pierwszy {
font-color: red;
}
- Gdy tworzysz identyfikator, w pliku css musisz przed jego nazwą wpisać hasztag.
HTML:<p id="start">,
CSS:#start {
font-color: red;
}
- Gdy tworzysz klasę lub identyfikator, możesz wymyślić dowolne nazwy, ale nie mogą się zaczynać od cyfry.
- Nazwa klas i identyfikatorów nie mogą być cyfrą,
- Nazywaj klasy i indentyfikatory tak, by sugerowały do jakich elementów się odnoszą na stronie internetowej .
How does a selector work in CSS3?
As you know, rules (declarations) will not work if they do not refer to a specific tag in the file HTML.
Selectors are responsible for the rules associated with the objects on the website. You already know how to format the
appearance of a specific tag. A classic example is paragraph formatting <p>. To do this, just write
the code in the CSS file: p {
color: blue;
}
This way, the font will be blue in all paragraphs on the website.
Why are classes created?
While referencing a specific tag is easy and convenient, it is not without its drawbacks. Imagine a situation where you want them all
the paragraphs on the website looked different. To do this, each paragraph must be named in the HTML file. In this case, we reference
the CSS file to that name, not to a tag.
For example, let's name one of the paragraphs "first" in the HTML file:
<p class="first">
In the CSS file, we're referencing a class, not a selector. Let's make more
declarations within one class this time:
.first {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
The above code should be understood as follows: font of color red on a gray background. Family font
Courier New in 30px size.
.first {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
What identifiers are created for?
The ID can only be used once for the entire website, unlike classes which can be repeated many times.
A good example would be to create an identifier for the main menu used to navigate on the website:<div id="menu">
In the CSS
file, we're referring to an identifier this time, not a selector or class. In order to give several characteristics to an identifier, it is necessary
do it as follows:
#menu {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
The above code should be understood as follows: color font red on gray background.
Family font Courier New in size 30px.
#menu {
color: red;
font-family: Courier New;
font-size: 30px;
background-color: grey;
}
REMEMBER!
- When you refer to the selector, you must name the selector exactly the same as the tag.
HTML:<body>,
CSS:body {
font-color: red;
}
- In the css file, when you create a class, you must put a dot in front of its name:
HTML:<p class="first">,
CSS:.first {
font-color: red;
}
- In the css file, when you create an identifier, you must enter a hashtag before its name.
HTML:<p id="start">,
CSS:#start {
font-color: red;
}
- When you create a class or identifier, you can think of any names you like, but they cannot start with a number.
- The name of classes and identifiers cannot be a number,
- Name classes and identifiers that they suggest what they refer to on the web page.