From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../css/na_pocz\304\205tek/dane_xml/index.html" | 191 ------------- .../wi\304\205zania_xbl/index.html" | 176 ------------ .../index.html" | 299 --------------------- 3 files changed, 666 deletions(-) delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" (limited to 'files/pl/web/css/na_początek') diff --git "a/files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" "b/files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" deleted file mode 100644 index 3352d21184..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Dane XML -slug: Web/CSS/Na_początek/Dane_XML -tags: - - 'CSS:Na_początek' -translation_of: Archive/Beginner_tutorials/XML_data ---- -

-

Ta strona zawiera przykład tego, jak możesz używać CSS z danymi XML. -

Stworzysz przykładowy dokument XML oraz arkusz stylów, którego możesz użyć do wyświetlenia tego dokumentu w przeglądarce. -

-

Informacja: Dane XML

-

XML (Rozszerzalny Język Znaczników) jest językiem ogólnego przeznaczenia dla wszelkiego typu danych strukturalnych. -

Domyślnie, Twoja przeglądarka Mozilla wyświetla XML w formacie bardzo podobnym do ułożenia danych w oryginalnym pliku XML. -Dzięki temu możesz obejrzeć znaczniki, które określają strukturę danych. -

Przez podpięcie arkusza stylów CSS do dokumentu XML, może określić inne sposoby wyświetlenia go. -Aby to zrobić, Twój arkusz stylów używa reguł, które mapuje znaczniki w dokumencie XML, aby były wyświetlane w typach znanych HTML-owi. -

- - -
Przykład -
Dane w dokumencie XML używają tagu <INFO>. Chcesz, aby wszystkie elementy INFO w dokumencie były wyświetlane jak HTML-owe akapity. -

W arkuszu stylów dokumentu, określasz jak wyświetlane będą elementy INFO: -

-
-
INFO {
- display: block;
- margin: 1em 0;
- }
-
-
-
-

Najczęstszymi wartościami własności display są: -

- - - - -
blockWyświetlane jak HTML-owy DIV (nagłówki, akapity itp.) -
inlineWyświetlany jak HTML-owy SPAN (dla typów tekstowych) -
-

Dodaj własne reguły stylów, które określą krój, odstępy i inne szczegóły w taki sam sposób, jak dla HTML-a. -

- - -
Więcej szczegółów -
Inne wartości własności display pozwalają wyświetlać element jako punkt listy lub jako komponent tabeli. -

Pełną listę typów wyświetlania można znaleźć w specyfikacji CSS na stronie The display property. -

Jeśli korzystasz wyłącznie z CSS, struktura wyświetlania musi być taka sama jak struktura dokumentu. -Inne technologie pozwalają modyfikować strukturę wyświetlania—na przykład XBL może dodawać treść, a JavaScript może modyfikować DOM. -

Aby dowiedzieć się więcej o XML-u w Mozilli, zajrzyj na stronę XML w tym wiki. -

-
-

Zadanie: Demonstracja XML-a

-

Stwórz nowy plik XML, doc9.xml. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<?xml version="1.0"?>
-<!-- XML demonstration -->
-
-<?xml-stylesheet type="text/css" href="style9.css"?>
-
-<!DOCTYPE planet>
-<planet>
-
-<ocean>
-<name>Arctic</name>
-<area>13,000</area>
-<depth>1,200</depth>
-</ocean>
-
-<ocean>
-<name>Atlantic</name>
-<area>87,000</area>
-<depth>3,900</depth>
-</ocean>
-
-<ocean>
-<name>Pacific</name>
-<area>180,000</area>
-<depth>4,000</depth>
-</ocean>
-
-<ocean>
-<name>Indian</name>
-<area>75,000</area>
-<depth>3,900</depth>
-</ocean>
-
-<ocean>
-<name>Southern</name>
-<area>20,000</area>
-<depth>4,500</depth>
-</ocean>
-
-</planet>
-
-

