Co to jest div class? - Kurs HTML i CSS
Selektory pseudoklas / Domyślne :default...button:default { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji" class="przyklad_domyslne"> <input type="radio" name="pole_opcji" class="przyklad_domyslne"> </fieldset> <select size="3"> <option selected class="przyklad_domyslne">Opcja 1</option> <option class="przyklad_domyslne">Opcja 2</option> <option class="przyklad_domyslne">Opcja 3</option> </select> <div> <button type="submit">Wyślij</button>...
- Selektory specjalne / Selektor identyfikatora <... id>
...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.
- Selektory pseudoklas / Szczegółowość selektorów
...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 { color: red } p { color: black } Gdy w rozpatrywanych selektorach zarówno liczba identyfikatorów jak i klas, pseudoklas oraz atrybutów jest identyczna, bardziej szczegółowy (ważniejszy) jest selektor, który posiada więcej elementów lub pseudoelementów. Przykład Tekst przedstawionego poniżej akapitu będzie...
- Selektory pseudoelementów / Cudzysłowy {quotes}
...pierwszy akapit cytatu blokowego... To jest drugi akapit cytatu blokowego... To jest ostatni akapit cytatu blokowego (posiada przypisaną klasę class="last"). Pytania i odpowiedzi Jak zrobić cudzysłów HTML? Prosty cudzysłów w kodzie HTML można zrobić za pomocą encji znakowej " lub poprzez wpisanie znaku cudzysłowu bezpośrednio w kodzie: ". Jak zrobić cudzysłów w cudzysłowie? Aby umieścić cudzysłów wewnątrz innego cudzysłowu, można użyć różnych kombinacji cudzysłowów. Na...
- Selektory pseudoklas / Łączenie selektorów
...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 chcemy część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu...
- Obramowanie / Obramowanie obrazkowe {border-image-source}
...zostanie powielony w pionie, więc wystarczy, żeby miał wysokość 1px): Wykonanie ramki graficznej wymaga użycia następujące go kodu HTML: <div class="ramka"> <div class="ramka_pojemnik"> <div class="ramka_zawartosc"> ... </div> </div> </div> ...oraz CSS: .ramka { background: url(obramowanie.gif) no-repeat top; padding-top: 12px; width: 200px; } .ramka_pojemnik { background: url(obramowanie2.gif) no-repeat bottom; padding-bottom: 12px; } .ramka_zawartosc...
- Tło / Atrybuty mieszane tła {background}
...Po wpisaniu w arkuszu stylów: *.obrazek { background: url(obrazek.jpg) no-repeat left top; padding-left: 110px } a następnie na stronie: <p class="obrazek">Po lewej stronie tego tekstu znajduje się obrazek, który... (itd.)</p> otrzymamy: Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został...
- Obramowanie / Atrybuty mieszane obramowania {border}
...posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.: *.podkreslenie { border-bottom: 2px #f80 solid } a następnie na stronie: <span class="podkreslenie">...</span> Zagnieżdżanie obramowania <div style="border: solid red 3px"> <div style="border: solid green 3px"> <div style="border: solid blue 3px"> Potrójnie zagnieżdżone obramowanie </div> </div> </div> Potrójnie zagnieżdżone obramowanie Pytania i odpowiedzi {border} Jak zrobić obramowanie w CSS? Aby...
- Selektory CSS
...Selektor atrybutu zawierającego określony tekst 3 Selektory specjalne Wzór Znaczenie Opis CSS DIV.wart Tylko HTML. To samo co DIV[class~="wart"] Klasy selektorów 1 E#ident element E z identyfikatorem ID równym "ident" Selektor identyfikatora 1 Selektory pseudoelementów Wzór Znaczenie Opis CSS P:first-line pierwsza linijka akapitu P Pierwsza linia 1 P:first-letter pierwsza litera akapitu P Pierwsza litera 1 E:before wstawia treść przed...
- 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}
...nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można postawić spacji!), podczas gdy w kodzie HTML (drugie polecenie powyżej) znak kropki koniecznie trzeba usunąć. Ponadto w nazwie klasy najlepiej używać wyłącznie...