color - Kurs HTML i CSS
Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>...w nagłówku dokumentu. Przykład <style> Jeśli w treści nagłówkowej strony zostałby umieszczony następujący wewnętrzny arkusz stylów: <style> h6 { color: red } </style> to po wpisaniu w dowolnym miejscu strony po prostu: <h6>To jest tytuł rzędu 6</h6> otrzymalibyśmy tytuł rzędu szóstego koloru czerwonego (color: red) i to niezależnie od tego, ile będzie na stronie takich tytułów. Wygodne, prawda? 🙂 Pytania i odpowiedzi <style> W jakim elemencie powinien być umieszczony wewnętrzny arkusz...
- Wstawianie stylów CSS / Styl lokalny <... style>
...cecha" czy inaczej własność bądź właściwość (ang. "property") należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (np. kolor tekstu - color). Opis wszystkich cech znajdziesz w następnych rozdziałach. Tutaj zajmiemy się tylko sposobami 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...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...A oto przykładowy zewnętrzny arkusz stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Ciekawostka Przeglądarki zwykle umożliwiają formatowanie wszystkich oglądanych stron (bez względu na ich pochodzenie), przy użyciu arkusza stylów dostarczonego przez użytkownika. Pozwala to np. określić odpowiadającą nam...
- Selektory atrybutów CSS / Prosty selektor atrybutu
...atrybutów w selektorach muszą być pisane małymi literami. Przykład Jeśli w arkuszu stylów strony została umieszczona następująca reguła: p[title] { color: red } to każdy akapit, któremu został nadany atrybut title="...", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut TITLE (aby to sprawdzić, wskaż go myszką) i dlatego powinien być koloru czerwonego. Dla porównania, to jest inny akapit bez atrybutu TITLE. Pierwszy z podanych wyżej akapitów powinien być czerwony...
- Selektory atrybutów CSS / Selektor atrybutu o określonej wartości
...muszą być pisane małymi literami. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title="To jest akapit"] { color: red } to każdy akapit, któremu został nadany atrybut title="..." o wartości "To jest akapit", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut TITLE o wartości "To jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego. Dla porównania, to akapit bez atrybutu TITLE. A to jest akapit z...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...w MSIE 6 wszystko jest w porządku. Przykład :first-letter Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:first-letter { color: red } to pierwsza litera każdego akapitu będzie mieć czerwony kolor: To jest akapit. Jeśli używasz Internet Explorera 5, wszystkie litery w powyższym akapicie będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku. Inny ciekawy przykład: p:first-letter { color: red; font-family: 'Times New Roman...
- Selektory pseudoklas CSS / Odsyłacz podstawowy :link
...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 usunąć podkreślenie hiperłącza CSS? Aby usunąć podkreślenie hiperłącza za pomocą CSS, można użyć reguły text-decoration: none;. Na przykład: a { text-decoration: none; }.
- Selektory pseudoklas CSS / Zogniskowanie :focus
...dotyczy to odsyłacza, wybranego za pomocą klawisza tabulatora czy pola formularza, w którym znalazł się kursor. Przykład :focus textarea:focus { color: white; background-color: black } Kliknij tutaj lub przenieś kursor za pomocą klawisza tabulatora, a tło w tym polu stanie się czarne natomiast tekst biały.
- Tło CSS / Tło obrazkowe {background-image}
...do zdjęcia z elementami przezroczystymi w CSS, można jednocześnie użyć właściwości background-image do ustawienia obrazka jako tła oraz background-color do określenia koloru tła. Na przykład, jeśli obrazek ma format GIF lub PNG z elementami przezroczystymi i chcesz dodać kolor tła, możesz użyć: "background-image: url('sciezka/do/zdjecia.png'); background-color: #EFEFEF", gdzie #EFEFEF to wybrany kolor tła. Takiego efektu nie można uzyskać ze zdjęciem w formacie JPG, ponieważ nie obsługuje on...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
... [ [ circle | ellipse ] || [ closest-corner | closest-side | farthest-corner | farthest-side ] ] [ at <position> ]? , | at <position> , ]? <color-stop> [ , <color-stop> ]+ ) Z powodu złożoności składni gradientu promienistego, przy jego komponowaniu polecam skorzystać ze specjalnego generatora. ✅ Rozpocznij konfigurację gratientu Przykład {background: radial-gradient} radial-gradient(white, black) Jeżeli identyczną deklarację gradientu wstawimy pod elementem prostokątnym, zamiast...