29 Kolor obramowania

30 Tytuł tabeli (podpis tabeli)

31 Dalsze kroki: STYLE

32 Kaskadowe Arkusze Stylów - Cascading Style SheetPodstawy CSS

33 Atrybuty arkuszy stylówAtrybutu kaskadowych arkuszy stylów można pogrupować w kilka szerokich kategoriach: Wygląd czcionki i jej styl. Tło - kolor i obrazy. Wyrównywanie tekstu. Odstępy Wygląd obramowań Inne (w tym skalowanie, zawijanie tekstu i listy).

34 Wygląd i styl czcionki – cz.IAtrybut Opis font-family Określa krój pisma. Wartościami są nazwy czcionek (takie jak Arial, Times lub Palatino) lub nazwa jednej z pięciu rodzin ogólnych: SERIF(times), SANS-SERIF(helvetica), CURSIVE(zaph chancery), FANTASY(western), MONOSPACE(courier) font-size Określa wielkość czcionki w oparciu o rozmiar absolutny, względny, w stosunku do wartości em oraz w procentach. (pt, in, cm, px) font-style Określa styl czcionki. Jest on reprezentowany przez wartości normal, italic i oblique font-weight Określa grubość czcionki. Podstawowymi wartościami są normal, bold, bolder i lighter,.

35 Wygląd i styl czcionki – cz.IIAtrybut Opis font Umożliwia jednoczesne dokonanie wszystkich dotychczas omawianych ustawień. Oto porządek, w jakim powinny się pojawiać atrybuty: font-style, font-variant, font-weight, font-size, line-height, font-family. color Definiuje kolor elementu tekstu i jest określany za pomocą jednego z szesnastu słów kluczowych: black, maroon lub kodem hexadec. text-decoration Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: none, overline, line-through i blink.

36 Wygląd i styl czcionki – cz.IIIAtrybut Opis background Umożliwia jednoczesne definiowanie szeregu wartości atrybutów tła. Porządek jest następujący: background-color, background-image, background-position. background: gray line-height Ustawia odległość między liniami pisma (interlinia) - w (pt), (in), (cm), (px). margin-left margin-right margin-top margin-bottom Ustawia marginesy - w (pt), (in), (cm), (px). Przykład margin-left: 1.5cm text-align Ustawia justowanie (do lewej – left), do środka (center), do prawej (right). text-indent Ustawia odległość od lewego marginesu - w (pt), (in), (cm), (px).

37 Wygląd i styl czcionki – cz. IVAtrybut Opis word-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy wyrazami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal. letter-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy literami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.

38 Przykłady i ćwiczenia do wykonaniaTekst sformatowany bez użycia stylów WYKONAJ korzystając z NOTATNIKA Oto zwykły akapit z informacjami.

