Style CSS.

Name: Style CSS.
Uploaded: 2017-12-13T04:08:57+00:00
Duration: PTM31S32
Channel: Józef Rut
Description: Style CSS.

Style CSS

Rodzaje arkuszy stylów
Wpisany – definicja umieszczona jest w konkretnym elemencie HTML Osadzony – definicja umieszczona jest w obrębie elementu <head> </head> Zewnętrzny (łączony) – definicja jest pobierana z pliku zewnętrznego Wszystkie typy arkuszy CSS można stosować jednocześnie

Hierarhia stylów Styl wpisany Osadzony arkusz stylów
Zewnętrzny arkusz stylów Domyślne ustawienia przeglądarki

Ogólna postać CSS Zależy ona od typu arkusza ! STYL WPISANY
<znacznik style=‘właściwość: wartość;’

Ogólna postać CSS STYL OSADZONY <style type=‘text/css’>  </style> Selektor – znacznik, który jest definiowany Właściwość – atrybut (zmienny, w zależności od podanej wartości)

Przykład body {color:black}
Jeśli wartość ma postać wielowyrazową, należy umieścić ją w cudzysłowie, np.: p {font-family: ‘sans serif’}

Przykład 2 style type=‘text/css’>  </style> Uwaga: powyższy styl czcionki zostanie zastosowany do tekstu w sekcji <body>, w tym również do znaczników <p> i <div>, lecz tekst umieszczony w tabeli wymaga odrębnej definicji stylów

Określenie kilku właściwości w jednej definicji stylów
p { text-align: center; color: black; font-family: arial }

Przypisanie jednej właściwości kilku elementom (selektorom) – grupowanie selektorów
Przykład: przypisanie wszystkim poziomom nagłówka koloru czerwonego: h1, h2, h3, h4, h5, h6 { color: red }

Klasy stylu – atrybut „class”
Klasy pozwalają zdefiniować różne style dla jednego elementu Postać ogólna klasy stylu: … element.nazwa_klasy {właściwość: wartość}

Przykład Zastosowanie 2 różnych metod wyrównania tekstu akapitowego (do środka i do prawej)
p.prawy {text-align: right} p.center {text-align: center} … <p class=‘prawy’> tekst </p> <p class=‘center’> tekst </p>

Klasy Nazwy klas mogą być dowolne, lecz nie należy używać w nich polskich liter Nazwę selektora w klasie można pominąć: .nazwa_klasy {właściwość: wartość} Tak zdefiniowany styl można zastosować do wielu elementów

Przykład … .prawy {text-align: right} <h1 class="prawy">
nagłówek wyrównany do prawego marginesu. </h1> <p class="prawy"> akapit wyrównany do prawego marginesu. </p>

Narzucanie stylu pojedynczym wystąpieniom danego elementu (tzw
Narzucanie stylu pojedynczym wystąpieniom danego elementu (tzw. wyjątki) – atrybut „id”. #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } … <p id=‘wstep’> Nazwa atrybutu id musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym id

Metody definiowania atrybutu „id”
Atrybut id można zdefiniować na dwa sposoby: 1. Styl stosowany jest do dowolnego elementu o określonym id 2. Styl jest stosowany do określonego elementu o danym id. Przykład 1 #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }

Przykład 2 p#wstep { font-size:110%; font-weight:bold; color:#0000ff;
background-color:transparent } W obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #.

Komentarze CSS /* komentarz CSS */ p { text-align: right;
color: green; font-family: arial }

Style CSS: przykłady

Styl wpisany … <h1 style="font-size: 20pt; font-weight: bold; font-family: arial, ‘sans-serif’>Treść tytułu</h1>

Przykład <html> <head>
<title>Styl wpisany</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </head> <body> <p style="font-size: 16pt" id="p16"> Styl zastosowany w obrębie znacznika p.</p> <p>W tym akapicie nie zastosowano stylu.</p> <p style="font-size: 25pt" id="p25"> Styl zastosowano w obrębie znacznika p.</p> </p> <p> Zawartość tego znacznika p nie jest formatowana. </body> </html>

Wpisany arkusz stylów oddziałuje tylko na znacznik, w którym umieszczono definicję stylu

Osadzony arkusz stylów
<head> <style type="text/css"> <--! hr {color: red} p {margin-left: 20px} body {background-image: url("images/kot.gif")} --> </style> </head>

Przykład 2 <html> <head>
<title>Osadzony arkusz stylów</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <style type="text/css">  </style> </head> <body> <h2>Czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> <h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2> </body> </html>

Przykład 2

Przykład 3 <html> <head>
<title>Osadzony arkusz stylów</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <style type="text/css">  </style> </head> <body> <h2>Czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> <h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p id="wyjatek">Ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane. </body> </html>

Przykład 3

Dołączanie zewnętrznego arkusza stylów
<html> <head> <link rel="stylesheet" type="text/css" href="mojestyle.css"> </head> <body></body> </html>

Rozciąganie stylu - element „span”
Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu – na przykład tekst i listy. Ogólna postać definicji stylu wykorzystującej element span: <span style=”definicja_stylu”> </span>

Przykład <h2>Ten nagłówek ma takie samo <span style="font-variant: small-caps; color:blue; text-decoration: underline">formatowanie </span> jak poprzedni</h2>

Przykład

Stosowanie klas z elementem span
Przykład: pierwszy wyraz wszystkich akapitów na stronie jest pisany czcionką o innym rozmiarze i w innym kolorze niż pozostały tekst. <head><style type="text/css">  </style></head> <body> <h2>Czerwony nagłówek na białym tle</h2> <p class="lewa"> <span class="kolorowa">Tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p>

Wydzielone bloki - element div
Bloki wydzielamy za pomocą pary znaczników <div> </div>. Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Metoda jest podobna do poprzedniej, lecz w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.