Stwórz nowy plik CSS, style9.css. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
/*** XML demonstration ***/
-
-planet:before {
-  display: block;
-  width: 8em;
-  font-weight: bold;
-  font-size: 200%;
-  content: "Oceans";
-  margin: -.75em 0px .25em -.25em;
-  padding: .1em .25em;
-  background-color: #cdf;
-  }
-
-planet {
-  display: block;
-  margin: 2em 1em;
-  border: 4px solid #cdf;
-  padding: 0px 1em;
-  background-color: white;
-  }
-
-ocean {
-  display: block;
-  margin-bottom: 1em;
-  }
-
-name {
-  display: block;
-  font-weight: bold;
-  font-size: 150%;
-  }
-
-area {
-  display: block;
-  }
-
-area:before {
-  content: "Area: ";
-  }
-
-area:after {
-  content: " million km\B2";
-  }
-
-depth {
-  display: block;
-  }
-
-depth:before {
-  content: "Mean depth: ";
-  }
-
-depth:after {
-  content: " m";
-  }
-
-

Otwórz dokument w swojej przeglądarce: -

- - -
-

Oceans

-

Arctic
-Area: 13,000 million km²
-Mean depth: 1,200 m

-

Atlantic
-Area: 87,000 million km²
-Mean depth: 3,900 m

-

. . .

-
-
-


-Uwagi dotyczące tej demonstracji: -

- -


-

- - -
Wyzwanie -
Zmień arkusz stylów, aby wyświetlał dokument jako tabelę. -

(Zajrzyj na stronę Tables w specyfikacji CSS, aby znaleźć przykłady.) -

-
-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji. -

To jest ostatnia strona tego kursu. -Więcej informacji na temat CSS w Mozilli możesz znaleźć na głównej stronie CSS-a na tym wiki. -

{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML", "ko": "ko/CSS/Getting_Started/XML_data" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" "b/files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" deleted file mode 100644 index 9218b33797..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Wiązania XBL -slug: Web/CSS/Na_początek/Wiązania_XBL -tags: - - 'CSS:Na_początek' -translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets ---- -

-

Ta strona opisuje jak możesz używać CSS-u w Mozilli, aby poprawić strukturę złożonych aplikacji, sprawiając, że kod i zasoby stają się wygodniejsze do zarządzania i ponownego użycia. -

Wykorzystasz te techniki w przykładowej demonstracji. -

-

Informacja: Wiązania XBL

-

Struktura dostarczana przez język znaczników i CSS nie jest idealna dla złożonych aplikacji, gdzie fragmentu muszą być kompletne i umożliwiać ponowne wykorzystanie. Możesz umieścić arkusze stylów w osobnych plikach, możesz umieścić skrypty w osobnych plikach. Ale musisz dodawać odnośniki do tych plików z dokumentu. -

Inne ograniczenie strukturalne dotyczy zawartości. Możesz użyć CSS, aby dodać zawartość do wybranych elementów, ale ta zawartość jest ograniczona do tekstu i obrazków, a ich pozycjonowanie jest ograniczone do przed i za wybranym elementem. -

Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: XBL (Język Wiązań XML). -Możesz używać XBL-a do wiązania wybranych elementów: -

- -

Ponieważ unikasz umieszczania odnośników do tego wszystkiego w dokumencie, możesz stworzyć elementy kompletne, którymi łatwo można zarządzać i które można wielokrotnie wykorzystywać. -

- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o XBL na tym wiki. -
-

Zadanie: Demonstracja XBL-a

-

Stwórz nowy dokument HTML, doc6.html. -Skopiuj i wklej do niego poniższy kod: -

-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>XBL demonstration</H1>
-<DIV id="square">Click Me</DIV>
-</BODY>
-
-</HTML>
-
-

Stwórz nowy plik CSS, style6.css. -Ten arkusz stylów zawiera style dokumentu. -Skopiuj i wklej do niego poniższy kod: -

-
/*** XBL demonstration ***/
-#square {
-  -moz-binding: url("square.xbl#square");
-  }
-
-

