CSS 3 Technologie Informacyjne Literatura:

CSS 3 Technologie Informacyjne Literatura:
CSS. Tworzenie nowoczesnych stron WWW, Łukasz Pasternak, Wyd. Helion, 2012

CSS CSS - kaskadowe arkusze stylów (Cascading Style Sheets) - język dający możliwość zarządzania sposobem formatowania (wyglądem) www. Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i prezentacji dokumentów. Wszystkie polecenia dotyczące formatowania można umieścić w jednym miejscu (tzw. arkuszu) i powiązać je z konkretnymi elementami, wstawionymi za pomocą HTML. *.css @charset „utf-8”; linijka kodowania rozpoczynająca plik CSS selektor { właściwość1: wartość; } Selektorem może być dowolny element HTML, natomiast nie każdemu elementowi można przypisać te same właściwości. CSS jest językiem swobodnego formatu: białe znaki są ignorowane.

X Sposoby definiowania CSS: styl lokalny, wewnętrzny arkusz stylu,
Białymi znakami nie można poprzedzać wartości właściwości, w których występuje nawias: Np. selektor { background:url (katalog/gfx.jpg);} Białe znaki nie mogą pojawiać się przy odnoszeniu się do pseudoklas, pseudoelementów, selektorów atrybutów i selektorów specjalnych: Np. div h1:hover {deklaracje} p:selection {deklaracje} article#identyfikator {deklaracje} X div h1 :hover {deklaracje} p :selection {deklaracje} article #identyfikator {deklaracje} Sposoby definiowania CSS: styl lokalny, wewnętrzny arkusz stylu, zewnętrzny arkusz stylu. ograniczony zasięg

CSS Styl lokalny (inline) Styl wpisany jest wprowadzony wewnątrz dokumentu HTML w wybranym znaczniku i parametryzuje zmiany tylko w nim. Takie ustawienia stają się dominujące nad stylem osadzonym i zewnętrznym. < p style=„deklaracja; deklaracja; deklaracja”></p> np. </head> <body> <p style="color: blue; background-color: yellow;"> Niebieski tekst na żółtym tle Niebieski tekst na żółtym tle</p> </body> </html>

