Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Składnia CSS

No description
by

Mateusz Woźniak

on 2 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Składnia CSS

Składnia CSS
Kaskadowe arkusze stylów (ang. Cascading Style Sheets, w skrócie CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie.
CSS
Najnowsza specyfikacja CSS wprowadza pewne rozróżnienie sposobu wyświetlania elementów, w zależności od tego na jakim urządzeniu jest "wyświetlana" dana strona (ekran,drukarka,urządzenia czytające na głos,itp.).

Pomysł polega na wprowadzeniu przestrzeni nazw dla każdego z tych urządzeń. Elementy zdefiniowane w ogólnej przestrzeni nazw będą interpretowane przez wszystkie urządzenia jednakowo, natomiast elementy znajdujące się w np. przestrzeni dla ekranu nie będą interpretowane przez drukarkę.
Media
Między klamrami, po selektorze, definiujemy styl elementu. Opisujemy go ciągami: atrybut - wartość. Wartości atrybutom przypisuje się znakiem :. Należy jednak pamiętać by po przypisaniu wartości parametrowi np. "font-weight: bold" oddzielić go od innych średnikiem ("font-weight:bold;") w przeciwnym przypadku dalszy ciąg pliku zostanie potraktowany jako wartość tego elementu. Najlepiej po każdym średniku przejść do nowej linii - zwiększy to czytelność pliku.
Styl
Selektor to identyfikator, który określa do jakich elementów dopasować (select - wybrać) dany styl. Można rozróżnić kilka rodzajów selektorów.
Selektor
Selektory można rozszerzyć o tzw. pseudoelementy - które określają szczególne zastosowanie elementu. Wśród najważniejszych pseudoelementów wyróżniamy:

:before
zawartość przed elementem
:after
zawartość po elemencie
:first-letter
pierwsza litera
:first-line
pierwszy wiersz
:first-child
element jest pierwszym dzieckiem swojego rodzica
:last-child
element jest ostatnim dzieckiem swojego rodzica
Pseudoelementy
Ciekawe możliwości, jakie stwarza CSS, to generowanie zawartości - tekstu a nawet grafiki.


powoduje, że tekst zawarty w danym elemencie zostanie usunięty i zastąpiony przez "generowana zawartość". Aby uniknąć straty zawartości elementu, atrybut content umieszcza się w pseudoelementach :before i :after. To jednak nie wszystko. Chcąc po każdym adresie e-mail na naszej stronie umieścić ikonkę skrzynki pocztowej, możemy użyć stylu CSS, oszczędzając miejsce w kodzie (X)HTML a sobie samemu mnóstwa pracy!


Niestety, obecnie dobrą obsługą generowania zawartości może pochwalić się jedynie przeglądarka Opera
Generowanie zawartości
Ustanawianie przestrzeni nazw

Wśród najważniejszych pseudoklas wyróżniamy:

:hover
element został wskazany myszą
:active
link jest aktywny
:link
link
:visited
link został odwiedzony
:focus
element (który nie jest odnośnikiem) jest aktywny
:lang(C)
element, którego zawartość jest w języku C.
Kod języka musi być podany zgodnie ze specyfikacją HTML 4.0 lub RFC 1766
Pseudoklasy
Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:". Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:



Liczniki
Wyróżnia się następujące przestrzenie nazw:

all
- wszystkie urządzenia
print
- drukarka
screen
- kolorowy ekran
handheld
- mały ekran (komputery typu palmtop, telefony komórkowe,itp.)
projection
- projektory
speech
- urządzenia głosowe
tv
- telewizory (mało kolorów,ograniczona wielkość,dźwięk)
tty
- przeglądarki tekstowe (podstawową jednostką miary jest znak, nie piksel)
embossed
- drukarki brailowskie (ograniczenia podobne do przeglądarek tekstowych, plus brak kolorów)
Rodzaje urządzeń
Element
blockquote, p, table
Pasuje do dowolnego elementu, odpowiednio: blockquote, p, table
Klasa
.zielony, .pogrubiony, .wyjustowany, .niewidoczny
Pasuje do dowolnego elementu z atrybutem class="zielony itp.
Identyfikator
#naglowek, #stopka, #menu, #moj_adres

Pasuje do dowolnego elementu z atrybutem id="naglowek". Może być co najwyżej jeden taki element w całym dokumencie! Można łączyć selektory, dodając do elementu klasę lub identyfikator. Zawężamy w ten sposób zastosowanie stylu. Na przykład, jeśli chcemy by zielony był tylko paragraf, ale już nie tabelka, piszemy:
p.zielony{ background-color: green; }
Wtedy wpisanie <table class="zielony"> nie będzie miało żadnego efektu. Możemy też kilka selektorów oddzielić przecinkami i wtedy klamra po nich będzie miała odniesienie do każdego.
Według atrybutów
Nowsze specyfikacje CSS dają nam do ręki potężne narzędzie - możliwość określania stylu w zależności od atrybutów elementu. Dodając:


spowodujemy, że tekst w każdym elemencie, który ma ustawiony atrybut lang="pl", będzie miał kolor niebieski. Przydatnymi i często stosowanymi sztuczkami są:


Pierwsza z nich powoduje, że każdy link z określonym atrybutem target (nieważna jest wartość) będzie po najechaniu na niego myszą zmieniał kursor na "celownik" (jest to usankcjonowany sposób ostrzegania użytkownika, że link otwiera się w nowym oknie). Natomiast drugi powoduje podkreślenie skrótów kropkowaną linią.
Niestety, w przypadku obu z nich starsze przeglądarki są zupełnie bezradne.
[lang="pl"] { color: blue; }
a[target] { cursor: crosshair; }
abbr[title], acronym[title] { border-bottom: 1px dotted black; }

Kolejność
Jeśli wypiszemy kilka selektorów po sobie, bez przecinków, będzie to oznaczało, że chodzi nam o ich wzajemne położenie.


Ooznacza: paragraf zawarty wewnątrz elementu <div>, który z kolei jest zawarty w elemencie <table>. Natomiast notacja:


oznacza: paragraf, którego rodzicem (czyli elementem, który bezpośrednio go zawiera) jest element div.

Różnicę można dostrzec rozważając kod:



Pierwszy z wyżej wymienionych selektorów będzie pasował do obu linijek. Drugi - tylko do drugiej (w pierwszej <div> i <p> są rozdzielone przez <pre>). Niestety, Internet Explorer zupełnie nie rozpoznaje drugiej notacji!
table div p{ font-size: smaller; }
div > p{ font-size: smaller; }
<div><pre><p>tekst</p></pre></div>
<div><p>tekst</p></div>
Pseudoelementy występują w selektorze po dwukropku (:). Przykład:



Powyższy przykład powoduje, że zawartość pierwszej kolumny każdego wiersza w tabeli jest odsunięta od lewej strony o 2em. Jeśli element określony jest dodatkową klasą to pseudoelement występuje po nazwie klasy:


Powyższy kod spowoduje automatyczne uzupełnienie każdej komórki zawierającej kwotę o oznaczenie waluty.

Uwaga! Pseudoelementy nie są jeszcze wspierane przez niektóre przeglądarki, a szczególnie przez IE do wersji 6.
td:first-child { padding-left: 2em; }
td.price:after {content: " PLN";}
.

content: "generowana zawartość";

.mail:after{ content: url("images/mail.gif"); }
ol {
counter-reset: sekcja; /* Tworzy nową instancję licznika
sekcja w każdym elemencie ol */
list-style-type: none; /* Usuwa domyślnie wyświetlany licznik */
}
li:before {
counter-increment: sekcja; /* Zwiększa tylko tę instancję
licznika sekcja */
content: counters(sekcja, ".") " "; /* Wyświetla wartości wszystkich
instancji licznika sekcja,
oddzielając je ciągiem ".". */
Przestrzeń można ustawić na dwa sposoby:
poprzez dyrektywę importującą @import:




poprzez dyrektywę definiującą przestrzeń @media:

@import url('style-drukarkowe.css') print;
@import url('style-ekranowe.css') screen;
@media screen {
BODY {background-color:#f2f2f2;}/* tło na ekranie będzie szare*/
}

@media print {
BODY {background-color:#ffffff;}/* tło na papierze będzie białe*/
}

@media screen,print {
BODY {color:#000000;}/* tekst na ekranie i papierze będzie czarny*/
}
Full transcript