39 Ćwiczenia i przykłady-śródliniowe arkusze stylówWYKONAJ korzystając z NOTATNIKA (wewnątrz Oto zwykły akapit z informacjami.

Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju 12-punktowego.

I nie zapomnij także o tej ważnej - wciętej - uwadze! Lecz popatrz - ma wcięcie z jednej strony, a nie z obydwu, czyli lewej i prawej. Nareszcie jest sposób na realizację tej kwestii!

40 Ćwiczenia i przykłady – cd.WYKONAJ korzystając z NOTATNIKA (wewnątrz Ćwiczenie wykonane zwykłym i poniżej uproszczonym zapisem stylu CSS

Pierwszy ważny nagłówek

41 Ćwiczenia i przykłady – cd.WYKONAJ korzystając z NOTATNIKA (wewnątrz

Pierwszy akapit

42 Obramowanie wokół tekstu

Zespół Szkół Nr 1 w Mławie

43 Style nagłówkowe Definiowane na początku dokumentu. Zmiany będą dotyczyły przy każdym wystąpieniu zmodyfikowanego znacznika na danej stronie. Załóżmy, że chcesz by wszystkie nagłówki pierwszego poziomu miały 28 punktów, krój Arial, były niebieskie i wyśrodkowane. PRZYKŁAD: Po utworzeniu tej definicji każde użycie w dokumencie znacznika

spowoduje zastosowanie stylu podanego w nagłówku.

44 Klasy wewnątrz arkuszy stylów

Oto tekst z informacjami.

To jest pierwszy text z własnymi predefiniowanymi stylem atrybutami.

A to jest text drugi z predefiniowanym wcięciem w stylu!!!

45 Dołączanie do zewnętrznego arkusza stylówKażdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów. Na przykład, strony internetowe wykonane przez ciebie mogą być dołączane do stworzonego przez ciebie zewnętrznego arkusza o nazwie nazwa.css (rozszerzenie .css), umieszczonego na serwerze obok twoich plików .html. Wykonaj poniższy przykład wg wzorca: Verte

46 Przykład: i zapisz plik pod nazwą: twojstyl.css { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/434860/1/images/46/Przyk%C5%82ad%3A+%3CHTML%3E+%3CSTYLE+TYPE%3D+text%2Fcss+%3E+%3C%21%E2%80%94.jpg", "name": "Przykład: i zapisz plik pod nazwą: twojstyl.css.", "width": "800" } 47 Zwróć uwagę na wiersz (niebieski) zawierający odniesienie do arkusza. Jest on umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrznego arkusza stylów są automatycznie przyjmowane przez elementy danej strony. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/434860/1/images/47/%3Chead%3E+%3Ctitle%3EJaka%C5%9B+twoja+strona+html%3C%2Ftitle%3E+%3Cmeta+http-equiv%3D+content-type+content%3D+text%2Fhtml%3B+charset%3Diso-8859-2+%3E.jpg", "name": " Jakaś twoja strona html ", "description": " Zwróć uwagę na wiersz (niebieski) zawierający odniesienie do arkusza. Jest on umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrznego arkusza stylów są automatycznie przyjmowane przez elementy danej strony.", "width": "800" } 48 Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów). Cdn… { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/434860/1/images/48/Stosowanie+zewn%C4%99trznego+arkusza+ma+t%C4%99+zalet%C4%99%2C+%C5%BCe+nie+jest+konieczne+wprowadzanie+styl%C3%B3w+na+konkretnej+stronie%2C+zmniejszamy+obj%C4%99to%C5%9B%C4%87+plik%C3%B3w%2C+a+tak%C5%BCe+mo%C5%BCemy+za+pomoc%C4%85+zmiany+jednego+parametru+w+arkuszu+styl%C3%B3w+zmieni%C4%87+wygl%C4%85d+wszystkich+stron%2C+kt%C3%B3re+si%C4%99+odwo%C5%82uj%C4%85+do+tego+arkusza+%28np.+kolor+tytu%C5%82u+czy+wielko%C5%9B%C4%87+czcionki+akapit%C3%B3w%29..jpg", "name": "Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).", "description": "Cdn…", "width": "800" } 49 Podświetlane linki w CSSW sekcji body wstaw: (dla TABELI) onmouseover="style.backgroundColor='#003366';" onmouseout="style.backgroundColor='#006699';">

src="twoj_obrazek.jpg" width="75" height="150„ border="0">

47 Zwróć uwagę na wiersz (niebieski) zawierający odniesienie do arkusza. Jest on umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrznego arkusza stylów są automatycznie przyjmowane przez elementy danej strony.

48 Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów). Cdn…

49 Podświetlane linki w CSSW sekcji body wstaw: (dla TABELI) onmouseover="style.backgroundColor='#003366';" onmouseout="style.backgroundColor='#006699';">

src="twoj_obrazek.jpg" width="75" height="150„ border="0">

×

Sign In

Email

Password

Remember Password Forgot Password?

Sign In

---

Login with Google