style - Kurs HTML i CSS
Selektory pseudoklas CSS / Domyślne :default...listy rozwijalnej, a także przyciski [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w formularzu może się również znajdować przycisk czyszczenia danych, po wciśnięciu klawisza Enter w dowolnym polu tekstowym, formularz zostanie wysłany, a nie...
- Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write
...przypisać atrybut readonly="..." [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre pola formularza (pole tekstowe, hasło, obszar tekstowy) mogą być zablokowane w taki sposób, że użytkownik nie będzie mógł zmienić ich wartości. Mimo tego, w odróżnieniu od pól całkowicie zablokowanych (z przypisanym atrybutem disabled), wartości z pól zablokowanych do zapisu będą normalnie...
- Czcionki CSS / Atrybuty mieszane wariantu czcionki {font-variant}
...przykład zamiast wpisywać kolejno: p { font-variant-ligatures: discretionary-ligatures; font-variant-caps: small-caps; font-variant-numeric: oldstyle-nums tabular-nums; } wystarczy wpisać: p { font-variant: discretionary-ligatures small-caps oldstyle-nums tabular-nums; } Jeśli zależy Ci na obsłudze również starszych przeglądarek, użyj: "font-variant: small-caps". Niestety tylko ten jeden wariant (zwykłe kapitaliki) ma szerokie wsparcie. Przykład {font-variant} Po wpisaniu: <p...
- Czcionki CSS / Proporcje czcionki {font-size-adjust}
...w poleceniu p - proporcje określone w poleceniu w' - obliczona wysokość p' - proporcje dostępnej czcionki Przykładowo, jeśli wpiszemy: <p style="font-family: Verdana, 'Times New Roman'; font-size: 14px; font-size-adjust: 0.58">jakiś tekst...</p> a jedyną dostępną czcionką byłby 'Times New Roman', to jego wielkość zostałaby podniesiona z 14px do 14px*(0.58/0.46) = 17.65px ('Times New Roman' ma proporcje 0.46) i dzięki temu, tekst będzie tak samo czytelny. UWAGA! Polecenie wchodzi w...
- Tekst CSS / Dekoracja tekstu {text-decoration}
...podkreślić słowo w CSS? Aby podkreślić słowo w CSS, możesz użyć właściwości text-decoration i ustawić jej wartość na underline. Na przykład: <span style="text-decoration: underline">słowo</span>.
- Tekst CSS / Transformacja tekstu {text-transform}
...CSS? Aby przekształcić tekst na duże litery w CSS, możesz użyć właściwości text-transform i ustawić jej wartość na uppercase. Na przykład: <p style="text-transform: uppercase">...</p>. To spowoduje, że wszystkie litery w tekście będą wielkie.
- Tekst CSS / Wcięcie w tekście {text-indent}
...zrobić wcięcie pierwszego wiersza akapitu, możesz użyć właściwości text-indent i ustawić wartość np. w pikselach albo w procentach. Na przykład: <p style="text-indent: 20px">...</p> wcięcie o 20 pikseli. Natomiast jeśli chcesz wciąć wszystkie wiersze tekstu w całym akapicie, zastosuj właściwość margin-left.
- Tekst CSS / Wysokość linii tekstu {line-height}
...Jak zmienić interlinię w CSS? Aby zmienić interlinię w CSS, użyj właściwości line-height i ustaw wartość zgodnie z potrzebami. Przykładowo: <p style="line-height: 1.5>...</p> dla odstępu 1.5 razy większego niż wysokość czcionki. Możesz również użyć jednostek (np. piksele) lub procentów. Jaki powinien być odstęp między wierszami? Odpowiedni odstęp między wierszami zależy od wielkości czcionki, stylu tekstu i preferencji projektowych. Zazwyczaj wartość odstępu mieści się w zakresie...
- Tekst CSS / Odstęp między literami tekstu {letter-spacing}
...odstępy między poszczególnymi literami w tekście. Może być używana do tworzenia efektu, gdzie litery są od siebie nieco rozsunięte. Przykład: <p style="letter-spacing: 1px;">Lorem ipsum...</p>. Jak rozstrzelić tekst? Aby rozstrzelić tekst w CSS, użyj właściwości letter-spacing i ustaw wartość dodatnią, np. "letter-spacing: 1px" dla odstępów między literami. Im większa wartość, tym większy efekt rozstrzelenia tekstu. To spowoduje, że litery będą od siebie bardziej oddzielone, tworząc...
- Tło CSS / Atrybuty mieszane tła {background}
...wartość background-color (red) do zbiorczej deklaracji background: p { background: red url(tlo.gif) } Przykład {background} Po wpisaniu: <p style="color: red; background: url(obrazek.jpg) no-repeat left"> To jest akapit z obrazkiem w tle. obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie. </p> otrzymamy na ekranie: To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest...