Newsy

sobota, 17 maja 2014

20 ikon społecznościowych


Zobacz demo

Widżet zawierający 20 ikon społecznościowych można umieścić nie tylko na Bloggerze, ale również na innych platformach blogowych, forach oraz stronach www. Tło przycisków jest przezroczyste, dlatego ikony idealnie wtopią się w tło strony. Szerokość widżetu automatycznie dostosowuje się do gadżetu, w którym zostanie umieszczony.

Umieszczanie widżetu na Bloggerze

W panelu admina w menu Układ dodaj gadżet HTML/JavaScript z poniższym kodem:
<link href="https://googledrive.com/host/0BzWYBwKfT2edVzVmRHliMnA2SzA" id="bon_toolkit_icon_style-css" media="all" rel="stylesheet" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="bon-toolkit-social-widget-wrapper bon-toolkit-social-icon flat square-round">

<a class="wordpress" href="http://pl.wordpress.com/" title="
WordPress"><i class="fa fa-wordpress"></i></a> 
<a class="forrst" href="http://forrst.com/" title="Forrst"><i class="fa fa-tree"></i></a> 
<a class="foursquare" href="https://foursquare.com/" title="Foursquare"><i class="fa fa-foursquare"></i></a> <a class="delicious" href="https://delicious.com/" title="Delicious"><i class="fa fa-delicious"></i></a>
<a class="blogger" href="https://www.blogger.com/" title="Blogger"><i class="fa fa-blogger"></i></a> 
<a class="behance" href="http://www.behance.net/" title="Behance"><i class="fa fa-behance"></i></a> 
<a class="twitter" href="https://twitter.com/" title="Twitter"><i class="fa fa-twitter"></i></a> 
<a class="dribbble" href="https://dribbble.com/" title="Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="facebook" href="https://www.facebook.com/" title="Facebook"><i class="fa fa-facebook"></i></a> 
<a class="vimeo" href="https://vimeo.com/" title="Vimeo"><i class="fa fa-vimeo-square"></i></a> 
<a class="tumblr" href="https://www.tumblr.com/" title="Tumblr"><i class="fa fa-tumblr"></i></a> 
<a class="linkedin" href="https://pl.linkedin.com/" title="Linkedin"><i class="fa fa-linkedin"></i></a>
<a class="flickr" href="https://www.flickr.com/" title="Flickr"><i class="fa fa-flickr"></i></a> 
<a class="google" href="https://plus.google.com/" title="Google+"><i class="fa fa-google-plus"></i></a> 
<a class="rss" href="www.feedburner.com/" title="FeedBurner"><i class="fa fa-rss"></i></a>
<a class="youtube" href="https://www.youtube.com/" title="Youtube"><i class="fa fa-youtube"></i></a> 
<a class="pinterest" href="https://pl.pinterest.com/" title="Pinterest"><i class="fa fa-pinterest"></i></a> 
<a class="stumbleupon" href="https://www.stumbleupon.com/" title="Stumbleupon"><i class="fa fa-stumbleupon"></i></a> 
<a class="rdio" href="https://www.rdio.com/" title="Rdio"><i class="fa fa-rdio"></i></a> 
<a class="spotify" href="https://www.spotify.com/pl/" title="Spotify"><i class="fa fa-spotify"></i></a>

</div>
Linki zaznaczone na zielono zamień na te prowadzące do twoich profili.

Uwaga! Jeśli w Adblock Plus masz zaznaczoną opcję blokowania przycisków społecznościowych - ikony mogą nie wyświetlać się. Dlatego wyłącz opcję blokowania przycisków społecznościowych lub usuń z listy filtrów link https://easylist-downloads.adblockplus.org/fanboy-social.txt. Więcej o tym problemie przeczytasz TUTAJ.
Czytaj dalej...

poniedziałek, 12 maja 2014

Skryptowy język programowania (JavaScript)

JavaScript, JS – skryptowy język programowania, stworzony przez firmę Netscape, najczęściej stosowany na stronach internetowych. Pod koniec lat 90. XX wieku organizacja ECMA wydała na podstawie JavaScriptu standard języka skryptowego o nazwie ECMAScript. Głównym autorem JavaScriptu jest Brendan Eich.

Zastosowanie


Najczęściej spotykanym zastosowaniem języka JavaScript są strony WWW. Skrypty służą najczęściej do zapewnienia interaktywności poprzez reagowanie na zdarzenia, sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych. Skrypty JavaScriptu uruchamiane przez strony internetowe ma znacznie ograniczony dostęp do komputera użytkownika. Po stronie serwera może także działać JavaScript w postaci node.js lub Ringo.

W języku JavaScript można także pisać pełnoprawne aplikacje. Fundacja Mozilla udostępnia środowisko złożone z technologii takich jak XUL, XBL, XPCOM oraz JSLib. Umożliwiają one tworzenie korzystających z zasobów systemowych aplikacji o graficznym interfejsie użytkownika dopasowującym się do danej platformy. Przykładem aplikacji napisanych z użyciem JS i XUL może być klient IRC o nazwie ChatZilla, domyślnie dołączony do pakietu Mozilla. Microsoft udostępnia biblioteki umożliwiające tworzenie aplikacji JScript jako część środowiska Windows Scripting Host. Ponadto JScript.NET jest jednym z podstawowych języków środowiska .NET. Istnieje także stworzone przez IBM środowisko SashXB dla systemu Linux, które umożliwia tworzenie w języku JavaScript aplikacji korzystających z GTK+, GNOME i OpenLDAP.

JavaScript dla WWW



Interakcja


Wszystkie implementacje JavaScriptu dostępne w przeglądarkach internetowych dostarczają obiektów reprezentujących drzewo dokumentu. Mogą także umożliwiać tworzenie ciasteczek, manipulowanie oknami przeglądarki, wyświetlanie prostych okien dialogowych, pobieranie informacji o przeglądarce, zarządzanie jej pluginami oraz arkuszami stylów. Reagują także na zdarzenia wywoływane w interfejsie.

Podczas manipulowania zawartością dokumentu problem stanowił brak jego ustandaryzowanego modelu. W czwartym pokoleniu przeglądarek dostęp do niektórych elementów dokumentu w Netscape możliwy był przy użyciu kolekcji document.layers, za to w Internet Explorerze – document.all. Organizacja W3C opracowała jednak jednolity obiektowy model obsługiwany przez wszystkie współczesne przeglądarki (w tym Operę od wersji 6, Konquerora od wersji 3 oraz Safari). Tablice all i layers zostały uznane za przestarzałe i wsparcie dla nich zostało praktycznie wycofane.

Osadzanie


W języku HTML za umieszczanie skryptów JS odpowiedzialny jest element <script> z opcjonalnymi argumentami type o wartości text/javascript i language o wartościjavascript.

<script type="text/javascript" language="JavaScript 1.5"> alert(12 > 6); </script>

Jeżeli kod znajduje się w dokumencie XHTML, w celu uniknięcia zinterpretowania niektórych operatorów jako elementów składni języka należy otoczyć skrypt sekcją CDATA lub zapisać je w postaci encji. W XHTML nie można używać argumentulanguage w znaczeniu określenia wersji języka JS (atrybut, jeżeli jest użyty, powinien przyjąć dwuznakowe wartości opisane standardem ISO 639, np. EN, DE, PL).

<script type="text/javascript"> /* <![CDATA[ */ alert(12 > 6); /*]]> */</script>

Zewnętrzne skrypty dodajemy także przy użyciu powyższego znacznika, uwzględniając jedynie parametr src z nazwą pliku zawierającego kod skryptu. Typ MIME dla samodzielnych plików JavaScript to application/javascript lub przestarzałytext/javascript.

<script type="text/javascript" src="code.js"></script>

Link do źródła
Czytaj dalej...

Hipertekstowy język znaczników (HTML)

HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.

Opis wstępny


HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy – oraz osadza w tekście dokumentu obiekty plikowe np. multimedia bądź elementy baz danych np. interaktywne formularze danych.

HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów.

W składni HTML wykorzystuje się pary znaczników umieszczone w nawiasach ostrokątnych, np. <title> i </title> lub <h1> i </h1>.

HTML pozwala również na osadzanie ciągów instrukcji języków skryptowych, umieszczonych pomiędzy znacznikami <script> i </script>

