Co to jest selektor CSS? - Kurs HTML i CSS
Selektory atrybutów / Selektor atrybutu zawierającego łącznikiselektor[atrybut|="początek"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut lang="..."), którego wartość składa się z wyrazów rozdzielonych łącznikami (myślnikami). "Początek" to określony wyraz, od którego rozpoczyna się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane...
- Selektory atrybutów / Selektor atrybutu zawierającego określony tekst
(CSS 3 - interpretuje: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2) selektor[atrybut*="tekst"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="..."). "Tekst" to określony napis, zawierający się w wartości atrybutu, który może zawierać również spacje. Natomiast wyrazy "cecha" oraz "wartość" określają...
- Selektory atrybutów / Selektor atrybutu o wartości kończącej się na...
(CSS 3 - interpretuje: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2) selektor[atrybut$="koniec"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="..."). "Koniec" to określony tekst, którym kończy się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez...
- Selektory atrybutów / Selektor atrybutu o wartości rozpoczynającej się od...
(CSS 3 - interpretuje: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2) selektor[atrybut^="początek"] { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="..."). "Początek" to określony tekst, którym rozpoczyna się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane...
- Selektory specjalne / Selektor identyfikatora <... id>
selektor#identyfikator { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Identyfikator to wartość atrybutu id="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki...
HTML dla zielonych / Kolor czcionki HTML <span "color">...aqua (akwamaryna) Jeśli za mało Ci tych szesnastu kolorów, zajrzyj na stronę pt.: Kolory. Edytory HTML posiadają często specjalny selektor kolorów, za pomocą którego można w prosty sposób wybrać barwę o dowolnym odcieniu. Przykład <span "color"> Po wpisaniu w edytorze HTML następującego kodu: <span style="color: red">Ten tekst został napisany czcionką koloru czerwonego</span> na ekranie przeglądarki otrzymamy: Ten tekst został napisany czcionką koloru czerwonego Pytania...
- Komendy HTML 4.01 / INPUT
...wybierania tabulatorem TITLE="tekst" Tekst pomocniczy TYPE="typ" Typ kontrolki: button - przycisk checkbox - przełącznik (pole wyboru) file - selektor plików hidden - ukryta kontrolka (nie jest wyświetlana, ale jej wartość jest przesyłana z formularzem) image - graficzny przycisk wysłania formularza password - jednoliniowe pole tekstowe z ukrytym wpisywanym tekstem (np. seria gwiazdek) radio - przełącznik (pole opcji) reset - przycisk czyszczenia danych formularza submit...
- Selektory pseudoklas / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...Dzieci - począwszy od ostatniego: dziecko:nth-last-child(cykl) rodzic > dziecko:nth-last-child(cykl) Elementy wybranego typu: selektor:nth-of-type(cykl) rodzic > dziecko:nth-of-type(cykl) Elementy wybranego typu - począwszy od ostatniego: selektor:nth-last-of-type(cykl) rodzic > dziecko:nth-last-of-type(cykl) Selektorem, rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów]...
- Czcionki / Wielkość czcionki {font-size}
...Najlepszy sposób ustalania wielkości czcionki Jednostka "em" Jednostka "px" Jednostka "pt" Podsumowanie Wielkość czcionki {font-size} selektor { font-size: rozmiar } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wielkość czcionki. Możliwe są tutaj cztery sposoby: Imienne wartości absolutne: xx-small - najmniejsza x-small...
- Czcionki / Czcionki osadzone @font-face
...mogą skopiować sobie pliki na własny serwer 😉 <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj"> <style> selektor { font-family: rodzaj } </style> </head> Jeżeli nazwa rodzaju czcionki zawiera spację, w adresie arkusza musi być ona zastąpiona znakiem plusa. Natomiast już wewnętrznym arkuszu CSS wstawiamy normalnie znak spacji. Oczywiście jako wartość atrybutu font-family powinny zostać podane po przecinku standardowo dostępne w systemach...