Stwórz nowy plik tekstowy, square.xbl. -Ten plik zawiera wiązanie XBL. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<?xml version="1.0"?>
-<!DOCTYPE bindings>
-<bindings xmlns="http://www.mozilla.org/xbl">
-
-<binding id="square">
-
-  <resources>
-    <stylesheet src="bind6.css"/>
-    </resources>
-
-  <content xmlns="http://www.w3.org/1999/xhtml">
-    <div anonid="square"/>
-    <button anonid="button" type="button">
-      <xbl:children/>
-      </button>
-    </content>
-
-  <implementation>
-
-    <field name="square"><![CDATA[
-      document.getAnonymousElementByAttribute(this, "anonid", "square")
-      ]]></field>
-
-    <field name="button"><![CDATA[
-      document.getAnonymousElementByAttribute(this, "anonid", "button")
-      ]]></field>
-
-    <method name="doDemo">
-      <body><![CDATA[
-        this.square.style.backgroundColor = "#cf4"
-        this.square.style.marginLeft = "20em"
-        this.button.setAttribute("disabled", "true")
-        setTimeout(this.clearDemo, 2000, this)
-        ]]></body>
-      </method>
-
-    <method name="clearDemo">
-      <parameter name="me"/>
-      <body><![CDATA[
-        me.square.style.backgroundColor = "transparent"
-        me.square.style.marginLeft = "0"
-        me.button.removeAttribute("disabled")
-        ]]></body>
-      </method>
-
-    </implementation>
-
-  <handlers>
-    <handler event="click" button="0"><![CDATA[
-     if (event.originalTarget == this.button) this.doDemo()
-     ]]></handler>
-    </handlers>
-
-  </binding>
-
-</bindings>
-
-

Stwórz nowy plik CSS, bind6.css. -Ten arkusz stylów zawiera style do wiązań. -Skopiuj i wklej do niego poniższy kod: -

-
/*** XBL demonstration ***/
-[anonid="square"] {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  }
-
-[anonid="button"] {
-  margin-top: 1em;
-  padding: .5em 2em;"
-  }
-
-

Otwórz dokument w swojej przeglądarce i naciśnij przycisk. -

To wiki nie obsługuje JavaScript-u na stronach, więc nie jest możliwe pokazanie demonstracji. -Wygląda to mniej więcej tak jak poniżej, przed i po naciśnięciu przycisku: -

- - -
- - -

XBL demonstration

-
-
-
-		 - - -

XBL demonstration

-
-
-
-
-

Uwagi dotyczące demonstracji: -

- - - -
Wyzwanie -
Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor. -

Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość. -

-
-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

W tej demonstracji obiekt square oraz przycisk tworzą kompletną kontrolkę, która działa wewnątrz dokumentu HTML. -

Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika. -Demonstruje to następna strona: -XUL-owe interfejsy użytkownika -