Należy nadmienić, że HTML, będąc językiem znaczników, nie jest zaliczany do języków programowania – w jego składni nie przewidziano wyrażeń obliczeniowych, warunkowych czy iteracyjnych.

Ważną cechą HTML-a, która przyczyniła się do popularności systemu WWW oraz Internetu, jest niezależność od systemu operacyjnego i wykorzystywanego sprzętu komputerowego.

Komponenty języka HTML


Język HTML składa się z kilku kluczowych komponentów:

  • znaczników (i ich atrybutów),
  • typów danych,
  • referencji znakowych,
  • odwołań w postaci encji,
  • deklaracji typu dokumentu. 

Znaczniki (tagi)


Znaczniki stanowią podstawowy komponent języka HTML. Charakteryzują je dwie cechy: atrybuty i zawartość. Każdy atrybut i zawartość musi spełniać określone wymagania, aby dokument został poprawnie zwalidowany pod kątem zgodności ze standardem. Znacznik zwykle rozpoczyna się znacznikiem otwierającym (np. <nazwa-znacznika>), a kończy znacznikiem zamykającym (np. </nazwa-znacznika>). Atrybuty elementu są zawarte w znaczniku otwierającym (po nazwie znacznika), natomiast zawartość umieszczana jest pomiędzy znacznikiem otwierającym i zamykającym. (np. <nazwa-znacznika atrybut="wartość">zawartość</nazwa-znacznika>). Niektóre elementy, np. <br>, <hr> nie posiadają zawartości, a także znacznika zamykającego.

W nomenklaturze polskiej, dotyczącej języka HTML, słowa element używa się do określenia grupy:

  • znacznik otwierający,
  • atrybuty,
  • zawartość,
  • znacznik zamykający.


Słowami znacznik określa się znacznik otwierający (wraz z zamykającym) w znaczeniu elementu składni języka HTML, np. "Do wyszczególnienia paragrafów wykorzystuje się znacznik <p>". Niektórzy słowa element używają zamiennie ze słowami znacznik lub tag.

Niektóre elementy nie wymagają znaczników końcowych (np. <p> odpowiadający za nowy akapit) lub ich nie mają (<img> wstawiający obrazek lub <br> łamiący linię).

Poniżej przedstawione są różne typy znaczników języka HTML.


Strukturalne – opisują logiczną strukturę tekstu, np. <h2>Golf</h2> nadaje znaczenie wyrazowi "Golf" i traktuje go jako nagłówek drugiego stopnia. Podczas renderowania(wyświetlania) zostanie on zaprezentowany w sposób wyróżniony (np. większą i pogrubioną czcionką). Znaczniki strukturalne nie definiują sposobu wyświetlania elementu, jednak większość przeglądarek posiada wbudowane style, których używa, gdy do dokumentu nie jest dołączony żaden kaskadowy arkusz stylów CSS.

Prezentacyjne – opisują wygląd poszczególnych elementów, np. <b>lama</b> powoduje, że "lama" zostanie wyświetlona pogrubioną czcionką. Nie daje jednak żadnych wskazówek urządzeniom nie potrafiącym wyświetlić pogrubionego tekstu (takim jak syntezatory mowy, czytający daną stronę na głos). W przypadku <b>pogrubienia</b> oraz<i>pochylenia</i> istnieją równoważne znaczniki, mające podobną lub taką samą formę wizualną, ale posiadające naturę semantyczną. Są to odpowiednio <strong>silne wzmocnienie znaczenia</strong> oraz <em>wzmocnienie znaczenia</em>. W tym przypadku łatwiej określić zachowanie syntezatora mowy podczas interpretacji takich znaczników np. poprzez mocniejsze zaakcentowanie danego wyrażenia. Znaczniki semantyczne nie są jednak stuprocentowymi odpowiednikami znaczników prezentacyjnych. Istnieją sytuacje, gdy tylko wizualnie chcemy wyróżnić daną część tekstu. Nie jest pożądane, aby syntezator mowy wzmacniał znaczenie np. tytułu książki w trakcie czytania strony, podczas gdy wizualnie warto byłoby taki tytuł wyróżnić czcionką pochyłą dla poprawienia czytelności tekstu. Większość znaczników prezentacyjnych w specyfikacji HTML 4.0 oznaczono jako przestarzałe na rzecz kaskadowych arkuszy stylów CSS.

Hipertekstowe – zawierają linki do innych dokumentów lub innych części tego samego dokumentu. HTML aż do wersji XHTML 1.1 wymaga do utworzenia hiperłącza elementu o nazwie anchor (pol. kotwica), zapisywanego w postaci: <a>Wikipedia</a>. Oprócz tego atrybut href musi zwierać poprawny adres URL. Następujący kod HTML<a href="http://pl.wikipedia.org/">Wikipedia</a> wyświetli ciąg znaków "Wikipedia" jako hiperłącze.

Atrybut


Większość atrybutów elementów składa się z par nazwa-wartość, rozdzielonych znakiem "=", zawartych w znaczniku otwierającym elementu, po jego nazwie. Wartość może być zawarta w pojedynczych lub podwójnych cudzysłowach. Przy niektórych wartościach cudzysłowy mogą być pominięte (tylko w specyfikacji HTML, nie XHTML), jednak nie jest to zalecane, a wręcz praktyka taka uznana jest na niebezpieczną. W przeciwieństwie do atrybutów w postaci par nazwa-wartość istnieją atrybuty mające wpływ na element poprzez samo ich zawarcie w znaczniku otwierającym (np. ismap atrybut dla znacznika img).

Znaczna część elementów może posiadać standardowe dla znaczników atrybuty: id, class, style, title, a także atrybuty związane z językiem lang i dir.

Atrybut id nadaje elementowi unikatowy identyfikator. Może on zostać użyty przez arkusze stylów do sprecyzowania wyglądu tego elementu lub przez skrypty np. do zmiany jego zawartości. Atrybut class służy do sklasyfikowania elementów dla celów prezentacyjnych. Dokument HTML lub zbiór takich dokumentów może używać klasy class="stopka", sugerując, że powinny być one wyświetlone na dole strony w postaci stopki. Elementy posiadające taką klasę mogą otrzymać styl, dzięki któremu zamiast wyświetlać się w miejscu występowania w kodzie HTML, będą zaprezentowane na dole strony w postaci stopki.

Autor może użyć znacznika style, aby nadać styl konkretnemu elementowi w kodzie HTML. Dobrą praktyką jest jednak nadanie elementowi unikatowego identyfikatora id, odnosząc się prezentacji tego znacznika w arkuszu stylów. Czasem jest to jednak nieporęczne podczas szybkiego testowania wyglądu elementów. Atrybutu title używa się w celu dodania do elementu informacji tekstowej. W wielu przypadkach zawartość atrybutu title wyświetlana jest w postaci podpowiedzi (tooltip), pojawiającej się na ekranie po najechaniu myszą na dany element. Wykorzystanie tych atrybutów może ułatwić znacznik span, należący do grupy znaczników typu inline.

<span id="ZadaneId" class="DanaKlasa" style="color:blue;" title="Hypertext Markup Language">HTML</span>

Powyższy kod wyświetli niebieski napis HTML (najechanie wskaźnikiem myszy na skrót HTML powinno w większości przeglądarek wyświetlić podpowiedź z rozwinięciem skrótu).

Przykład dokumentu HTML


Prosty przykład strony WWW w HTML-u z ustawieniem języka polskiego:
<!doctype html>
 <html lang="pl" dir="ltr">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Tytuł strony</title>
</head>
<body>
<h1>Nagłówek pierwszego poziomu</h1>
 <p> Akapit (z ang. paragraph)<br /> i jeszcze trochę tekstu w następnym wierszu<br /> a to jest <a href="http://pl.wikipedia.org">link do Wikipedii</a>. </p>
</body>
</html>

Link do źródła
Czytaj dalej...

niedziela, 11 maja 2014

