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...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać: border-width: medium; border-style: solid; border-color: blue wystarczy podać: border: medium solid blue a otrzymamy ten sam efekt. Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border} border-top: thick double green border: medium solid blue Podkreślenie tekstu Ciekawym zastosowaniem...