Wspomaganie dla CSSKaskadowe arkusze stylów (CSS - ang. Cascading Style Sheets) są rekomendowanym sposobem formatowania tekstu. Za ich pomocą możesz również określać wygląd i zachowanie się innych elementów strony, jak np. obrazki w tle, dźwięki, wygląd przycisków i pól formularzy, i wiele innych. Pająk wspomaga tworzenie stron z wykorzystaniem CSS, na co składają się następujące funkcje i narzędzia:
Wiele narzędzi służących do edycji znaczników posiada również opcje do tworzenia stylów CSS i używania klas. Tworzenie prostego selektora CSS w bieżącym dokumencieUtworzenie nowego, pustego selektora W celu utworzenia prostego arkusza CSS włącz zakładkę Inspektor CSS (standardowy skrót Ctrl+3). Następnie użyj polecenia Nowy selektor . Utworzy się sekcja stylu w bieżącym dokumencie i szkielet pustego selektora bez nazwy. Teraz trzeba nadać nazwę selektorowi - może to być np. nazwa znacznika - DIV. Wpisz ją przed nawiasem klamrowym {. W ten sposób sprawimy, że wszystkie znaczniki DIV w dokumencie będą korzystały z tego stylu. Jak tworzyć i edytować własności stylu? Kolejną, najważniejszą czynnością jest utworzenie stylu. Postaw kursor pomiędzy nawiasami { i } i przejdź do Inspektora CSS. W górnej części zakładki, na liście z prawej strony pojawi się nazwa selektora DIV. Wcześniej tylko przygotowywałeś dokument do tworzenia stylu - w tym momencie zaczynasz naprawdę tworzyć styl dla wybranego znacznika. Styl tworzony jest za pomocą przypisywania odpowiednich wartości do własności stylu, które zostały umieszczone na liście poniżej menu. Własności te domyślnie są pogrupowane w kategorie, możesz to jednak zmienić (więcej w pomocy do Inspektora CSS). W celu ułatwienia wprowadzania wartości dla własnościCSS skorzystaj z dedykowanych narzędzi umożliwiających wybór czcionki, koloru itp. Możesz je otworzyć za pomocą przycisków znajdujących się z prawej strony pola do wpisywania wartości. W każdym takim polu znajdują się odpowiednie narzędzia dostosowane do wymaganych w nim wartości. Tworzenie stylu dla nowego selektora Aby ustawić formatowania czcionki, rozwiń kategorię Czcionka i ustaw odpowiednie własności stylu, np:
Opcje układu tekstu ustawisz w kategorii Tekst:
Podsumowanie Powyżej opisany został prosty (jednak chyba najczęściej stosowany) przykład wykorzystania arkuszy stylów CSS. Przeglądając zawartość listy własności, znajdziesz na niej o wiele więcej możliwości formatowania tekstu i innych elementów strony. Możesz wpływać na wygląd tabel, pasków przesuwania (obecnie tylko w Internet Explorerze), powiększenie, położenie i widoczność elementów, i wiele, wiele więcej. Możliwe jest np. wykorzystanie różnych stylów na ekranie i do wydruku. Wykorzystując języki skryptowe jednocześnie z językami HTML i CSS, otrzymasz nową technologię DHTML (Dynamic HTML), która oferuje prawie nieograniczoną swobodę w kreacji serwisu. Nazwy własności CSS w wielu przypadkach same tłumaczą swoje przeznaczenie. Jeśli jednak nie wiesz, do czego służy dana własność, przesuń kursor myszki nad nazwę danej własności i poczekaj chwilę - pojawi się podpowiedź w dymku. Jak korzystać z zewnętrznych plikow CSSNajwygodniejszym sposobem tworzenia arkuszy stylów jest stworzenie oddzielnego pliku, w którym zapisane będą wszystkie wykorzystane w dokumentach selektory, klasy itd. Dzięki temu ewentualne zmiany w tym pliku odniosą skutek w obrębie wszystkich dokumentów, do którego zostaną dołączone. Dołączenie pliku *.css do dokumentu jest banalnie proste - wystarczy przeciągnąć go z listy plików do dokumentu otwartego w edytorze. Pająk automatycznie utworzy i wklei do dokumentu odpowiedni kod. W ten sposób możesz tworzyć zarówno łącza do plików *.css w dokumentach HTML (utworzony zostanie znacznik <link>), jak i łączyć ze sobą kilka plików CSS (wstawiona zostanie instrukcja @import). |
Pokrewne tematy |