style html - Kurs HTML i CSS
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}...ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz własne, 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ść...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...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 wyróżnionych miejscach wpisano zdefiniowany uprzednio identyfikator menu. Teraz w nagłówku dokumentu HTML (<head>...</head>), na którym wstawione jest menu, wystarczy wstawić odwołanie do utworzonego właśnie...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
<div style="cecha: wartość; cecha2: wartość2...">...</div> Jako "cecha" należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach). Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu. Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
Spis treści Kaskadowe Arkusze Stylów Źródła Kaskadowe Arkusze Stylów CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak HTML. CSS daje możliwość globalnego...
- Menu w CSS / Pionowe menu
...zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować niepotrzebny margines z lewej strony: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } W efekcie uzyskamy: Czcionki Tekst Tło Marginesy Obramowanie W niektórych przeglądarkach nie jest konieczne wstawienie wszystkich powyższych deklaracji, jednak tylko taki zestaw właściwie gwarantuje uzyskanie zamierzonego efektu w każdych warunkach. Teraz mamy już przygotowany teren do właściwej...
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...
- HTML5 / Filmy i dźwięk <video, audio, source>
...wyśrodkować film w HTML? Aby ustawić odtwarzacz wideo na środku ekranu, należy go umieścić wewnątrz elementu blokowego z przypisanym odpowiednim stylem: <div style="text-align: center"> <video src="film.mp4"></video> </div>.
- HTML5 / Automatyczne zogniskowanie <... autofocus>
...do nawigacji za pomocą klawiatury. Na przykład: <button tabindex="-1">Przycisk</button>. Alternatywnie, można usunąć fokus CSS-owo, stosując atrybut style="outline: none" w wybranym znaczniku, albo odpowiednią deklarację w arkuszu stylów - np.: button { outline: none; }, choć to może wpłynąć na dostępność i użyteczność.
- Podcast HTML / #5 Tabele HTML
...może sprawić, że są mało czytelne. Obramowanie można dodać za pomocą atrybutu <table border="1">. Wąską tabelę można wyśrodkować, używając atrybutu style="margin: auto" w znaczniku <table>. Nagłówki i tytuły tabeli Komórki nagłówkowe <th>: służą do wstawiania komórek nagłówkowych zamiast zwykłych komórek <td>. Tekst w nich jest zazwyczaj pogrubiony i wyśrodkowany. Użycie <th> jest zalecane ze względu na ważne znaczenie semantyczne, chociaż efekt wizualny można by uzyskać przy użyciu...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
...w tym celu użyć następującego polecenia: <a href="adres"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a> gdzie jako "adres" można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez "http://" lub "https://" (np.: http://www.onet.pl), adres poczty elektronicznej poprzedzony przez "mailto:" (np.: mailto:jan_kowalski@example.com). Natomiast zamiast: "Tu...