Kaskadowe arkusze stylów (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.

Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.

CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.

Historia


Pierwotnie HTML był językiem wyłącznie do opisu struktury dokumentu. Jednak z czasem zrodziła się potrzeba ożywienia wyglądu takich dokumentów. Powoli dodawano nowe znaczniki do HTML pozwalające kontrolować kolory, typografię, dodawać nowe media (np. obrazki). Te niestandardowe rozszerzenia realizowane były przez najpopularniejszych producentów przeglądarek bez porozumienia z drugim. Doprowadziło to do zaimplementowania nowych znaczników działających w konkretnej grupie przeglądarek i nie działających w innych przeglądarkach. Projektanci zostali zmuszeni do wysyłania do klienta różnych wersji tej samej witryny w zależności od użytej przeglądarki, uzyskanie identycznego wyglądu w różnych przeglądarkach było praktycznie niemożliwe. Håkon Wium Lie jako pierwszy zaproponował CHSS (Cascading HTML Style Sheets) w październiku 1994 roku. Później Lie i Bert Bos pracowali wspólnie nad standardem CSS (literka H została usunięta ze względu na możliwość stosowania stylów do innych podobnych do HTML języków).

W tym czasie została utworzona organizacja World Wide Web Consortium, która z Lie'em i Bosem na czele przejęła prace nad CSS. Pod koniec 1996 roku wydano oficjalną dokumentację CSS, Kaskadowe arkusze stylów, poziom 1.

W3C zatwierdziło dwa oficjalne standardy CSS: CSS 1 i CSS 2, a także dnia 7 czerwca 2011 roku standard CSS 2.1.

Trwają również prace nad CSS3. Wersja ta w stosunku do poprzedników wzbogaci się o wiele selektorów oraz właściwości, nowością jest także modułowy charakter języka – nie będzie to już jednolita rekomendacja, lecz kilkadziesiąt osobnych dokumentów, co pozwoli na włączanie lub wyłączanie odpowiednich modułów w przeglądarkach w zależności od chwilowych potrzeb.


Obsługa przez przeglądarki


Początki implementacji CSS1


Specyfikacja CSS1 została opublikowana pod koniec 1996. Kilka miesięcy później pojawiła się przeglądarka Internet Explorer 3 zapewniająca podstawową obsługę CSS1. Była to ważna cecha, która w czasach dominacji Netscape Navigatora, pozwalała przeglądarce Microsoftu wysunąć się na prowadzenie. Obsługa CSS1 była na tyle dobra, że można było porzucić niestandardowy znacznik <font> i rozpocząć eksperymentowanie z marginesami i innymi elementami układu strony. W praktyce projektanci napotkali liczne problemy związane z niekompletną i pełną błędów implementacją CSS1. Dopiero począwszy od IE4 który ukazał się pod koniec 1997 roku CSS1 działało prawidłowo. Netscape w wersji czwartej zaimplementował CSS1 lecz, jak się okazało, z licznymi błędami. Powszechnie uważano, że sam CSS jest wadliwy, a to skłoniło wielu projektantów do jego zarzucenia. W efekcie powszechne uznanie CSS1 za standard, bardzo się opóźniło. Z dzisiejszej perspektywy jest to język dość prosty a zarazem dający projektantowi wiele możliwości. Pozwala przede wszystkim dokładnie rozmieścić poszczególne elementy strony oraz stosować warstwy. Jedną z podstawowych właściwości CSS 1 jest kaskadowość. Pliki stylów dołączone przez autora dokumentu, mogą zostać podmienione przez odbiorcę w celu dopasowania prezentacji do indywidualnych potrzeb. Najważniejsze, że wszystko może być zmodyfikowane w jednym pliku, a tym samym odpadło monotonne i uciążliwe modyfikowanie każdego pliku witryny oddzielnie.


CSS 1 we współczesnych przeglądarkach


CSS 1 jest w pełni obsługiwany przez współczesne, popularne przeglądarki tj. oparte na następujących silnikach renderujących stronę:


Jednym z testów sprawdzających CSS 1 jest Acid1.


CSS 2


W CSS 2 rozwiniętym do poziomu 2.1 wprowadzone zostały nowe selektory i właściwości. W nowej wersji właściwościami stylu objęto strukturę dokumentu, oddzielając styl prezentacji dokumentów od ich zawartości. CSS2.1 upraszcza autorskie opracowanie w sieci i konserwację strony. Teoretycznie stało się możliwe wybranie np. elementu HTML, który jest bezpośrednio pod innym elementem (jest dzieckiem danego elementu). W praktyce użycie wielu z nowych elementów języka przez parę lat uniemożliwiała dominacja IE 6 i późniejszego IE 7, którego wsparcie CSS 2.1 jest słabe. Nowsza wersja IE dołączyła jednak do pozostałych przeglądarek i w pełni przechodzi m.in. test Acid2, w którym testowano elementy standardu CSS 2.1. CSS 2.1 opiera się na CSS 1 i z nielicznymi wyjątkami, wszystkie aktualne style pierwszego poziomu są też obecne w jego następcy. CSS 2.1 obsługuje specyficzne medialne arkusze stylu tak, że autorzy mogą dostosować prezentację swoich dokumentów do wizualnych przeglądarek, urządzeń słuchowych, drukarek, urządzeń Braille’a, urządzeń ręcznych, itd. CSS 2.1 wspomaga ustawienie (pozycjonowanie) treści, obsługuje ściągalne czcionki, wspiera układ graficzny tabeli, internalizację, automatyczne liczniki, numerację i niektóre właściwości dotyczące interfejsu użytkownika.


CSS 3


Inaczej niż CSS 2, który jest jedną wielką specyfikacją definiującą różne właściwości, CSS 3 podzielony jest na niezależne dokumenty zwane modułami. Każdy moduł zawiera nowe możliwości i rozszerza elementy zdefiniowane w CSS 2, tak, żeby zachowywały kompatybilność z wersjami wcześniejszymi. Prace nad trzecim poziomem CSS rozpoczęły się krótko po oficjalnej publikacji specyfikacji CSS 2. Najwcześniejsza robocza wersja CSS 3 pojawiła się w czerwcu 1999 roku.

W wyniku podziału na moduły poszczególne elementy CSS 3 mają różny status czy poziom stabilności, ale dzięki podziałowi mogą być opublikowane jako obowiązujące niezależnie od etapu pracy nad pozostałymi elementami. Dodano także nowe znaczniki i właściwości. W czerwcu 2012 roku CSS Working Group miało opublikowanych ponad 50 różnych modułów, a kilka z nich zostało oficjalnie zarekomendowanych jako standard przez W3C, np.:

  • 2012-06-19: typy mediów (media queries)
  • 2011-09-29: przestrzenie nazw (namespaces)
  • 2011-09-29: znaczniki (selectors)
  • 2011-06-07: kolory

Niektóre z modułów, np. tła i obramowania czy układ wielokolumnowy (multi-column layout), mają nadany status CR (Candidate Recommendation), który uważany jest za raczej stabilny i zaleca się poprawianie dotychczasowych implementacji w celu usuwania tzw. prefiksów, filtrów które umożliwiających wyświetlanie poszczególnych elementów strony w różnych przeglądarkach internetowych, a które nie obsługują prawidłowo specyfikacji CSS (np. -moz-border-radius dla Gecko, -webkit-border-radius dla WebKit).

CSS 3 wspiera również przezroczystość elementów opacity czy zaokrąglone narożniki m.in. obramowań przez właściowść border-radius, które coraz częściej używane są na stronach internetowych w celach estetycznych.

CSS 4


CSS 4 nie istnieje już jako jedna specyfikacja. Odkąd CSS 3 został podzielony na moduły, każdy z nich rozwija się niezależnie. Większość z nich jest na poziomie 3, który bazuje na wcześniejszym CSS 2.1. Kilka z nich osiągnęło poziom 4 np. własności grafiki (image values), tła i obramowania (backgrounds & borders) czy znaczniki, które oparto na sprawdzonych modułach poziomu 3. Są też całkiem nowe elementy, nad którymi dopiero rozpoczęto prace oznaczone jako poziom 1 np. flexbox, który jest swego rodzaju "dynamiczną" tabelą (we wrześniu 2012 oznaczony symbolem CR).


Składnia arkuszy


Arkusz stylów składa się z reguł określających styl dla wybranych elementów dokumentu (HTML, SVG i innych). Reguła składa się z selektora oraz deklaracji. Selektor określa grupę elementów (rzadziej pojedynczy element), którego ma dotyczyć deklaracja. Deklaracja określa formatowanie i składa się z nazwy jednej z właściwości i jej wartości napisanej po dwukropku. Deklaracja musi być otoczona nawiasami klamrowymi.
selektor { właściwość: wartość }
Dodatkowo możliwe jest grupowanie zarówno selektorów jak i deklaracji. Zgrupowane selektory rozdziela się przecinkami, a deklaracje średnikami:
selektor1, selektor2 { właściwość1: wartość1; właściwość2: wartość2; }
Dozwolone jest stosowanie średnika po wszystkich deklaracjach, nie jest jednak dozwolone stosowanie przecinka po ostatnim selektorze. Ponadto niektóre wartości mogą być zgrupowane i podane w ramach jednej deklaracji. W takim wypadku składnia zależy od definicji składni zbiorczej właściwości.

Poniżej podana jest przykładowa reguła dla języka (X)HTML, w której przypisujemy wszystkim akapitom niebieski kolor tekstu:
p { color: blue; }
Selektorem jest tutaj p, właściwością color, a wartością blue.

Selektory zawarte w pierwszej specyfikacji CSS zapewniają możliwość opisania docelowej grupy elementów przez:

  • nazwę elementu (np. „h1”)
  • klasę elementu (np. „.elementy_menu”), także w połączeniu z nazwą elementu (np. „img.wyrownane_do_prawej”)
  • id elementu (np. „#menu_lewe”)
  • przodków danego elementu (np. „div#menu_lewe a” zostanie zastosowane do linków zawartych w elemencie div o id „menu_lewe”)
  • stan linków określany przez pseudoklasy (:visited, :link, :active)
  • inne pseudoklasy typograficzne (:first-line, :first-letter)

Dodawanie stylów do dokumentu


Dokument można powiązać z arkuszem określając relację tego pierwszego z osobnym dokumentem CSS za pomocą elementu link:
<link rel="stylesheet" href="style.css" /> <!-- wersja uniwersalna dla (X)HTML -->
W przypadku dokumentu XML (w tym także XHTML serwowanego z XML-owym typem zawartości) można użyć specyficznej dla XML-a instrukcji przetwarzania:
<?xml-stylesheet type="text/css" href="style.css"?>
Reguły CSS można też umieszczać wewnątrz nagłówka dokumentu (X)HTML oraz w niektórych dokumentach opartych na XML dzięki elementowi style:
<style type="text/css"><![CDATA[p {color: red;}]]></style>
Można również dodawać deklaracje bezpośrednio do danego elementu dokumentu za pomocą atrybutu style:
<p style="color: red">Lorem ipsum</p>
Ta ostatnia metoda nie jest jednak zalecana, ponieważ utrudnia zachowanie spójności w wyglądzie.


Model kaskadowy


Nazwa „kaskadowe arkusze stylów” wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie w arkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów ustalany jest hierarchicznie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane „bliżej” formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:

  • Domyślny arkusz przeglądarki WWW (niezależny od autora strony)
  • Domyślny arkusz użytkownika przeglądarki (jak wyżej)
  • Zewnętrzne arkusze stylów i definicje stylów w nagłówku dokumentu
  • Definicje stylów w atrybucie style elementu

Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z różnych źródeł nie muszą zresztą wcale występować żadne konflikty – wszystkie style uzupełnią się, tworząc jeden wielki „wirtualny” styl.

Link do źródła
Czytaj dalej...

niedziela, 4 maja 2014

Elegancki widżet Popularne posty dla Bloggera


Dodawanie widżetu Popularne posty

Przechodzimy kolejno w menu Panel admina → Układ → Dodaj Gadżet → Popularne posty. Zaznaczamy opcję wyświetlania fragmentu i miniaturki. Po czym zapisujemy gadżet.

Dodawanie stylu css widżetu

By dodać styl widżetu przechodzimy kolejno w menu Panel admina → Szablon → Dostosuj → Zaawansowane → Dodaj arkusz css. W okienko wklej poniższy kod, wciśnij Enter i zapisz zmiany.
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; } 
.PopularPosts .item-title { position: relative; } 
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; } 
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }
Dodawanie skryptu js widżetu

By dodać skrypt widżetu przechodzimy kolejno w menu Panel admina → Szablon → Edytuj kod html → Klikamy w okno edytora → Wciskamy skrót Ctrl + F i wyszukujemy znacznik:
</body>
Następnie przed nim wklejamy poniższy kod:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>
Na koniec zapisujemy szablon i gotowe!
Czytaj dalej...
Szablon dla Bloggera stworzony przez Darmowe dodatki na blogi | oraz Blokotek.pl