Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu.
Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów.
Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. Prezentacja może przyjąć wiele różnych form.
Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją. To są różne media o różnych charakterystykach. CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów.
Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj @media z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć.
| Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie.
W języku znaczników element rodzica pola nawigacyjnego ma id Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: @media print { #nav-area {display: none;}
}
|
Niektóre z popularnych typów mediów:
screen | Kolorowy wyświetlacz komputera |
print | Wyświetlanie na stronach |
projection | Wyświetlane podczas projekcji |
all | Wszystkie media (domyślne) |
| Istnieją też inne sposoby określenia docelowych mediów.
Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie W CSS możesz użyć Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu. Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę Media w specyfikacji CSS. Istnieje więcej przykładów wykorzystania własności |
CSS posiada specyficzne własności przeznaczone dla mediów stronicowych.
Reguła @page może ustawiać marginesy strony.
Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla @page:left oraz @page:right.
Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (in), punkty (pt) = 1/72 cala), centymetry (cm) lub milimetry (mm). Równie dobrze możesz używać ems (em), aby dopasować się do rozmiaru czcionki, oraz procentów (%).
Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności page-break-before, page-break-after i page-break-inside.
| Ta reguła ustawia margines strony na jeden cal dla każdej strony:
@page {margin: 1in;} Ta reguła zapewnia, że każdy element H! zaczyna się na nowej stronie: h1 {page-break-before: always;} |
| Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę Media stronicowe w specyfikacji CSS.
Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień. Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku. Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &mbdash; nie masz możliwości w pełni kontrolować wyniku. |
CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem.
Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika.
Istnieje pięć specjalnych selektorów:
| Selektor | Wybiera |
E:hover | Dowolny element E, nad którym znajduje się wskaźnik |
E:focus | Dowolny element E, który jest w danym momencie aktywny dla interfejsu |
E:active | Element E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika |
E:link | Dowolny element E, który jest odnośnikiem do strony której użytkownik nie odwiedzał ostatnio |
E:visited | Dowolny element E, który jest odnośnikiem do adresu URL, który użytkownik odwiedził niedawno |
Własność cursor określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor:
| Selektor | Wybiera |
pointer | Wskazuje odnośnik |
wait | Wskazuje, że program nie może przyjmować danych |
progress | Wskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika |
default | Domyślny (zazwyczaj strzałka) |
Własność outline tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury.
Jej wartości są podobne do własności border, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków.
Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut disabled lub readonly.
Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: {{ mediawiki.external('disabled') }} lub {{ mediawiki.external('readonly') }}.
Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje:
.green-button {
background-color:#cec;
color:#black;
border:2px outset #cec;
}
.green-button[disabled] {
background-color:#cdc;
color:#777;
}
.green-button:active {
border-style: inset;
}
To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę:
W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim. |
| Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę User interface w specyfikacji CSS.
Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. |
Stwórz nowy dokument HTML, doc4.html.
Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Print sample</TITLE> <LINK rel="stylesheet" type="text/css" href="style4.css"></strong> </HEAD> <BODY> <H1>Section A</H1> <P>This is the first section...</P> <H1>Section B</H1> <P>This is the second section...</P> <DIV id="print-head"> Heading for paged media </DIV> <DIV id="print-foot"> Page: </DIV> </BODY> </HTML>
Stwórz nowy arkusz stylów, style4.css.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
/*** Print sample ***/
/* defaults for screen */
#print-head,
#print-foot {
display: none;
}
/* print only */
@media print {
h1 {
page-break-before: always;
padding-top: 2em;
}
h1:first-child {
page-break-before: avoid;
counter-reset: page;
}
#print-head {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
font-size: 200%;
text-align: center;
}
#print-foot {
display: block;
position: fixed;
bottom: 0pt;
right: 0pt;
font-size: 200%;
}
#print-foot:after {
content: counter(page);
counter-increment: page;
}
} /* end print only */
Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki.
Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce.
|
|
| Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS.
Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów. Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. |
Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.
Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: JavaScript
{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }}