polecenia - Kurs HTML i CSS
Pozycjonowanie CSS / Obcinanie {clip}...kształcie prostokąta), a następnie wyświetlić go na ekranie. Specyfikacja CSS 2 wprowadziła dość poważne zamieszanie, jeżeli chodzi o składnię tego polecenia. Nie dość, że sposób ustalania krawędzi prostokąta cięcia został zupełnie zmieniony w CSS 2.1, ponieważ żadna przeglądarka - prawdopodobnie ze względu na trudności w implementacji - nie interpretowała wcześniejszej propozycji, to jeszcze na dodatek CSS 2 niejednoznacznie określiła, jakimi separatorami powinny być rozdzielone wartości w...
- Pozycjonowanie CSS / Wyświetlanie {display}
...drukować menu nawigacyjnego, które powtarza się na każdej stronie, ponieważ na papierze i tak będzie ono całkowicie bezużyteczne. Zastosowanie tego polecenia pozwoli zaoszczędzić trochę papieru, a jednocześnie sprawi, że wydruk będzie wyglądał bardziej spójnie. Polecenie display: none jest zbliżone do visibility: hidden. Różnica polega na tym, że pierwsze z nich całkowicie usuwa element z ekranu, natomiast drugie tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste...
- Pozycjonowanie CSS / Ustawienie {float, vertical-align}
Spis treści {float, vertical-align} Ustawienie w poziomie {float} Ustawienie w pionie {vertical-align} Ustawienie w poziomie {float} selektor { float: sposób } Polecenia nie można zastosować do elementów pozycjonowanych absolutnie. Selektorem może być praktycznie dowolny znacznik, który nie został wypozycjonowany absolutnie [zobacz: Wstawianie stylów]. Natomiast jako "sposób" należy podać: left - element ustawiony po lewej stronie, względem elementów sąsiadujących right - element...
- CSS dla zielonych / Edytory CSS
...Jest to język komputerowy służący do ustalania wyglądu stron internetowych. Arkusz stylów CSS jest plikiem tekstowym, w którym wpisujemy wszystkie polecenia dotyczące formatowania tekstu, układu strony i inne. W czym pisać CSS? Arkusz stylów CSS jest plikiem tekstowym. Można go zatem tworzyć przy użyciu dowolnego prostego edytora tekstu. Jednak dużo lepszym wyborem jest skorzystanie z pomocy specjalnie przygotowanego do tego edytora CSS. Dzięki temu praca nad arkuszem stylów będzie...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie jest to plik pod nazwą "style.css", który znajduje się w tym samym katalogu co dokument *.html. Można go oczywiście zapisać w innej lokalizacji - wtedy zamiast "style.css" trzeba podać pełną ścieżkę dostępu (tworzy się ją w...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...0; flex-shrink: 0; flex-basis: auto"). Warto zauważyć, że domyślna wartość tych atrybutów jest inna - "0 1 auto". Z uwagi na fakt, że składnia tego polecenia przewiduje najczęstsze przypadki użycia, zaleca się stosować zawsze atrybuty mieszane zamiast osobnych poleceń. Przykład {flex} none flex: none none 1 0px flex: 1 0px 2 0px 1 auto flex: 1 auto 2 auto 1 1 auto flex: 1 1 auto 1 2 auto Pytania i odpowiedzi {flex-basis, flex-shrink, flex-grow} Co to jest...
Nowe okno / Kilka okienMożliwe jest otwarcie jednocześnie kilku nowych okien. Należy wtedy oddzielić średnikami (";") kolejne polecenia window.open('adres', 'nazwa'): <body onload="window.open('adres1', 'nazwa1'); window.open('adres2', 'nazwa2')">...</body> Trzeba wtedy jednak pamiętać, aby nazwy okien w kolejnych poleceniach były inne (albo ich wcale nie podawać). Wpisanie takich samych nazw, spowoduje otwarcie tylko jednego okna i załadowanie do niego strony ostatniej w kolejności podawania. Radzę nie przesadzać...
- Indeks, wyszukiwarka / Wygląd
Jeżeli nie odpowiada nam podstawowy wygląd indeksu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku indeks.css należy wkleić np.: #indeks { width: 300px; padding: 10px 0; background: #ccc; border: 2px outset #aaa; text-align: center; margin: 1em auto; } #indeks input.text { width: 290px; } #indeks select { width: 100%; margin: 2px 0 10px 0; } #indeks input.button { width: 100px; margin-left: 5px; margin-right: 5px; } W wyróżnionych...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
Jeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując 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...