<html><head><title>Element div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso "> <style type="text/css"> </style></head> <body> <h2>Czerwony nagłówek na białym tle</h2><p class="lewa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.</p> <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. <div style="font-size:11pt; color: #000000"> Fragment dokumentu objęty znacznikami div można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej w przypadku elementu span, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.</div> </p><h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2><p class="left"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.</p><p class="prawa">Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.</p> </body></html>

Przykłady stylów CSS dla tła strony WWW
<html> <head> <title>Kolor tła elementu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} </style> </head> <body> <h1>Nagłówek na zielonym tle</h1> <h2>Nagłówek na transparentnym tle</h2> <p class="magenta">Tekst tego akapitu umieszczono na tle w kolorze fioletowym! Zwiększono rozmiar czcionki do 16. Wszystko to dzięki klasie o nazwie magenta.</p> <p>Ten akapit ma żółte tło, bo tak stanowi styl elementu body.</p> </body> </html>

Przykłady stylów CSS dla tła strony WWW

Obraz jako tło <html> <head>
<title>Obraz jako tło strony</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/obraz.jpg") } </style> </head> <body> <p>Tu umieszczasz resztę zawartości swojej strony!</p> </body> </html>

Obraz jako tło

Powtórzenia obrazu w pionie (kafelkowanie)
<html> <head> <title>Budowanie tła z powtórzeń obrazu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: repeat-y } </head> <body> </body> </html>

Powtórzenia obrazu w pionie (kafelkowanie)

Obraz jako tło w skali 1:1 umieszczony na środku strony
<html><head><title>Mały obraz w centrum strony</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: no-repeat; background-position: center center } </style> </head> <body> <p><b>Uwaga:</b> Netscape 4 nie obsługuje właściwości "background-position".</p> </body></html>

Obraz jako tło w skali 1:1 umieszczony na środku strony

Formatowanie tekstu – kolejność podawania atrybutów
Atrybuty grubości czcionki – font-weight, i stylu – font-style, muszą pojawić się przed innymi atrybutami czcionki rozmiar czcionki – font-size, poprzedza odstępy. Wartości atrybutów nie oddziela się przecinkami – jedyny wyjątek to rodziny czcionek.

kolejność podawania atrybutów - przykład
<style>  </style>

Upraszczanie definicji stylów –grupowanie elementów
<style>  </style> h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} h1 {font-size: 20pt} h2 {font-size: 14pt}

Upraszczanie definicji stylów – grupowanie atrybutów
W CSS można grupować również atrybuty, np.. body {font-family: arial, sans-serif; font-style: normal; font-size: 12pt; line-height: 14pt; font-weight: bold} można zapisać w następujący sposób: body {font: bold 12/14pt arial, sans-serif}

Atrybut Przykład definicji color: – kontroluje kolor czcionki. h1 {color: #00ff00} – kod koloru podany jest w zapisie szesnastkowym. h2 {color: red} – korzystając ze standardowych kolorów, można posługiwać się ich nazwami, np. red, blue, white czy green, zamiast kodami heksadecymalnymi. p {color: rgb(0,0,255)} font-family: – kontroluje krój czcionki. {font-family: times} – podano nazwę czcionki Times, {font-family: times , arial} –podana została nazwa czcionki wraz z nazwą czcionki alternatywnej, {font-family: serif} – wskazano rodzinę czcionek, dzięki czemu przeglądarka zastosuje czcionkę, której przynajmniej podstawowe atrybutu odpowiadają Twojemu wyborowi. font-size: - rozmiar czcionki. {font-size: 12pt} –rozmiar podany jest w punktach drukarskich. Jest to standard najczęściej stosowany. Rozmiar można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). font-style: - określa styl tekstu. {font-style: italic} – definiuje tekst pisany kursywą. {font-style: normal} – przywraca ustawienia domyślne. {font-style: oblique} – wprowadza pochylenie odmiany prostej danej czcionki. font-weight: - określa grubość czcionki. {font-weight; bold} – definiuje czcionkę pogrubioną (do dyspozycji są jeszcze atrybuty takie jak: extra-light, demi-light, medium, extra-bold oraz demi-bold). text-decoration: - umożliwia określenie efektów dodatkowych. {text-decoration: none} – brak efektów. {text-decoration: underline} – podkreślenie. {text-decoration: italic} – kursywa. {text-decoration: line-through} – przekreślenie. line-height: - definiuje wysokość wiersza. p {line-height: 12pt} Odstępy między wierszami w akapicie można podawać w punktach, pikselach, calach, centymetrach i w procentach, podobnie jak wielkość czcionki.

Atrybuty formatowania akapitu.
Przykład definicji margin-left określa szerokość lewego marginesu. {margin-left: 2cm} – margines wynosi 2 cm. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). margin-right prawego marginesu {margin-right: 2in} – tu ustawiono margines równy 2 cale. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). margin-top – ustawienie marginesu górnego. {margin-top: 20pt} – margines górny wynosi 20 punktów. Jednostki są takie same jak w przypadku marginesów bocznych. text-indent – ustawienie wcięcia. Jednostki takie jak dla marginesów. {text-indent: 0.5in} – wcięcie o głębokości 0.5 cala. Internet Explorer dopuszcza wcięcia ujemne – wysunięcia. text-align – opcja wyrównania tekstu. {text-align: right} – tekst zostanie wyrównany do prawego marginesu. Atrybut może przyjmować wartości: left (do lewej), center (wyśrodkowanie), right (do prawej) i justify (do obu marginesów).

Style CSS.

Podobne prezentacje

Prezentacja na temat: "Style CSS."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

Style CSS.

Podobne prezentacje

Prezentacja na temat: "Style CSS."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres