{"id":56,"date":"2012-05-29T07:59:48","date_gmt":"2012-05-29T07:59:48","guid":{"rendered":"http:\/\/webowiec.net\/blog\/?p=56"},"modified":"2012-06-23T13:20:42","modified_gmt":"2012-06-23T13:20:42","slug":"kurs-css-dla-niecierpliwych-cz-12","status":"publish","type":"post","link":"https:\/\/webowiec.net\/blog\/kurs-css-dla-niecierpliwych-cz-12\/","title":{"rendered":"Kurs CSS dla niecierpliwych [cz 1\/2]"},"content":{"rendered":"

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

Co to jest CSS, po co go u\u017cywa\u0107, jak go u\u017cywa\u0107..<\/strong><\/em>
\nCSS – stylizowanie r\u00f3\u017cnych element\u00f3w HTML, inaczej m\u00f3wi\u0105c: wizualizowanie\/nadawanie odpowiedniego wygl\u0105du strony www<\/a>.<\/p>\n

Zaczynaj\u0105c kurs CSS<\/a> (nawet ten, przyspieszony) zak\u0142\u0105dam, \u017ce znasz podstawowy HTML<\/a> (a – link, b – pogrubienie, itp). Je\u015bli tak nie jest, po prostu przeczytaj kurs i spr\u00f3buj je pozna\u0107, w \u015brodkowej cz\u0119\u015bci kursu b\u0119dzie nawi\u0105zanie do niekt\u00f3rych znacnzik\u00f3w HTML-a.<\/p>\n

<\/p>\n

1. U\u017cywanie:<\/p>\n

element {opcje}<\/strong>\u00a0\/*komentarz*\/
\nnp.:
\na{color:red}\u00a0<\/strong>\/*linki beda sie wyswietlac na czerwono*\/
\ndiv{width:800px}<\/strong>\u00a0\/*szeroko\u015b\u0107 div bedzie 800px*\/<\/p>\n

opcje<\/strong>\u00a0mo\u017cna \u0142\u0105czy\u0107, stoduj\u0105c \u015brednik\u00a0;<\/strong>
\nelement {opcja; opcja; opcja;}<\/strong><\/p>\n

np.:
\na{color:red; background: white; text-decoration: none; }<\/strong>\u00a0# kolor czerwony, t\u0142o bia\u0142e, brak podkre\u015blenia (wszystko do tego samego elementu czyli link\u00f3w)<\/p>\n

elementy te\u017c mo\u017cna grupowa\u0107 (oddzielone s\u0105 przecinkiem\u00a0,<\/strong>)
\nelement, element2 {opcja; opcja; opcja;}<\/strong><\/p>\n

np.
\na,b {color: red; background: white;}<\/strong>\u00a0\/* a oraz b b\u0119d\u0105 na czerwono w bia\u0142ym tle.*\/<\/p>\n

Kilka podstawowych element\u00f3w:
\na<\/strong>\u00a0– link
\nb<\/strong>\u00a0– podkre\u015blenie
\nfont<\/strong>,\u00a0span<\/strong>\u00a0– stylizacja konkretnego tekstu
\ndiv<\/strong>\u00a0– element blokowy, np. menu widgetu w kolumnie
\np<\/strong>\u00a0– paragraf, akapit, blok tekstu<\/p>\n

Kilka podstawowych opcji:
\ncolor: green;<\/strong>\u00a0\/*kolor *\/
\nbackground: yellow;<\/strong>\u00a0\/*t\u0142o*\/
\ntext-decoration: underline;\u00a0<\/strong>\/*podkre\u015blenie*\/
\ntext-decoration: none;\u00a0<\/strong>\/*brak podkre\u015blenia*\/
\npadding: 2px;<\/strong>\u00a0\/*odleg\u0142o\u015b\u0107 mi\u0119dzy obramowaniem\/granic\u0105 a zawarto\u015bci\u0105 (jak masz obraz na \u015bcianie, to mo\u017cna to por\u00f3wna\u0107 do szeroko\u015bci ramki na tym obrazie)*\/
\nborder: 2px solid red;<\/strong>\u00a0\/*obramowanie grubo\u015bci 2px oloru czerwonego*\/
\nmargin: 3px;<\/strong>\u00a0\/*odleg\u0142o\u015b\u0107 mi\u0119dzy obiektami*\/
\ntext-weight: bold;<\/strong>\u00a0\/*pogrubienie*\/
\nfont-size: 12px;<\/strong>\u00a0\/*wielko\u015b\u0107 czcionki : 12px;*\/<\/p>\n

2. Przyk\u0142ady:<\/p>\n

Modyfikatory (inaczej: deklarowanie akcji do element\u00f3w)
\nnp.
\na:hover {color: red;}<\/strong>\u00a0\/*po najechaniu myszk\u0105 link zmieni kolor na czerwony
\n“:hover” dodane po nazwie elementu to deklaracja, \u017ce opcje dotycz\u0105 elementu w chwili najechania na niego myszk\u0105. *\/<\/p>\n

a,a:hover {color: white;background:red;}<\/strong>\u00a0\/*link oraz link po najechaniu myszk\u0105 ma kolor bia\u0142y a t\u0142o czerwone*\/<\/p>\n

Mo\u017cna te\u017c grupowa\u0107 elementy i ich opcje:<\/p>\n

a{color: red;}
\na:hover{color: white;}<\/strong>
\n\/* link w kolorze czerwonym, po najechaniu myszk\u0105 zmini kolor na bia\u0142y*\/<\/p>\n

a{color: red;text-decoration: none;}
\na:hover{color: white;<\/strong>text-decoration: underline;<\/strong>}<\/strong>
\n\/* to co wyzej + link zwyk\u0142y bez podkre\u015blenia, po najechaniu myszk\u0105 pokarze si\u0119 podkre\u015blenie*\/<\/p>\n

a{color: red;text-decoration: none;font-weight:normal;}
\na:hover{color: white;<\/strong>text-decoration: underline;<\/strong>font-weight:bold;<\/strong>}<\/strong><\/p>\n

\/* to co wyzej +link zwyk\u0142y bez pogrubienie, po najechaniu myszk\u0105 link sie pogrubi*\/<\/p>\n

a{color:white;background:red;padding: 3px;}
\na:hover{color:red;background:white;padding: 3px;<\/strong>}<\/strong>
\n\/* zwyk\u0142y link: kolor bia\u0142y na czerwonym tle, po najechaniu myszka odwr\u00f3cenie kolor\u00f3w, t\u0142o bia\u0142e kolor czerwony, dodatkowo w obu przypadkach odleglosc miedzy tekstem linka a kocem t\u0142a to : 3px (taka ramka o grubo\u015bci 3px dla linka)*\/<\/p>\n

 <\/p>\n

Koniec cz\u0119\u015bci I.<\/span> Zapraszam na cz\u0119\u015b\u0107 II – Kurs CSS dla niecierpliwych 2\/2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Co to jest CSS, po co go u\u017cywa\u0107, jak go u\u017cywa\u0107.. CSS – stylizowanie r\u00f3\u017cnych element\u00f3w HTML, inaczej m\u00f3wi\u0105c: wizualizowanie\/nadawanie odpowiedniego wygl\u0105du strony www. Zaczynaj\u0105c kurs CSS (nawet ten, przyspieszony) zak\u0142\u0105dam, \u017ce znasz podstawowy HTML (a – link, b – … <\/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":[4,154,5,3,24,6],"tags":[163,153,174,175,165,168,160,167,172,152,173,157,15,11,16,691,176,171,169,155,170,161,162,58,17,159,164,166,55,56,10,53,158,156,9,8,7],"class_list":["post-56","post","type-post","status-publish","format-standard","hentry","category-how-to","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-dla-poczatkujacych","tag-css-kurs-przyklady","tag-css-niecierpliwych","tag-css-przyklady","tag-css-za-darmo","tag-html","tag-jak-poznac-css","tag-jak-szybko-nauczyc-css","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-darmowy","tag-kurs-css-dla-niecierpliwych","tag-kurs-css-za-darmo","tag-kurs-styli","tag-kurs-styli-css","tag-optymalizacja-strony","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-tworzenie-stron-www","tag-webmaster","tag-webowiec"],"_links":{"self":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/56","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=56"}],"version-history":[{"count":6,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/56\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}