Wewnętrzny arkusz stylów
CSS Wewnętrzny arkusz stylów Wewnętrzny arkusz stylów definiuje atrybuty dla całego dokumentu. Ustawienia tak wprowadzone stają się dominujące tylko nad stylem zewnętrznym. Osadzony arkusz stylu jest umieszczony wewnątrz dokumentu HTML, ale najczęściej wprowadza się go w nagłówku (w sekcji HEAD). Definicje stylów znajdują się między znacznikami <STYLE> </STYLE>. np. <HTML> <HEAD> <STYLE> H2 {font-size: 12pt; color:red; text-align:center;} P {font-size: 10pt; color:#123456; text-align:right;} TD {border-color: blue; border-style:dotted;} </STYLE> </HEAD> <BODY> <H2> < head> <style> selektor {deklaracje} </style> </head>

Zewnętrzny arkusz stylu
CSS Zewnętrzny arkusz stylu Zewnętrzny arkusz stylu umożliwia scentralizowanie definicji stylu i uniknięcie konieczności wprowadzania poprawek w wielu plikach przy zmianie projektu. Wszystkie definicje stylu są zamieszczone w pliku zewnętrznym, z którym strona www jest połączona hiperłączem. Plik ten może mieć dowolną nazwę, ale musi mieć rozszerzenie nazwy .css, np. style.css. np. <head> <link href=”style/screen.css” media=”screen, projection” rel=”stylesheet”> </head> <link> - znacznik nie ma zamykającego odpowiednika media – informuje przeglądarkę dla jakiego typu mediów przeznaczony jest dany arkusz. Tworzenie osobnych arkuszy np. dla urządzeń mobilnych jest konieczne. <! - -[if lte IE 9] <![endif]-->

CSS /* v License: none (public domain) */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; body { line-height: 1; ol, ul { list-style: none; blockquote, q { quotes: none; blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; table { border-collapse: collapse; border-spacing: 0; Arkusz resetujący Arkusz resetujący pozwala na globalne zresetowanie domyślnych styli CSS narzuconych przez każdą przeglądarkę wszystkim HTML-owym elementom. Dołącza się go jako osobny, zewnętrzny plik.

CSS Komentarze warunkowe Komentarze zwykłe
Przygotowanie osobnych arkuszy stylów dla IE. Komentarze warunkowe pozwalają na poinformowanie konkretnej przeglądarki o przygotowanych dla niej stylach. <head> <! - -[if lte IE 9] <link href=”style/screen.css” media=”screen, projection” rel=”stylesheet”> <![endif]--> </head> * lte – starsze lub równe /* Komentarz wielolinijkowy */ Nie ma komentarza jednolinijkowego. Ułatwiają opis kodu, pracę w zespole, umożliwiają wyłączanie fragmentów kodu. Komentarze zwykłe

CSS Dziedziczenie stylów
Elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą atrybuty formatowania, które zostały nadane ich przodkom. Wyjątkiem są np. marginesy i dopełnienia. W niektórych przeglądarkach internetowych zdarza się błędna interpretacja dziedziczenia stylów. Za pomocą wartości inherit można wymusić dziedziczenie, które działa na potomkach danego elementu przodka. np. <style> body { color:red; border:1px solid black; } .dziedzicz { border:inherit; </style> </head>

CSS Selektory specjalne Identyfikatory Klasy
Identyfikatory stosujemy, kiedy chcemy odnieść się do jednego akapitu lub listy, bez naruszania pozostałych. Na stronie może być tylko jeden identyfikator o danej nazwie. Niedozwolone jest wstawianie spacji w zapisie identyfikatorów. HTML CSS Np. <img id=„nazwa”></h1> *#nazwa {deklaracje} * - wszystkie znaczniki, które mają ten ident. img#nazwa {deklaracja} selektory warto poprzedzać nazwą Klasy wprowadzamy gdy chcemy pogrupować elementy, którym należy nadać identyczne formatowanie. Znakiem rozpoznawczym klasy jest kropka. Klas o tej samej nazwie może być wiele i wiele różnych elementów może zawierać daną klasę jednocześnie. Można dać wiele klas jednemu elementowi, wówczas oddziela się je spacją. Niedozwolone jest wstawianie spacji w zapisie klas. HTML <section class=”klasa1”>Zawartosc sekcji</section> <section class= „klasa1 klasa2 klasa3”> Zawartosc sekcji</section> CSS section.klasa1 {deklaracje} section.klasa1.klasa2 {deklaracje} Identyfikatory Klasy

Grupowanie selektorów
CSS Selektory elementów Selektor typu Odnosi się do wszystkich elementów HTML do których jest przypisany Np. p {deklaracje} Technika pozwala na przypisanie jednej reguły kilku selektorom naraz. article, nav, div, li, p {deklaracje} Pozwala ograniczać klasy i identyfikatory ułatwiając modyfikacje strony. Selektor potomka tworzymy przynajmniej za pomocą dwóch selektorów, przy czym ten drugi ma być potomkiem tego pierwszego, to znaczy, że ma znajdować się w elemencie, który został wskazany przez pierwszy selektor. selektor potomek { właściwość:wartość; } Grupowanie selektorów Selektor potomka Np. div span { color:red; } Do każdego elementu span w danym dokumencie HTML, który znajduję się w elemencie div dodaj właściwość, która zmieni kolor tekstu na czerwony

CSS Stylistyka czcionek Pogrubienie
Stosowanie w HTML znacznika <b> jest niezalecane, w jego miejsce stosuje się właściwość CSS font-weight. W dalszym ciągu używa się natomiast znacznika <strong>, który wskazuje tekst istotny dla internauty oraz robotów indeksujących. CSS pozwala zdefiniować dla niektórych rodzajów czcionek 9 stopni grubości bold – pogrubienie bolder, lighter – wejście na wyższy i zejście na niższy stopień pogrubienia w porównaniu z wartością przodka number – wartości liczbowe: 100, 200, 300, 400, 500, 600, 700, 800, 900 Przykład: CSS HTML span#dwa { font-weight: bold;} font-weight: normal|bold|bolder|lighter|number| <span> tekst normalny</span> <span id=„dwa”>tekst pogrubiony</span>

CSS Stylistyka czcionek Kursywa
W HTML stosujemy znacznik <i> odpowiadający za formatowanie fizyczne i znacznik <em>, który odpowiada za formatowanie logiczne. Znacznik <i> lepiej zastąpić formatowaniem poprzez font-style. font-style: normal|italic|oblique|; italic– pochylenie (osobny plik z czcionką pochyloną) oblique – pochylenie („ręczne”) Przykład: CSS HTML span { font-style: normal;} span#dwa {font-style: italic;} span#trzy{font-style: oblique;} <span> tekst normalny</span> <span id=„dwa”>tekst pochylony</span> <span id=„trzy”>tekst pochylony</span>

CSS Stylistyka czcionek Wariant fontu
Do napisania tekstu kapitalikami (czcionka wielkich liter o wysokości liter małych) wykorzystujemy font-variant. font-variant: normal|small-caps|; small-caps– kapitaliki Przykład: CSS HTML span { font-variant: normal;} span#dwa {font-variant: small-caps;} <span> tekst normalny</span> <span id=„dwa”>kapitaliki</span>

CSS Stylistyka czcionek Rozmiar czcionki
Do określenia wielkości czcionki służy font-size. (nie stosujemy znacznika <font> w HTML) font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; length – rozmiar w px, cm, itd. smaller, larger, itd. – wartości względne Przykład: CSS HTML span { font-size: 15px;} <span> Tekst o wielkości 15px</span>

CSS Stylistyka czcionek Rodzaj czcionki
Do określenia rodzaju czcionki służy font-family. Jeśli jakaś czcionka nie jest zainstalowana w systemie wówczas zostanie wyświetlona w formacie domyślnym, np. Times New Roman*. Nazwy fontów, które składają się z więcej niż jeden wyraz należy pisać w cudzysłowie. W stylach lokalnych zamiast cudzysłowów stosuje się apostrofy. font-family: font; Przykład: CSS HTML span#jeden { font-family: Georgia;} span#dwa { font-family: „Comic Sans”;} * font-family: Arial, Helvetica, Verdana, sans-serif; W przypadku, gdy przeglądarka nie znajdzie Ariala, tekst wyświetlony zostanie Helveticą, a następnie Verdaną, lub domyślnym stylem bezszeryfowym. (serif-szeryfowe, monospace-o stałej szerokości, cursive – imitujące pismo odręczne) <span id=„jeden”> Tekst pisany Georgią</span> <span id=„dwa”> Tekst pisany Comic Sans</span> Styl lokalny: <span style=„font-family: ’Trebuchet MS’ „></span>

CSS Stylistyka czcionek Łączenie właściwości
Grupę właściwości dla jednego elementu można napisać zbiorowo. W przypadku elementu font należy zachować odpowiednią hierarchię : na końcu należy umieścić font-size, line-height i font-family, natomiast kolejność cech przed nimi jest dowolna. Np. font: italic small-caps bold 25px/1.1 Arial, Helvetica, sans-serif; Import plików z czcionkami @font-face { font-weight: normal; font-style: normal; font-variant: normal; font-family: 'MojFont'; src: url('mojFont.eot?') format('eot'), url('mojFont.woff') format('woff'), url('mojFont.ttf') format('truetype'), url('mojFont.svg#svgFontName') format('svg'); } deklarujemy użycie własnego pliku z krojem pisma określamy styl informujemy przeglądarkę gdzie znajdują się potrzebne pliki (ścieżka dostępu do pliku .eot) Znak zapytania powoduje, że IE<9 myśli, że dalsza część deklaracji fonta, to query string (w IE nie jest możliwa deklaracja więcej niż jednego formatu) IE toleruje tylko Embedded OpenType. Pozostałe przeglądarki chętnie przyjmą .ttf.

CSS Stylistyka tekstu Przekształcenie tekstu
text-transform: capitalize | uppercase | lowercase | none | inherit Konwersja z dużych na małe litery i odwrotnie. capitalize – zamiana pierwszych liter wyrazu na duże lowercase– konwersja na małe litery uppercase– konwersja na duże litery Odstęp między literami (kerning) letter-spacing: normal | <length> | inherit Odstęp między wyrazami word-spacing: normal | <length> | inherit Zwiększają czytelność tekstu. Wartości dodatnie pozwalają rozstrzelić tekst, a ujemne ścieśnić go.

CSS Stylistyka tekstu Wcięcie akapitu
text-indent: <length> | <percentage> | inherit Wprowadzanie tabulacji/ukrywanie tekstu. W przypadku, gdy nadamy właściwości dużą wartość ujemną tekst zostanie ukryty. W ten sposób można zastąpić multimedia i wspomóc przeszukiwanie strony. Łamanie wiersza i białe znaki white-space: normal pre nowrap pre-wrap pre-line inherit Białe znaki w HTML są ignorowane, polecenie stosuje się aby tego uniknąć, czyli wyświetlić tekst w takiej formie w jakiej został napisany (tekst preformatowany). pre – tekst preformatowany no-wrap – nie pozwala na łamanie wiersza dopóki nie napotka na <br> pre-wrap - respektuje enter, łamie wiersz na końcu szerokości strony pre-line- respektuje enter, łamie wiersz na końcu szerokości strony, zmienia wielokrotne spacje na jedną

CSS Stylistyka list Lista
text-align: disc| circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek lower-latin | upper-latin | armenian | georgian | none | inherit decimal – liczby arabskie decimal-leading-zero – liczby arabskie od 0 lower-roman – małe liczbie rzymskie upper-roman – duże liczbie rzymskie lower-greek - małe greckie lower-latin – małe łacińskie upper-latin - duże łacińskie ul – listy numerowane ol – listy wypunktowane dl – lista definicji Przykład: CSS HTML: ol{ list-style-type: upper-roman; } <body> <ol> <li>list-item 1</li> <li>list-item 2</li> <li>list-item 3</li> </ol> </body>

CSS Stylistyka list Zawijanie tekstu w elementach listy
list-style-position: inside | outside | inherit inside – wypunktowanie zostanie ukryte w bloku tekstu Własny wyróżnik list-style-image: inside | outside | inherit Możliwość stworzenia własnego wyróżnika. np. ul {list-style-image: url(heart.png);} Grupowanie własności: Właściwości listy można zebrać w jednej deklaracji np. {list-style: nine insiade url(heart.png);}

CSS Kolor tła Tło obrazkowe
97% urządzeń w Polsce wyświetla kolor w trybie true color, czyli w postaci kolorów. Wyświetlacze urządzeń mobilnych, w tym telefonów komórkowych, pracują w trybie high color, który umożliwia wyświetlenie kolorów. Kolory można definiować za pomocą angielskiej nazwy, co znacznie ogranicza możliwości (140 nazw), w systemie dziesiętnym i systemie szesnastkowym (zalecane). body { background-color: yellow; } body { background-color: rgb(255,0,255); } body { background-color: #00ff00; } Najlepszym formatem jest dla zdjęć JPG (jpg i jpeg nie są równoznaczne!), dla ilustracji o niewielkiej liczbie kolorów GIF, a dla grafik półprzeźroczystych PNG. body { background-image: url(”../img/tlo.jpg”); } Tło jest powielane, na co można wpłynąć stosując zapis: background-repeat: no-repeat | repeat-x | repeat-y Tło obrazkowe

background-position: value;
CSS Zaczepienie tła background-attachment: scroll | fixed | local | initial | inherit; scroll – tło zostaje w miejscu i podczas przewijania znika za górną krawędzią fixed – tło porusza się podczas przewijania strony background-position: value; Miejsce położenia podaje się za pomocą jednostek długości i procentów. value: left top left center left bottom right top right center right bottom center top center center center bottom Pozycja tła body { background-image: url(‘mimi.gif'); background-position: 75% top; }

CSS BOX MODEL div { width: 300px;
border: 25px solid blue; padding: 25px; margin: 25px; } width - określa szerokość zawartości width:auto – element zajmuje max dostępną szerokość całkowita szerokość elementu div=450px height – deklaracje wysokości można pominąć

CSS BOX MODEL Margin - margines zewnętrzny określa odległość div od pozostałych elementów margin-top margin-right margin-bottom margin-left PRZYKŁAD <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 30px; background-color: lightblue; } </style> </head> <body> <h2>Margines zewnętrzny dla poniższego div od tego tekstu</h2> <div>Ten element ma margin-top=100px, a margin-right=150px, margin-bottom=100px i margin-left=30px.</div> </body> </html>

CSS Padding – dopełnienie BOX MODEL
padding-top padding-right padding-bottom padding-left PRZYKŁAD <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; background-color: lightblue; padding: 10px 30px 90px 100px; } </style> </head> <body> <div>Ten element ma padding-top=10px, padding-right=30px, padding-bottom=90px i padding-left=100px.</div> </body> </html>

CSS Font font-family font-style font-variant font-weight font-size
Outline outline-width outline-style outline-color outline Text text-align text-decoration text-indent text-transform line-height vertical-align letter-spacing word-spacing white-space direction Visual formatting display position top right bottom left float clear z-index overflow clip visibility cursor Table caption-side table-layout border-collapse border-spacing empty-cells Generated content content quotes counter-reset counter-increment Print page-break-before page-break-after page-break-inside orphans windows Background background-color background-image background-repeat background-attachment background-position background Border border-width border-top-width border-right-width border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border-style border-top-style border-right-style border-bottom-style border-left-style border border-top border-right border-bottom border-left Color color opacity Margin & Padding margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left List list-style-type list-style-image list-style-position list-style Box Size width min-width max-width height min-height max-height

10 najlepszych frameworków CSS (ranking 2015)
FRAMEWORKI CSS Framework albo platforma programistyczna – szkielet do budowy aplikacji. Definiuje on strukturę aplikacji oraz ogólny mechanizm jej działania, a także dostarcza zestaw komponentów i bibliotek ogólnego przeznaczenia do wykonywania określonych zadań. 10 najlepszych frameworków CSS (ranking 2015) Bootstrap Pure UIkit Groundwork Gumby Foundation YAML Skeleton Materialize Innuit Kube

FRAMEWORKI CSS Lider na rynku, stworzony i rozwijany przez programistów Twittera. Licencja MIT. Został zbudowany na preprocesorze LESS. Charakteryzuje go bogaty pakiet UI. Framework korzysta także z języka JavaScript, dzięki czemu możliwa jest obsługa m.in. okien modalnych, dropdown, sliderów. Wsparcie IE 8+. Licencja Apache 2.

FRAMEWORKI CSS Prosty pakiet UI, stworzony przez Yahoo!. Posiada siatkę tworzoną na zasadzie podziałów, dzięki czemu możliwe jest wykonanie dość skomplikowanych layoutów. Wsparcie IE 7+. Licencja BSD.

FRAMEWORKI CSS Uikit to intuicyjny framework oparty na LESS. Umożliwia obsługę okien modalnych, dropdown, przycisków.

FRAMEWORKI CSS Groundwork posiada siatkę tworzoną przez podziały, przy czym każdy wiersz może być podzielony na dowolną liczbę kolumn (standardowo do 12, jednak posiada możliwość użycia SASS). Wsparcie IE 9+. Licencja Open Source.

FRAMEWORKI CSS Gumby - zbliżony do Bootstrapa, posiada własne narzędzie pozwalające na szybkie zarządzanie i– Claymate. Kolekcja elementów UI i skryptów JS jest podobna jak u liderów, na uwagę zasługuje dołączony efekt parallax (fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości). Wsparcie IE 8+. Licencja Open Source.

INFORMACJE DODATKOWE Lorem ipsum Tekst jest stosowany do demonstracji krojów pisma (czcionek, fontów), kompozycji kolumny itp. Tekst w obcym języku pozwala skoncentrować uwagę na wizualnych aspektach tekstu, a nie jego znaczeniu. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. Ciekawostka: Łaciński tekst wzorowany na fragmencie traktatu Cycerona "O granicach dobra i zła”. Po raz pierwszy został użyty przez nieznanego drukarza 500 lat temu.

Piksele (px) Em Procenty
INFORMACJE DODATKOWE Piksele (px) Najmniejsze części składowe wyświetlacza, na które musi zostać przekonwertowana każda jednostka długości. Em Jednostka obliczana jako proporcja do podstawowej wielkości elementu przodka. Przykładowo jeżeli tekst w regule rodzica jest ustawiony na 10px, natomiast akapit (dziecko) na 0.8em to odpowiada to 8px. Jednostka z jednej strony może generować kłopoty, gdy mamy dużo zagnieżdżonych potomków, ale z drugiej strony umożliwia poprzez zmianę deklaracji przodka jednoczesną zmianę deklaracji potomków. Procenty Procenty stosowane są do budowania elastycznych układów stron internetowych, tzn. takich, które zmieniają swoją formę i układ w zależności od wielkości okna przeglądarki.

CSS 3 Technologie Informacyjne Literatura:

Podobne prezentacje

Prezentacja na temat: "CSS 3 Technologie Informacyjne Literatura:"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

CSS 3 Technologie Informacyjne Literatura:

Podobne prezentacje

Prezentacja na temat: "CSS 3 Technologie Informacyjne Literatura:"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres