{"id":66,"date":"2012-06-12T16:40:19","date_gmt":"2012-06-12T16:40:19","guid":{"rendered":"http:\/\/webowiec.net\/blog\/?p=66"},"modified":"2012-12-21T12:40:59","modified_gmt":"2012-12-21T10:40:59","slug":"kurs-css-dla-niecierpliwych-cz-22","status":"publish","type":"post","link":"https:\/\/webowiec.net\/blog\/kurs-css-dla-niecierpliwych-cz-22\/","title":{"rendered":"Kurs CSS dla niecierpliwych [cz 2\/2]"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Kontynuacja przyspieszonego kursu dla niecierpliwych. Cz\u0119\u015b\u0107 1\/2 – Kurs CSS dla niecierpliwych 1\/2<\/a><\/p>\n

Zak\u0142adam, \u017ce znasz lub zapozna\u0142e\u015b\/a\u015b si\u0119 ju\u017c wst\u0119pnie z podstawami HTML, wiesz do czego on s\u0142u\u017cy i co si\u0119 z nim robi \ud83d\ude09 Zak\u0142adam r\u00f3wnie\u017c, \u017ce wiesz co kryje si\u0119 pod poj\u0119ciem CSS<\/a>. Je\u015bli tak nie jest, zapraszam do pierwszej cz\u0119\u015bci kursu: kurs css<\/a> 1\/2.<\/p>\n

W 2giej cz\u0119\u015bci skupi\u0119 si\u0119 na po\u0142\u0105czeniem CSS z HTML. Powiem o tym jak po\u0142\u0105czy\u0107 styl CSS z kodem HTML w prosty i przejrzysty spos\u00f3b, oraz kilka przydatnych rzeczy dla pocz\u0105tkuj\u0105cych.<\/p>\n

<\/p>\n

4. Klasy\u00a0<\/strong><\/span><\/p>\n

Mamy link (<a>):
\n[sourcecode language=”html”]
\nlink<\/a>
\n[\/sourcecode]<\/p>\n

Dodajemy gdzie ten link ma prowadzi\u0107 i konkretniejsza nazwe:
\n[sourcecode language=”html”]
\nportal webmasterski<\/a>
\n[\/sourcecode]<\/p>\n

Dla ca\u0142kowitej poprawno\u015bci SEO dodajmy jeszcze title \ud83d\ude09
\n[sourcecode language=”html”]
\nportal webmasterski<\/a>
\n[\/sourcecode]<\/p>\n

<\/strong><\/strong>
\ni git, teraz patrz:
\n<znacnzik atrybut=wartosc>anachor<\/znacznik><\/strong><\/p>\n

<\/strong>
\njad\u0105c z przyk\u0142adu wy\u017cej:
\na\u00a0<\/strong>– znacznik
\nhref, title<\/strong>\u00a0– atrybuty
\nhttp:\/\/webowiec.net<\/strong> – warto\u015b\u0107
\nportal webmasterski<\/strong>\u00a0– anachor<\/p>\n

Zrozumienie tych 4 poj\u0119\u0107 b\u0119dzie przydatne aby zrozumie\u0107 dalsz\u0105 cz\u0119\u015b\u0107 kursu.\u00a0<\/span>
\nDo powi\u0105zania CSS z HTML s\u0142u\u017c\u0105 klasy, czyli atrybuty “class<\/span><\/strong>” o warto\u015bci r\u00f3wnej nazwie klasy:
\n<a href=”http:\/\/webowiec.net” title=”portal webmasterski” class=”superlink”<\/span>>portal webmasterski<\/a><\/strong><\/strong><\/p>\n

<\/strong><\/strong>Ten link ma klas\u0119\u00a0“superlink”.<\/strong><\/p>\n

Chc\u0105c zmieni\u0107 teraz kolor linku na czerwony, mo\u017cna da\u0107:
\na {color: red;}<\/strong><\/p>\n

Ale je\u015bli element ma klas\u0119, mo\u017cna to zrobi\u0107 tak:
\n.superlink {color: red;}<\/strong>
\ni teraz tylko ten link b\u0119dzie czerwony a reszta standardowa.<\/p>\n

Je\u015bli mamy tekst:
\n“Jasio idzie po ma\u0142gosie. Jasio bie\u017ce ma\u0142gosie na spacer. Jasio zaczyna co\u015b nawija\u0107..”
\nZaznaczamy \u015brodkowe zdanie:
\n“Jasio idzie po ma\u0142gosie.\u00a0<span><\/strong>Jasio bie\u017ce ma\u0142gosie na spacer.<\/span><\/strong>\u00a0Jasio zaczyna co\u015b nawija\u0107..”<\/p>\n

<span> … <\/span><\/strong>\u00a0nie robi absolutnie nic, taki pozornie bezsensowny znacznik, ale teraz dodaj\u0105c CSS:
\nspan {color: red;}<\/strong>\u00a0# zaznaczone zdanie wy\u015bwietli si\u0119 na czerwono.<\/p>\n

Je\u015bli dodamy inny span i klas\u0119 do nich:
\n[sourcecode language=”html”]
\nJasio idzie po ma\u0142gosie.<\/span> Jasio bierze Ma\u0142gosie na spacer.<\/span> Jasio zaczyna co\u015b nawija\u0107.
\n[\/sourcecode]<\/p>\n

Dodaj\u0105\u0107 kod css:
\n.zielony{color: green;background:white;}
\n.czerwony{color: red;background:yellow;}<\/strong><\/p>\n

Zdania pokolorujemy zgodnie z opcjami w\/w<\/p>\n

Mo\u017ce by\u0107 kilka element\u00f3w tej samej klasy (wa\u017cne info!)<\/strong><\/span><\/p>\n

Np.:
\n[sourcecode language=”html”]
\nIde ulica<\/span>. ulica<\/span> jest czerwona. Ta sama ulica<\/span> jest szeroka
\n[\/sourcecode]<\/p>\n

CSS:
\n.x{color: yellow;}<\/strong>\u00a0#s\u0142owa “ulica” pojawi\u0105 si\u0119 na \u017c\u00f3\u0142to<\/p>\n

Mo\u017cna te\u017c to zrobi\u0107 “na hama” wiec dodaj\u0105c opcje z CSS bezpo\u015brednio do html-a jako warto\u015b\u0107 atrybutu “style<\/strong>“:<\/p>\n

[sourcecode language=”html”]
\nIde ulica<\/span>. ulica<\/span> jest czerwona. Ta sama ulica<\/span> jest szeroka
\n[\/sourcecode]<\/p>\n

Efekt:<\/p>\n

Ide ulica<\/span>. ulica<\/span> jest czerwona. Ta sama ulica<\/span> jest szeroka<\/p><\/blockquote>\n

s\u0142owa “ulica” s\u0105 na \u017c\u00f3\u0142to.<\/p>\n

5. ID<\/strong><\/span>
\nObok klas mo\u017cna te\u017c stosowa\u0107 identyfikatory. Atrybutem jest “id” warto\u015bci\u0105 nazwa identyfikatora, np:
\n[sourcecode language=”html”]
\nIde ulica<\/span>.
\n[\/sourcecode]<\/p>\n

R\u00f3\u017cnica mi\u0119dzy klasami jest taka, \u017ce\u00a0klas\u0119 mo\u017cna u\u017cywa\u0107 wielokrotnie<\/span>, natomiast\u00a0identyfikator mo\u017ce by\u0107 tylko jeden<\/span>!<\/strong><\/p>\n

Odwo\u0142anie w CSS:
\n[sourcecode language=”css”]
\n#x {color: yellow}
\n[\/sourcecode]
\n– zamiast kropki wystepuje #<\/p>\n

 <\/p>\n

6. Kod CSS w dokumencie HTML:<\/strong><\/span><\/p>\n

Kod CSS w kodzie HTML umieszczamy w sekcji HEAD dokumentu, w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n

<html><\/strong><\/span>
\n<head><\/strong><\/span>
\n<style type=”text\/css”><\/span>
\n.x{color: yellow;}
\n<\/strong><\/span><\/strong><\/style>
\n<\/span><\/strong><\/head><\/span><\/strong><\/p>\n

<body>
\n…
\n<\/body>
\n<\/html>\u00a0<\/strong><\/span><\/p>\n

Gdzie\u00a0.x{color: yellow;} <\/strong>jest tylko przyk\u0142adem kodu CSS, Ty mo\u017cesz wrzuca\u0107 tam sw\u00f3j kod i mo\u017ce by\u0107 go na wiele linijek.<\/p>\n

 <\/p>\n

7. Osobny plik CSS do\u0142\u0105czany do pliku HTML:<\/strong><\/span><\/p>\n

Je\u015bli kodu CSS uzbiera si\u0119 nam wi\u0119cej, przyda\u0142oby si\u0119 go upchn\u0105\u0107 do osobnego pliku oraz jako\u015b w\u0142\u0105czy\u0107 do pliku HTML, w punktu 6 wiadomo tylko, \u017ce kod CSS da si\u0119 w\u0142\u0105czy\u0107 do HTML-a bezpo\u015brednio, ale je\u015bli jest go du\u017co, na pewno pojawi\u0105 si\u0119 problemy \ud83d\ude09<\/p>\n

Aby tych niedogodno\u015bci unikn\u0105\u0107, stosuje si\u0119 tagi:<\/p>\n

<html><\/span><\/strong>
\n<head><\/span><\/strong>
\n<link rel=”stylesheet” href=”styl.css<\/span>” type=”text\/css” \/>
\n<\/head><\/span>
\n<\/strong><body>
\n…
\n<\/body>
\n<\/html>\u00a0<\/strong><\/span><\/p>\n

Gdzie styl.css<\/strong><\/span>\u00a0oznacza \u015bcie\u017ck\u0119 dost\u0119pu do pliku CSS. Sama zawarto\u015b\u0107 styl.css <\/strong>to najzwyczajniejszy tekst pisany np. w notatniku. Nie s\u0105 potrzebne \u017cadne dodatkowe programy do edycji CSS, nie musisz pami\u0119ta\u0107 o \u017cadnych\u00a0nag\u0142\u00f3wkach\u00a0czy specjalnych krzaczk\u00f3w czy innych bajer\u00f3w (jak to jest przy HTML-u np. z tagiem <html>). Po prostu wklejasz kod CSS do pliku, zapisujesz i tyle \ud83d\ude09<\/p>\n

8. Dodatki:<\/strong><\/span><\/p>\n

body{background: green;}\u00a0<\/strong># zmienia kolor t\u0142a ca\u0142ej strony na zielony<\/p>\n

*{font-size: 10px;}<\/strong>\u00a0#wszystko na stronie co zawiera tekst, b\u0119dzie go stylizowa\u0107 na czcionke i wielko\u015bci 10px, * oznacza wszystkie elementy na stronie<\/p>\n

a,a:link,a:visited,a:hover{text-decoration:none;}<\/strong>\u00a0#link, nieodwiedzony link, odwiedozny link, link po najechaniu myszk\u0105 b\u0119d\u0105 bez podkre\u015blenia<\/p>\n

<b \u00a0id=”x” class=”y”>jaki to b\u0119dzie mia\u0142o kolor?<\/b><\/strong>
\n#x{color: red;}
\n.y{color: green;}<\/strong>
\n?<\/p>\n

Identyfikator jest zawsze wa\u017cniejszy, ale jak zwykle IE mo\u017ce odstawi\u0107 jak\u0105\u015b maniane, dlatego u\u017cywa si\u0119:
\n#x{color: red !important;}
\n.y{color: green;}<\/strong>
\n“!important” wymusza piorytet na ustawieniu.<\/p>\n

 <\/p>\n

Koniec kursu CSS dla niecierpliwych \ud83d\ude09<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Kontynuacja przyspieszonego kursu dla niecierpliwych. Cz\u0119\u015b\u0107 1\/2 – Kurs CSS dla niecierpliwych 1\/2 Zak\u0142adam, \u017ce znasz lub zapozna\u0142e\u015b\/a\u015b si\u0119 ju\u017c wst\u0119pnie z podstawami HTML, wiesz do czego on s\u0142u\u017cy i co si\u0119 z nim robi \ud83d\ude09 Zak\u0142adam r\u00f3wnie\u017c, \u017ce wiesz … <\/i> Czytaj ca\u0142o\u015b\u0107<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[154,5,3,24,6],"tags":[163,153,174,175,186,165,193,183,190,168,160,167,187,177,172,152,184,180,189,188,192,179,173,157,191,15,11,16,691,176,171,194,169,155,170,161,162,178,58,182,17,159,164,166,55,56,10,53,158,156,181,9,8,7,185],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-kurs-css","category-poradniki","category-porady-dla-webmasterow","category-technologieinformatyka","category-tourtale","tag-bardzo-szybki-kurs-css","tag-css","tag-css-bez-logowania","tag-css-bez-rejestracji","tag-css-class-html","tag-css-dla-poczatkujacych","tag-css-do-html","tag-css-i-html-polaczenie","tag-css-id-w-html","tag-css-kurs-przyklady","tag-css-niecierpliwych","tag-css-przyklady","tag-css-style-w-html","tag-css-w-html","tag-css-za-darmo","tag-html","tag-html-class","tag-html-include-css","tag-html-style-css","tag-html-znacznik-css-style","tag-jak-dodac-css-do-html","tag-jak-polaczyc-css-w-html","tag-jak-poznac-css","tag-jak-szybko-nauczyc-css","tag-jak-wlaczyc-css-do-htmla","tag-jak-zalorzyc-bloga","tag-jak-zrobic-strone-www","tag-jak-zrobic-swoja-strone-www","tag-kurs-css","tag-kurs-css-bez-logowania","tag-kurs-css-bez-oplat","tag-kurs-css-bez-rejestracji","tag-kurs-css-darmowy","tag-kurs-css-dla-niecierpliwych","tag-kurs-css-za-darmo","tag-kurs-styli","tag-kurs-styli-css","tag-laczenie-css-i-html","tag-optymalizacja-strony","tag-plik-css-w-html","tag-porady-dla-webmasterow-2","tag-poznac-szybo-css","tag-prosty-kurs-css","tag-prosty-kurs-css-z-przykladami","tag-robienie-www","tag-strona-internetowa","tag-strony-internetowe","tag-strony-www","tag-szybki-css","tag-szybki-kurs-css","tag-tuortal-css-w-html","tag-tworzenie-stron-www","tag-webmaster","tag-webowiec","tag-znacznik-class"],"_links":{"self":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":13,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/66\/revisions\/278"}],"wp:attachment":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}