blue - Kurs HTML i CSS
Tekst HTML / Wykaz <ul, ol, li>...style="color: black">Punkt pierwszy</span></li> <li style="color: green"><span style="color: black">Punkt drugi</span></li> <li style="color: blue"><span style="color: black">Punkt trzeci</span></li> </ul> Punkt pierwszy Punkt drugi Punkt trzeci Wykaz w akapicie Na koniec ważna wskazówka. Często może się zdarzyć tak, że chcemy umieścić wykaz wewnątrz akapitu. Efekt będzie prawdopodobnie inny niż oczekiwaliśmy. Akapit nie jest zwykłym elementem blokowym, ponieważ nie może zawierać...
Media CSS / Zapytania mediów...Na ekranie monitora każda barwa jest złożeniem trzech kolorów podstawowych: czerwonego (ang. red), zielonego (ang. green) i niebieskiego (ang. blue). W takim przypadku liczbę kolorów wylicza się podnosząc dwójkę (bit ma dwie wartości) do potrojonej (są trzy kolory podstawowe) potęgi wskazanej wartością głębi koloru: 23*1 = 2 * 2 * 2 = 8 23*2 = 64 23*3 = 512 23*4 = 4 096 23*8 = 16 777 216 23*10 = 1 073 741 824 Po ustawieniu w systemie operacyjnym 32-bitowej jakości kolorów, większość...
- Dobre praktyki / CSS Zorientowane Obiektowo
...li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów można traktować jako osobny obiekt (zmiana wyglądu informacji o autorze nie powinna wpływać na wygląd samej treści artykułu), z...
- Wstawianie stylów CSS / Styl lokalny <... style>
...wstawiania stylów na stronach. Jako wyraz "wartość" (w deklaracji stylu) wpisujemy dokładną wartość atrybutu (np. dla koloru tekstu będzie to: red, blue czy też #31F4A5 itd.). Wartość zależy ściśle od cechy, po której stoi w deklaracji. Nie można przecież jako kolor tekstu podać np. left (bez sensu). Opis wszystkich wartości, jakie mogą występować przy konkretnych cechach, znajdziesz w dalszych rozdziałach kursu. Styl lokalny pozwala na nadanie formatowania konkretnemu pojedynczemu...
- Selektory elementów CSS / Reguły stylów
...np. p oznacza akapit. Deklaracje określają konkretne właściwości i wartości stylów, które mają zostać zastosowane do wybranych elementów, np. color: blue; zmienia kolor tekstu na niebieski.
- Selektory pseudoklas CSS / Odsyłacz podstawowy :link
...Na przykład: <a href="https://www.example.com">Tekst odsyłacza</a>. Jaki kolor ma link? Domyślnie linki są niebieskie (kolor #0000FF czyli blue), a odwiedzone linki są fioletowe (kolor #800080 czyli purple). Jak zmienić kolor odsyłacza HTML? Aby zmienić kolor odsyłacza w HTML, można użyć atrybutu style="..." lub zdefiniować regułę CSS. Na przykład: <a href="https://www.example.com" style="color: red">Tekst odsyłacza</a> lub w arkuszu stylów CSS: a { color: red; }. Jak...
- Selektory pseudoklas CSS / Atrybut języka :lang
...</body> /* Ta reguła zostanie zastosowana: */ p:lang(pl) { color: red } /* Ta reguła nie zostanie zastosowana: */ p[lang|="pl"] { color: blue } Przykład :lang Po wpisaniu w arkuszu stylów: p:lang(en) { color: red } div:lang(en) { border: 1px solid red } a następnie w kodzie źródłowym: <p lang="en">1. This is paragraph with attribute <b>lang="en"</b>.</p> <p lang="en-US">2. This is paragraph with attribute <b>lang="en-US"</b>.</p> <div lang="en">This is block with attribute...
- Selektory pseudoklas CSS / Szczegółowość selektorów
...kontener p.klasa { color: green } div#kontener p { color: olive } #kontener p { color: teal } div p.klasa { color: aqua } p.klasa { color: blue } .klasa { color: navy } div p { color: purple } p { color: fuchsia } * { color: black }
- Selektory pseudoklas CSS / Blokada :disabled :enabled
...które nie posiada atrybutu disabled (domyślnie). Przykład :disabled :enabled Po wpisaniu w arkuszu stylów: input:disabled { border: 1px solid blue } input:enabled { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Zablokowane" disabled> <input type="text" value="Odblokowane"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write
...wyróżnienie za pomocą CSS pól tylko do odczytu. Przykład :read-only :read-write Po wpisaniu w arkuszu stylów: input:read-only { border: 1px solid blue } input:read-write { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Tylko do odczytu" readonly> <input type="text" value="Do odczytu i do zapisu"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):