color strony - Kurs HTML i CSS
Szablon strony na DIV-ach / Płynny szablon...strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie: Ustalamy kolor tła oraz...
- Szablon strony na DIV-ach / Stały szablon
...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; overflow: hidden...
- Media CSS / Zapytania mediów
...Zapytania mediów wpisuje się dokładnie w tych samych miejscach, co przy tradycyjnym wyborze medium, np.: @import url(kolor.css) screen and (color); @media screen and (color) { /* Arkusz dla urządzeń z kolorowym ekranem */ } <link rel="stylesheet" media="screen and (color)" href="kolor.css"> Zapytanie mediów składa się ze standardowego typu lub grupy medium, po którym następuje słowo kluczowe "and" (ang. i), a następnie w nawiasie cecha medium (ang. media feature), określająca...
- Dobre praktyki / Przykazania webmastera
...a nie w wielu porozrzucanych po całym arkuszu deklaracjach. Najczęściej ustalanymi globalnie własnościami formatowania tekstu są: background, color, font. Używaj właściwych jednostek do ustawiania rozmiaru tekstu Do określania wartości font-size na ekranie najkorzystniej jest używać jednostki px (a nie em ani %), a na wydruku - pt. Z uzasadnieniem możesz się zapoznać w punkcie: Najlepszy sposób ustalania wielkości czcionki. Ustalaj rodzaj czcionki zawsze wspólnie z jej wielkością (i...
- Selektory pseudoklas CSS / Szczegółowość selektorów
...przedstawionego poniżej akapitu będzie czerwony (red): <div id="kontener"> <p id="identyfikator">...</p> </div> div#kontener p#identyfikator { color: red } p#identyfikator { color: green } p { color: black } Gdy rozpatrywane selektory nie zawierają żadnych identyfikatorów albo zawierają ich tyle samo, o ważności decyduje liczba użytych w regule klas, pseudoklas oraz atrybutów. Przykład Tekst przedstawionego poniżej akapitu będzie czerwony (red): <p class="klasa">...</p> p.klasa...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888; margin: 0; padding: 1px 5px; } #menu0 dd.active { font-weight: bold; } W...
- Menu w CSS / Poziome menu
...0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin...
- Szablon strony na DIV-ach / Responsywny szablon
...rozdziale i stworzyć najprostszy szablon responsywny korzystający z niezmiennego kodu HTML przedstawionego na wstępie. html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { background-color: #ccc; } #TRESC { background-color: #fff; } #STOPKA { background-color: #888; } @media only all and (min-width: 800px) { #MENU { width: 150px; float: left; overflow: hidden; position...
- Oprawa graficzna / "Duszki" CSS
...none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color...
HTML dla zielonych / Kolor tła oraz tekstu HTML <body "background-color, color"><body style="background-color: kolor tła; color: kolor tekstu"> Tu jest właściwa treść strony </body> Zamiast wyrazów "kolor tła" oraz "kolor tekstu" należy wpisać definicję koloru odpowiednio: tła strony oraz tekstu na całej stronie. Robi się to tak samo jak w przypadku czcionek. Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych wartości atrybutu dla znacznika <body>. Wartości te ("background-color: ...; color: ...") nie wpisujemy w miejscu właściwej treści...