Inne działy

 

Składnia CSS - Selektory

 

CSS składa się z reguł stylu, które są interpretowane przez przeglądarki, a następnie zastosowane do odpowiednich elementów w dokumencie. Reguła stylu składa się z trzech części:

  • Selektor: Selektor jest to tag HTML, w którym będzie zastosowany styl. Może to być dowolny znacznik taki jak<h1> lub <table>itp.
  • Właściwość: Właściwość jest to atrybutu tagu HTML. Mówiąc prościej, wszystkie atrybuty HTML są konwertowane na właściwości CSS. Mogą to być kolor lub obramowanie itp.
  • Wartości: Wartości są przypisywane do właściwości. Na przykład właściwość kolor może mieć wartość red (czerwony) lub #F1F1F1 etc.

Składnia stylu CSS może wyglądać w następujący sposób:

selektor { właściwość: wartość }

 

Przykład: Można zdefiniować obramowanie tabeli w następujący sposób:

table{ border :1px solid #C00; }

 

Znacznik table jest selektorem a border jest właściwością i biorąc pod uwagę wartość 1px solid #C00 jest to wartość tej właściwość.

Selektory można zdefiniować w różny sposób prosty. Przedstawimy te sposoby jeden po drugim.

 

Selektory typu:

Jest to przypisanie stylu, jak widzieliśmy powyżej. Jeszcze jeden przykład, który ustawia kolor dla wszystkich nagłówków poziomu 1:

h1 { 
color: #36CFFF;
}

 

Selektory uniwersalne:

Zamiast zaznaczania elementów określonego typu, uniwersalny selektor zastępuje po prostu nazwę każdego elementu:

* { 
color: #000000;
}

Reguła powyżej ustawia właściwość color każdego elementu w dokumencie na kolor czarny.

 

Selektory potomka:

Załóżmy, że chcesz zastosować regułę stylu do poszczególnych elementów, tylko wtedy, gdy znajduje się on wewnątrz innych elementów. Podany w tym przykładzie, styl reguła dotyczy elementu <em> tylko wtedy, gdy znajduje się on wewnątrz tagu <ul>.

ul em {
color: #000000;
}

 

Selektory klasy:

Można zdefiniować zasady stylu, na podstawie wartości atrybutu klasy elementów. Wszystkie elementy, które mają przypisaną tą klasę zostaną sformatowane według określonej reguły.

.black {
color: #000000;
}

Ta reguła ustawia zawartość w kolorze czarnym, dla każdego elementu z klasą, gdzie atrybut ustawiony jest na czarny w dokumencie. Możesz zrobić to nieco bardziej szczegółowo. Na przykład:

h1.black {
color: #000000;
}

Ta reguła ustawia właściwość color na czarny tylko dla elementu <h1> z atrybutem klasy ustawionym na black.

Można zastosować więcej niż jeden selektor klasy do danego elementu. Rozważmy następujący przykład:

 < p class="center bold">

Ten paragraph będzie miał zastosowane dwie klasy: center i bold

 

Selektory ID:

Można zdefiniować styl reguły oparty na atrybucie elementu id. Wszystkie elementy o takim id zostaną sformatowane według określonych reguł.

#black {
color: #000000;
}

Ta reguła ustawia właściwość color na kolor czarny, dla każdego elementu z atrybutem id ustawionym na black w dokumencie. Możesz zrobić to nieco bardziej szczegółowo. Na przykład:

h1#black {
color: #000000; 
}

Ta reguła ustawia właściwość color na czarny tylko dla elementów <h1> z atrybutem id ustawionym na black.

Prawdziwą moc selektory id pokazują, gdy są używane dla selektorów potomka, na przykład:

#black h2 {
color: #000000; 
}

W tym przykładzie wszystkie nagłówki poziomu 2 ukażą się w czarnym kolorze tylko wtedy, gdy te pozycje znajdują się w tagach, posiadających atrybut id ustawiony na black.

 

Selektory dziecka:

Widzieliście selektory potomka. Istnieje jeszcze jeden typ selektorów, który jest bardzo podobny do potomków, ale ma inne funkcje. Rozważmy następujący przykład:

body > p {
color: #000000;
}

Ta reguła będzie wyświetlać wszystkie akapity w kolorze czarnym, jeśli są one bezpośrednim potomkiem elementu <body>. Inne akapity umieszczone wewnątrz innych elementów, takich jak <div> lub <td> itp. nie będą miały zastosowanego tego stylu.

 

Selektory atrybutów:

Można również stosować style do elementów HTML z konkretnymi atrybutami. Poniższa reguła stylu będzie miała zastosowanie do wszystkich elementów wejściowych, które mają typ atrybutu (type) z wartością text:

input[type="text"]{
color: #000000; 
}

Zaletą tej metody jest to, że element <input type="submit"> jest nienaruszony i właściwość color jest stosowana tylko do pól z parametrem text.

Poniższe zasady stosowane są do atrybutu selektora.

  • p[lang] - wybiera wszystkie elementy z ustawionym atrybutem lang
  • p[lang="fr"]-wybiera wszystkie elementy, w których atrybut lang ma wartość dokładnie "fr".
  • p[lang ~="fr"]-wybiera wszystkie elementy, w których atrybut lang zawiera słowo "fr".
  • p[lang|="en"] - wybiera wszystkie elementy, w których atrybut lang zawiera wartości, które są dokładnie "en", lub zaczynają się od "en-".

 

Wiele reguł stylu:

Można zdefiniować wiele reguł stylu dla pojedynczego elementu. Można zdefiniować te zasady, aby połączyć wiele właściwości i odpowiadających im wartości w jednym bloku, tak jak w poniższym przykładzie:

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Tu wszystkie pary właściwość i wartość są oddzielone średnikiem (;). Można je napisać w pojedynczej linii lub w wielu wierszach. Dla lepszej czytelności umieszczamy je w osobnych wierszach. Przez jakiś czas nie przejmuj się właściwościami wymienionymi w powyższym bloku. Te właściwości zostaną wyjaśnione w następnych rozdziałach.

 

Selektory grupowania:

Jeśli chcesz możesz zastosować styl do wielu selektorów. Po prostu selektory należy rozdzielić przecinkami, jak pokazano w poniższym przykładzie:

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Styl ten będzie miał zastosowanie do elementów h1, h2 i h3. Nie ma znaczenia kolejność listy. Wszystkie elementy w selektorze będą miały zastosowany ten sam styl.

Różne klasy selektorów można połączyć ze sobą, jak pokazano poniżej:

#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.