Dodawanie arkuszy stylów

« Poprzedni Następny »

Posiadamy zmodyfikowany widok elementów, stworzonych wcześniej. XUL używa CSS (Kaskadowe arkusze stylów) do dostosowania swoich elementów.

Arkusze stylów

Arkusz stylów jest plikiem zawierającym informację na temat stylu danego elementu. Jest to oryginalnie zaprojektowany element HTML lub potrafiący być dodanym tylko do elementów XUL, oraz posiada odwołanie do XML-a. Arkusz stylów zawiera informacje dotyczące; czcionki, kolorów, obramowania i rozmiarów elementów.

Mozilla stosuje domyślne arkusze stylów, dla każdego okna XUL. W wielu przypadkach to będzie wystarczający powód wyłączenia tego ustawienia jako domyślnego. W przyszłości, użytkownik będzie miał możliwość dodania arkusz stylów. Generalnie, będziemy łączyć jeden plik arkusza stylów z każdym plikiem XUL.

Możesz wstawiać arkusze stylów, gdziekolwiek sobie życzysz. Jeśli Wasz plik XUL jest przechowywany i posiadasz dojście do HTTP URL, możesz przechować działający arkusz stylów. Jeśli tworzysz paczkę XUL, to zostanie ona zainstalowana jako część systemu chrome, masz dwie możliwości. Pierwsza, możesz magazynować arkusz stylów w tym samym katalogu co plik XUL. Ta metoda jest wadliwa, ponieważ znaczy to, że twoja nie będzie zdolna być motywem. Druga metoda angażuje położenie twoich plików jako część tematu.

Podsumujmy, co zbudowaliśmy i jakie zdolności zostały zawarte w oknie dialogowym "Znajdź pliki", ponieważ okno dialogowe Znajdź pliki kieruje do adresu URL chrome://findfile/content/findfile.xul, więc plik arkusza stylów będzie magazynowany w chrome://findfile/skin/findfile.css.

Wszystkie przykłady umieszczono dalej, aktualnie zostały one użyte już jako arkusz stylów:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

Linia ta sygnalizuje użycie stylu pobranego z chrome://global/skin/. W Mozilli, może zostać przetłumaczone jako plik global.css, który stanowi domyślny styl informacji dla elementu XUL. Możesz tą linię usunąć i elementy wciąż będą pracowały, jednakże będą wyglądały raczej dobrze. Arkusz stylów nakłada rozmaite czcionki, kolory i obramowania do tworzenia elementów wyglądających bardziej odpowiednio.

Zmieniamy style

Jednakże, zdążają się sytuacje kiedy domyślny wygląd elementów nie da pożądanych przez nas efektów. W takiej sytuacji, będziemy musieli dodać własny arkusz stylów. Tak więc, dodamy style używając do tego atrybut style elementu. Wykonanie tego, nie jest najlepszym sposobem na dodanie stylu. Lepszym sposobem, od poprzedniego będzie utworzenie osobnego pliku arkusza stylów. Powodem jest inny wygląd, lub skóra, może zostać wczytana w prosty sposób.

W pewnych sytuacjach, gdzie klasa atrybutu style jest dopuszczalna. Przykładem mógł być moment kiedy skrypt zmienia style lub gdzie różnice w layoucie mogą znaczyć zmienić zachowanie lub przeznaczenie elementu. Jednakże powinieneś unikać tego bardzo jako of the element.

Dla zainstalowanych plików, utwórz lub zmodyfikuj listę plików i zainstaluj motyw.

Przykład okna dialogowego: <tt>Znajdź pliki</tt>

Zmodyfikujmy okno dialogowe <tt>Znajdź pliki</tt>, tak więc style pochodzą z oddzielonego pliku stylów. Po pierwsze, zmodyfikowane linie w pliku findfile.xul:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="findfile.css" type="text/css"?>
  ...
<spacer class="titlespace"/>
  <groupbox orient="horizontal">
    <caption label="Search Criteria"/>

      <menulist id="searchtype">
        <menupopup>
          <menuitem label="Name"/>
          <menuitem label="Size"/>
          <menuitem label="Date Modified"/>
        </menupopup>
      </menulist>
      <spacer class="springspace"/>
      <menulist id="searchmode">
        <menupopup>
          <menuitem label="Is"/>
          <menuitem label="Is Not"/>
        </menupopup>
      </menulist>

      <spacer class="springspace"/>
      <menulist id="find-text" flex="1"
          editable="true"
          datasources="file:///mozilla/recents.rdf"
          ref="https://www.xulplanet.com/rdf/recent/all"/>
  ...
<spacer class="titlespace"/>
<hbox>

  <progressmeter id="progmeter" value="50%" style="display:none;"/>

Nowa linia kodu xml-stylesheet jest użyta do importu arkusza stylów. Zawiera on style, które umieszczamy w pliku arkusza stylów, zamiast umieszczania ich w pliku XUL. Możemy użyć dowolną liczbę arkuszy stylów w podobny sposób jak przedstawione było wcześniej. Arkusz stylów umieszczamy w tym samym katalogu co plik findfile.xul.

