Składnia CSS
Reguła CSS-Zestaw składa się z selektora i bloku deklaracji:
Punkty wyboru do elementu HTML chcesz stylu.
Blok deklaracja zawiera jedną lub więcej deklaracji oddzielonych średnikami.
Każda deklaracja zawiera nazwę właściwości CSS i wartości, oddzielone dwukropkiem.
Oświadczenie CSS zawsze kończy się średnikiem, a bloki deklaracji są otoczone klamrami.
W poniższym przykładzie wszystkie <p> Elementy będzie wyrównany do środka, z czerwonym kolorem tekstu:
Selektory CSS
Selektorów CSS są wykorzystywane do "find" (lub wybierz) elementy HTML na podstawie ich nazwy elementu, ID, klasy, atrybut i więcej.
Selektor elementu
Selektor elementem wybiera elementy na podstawie nazwy elementów.
Można zaznaczyć wszystkie <p> elementów na stronie tak (w tym przypadku, wszystkie <p> Elementy będzie wyrównany do środka, z czerwonym kolorem tekstu):
Selektor id
Selektor id używa atrybutu id elementu HTML, aby wybrać konkretny element.
Identyfikator elementu powinna być unikalna w obrębie strony, więc selektor id służy do wyboru jeden unikalny element!
Aby wybrać element z określonym id, napisać znak hash (#), a następnie przez id elementu.
Reguła stylu poniżej będą stosowane do elementu HTML z id="para1" :
 | Uwaga: Nazwa id nie może zaczynać się od numeru! |
|---|
Selektor klasy
Selektor klasy wybiera elementy z konkretnego atrybutu klasy.
Aby wybrać elementy z danej klasy, napisać period (.) Znak, po którym następuje nazwa klasy.
W poniższym przykładzie wszystkie elementy HTML z class="center" będzie czerwony i wyrównany do środka:
Można również określić, że tylko określone elementy HTML powinny zostać naruszone przez klasę.
W poniższym przykładzie, tylko <p> elementy z class="center" będzie wyrównany do środka:
elementy HTML może również odnosić się do więcej niż jednej klasy.
W poniższym przykładzie, <p> element będzie stylizowany według class="center" a class="large" :
| Uwaga: nazwa klasy nie może zaczynać się od numeru! |
|---|
grupowanie selektorów
Jeśli masz elementy z tych samych definicji stylów, na przykład:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Będzie on lepiej grupy selektory, w celu zminimalizowania kodu.
Aby selektorów grupowych, selektor oddzielić przecinkami.
W poniższym przykładzie mamy pogrupowane selektorów z powyższego kodu:
CSS Komentarze
Komentarze służą do wyjaśnienia kodu, a może pomóc podczas edycji kodu źródłowego w późniejszym terminie.
Komentarze są ignorowane przez przeglądarki.
Komentarz CSS rozpoczyna się od /* and ends with */ . Komentarze mogą również obejmować wiele linii:
Przykład
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»