font color - Kurs HTML i CSS
Dobre praktyki / Przykazania webmastera...systemach operacyjnych. A jeśli użytkownik będzie chciał zaznaczyć kawałek takiego "tekstu"? Jeśli już naprawdę musisz użyć niestandardowego fontu, dla krótkich nagłówków możesz skorzystać z techniki zamiennika obrazkowego, a dla obszerniejszych akapitów - z czcionek osadzonych. Stosuj inny tytuł na każdej podstronie Znacznik title powinien najlepiej odzwierciedlać treść zawartą na danej stronie. W związku z tym w każdym dokumencie powinien być inny, chyba że w serwisie masz dwa...
- Menu w CSS / Pionowe menu
...ul li { border-bottom: 1px solid #9ce; } ul a:link, ul a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } ul a:hover { width: 166px; background-color: #28e; color: #fff; border-left: 20px solid #26d; } Usuwamy domyślne formatowanie listy. Ustalamy szerokość menu, dodajemy tło i podwójne obramowanie oraz niewielki odstęp pomiędzy obramowaniem a...
- Selektory pseudoklas CSS / Łączenie selektorów
...i braci. Selektor pseudoelementów może się znajdować tylko za ostatnim selektorem prostym w regule stylu. Przykład a.przyklad_selektory:hover { font-weight: bold } Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę class="przyklad_selektory", kiedy zostanie on wskazany myszką: Wskaż ten odsyłacz myszką: class="przyklad_selektory". A tutaj jest odsyłacz bez klasy. Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, ponieważ zwykle...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...w rozdziałach: Komendy CSS 2 i Komendy CSS3) bez względu na element, do którego zostanie przypisana. Oznacza to, że np. przypisanie stylu "font-weight: initial" do znacznika B spowoduje, że tekst w nim zawarty nie będzie pogrubiony - ponieważ właśnie taka jest wartość domyślna dla własności wagi czcionki. Natomiast użycie w tym przypadku wartości revert przywróci wytłuszczenie tekstu. Przykład {...: revert} To jest akapit koloru zielonego. Do jego elementów podrzędnych został...
- Dobre praktyki / CSS Zorientowane Obiektowo
...wartości w klasie pochodnej. Na przykład: .Article { color: black; background-color: white; /* ... */ } .Review { color: green; font-size: 12px; /* ... */ } Pamiętaj jednak, że kolejność wymieniania nazw klas w atrybucie class="..." z punktu widzenia kaskadowości stylów nie ma znaczenia, dlatego należy zadbać, aby w arkuszu stylów definicja klasy Review znajdowała się później niż Article. Ten prosty zabieg pozwoli nam uzyskać recenzję z zielonym tekstem, przy...
HTML5 / Napisy do filmów <track>...CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space. Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem: ::cue { color: white; background: black; } Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać: ::cue(b) { color: red; } ::cue(i) { color: lime; } ::cue(u) { color: aqua; } Aby zmienić...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...HTML5: Wstępne ładowanie, Priorytet ładowania. Przykład <link "stylesheet"> 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...
Galeria zdjęć HTML / Skrypt galerii zdjęć...padding: 0, lineHeight: 1, color: '#000', background: 'rgba(255, 255, 255, 0.5)', cursor: 'pointer' }; var navigationStyle = { fontSize: '50px', width: '75px', height: '75px', borderRadius: '50%', position: 'absolute', fontWeight: 'bold' }; var style = { container: { position: 'fixed', zIndex: 6000000, background: '#000' }, image: { maxWidth: '100%', maxHeight: '100%' }, progress: { position: 'absolute' }...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...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', serif; font-size: 300%; float: left } W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...o identyfikatorze id="demo"? Aby wybrać element o identyfikatorze id="demo" w CSS, używa się selektora identyfikatora. Na przykład: #demo { font-weight: bold; }. Kiedy CLASS a kiedy ID? Klasy (class="...") stosuje się, gdy chcemy zastosować te same style do wielu elementów o podobnych właściwościach. Natomiast identyfikatory (id="...") stosuje się, gdy chcemy zastosować unikalne style lub manipulacje do jednego konkretnego elementu na stronie.