1 / 47

CSS

CSS. Cascading Style Sheets. Rodzaje stylów. wierszowe wewnętrzne zewnetrzne. Dziedziczenie. Element stojący niżej w hierarchii przyjmuje cechy elementu znajdującego się wyżej, chyba że jawnie zostaną zdefiniowane nowe reguły.

igor-jacobson
Télécharger la présentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Cascading Style Sheets

  2. Rodzaje stylów • wierszowe • wewnętrzne • zewnetrzne

  3. Dziedziczenie Element stojący niżej w hierarchii przyjmuje cechy elementu znajdującego się wyżej, chyba że jawnie zostaną zdefiniowane nowe reguły. np.jeśli akapit znajduje się w warstwie, to przejmuje styl przypisany warstwie.

  4. Kaskadowość wyjaśnia sposób działania stylów, w przypadku gdy wiele reguł odnosi się do tych samych elementów. Najpierw nakładane są style bardziej ogólne, a dopiero potem bardziej szczegółowe. Ostateczny styl elementu to ten nałożony najpóźniej, czyli znajdujący się najniżej w kaskadzie.

  5. Kolejność nakładania • style z zewnętrznych plików, • style ze znaczników <style>, • style wierszowe • sektory ogólne • sektory elementu, • sektory klas i pseudoklas, • sektory identyfikatorów.

  6. Styl wierszowy <znacznik style="definicja stylu"> treść znacznika</znacznik> style="definicja1;definicja2; ...definicja N„ np. <p style="font-size:18pt; color:red; "> Czcionka o rozmiarze 18 pt drukarskich i kolorze czerwonym </p>

  7. Styl wewnętrzny deklaruje styl dla wszystkich objętych nim elementów. Umieszcza się go w nagłówku strony. <head> <style type="text/css"> element1{ definicja stylu} element2{ definicja stylu} </style>

  8. Styl zewnętrzny Styl zdefiniowany w osobnym (zewnętrznym) pliku. W sekcji nagłówkowej umieszczony jest wówczas link wskazujący ten plik. <link rel="stylesheet" type="text/css" href="nazwa_pliku.css">

  9. Budowa stylu Styl składa się z reguł. Pojedyncza reguła składa się z selektora wraz z zestawem definicji (par cecha : wartość).Każda definicja powinna zakończyć się znakiem średnika. Selektor pojedynczego elementu – wybiera dany element strony definiowany przez określony znacznik, np.div{color:green; font-size:20}

  10. Selektor ogólny – używamy, gdy chcemy zmienić pewną cechę dotyczącą każdego elementu danej witryny np.<head> <style type="text/css">*{color:blue; font-size:20} </style>

  11. Selektor klasy – pozwala zdefiniować zestaw reguł (klasę), które można potem przypisywać dowolnym elementom strony np.element.nazwa_klasy{definicje} jeśli dana klasa ma obowiązywać dla dowolnych elementów należy użyć selektora ogólnego.nazwa_klasy{definicje}

  12. Użycie klasy dla zmodyfikowania właściwości elementu <znacznik class=„nazwa klasy” pozostałe atrybuty>treść znacznika </znacznik> definicja klasy <style type="text/css"> .duzezielone{font-size:20pk;color:green;} </style> użycie <div class="duzezielone"> treść</div>

  13. Selektor identyfikatora umożliwia przypisanie stylu elementowi witryny o zadanym identyfikatorze (posiadającemu atrybut id) #identyfikator {definicje} np. <style type="text/css"> # specakapit{color:red;} </style> użycie <p id="specakapit"> treść</p>

  14. Selektor pseudoklasy oznaczają elementy o określonym stanie bądź właściwościelement:pseudo_klasa{definicje} Lista pseudoklas:

  15. Selektor wieloelementowytą samą regułę nadajemy wielu elementom witryny element1, element2, ..., elementN {definicje} np. <style type="text/css"> h1,h2,h3{color:green} </style>

  16. Czcionki Rozmiar czcionki font-size:wartośćjm; • jm – np. 1cm, 8mm,12pt, 20px • standard – 12pt • jm=2em oznacza dwukrotne powiększenie bieżącej czcionki; =0,6 zmniejszenie czcionki do 6/10 bieżącej czcionki • nazwane czcionki tak jak w znaczniku <font>,np. small, large, ...

  17. Czcionki Rodziny czcionek font-family:nazwa1, nazwa2,...;nazwa – nazwa czcionki lub rodziny czcionek np.font-family:"Times New Roman"; font-family:„Arial"; font-family:"sans-serif "; font-family:"fantasy";

  18. Czcionki Style i warianty czcionek font-style:wartość np. font-style:"italic"; font-variant:"small-caps"; Grubość czcionek stosuje się wartości bezwzględne opisowe (normal, bold) i numeryczne (100, 200, ..., 900) oraz względne (bolder, lighter) czcionka zwykła to 400, bold to 700 np. <p style=font-weight:500;</p>

  19. Cecha font określenie w jednym miejscu wszystkich cech czcionki font: font-style font-variant font-weight font-size / line-height font family; przykład: style="font: italic bold 10pt Times,serif; "

  20. Formatowanie tekstu Wyrównanie tekstu w poziomie style="text-align:right"; :left; :center; :justify; Właściwość text-align wyrównuje nie tylko tekst, ale również nietekstowe elementy witryny

  21. Wyrównanie tekstu w pionie style="vertical- align:baseline;" :baseline; - wyrównanie do linii bazowej :bottom; - dolna linia elementu wyrównana jest do najniższej linii wiersza :middle; - wyrównanie do linii środkowej :sub; - indeks dolny :super; - indeks górny : top; - górna linia elementu wyrównana do najwyższej linii wiersza

  22. Bezpośrednie określanie przesunięcia w pionie style="vertical-align:20px;" style="vertical-align:2em; " przesunięcie w górę o dwie wysokości czcionki elementu nadrzędnego style="vertical-align:-2em; " przesunięcie w dół o dwie wysokości czcionki elementu nadrzędnego

  23. Pionowe odstępy w tekście line – height odstępy między wierszami przykład line – height:2; odstęp równy dwukrotnej wielkości czcionki line – height:85%; odstęp 75% wielkości czcionki

  24. Odstępy miedzy słowami i znakami word-spacing – dodatkowy odstęp między słowami letter-spacing – dodatkowy odstęp między literami przykład word-spacing:1cm - standardowy odstęp między wyrazami zostanie zwiększony o 1cm letter-spacing:2px - standardowy odstęp między literami zostanie zwiększony o 2piksele;-2px zmniejszony o 2 piksele

  25. Wcięcia text-indent przyjmuje dwa rodzaje wartości: • określone jednostką miary; • określony procentowo w stosunku do elementu nadrzędnego przykład text-indent:1cm standardowe wcięcie o 1 cm w prawo; :-1cm w lewo

  26. Wyróżnienia text-decoration • blink – tekst migający • line-through – tekst przekreślony • overline – podkreślenie nad tekstem • underline – tekst podkreślony przykład text-decoration:blink line-trough uwaga! blink nie rozpoznawany przez Internet Explorera

  27. Transformacja wielkości liter text-transform – kontrola wielkości liter • capitalize – zamiana pierwszej litery każdego słowa na wielką • lowercase – zmiana wszystkich liter na małe; • uppercase – zamiana wszystkich liter na wielkie

  28. Obsługa białych znaków white-space • nowrap– sekwencje białych znaków będą zastępowane przez pojedynczą spacje; wiersze przełamywane tylko przez <br/>; • pre– sekwencje białych znaków będą wyświetlane w całości; wiersze przełamywane tylko w miejscach wystąpienia znaków końca wiersza; • pre-line– sekwencje białych znaków będą zastępowane przez pojedynczą spacje; wiersze przełamywane w razie potrzeby oraz w miejscach wystąpienia znaków końca wiersza; • pre-wrap – sekwencje białych znaków będą wyświetlane w całości; wiersze przełamywane w razie potrzeby oraz w miejscach wystąpienia znaków końca wiersza;

  29. Kierunek tekstu direction – określa kierunek tekstu • ltr - od lewej do prawej; • rtl – od prawej do lewej

  30. Style list Wyróżniki listy nienumerowanej list-style-type:square; :disc; :circle; list-style-image:url("odnośnik_do_obrazu");

  31. Kolory color:określenie koloru background-color: określenie koloru tła • ActiveBorder – kolor obramowania aktywnego okna; • ActiveCaption – kolor tła paska tytułu; • AppWorkspace – kolor tła okna z wieloma dokumentami; • Background – kolor tła pulpitu; • ButtonFace – kolor pierwszoplanowy elementu wyświetlanego jako trójwymiarowy;

  32. ButtonHighlight – kolor podświetlonego (wskazanego) elementu wyświetlonego jako trójwymiarowy. • ButtonShadow – kolor cienia elementu wyświetlanego jako trójwymiarowy; • ButtonText – kolor tekstu na przycisku; • CaptionText – kolor tekstu podpisu; • GreyText – kolor tekstu nieaktywnych opcji; • Highlight – kolor wyróżnionych elementów w kontrolkach; • HighlightText – kolor tekstu wyróżnionych elementów w kontrolkach; • InactiveBorder – kolor obramowania nieaktywnego okna;

  33. InactiveCaption – kolor paska tytułu nieaktywnego okna; • InactiveCaptionText – kolor tekstu na pasku tytułu nieaktywnego okna; • InfoBackground – kolor tła podpowiedzi; • InfoText – kolor tekstu podpowiedzi; • Menu – kolor tła menu; • MenuText – kolor tekstu menu; • Scrollbar – kolor głównej części paska przewijania; • ThreeDDarkShadow – ciemniejszy cień elementów wyświetlanych jako trójwymiarowe; • ThreeDface – główny kolor elementów wyświetlanych jako trójwymiarowe;

  34. ThreeDHighlight – kolor podświetlenia elementów wyświetlanych jako trójwymiarowe; • ThreeDLightShadow –jasny cień elementów wyświetlanych jako trójwymiarowe; • ThreeDShadow –kolor cienia elementów wyświetlanych jako trójwymiarowe; • Window – kolor tła okna; • WindowFrame – kolor obramowania okna; • WindowText – kolor tekstu w oknie;

  35. Obrazy jako tło background-image:url('odnośnik do obrazu') powtarzanie tła obrazu • repeat– obraz powtarzany w poziomie i pionie (wartość domyślna); • repeat-x – obraz powtarzany w poziomie; • repeat-y – obraz powtarzany w pionie; • no-repeat– obraz niepowtarzalny

  36. Zakotwiczenie obrazów tła background-attachment :scroll – tło przewijane razem ze stroną (wartość domyślna) :fixed - tło zakotwiczone (nieprzewijalne); przykład <style type="text/css"> body{background-image:url('tlo.jpg'); background-attachment:fixed} </style>

  37. Pozycja obrazu tła background-position :top left –góra w pionie; lewo w poziomie :top center - góra w pionie; środek w poziomie :top right - góra w pionie; prawo w poziomie :center left - środek w pionie; lewo w poziomie :center center - środek w pionie; środek w poziomie :center right - środek w pionie; prawo w poziomie

  38. background-position (c.d.) :bottom left –dół w pionie; lewo w poziomie :bottom center - dół w pionie; środek w poziomie :bottom right - dół w pionie; prawo w poziomie :xposjm yposjm lewy góry róg 0% 0%; prawy dolny 100% 100% przykład :20px 5cm – obraz umiejscowiony 20 pikseli od lewego krańca oraz 5 cm od górnego krańca akapitu

  39. Marginesy, obrysy i obramowania Marginesy dzielą się na: • zewnętrzne – określają odległość od innych elementów witryny; • wewnętrzny - definiuje odległość miedzy krawędzią danego elementu a jego treścią

  40. Marginesy zewnętrzne • margin-top – margines górny; • margin-bottom – margines dolny; • margin-left – margines lewy; • margin-right – margines prawy Przykład: margin-right:12px; margin-left:20px; margin:10px 15px 20px 15px top right bottom left margin:10px 20 px top i bottom po10px, left i right po 20px

  41. Marginesy wewnętrzne • padding-top – wypełnienie górne; • padding-bottom – wypełnienie dolne; • padding-left – wypełnienie lewe; • padding-right – wypełnienie prawe. Przykład: padding -right:12px; margin-left:20px; padding:10px 15px 20px 15px top right bottom left padding:10px 20 px top i bottom po10px, left i right po 20px

  42. Pełne obramowania (ramki) • border-style – styl ramki; • border-width – grubość ramki; • border-color – kolor ramki. Każda z tych właściwości ma np. rodzaje definicji: właściwość:góra prawo dół lewo; właściwość:góra prawo dół; właściwość:góradół prawolewo; właściwość:wartość; Grubość ramki oprócz podania wartości z jednostką miary może być podane wartości: thin, medium, thick

  43. Styl ramki • hidden – brak ramki (ramka ukryta); • dotted – ramka kropkowana; • dashed – ramka kropkowana; • solid – ramka pełna; • double – ramka z podwójną linią; • groove – ramka 3D stymulująca rowek; • ridge – ramka 3D stymulująca wypukłą krawędź; • inset – ramka 3D stymulująca wgłębienie; • outset – ramka 3D stymulująca wypukłość.

  44. Skrócona definicja obramowania border: grubość styl kolor przykład border: 1px solid black border: 0.2cm dotted obramowanie cząstkowe border-top-color border-top-width border-top-style

  45. Obrys outline: kolor styl szerokość_obrysu obrys to zewnętrzna obwódka ramki. • outline-color - kolor obrysu • outline-style – styl obrysu • outline-width – szerokość obrysu

  46. Tabele Obramowania, wypełnienia i tła dodajemy do stylu Table, Td, Tr tak jak w ramkach. dodatkowo: border-collapse:collapse; - fragmenty ramek sąsiadujących komórek zostaną połączone caption-side: bottom; - podpis pod tabelą;:top; - nad tabelą.

  47. Style tworzące układ strony <style type="text/css"> #naglowek{width:100%;float:left;} #lewypanel{width:15%;float:left;} #srodkowypanel{width:55%;float:left;} #prawypanel{width:25%; float:right;} #stopka{width:100%;float:left;} #panelesrodkowe{min-height:300px; padding:10px;} </style>

More Related