Niektóre style znajdujące sie w kodzie powyżej zostały usunięte. Jeden nie wyświetlił (display) własności przez progressmeter. Zostanie zmieniony skrypt znajdującego się po lewej stronie, dlatego że nie miałoby to większego sensu wyświetlanie paska początkowego postępu. Wciąż umieszczamy style w osobnym pliku arkuszy stylów, jeśli Ci jest to potrzebne. Klasę (class) dodajemy do zawartości tagów, przy których możemy zdefiniować style.

Arkusz stylów także musi zostać utworzony. Stwórz plik findfile.css, w tym samym katalogu co plik XUL (to jest normalne, gdy położymy je do innych motywów). W pliku zadeklarujemy style, tak jak jest to pokazane poniżej.

#find-text {
  min-width: 15em;
}

#progmeter {
  margin: 4px;
}

.springspace {
  width: 10px;
}

.titlespace {
  height: 10px;
}

Zauważ, że znajdujące się tutaj pliki stylów są równoważne do plików jakie mieliśmy wcześniej. Jednakże, jest to bardzo proste dla każdej osoby zmieniającej widok okienka dialogowego <tt>Zajdź pliki</tt>, ponieważ one nie dodają oraz modyfikują deklarację stylów, wcześniej modyfikowany plik oraz zmiana motywów. Jeśli użytkownik nie zmienia pliku lub zmienionych motywów, a zmieni się on w pliku motywy. Jeśli zmienimy, interfejs zawierający motywy, pliki w innych katalogach zawierających motywy.

Importowanie arkuszy stylów

Tymczasem zobacz, jak importować arkusze stylów. Przykład poniżej przestawia:

<?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?>

To mogłaby być pierwsza linia zakładki okna. To importuje zakładki arkuszy stylów, które są w bookmarks.css. System motywów Mozilli jest wystarczająco eleganckiej sylwetki, która jest użyta w arkuszu stylów, ponieważ specyficzna nazwa pliku nie jest tutaj zasygnalizowana. Mamy zrobione coś podobnego jak globalny plik arkusza stylów (chrome://global/skin).

Arkusz stylów może importować style z innego arkusza używając dyrektywy import. Zazwyczaj importujemy jeden arkusz stylów z każdego pliku XUL. Arkusz stylu globalnego potrafi być importowany wraz z arkuszem stylów łączącym się z plikiem XUL. Wykonanie tego wymaga zrobienia kodu jak poniżej, uznającego Tobie usunięty kod, importowany z pliku XUL:

Style import from XUL:
<?xml-stylesheet href="chrome://global/skin/"  type="text/css"?>

Style import from CSS:
@import url(chrome://global/skin/);

Druga składnia jest preferowana, ponieważ redukuje to liczbę uzależnień samemu sobie wobec pliku XUL.

Usuń z pliku findfile.xul import globalnego arkusza stylów i dodaj import findfile.css

Wszystkie elementy mogą być formatowane stylami używając CSS. Możesz użyć selektorów do zaznaczenia elementów, które sobie życzysz formatować za pomocą stylów (selektory to część przed kędzierzawą klamrą w zasadach stylów). Idąc na przód w tabeli podsumowanie dostępnych selektorów:

button: Dopasuje wszystkie znaczniki przycisku.
#special-button: Dopasuje elementy z identyfikatorem (id) special-button.
.bigbuttons: Dopasuje wszystkie elementy z klasą (class) bigbuttons.
button.bigbuttons: Dopasuje wszystkie elementy przycisku z klasą (class) bigbuttons.
toolbar > button: Dopasuje wszystkie przyciski, które są bezpośrednio wewnątrz elementów paska narzędzi.
toolbar > button.bigbuttons: Dopasuje wszystkie elementy przycisku z klasą (class) bigbuttons, które są bezpośrednio wewnątrz elementów paska narzędzi.
button.bigbuttons:hover: Dopasuje wszystkie elementy przycisku z klasą (class) bigbuttons, lecz tylko wtedy, gdy kursor myszki znajduje się nad nim.
button#special-button:active: Dopasuje wszystkie elementy przycisku z identyfikatorem (id) special-button, lecz tylko wtedy, gdy są one aktywne (zostały kliknięte).
box[orient="horizontal"]: Dopasuje wszystkie elementy pudełka, które posiadają atrybut orient, który jest ustawiony na wartość horizontal.

Jak kombinujesz coś z zasadami arkusza stylów, w różnych przypadkach według naszego uznania. Zawsze dobry pomysł jest precyzyjny jako prawdopodobnie wtedy kiedy specyficzny gest jest formatowana stylami. Jest to więcej efektywne i także redukcja prawdopodobieństwa taka, że twój arkusz stylów będzie źle się wyświetlał.

Przykład <tt>Znajdź pliki</tt> : Źródła Podgląd

W następnym artykule, zobaczymy jak zastosować style do drzew.