html kolor - Kurs HTML i CSS
Tło CSS / Tło obrazkowe {background-image}...nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie. Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem. Jeśli kolor tekstu elementu z tłem obrazkowym jest zbliżony do domyślnego koloru tła strony, wskazane...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...dopasowane do Twoich wymagań obramowanie i inne style. ✅ Rozpocznij konfigurację obramowania Kolor tła ramki .nazwa-klasy { background-color: kolor tła; } "kolor tła" jest definicją koloru. Marginesy wewnątrz ramki .nazwa-klasy { padding: szerokość; } albo: .nazwa-klasy { padding-top: górny; padding-bottom: dolny; padding-left: lewy; padding-right: prawy; } Aby określić szerokość marginesu wewnętrznego bądź oddzielnie margines górny, dolny, lewy lub prawy, należy wpisać liczbę...
Podcast HTML / #7 Widżety HTML...ramek po kliknięciu odnośnika, należy użyć kodu JavaScript: <a href="javascript:void(0)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</a> "nazwaramki1" i "nazwaramki2" to wartości atrybutów name="..." nadane znacznikom <iframe>. W niektórych przypadkach zamiast parent.nazwaramki trzeba użyć top.nazwaramki albo self.nazwaramki. Możliwe jest załadowanie więcej niż dwóch ramek poprzez dodanie kolejnych...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...nadal czytelna. Dlaczego nie wyświetla mi się obrazek w tle? Jeżeli plik arkusza stylów *.css znajduje się w innym katalogu niż dokument *.html, ścieżkę dostępu do obrazka tła należy konstruować zawsze względem arkusza stylów. Ponadto innymi częstymi powodami niewyświetlania się obrazka mogą być: błędy literowe w nazwie pliku, niepodanie rozszerzenia nazwy pliku (niektóre systemy operacyjne, jak np. Windows, mogą go ukrywać) czy użycie w nazwie pliku polskich znaków diakrytycznych...
- Selektory pseudoklas CSS / Odsyłacz podstawowy :link
...<a href="...">...</a>, gdzie atrybut href="..." określa adres docelowy. 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...
- Szablon strony na DIV-ach / Stały szablon
...przykłady w skali 1:2, czyli dwukrotnie pomniejszone): Dwie kolumny: Nagłówek szablonu Menu nawigacyjne Treść strony Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; text-align: center; } #top { width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; background-color: #ccc; } #TRESC { width: 630px; float: left...
Aktualizacja / System newsów...poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function News(days) { this.config = { ////////// // Konfiguracja: 'days': 0, // ilość dni wyświetlania newsów (0 = zawsze) // Ustawienia domyślne: 'author': '', // autor 'email': '', // e-mail 'img': '', // obrazek 'width': '', // szerokość...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów. Załóżmy, że mamy na stronie menu nawigacyjne, któremu chcemy zmienić kolor tła oraz tekstu. W tym celu najpierw w dokumencie HTML obejmujemy całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class: <div class="menu-nawigacyjne">...</div> Następnie w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki: .menu-nawigacyjne...
- Widżety HTML / Ramki lokalne <iframe>
...niezależne okno przeglądarki wewnątrz strony internetowej. Jak wstawić IFRAME na HTML? Na przykład jeśli plik podstrony nazywa się "podstorna.html" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić ramkę IFRAME, można się posłużyć następującym znacznikiem: <iframe src="podstrona.html"></iframe>. Jaki znacznik HTML służy do wyświetlania w ramce fragmentu innej strony internetowej na własnej stronie internetowej? W ramce IFRAME można...
- Tekst HTML / Wykaz <ul, ol, li>
...li> Wykaz numerowany - różne typy Wykaz numerowany z podaniem początkowego numeru Zmiana numerowania w trakcie Wykaz z wypunktowaniem innym kolorem Wykaz w akapicie Potrzebujesz pomocy? Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ numeracji albo punktów i podpunktów. ✅ Rozpocznij konfigurację wykazu Wypunktowanie - lista...