{{ languages( { "en": "en/CSS/Getting_Started/XBL_bindings", "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pt": "pt/CSS/Como_come\u00e7ar/XBL_bindings" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" "b/files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" deleted file mode 100644 index c185657258..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: XUL-owe interfejsy użytkownika -slug: Web/CSS/Na_początek/XUL-owe_interfejsy_użytkownika -tags: - - 'CSS:Na_początek' -translation_of: Archive/Beginner_tutorials/XUL_user_interfaces ---- -

-

Ta strona opisuje specjalny język Mozilli do tworzenia interfejsów. -

Stworzysz przykładowy dokument demonstracyjny dla przeglądarek Gecko. -

-

Informacja: Interfejsy użytkownika

-

Mimo, że HTML posiada pewne wsparcie dla interfejsów użytkownika, to jest ono niewystarczające do stworzenia samodzielnej aplikacji. -

Mozilla pozwala pokonać te ograniczenia poprzez użycie specjalnego języka do tworzenia interfejsów użytkownika: XUL (XML User-interface Language, XML-owy Język Interfejsu Użytkownika, zazwyczaj wymawiany jak "zool"). -

W XUL-u, wiele często używanych funkcji interfejsu użytkownika jest wbudowanych. Na przykład, XUL dostarcza wyspecjalizowane typy okien jak okna dialogowe czy kreatory (wizards), oraz paski statusu, menu, paski narzędziowe, a nawet przeglądarki. -

Bardziej wyspecjalizowane funkcje, mogą zostać zbudowane z elementów przy użyciu XUL-a i innych technologii, które poznałeś(aś) w tym kursie: stylów CSS, kodu JavaScript, wiązań XBL. -

Jak inne języki XML-owe, XUL używa arkuszy stylów CSS. -

- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o XUL-owych interfejsach użytkownika, zajrzyj na stroną o XUL-u na tym wiki. -
-

Zadanie: Demonstracja XUL-a

-

Stwórz nowy dokument XUL jako czysty plik tekstowy, doc7.xul. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<?xml version="1.0"?>
-<?xml-stylesheet type="text/css" href="style7.css"?>
-<!DOCTYPE window>
-
-<window
-  xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-  title="CSS Getting Started - XUL demonstration"
-  onload="init();">
-
-<script type="application/x-javascript" src="script7.js"/>
-
-<label class="head-1" value="XUL demonstration"/>
-
-<vbox>
-
-  <groupbox class="demo-group">
-    <caption label="Day of week calculator"/>
-    <grid>
-      <columns>
-        <column/>
-        <column/>
-        </columns>
-      <rows>
-        <row>
-          <label class="text-prompt" value="Date:"
-            accesskey="D" control="date-text"/>
-          <textbox id="date-text" type="timed"
-            timeout="750" oncommand="refresh();"/>
-          </row>
-        <row>
-          <label value="Day:"/>
-          <hbox id="day-box">
-            <label class="day" value="Sunday" disabled="true"/>
-            <label class="day" value="Monday" disabled="true"/>
-            <label class="day" value="Tuesday" disabled="true"/>
-            <label class="day" value="Wednesday" disabled="true"/>
-            <label class="day" value="Thursday" disabled="true"/>
-            <label class="day" value="Friday" disabled="true"/>
-            <label class="day" value="Saturday" disabled="true"/>
-            </hbox>
-          </row>
-        </rows>
-      </grid>
-    <hbox class="buttons">
-      <button id="clear" label="Clear" accesskey="C"
-        oncommand="clearDate();"/>
-      <button id="today" label="Today" accesskey="T"
-        oncommand="setToday();"/>
-      </hbox>
-    </groupbox>
-
-  <statusbar>
-    <statusbarpanel id="status"/>
-    </statusbar>
-
-</vbox>
-
-</window>
-
-

Stwórz nowy plik CSS, style7.css. -Skopiuj i wklej do niego poniższy kod, upewniając się, że wkleiłeś(aś) cały: -

-
/*** XUL demonstration ***/
-window {
-  -moz-box-align: start;
-  background-color: -moz-dialog;
-  font: -moz-dialog;
-  padding: 2em;
-  }
-
-.head-1 {
-  font-weight: bold;
-  font-size: 200%;
-  padding-left: 5px;
-  }
-
-
-/* the group box */
-.demo-group {
-  padding: 1em;
-  }
-
-.demo-group grid {
-  margin-bottom: 1em;
-  }
-
-.demo-group column {
-  margin-right: .5em;
-  }
-
-.demo-group row {
-  margin-bottom: .5em;
-  }
-
-.demo-group .buttons {
-  -moz-box-pack: end;
-  }
-
-
-/* the day-of-week labels */
-.day {
-  margin-left: 1em;
-  }
-
-.day[disabled] {
-  color: #777;
-  }
-
-.day:first-child {
-  margin-left: 4px;
-  }
-
-
-/* the left column labels */
-.text-prompt {
-  padding-top: .25em;
-  }
-
-
-/* the date input box */
-#date-text {
-  max-width: 8em;
-  }
-
-
-/* the status bar */
-statusbar {
-  width: 100%;
-  border: 1px inset -moz-dialog;
-  margin: 4px;
-  padding: 0px 4px;
-  }
-
-#status {
-  padding: 4px;
-  }
-
-#status[warning] {
-  color: red;
-  }
-
-

Stwórz nowy plik tekstowy, script7.js. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
// XUL demonstration
-
-var dateBox, dayBox, currentDay, status; // elements
-
-// called by window onLoad
-function init() {
-  dateBox = document.getElementById("date-text")
-  dayBox = document.getElementById("day-box")
-  status = document.getElementById("status")
-  setToday();
-  }
-
-// called by Clear button
-function clearDate() {
-  dateBox.value = ""
-  refresh()
-  }
-
-// called by Today button
-function setToday() {
-  var d = new Date()
-  dateBox.value = (d.getMonth() + 1)
-    + "/" + d.getDate()
-    + "/" + d.getFullYear()
-  refresh()
-  }
-
-// called by Date textbox
-function refresh() {
-  var d = dateBox.value
-  var theDate = null
-
-  showStatus(null)
-  if (d != "") {
-    try {
-      var a = d.split("/")
-      var theDate = new Date(a[2], a[0] - 1, a[1])
-      showStatus(theDate)
-      }
-    catch (ex) {}
-    }
-  setDay(theDate)
-  }
-
-// internal
-function setDay(aDate) {
-  if (currentDay) currentDay.setAttribute("disabled", "true")
-  if (aDate == null) currentDay = null
-  else {
-    var d = aDate.getDay()
-    currentDay = dayBox.firstChild
-    while (d-- > 0) currentDay = currentDay.nextSibling
-    currentDay.removeAttribute("disabled")
-    }
-  dateBox.focus()
-  }
-
-function showStatus(aDate) {
-  if (aDate == null) {
-    status.removeAttribute("warning")
-    status.setAttribute("label", "")
-    }
-  else if (aDate === false || isNaN(aDate.getTime())) {
-    status.setAttribute("warning", "true")
-    status.setAttribute("label", "Date is not valid")
-    }
-  else {
-    status.removeAttribute("warning")
-    status.setAttribute("label", aDate.toLocaleDateString())
-    }
-  }
-
-

Aby zobaczyć właściwy wynik, użyj domyślnego motywu w swojej przeglądarce. -Jeżeli użyjesz innego, może on zmieniać trochę style interfejsu użytkownika i demonstracja może wyglądać dziwnie. -

Otwórz ten dokument w przeglądarce Mozilli i skorzystaj z interfejsu. -

To wiki nie obsługuje XUL-a ani JavaScript-u na stronach, nie jest więc możliwe pokazanie demonstracji tutaj. -Wygląda ona mniej więcej tak: -

- - -

XUL demonstration

-
-

-Day of week calculator

- - - - - - -
Date: -6/27/2005 -
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday -
-
-

Clear -Today -

-
-
-
-
-

June 27, 2005

-
-
-

Uwagi dotyczące demonstracji: -

- -

Sprawdź arkusz stylów dokumentu, aby upewnić się, że rozumiesz wszystkie reguły w nim zawarte. -Jeżeli jest jakaś reguła, której nie rozumiesz, wykomentuj ją i odśwież przeglądarkę, aby zobaczyć różnicę. -

- - -
Wyzwanie -
Korzystając z Inspektora DOM sprawdź kontrolkę bloku tekstowego Date. Jest ona złożona z elementów stworzonych przez jej wiązanie XBL. -

Znajdź klasę elementu html:input. To jest element, który przyjmuje dane od użytkownika. -

Korzystając z tej wiedzy, dodaj regułę do arkusza stylów, która sprawia, że tło pola Date będzie jasno niebieskie kiedy jest ono aktywne dla klawiatury (ale białe kiedy jest nieaktywne). -

-
-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji. -

W tej demonstracji, widzisz standardowe, prostokątne kształty, które są wspólne dla większości interfejsów użytkownika. -Mozilla wspiera także specjalny język graficzny do tworzenia kształtów, którego styl tworzy się w CSS-ie. -

Demonstruje to następna strona: Grafika SVG -

{{ languages( { "en": "en/CSS/Getting_Started/XUL_user_interfaces", "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pt": "pt/CSS/Como_come\u00e7ar/Interfaces_de_usu\u00e1rio_XUL" } ) }} -- cgit v1.2.3-54-g00ecf