{"id":140,"date":"2020-10-19T10:44:41","date_gmt":"2020-10-19T08:44:41","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=140"},"modified":"2021-06-29T06:48:04","modified_gmt":"2021-06-29T04:48:04","slug":"kaskadowe-arkusze-stylow-podstawy-css","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/kaskadowe-arkusze-stylow-podstawy-css\/","title":{"rendered":"Kaskadowe arkusze styl\u00f3w – Podstawy CSS"},"content":{"rendered":"

Dowiedz si\u0119, czym s\u0105 kaskadowe arkusze styl\u00f3w, jak je u\u017cywa\u0107 w dokumencie HTML. <\/p>\n

Definicja CSS<\/h2>\n

Kaskadowe arkusze styl\u00f3w – CSS<\/strong> – wg. wikipedii to j\u0119zyk s\u0142u\u017c\u0105cy do opisu formy prezentacji stron WWW. CSS zosta\u0142 opracowany przez organizacj\u0119 W3C w 1996 r. jako potomek j\u0119zyka DSSSL przeznaczony do u\u017cywania w po\u0142\u0105czeniu z SGML-em. Pierwszy szkic CSS zaproponowa\u0142 w 1994 r. H\u00e5kon Wium Lie.<\/p>\n

Format zapisu CSS<\/h2>\n

Styl definiowany za pomoc\u0105 CSS zapisany jest zgodnie ze schematem<\/p>\n

Selektor { w\u0142a\u015bciwo\u015bci : warto\u015b\u0107 w\u0142a\u015bciwo\u015bci; }<\/code><\/p>\n

lub z angielskiego Selector { property: property value;}<\/code><\/p>\n

<\/code>\"\"<\/p>\n

Wszystko co jest w nawiasie klamerkowym, zako\u0144czone \u015brednikiem, nazywamy deklaracj\u0105 (declaration).<\/p>\n

Selektor<\/strong> – jest to element, dla kt\u00f3rego tworzona jest ca\u0142a regu\u0142a CSS. Mo\u017ce by\u0107 nim tag HTML, identyfikator (poprzedzony znakiem „#”) lub klasa (poprzedzona znakiem „.”). Selektor mo\u017ce wi\u0119c odnosi\u0107 si\u0119 do jednego lub wielu element\u00f3w, selektor mo\u017ce te\u017c \u0142\u0105czy\u0107 kilka element\u00f3w, jak na przyk\u0142ad .content p<\/code> czy .text-content dt<\/code><\/p>\n

Deklaracja<\/strong> – deklaracj\u0105 nazywamy jedn\u0105 kompletn\u0105 regu\u0142\u0119, jak na przyk\u0142ad background-color: red;<\/code> czy text-align: center;<\/code><\/p>\n

W\u0142a\u015bciwo\u015b\u0107<\/strong> – jest to element stylizuj\u0105cy zawarto\u015b\u0107 danego tagu HTML. Okre\u015bla on co dok\u0142adnie ma zosta\u0107 wystylizowane ale to jak to ma zosta\u0107 zrobione, definiuj\u0105 warto\u015bci wpisane dla danej w\u0142a\u015bciwo\u015bci. Np. w\u0142a\u015bciwo\u015bci\u0105 mo\u017ce by\u0107 color, text-align, float, margin-top, font-weight<\/code> i tak dalej. Ka\u017cda w\u0142a\u015bciwo\u015b\u0107 ze zdefiniowan\u0105 jej warto\u015bci\u0105 ko\u0144czymy \u015brednikiem.<\/p>\n

Warto\u015b\u0107 w\u0142a\u015bciwo\u015bci<\/strong> – analogicznie do warto\u015bci, b\u0119d\u0105 to w\u0142a\u015bciwe warto\u015bci, jak dla warto\u015bci color:<\/code> pojawi si\u0119 na przyk\u0142ad #f1f2dd<\/code> albo dla w\u0142a\u015bciwo\u015bci float:<\/code> b\u0119dzie to przyk\u0142adowo right<\/code>.<\/p>\n

przyk\u0142ady:<\/p>\n

body\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0lightblue;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n

h1\u00a0{<\/span>
\ncolor:<\/span>\u00a0white;<\/span><\/span>
\ntext-align:<\/span>\u00a0center;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n

p\u00a0{<\/span>
\nfont-family:<\/span>\u00a0verdana;<\/span><\/span>
\nfont-size:<\/span>\u00a020px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n

Komentarze w arkuszach styl\u00f3w<\/h2>\n

Jak zawsze pisz\u0105c jakikolwiek kod, warto komentowa\u0107 to co si\u0119 w nim robi. Pomaga to zar\u00f3wno nam samym przypomnie\u0107 sobie po d\u0142u\u017cszym czasie co mieli\u015bmy na my\u015bli tworz\u0105c dany selektor czy te\u017c mo\u017cemy komentarzem oddzieli\u0107 wszystkie swoje selektory na przyk\u0142ad dotycz\u0105ce wyl\u0105cznie sekcji footera na pisanej stronie internetowej. Komentarze maj\u0105 jeszcze jedn\u0105, bardzo wa\u017cn\u0105 zalet\u0119, ot\u00f3\u017c tworzone w spos\u00f3b opisowy, pozwalaj\u0105 osobie, kt\u00f3r\u0105 do\u0142\u0105czamy do projektu szybko si\u0119 wdro\u017cy\u0107 w niego by praca z nami czy naszym zespo\u0142em by\u0142a przejrzysta i czytelna i co najwa\u017cniejsze – zrozumia\u0142a.<\/p>\n

Zapis komentarza w arkuszy styl\u00f3w ma posta\u0107<\/p>\n

\/* tre\u015b\u0107 komentarza, kt\u00f3ry przy okazji jest zignorowany przez przegl\u0105darki internetowe *\/<\/code><\/p>\n

3 sposoby na wstawienie kodu CSS<\/h2>\n

Do dyspozycji mamy trzy formy zapisu styli CSS. S\u0105 to style zewn\u0119trzne, wewn\u0119trzne oraz wbudowane.<\/p>\n

Zewn\u0119trzne style CSS<\/h3>\n

Zawarto\u015b\u0107 dokumentu HTML i (wyt\u0142uszczona) deklaracja zewn\u0119trznego stylu CSS<\/p>\n

<<\/span>!DOCTYPE\u00a0html<\/span>><\/span><\/span><\/code>
\n<<\/span>html><\/span><\/span><\/code>
\n<<\/span>head><\/span><\/span><\/code>
\n<<\/span>link\u00a0rel=\"stylesheet\"<\/span>\u00a0href=\"mojstyl.css\"<\/span><\/span>><\/span><\/span><\/code><\/strong>
\n<<\/span>\/head><\/span><\/span><\/code>
\n<<\/span>body><\/span><\/span><\/code><\/p>\n

<<\/span>h1><\/span><\/span>This is a heading<<\/span>\/h1><\/span><\/span><\/code>
\n<<\/span>p><\/span><\/span>This is a paragraph.<<\/span>\/p><\/span><\/span><\/code><\/p>\n

<<\/span>\/body><\/span><\/span><\/code>
\n<<\/span>\/html><\/span><\/span><\/code><\/p>\n

Zawarto\u015b\u0107 pliku mojstyl.css<\/p>\n

body\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0lightblue;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n

h1\u00a0{<\/span>
\ncolor:<\/span>\u00a0navy;<\/span><\/span>
\nmargin-left:<\/span>\u00a020px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n

Wewn\u0119trzne style CSS<\/h3>\n

Czyli style, CSS, zapisane w sekcji HEAD dokumentu HTML, mi\u0119dzy znacznikami <style> a <\/style><\/p>\n

<<\/span>!DOCTYPE\u00a0html<\/span>><\/span><\/span><\/code>
\n<<\/span>html><\/span><\/span><\/code>
\n<<\/span>head><\/span><\/span><\/code>
\n<<\/span>style><\/span><\/span>
\nbody\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0linen;<\/span><\/span>
\n<\/span>}<\/span><\/span><\/code><\/strong><\/p>\n

h1\u00a0{<\/span>
\ncolor:<\/span>\u00a0maroon;<\/span><\/span>
\nmargin-left:<\/span>\u00a040px;<\/span><\/span>
\n<\/span>}<\/span>
\n<<\/span>\/style><\/span><\/span>
\n<<\/span>\/head><\/span><\/span><\/code>
\n<<\/span>body><\/span><\/span><\/code><\/p>\n

<<\/span>h1><\/span><\/span>This is a heading<<\/span>\/h1><\/span><\/span><\/code>
\n<<\/span>p><\/span><\/span>This is a paragraph.<<\/span>\/p><\/span><\/span><\/code><\/p>\n

<<\/span>\/body><\/span><\/span><\/code>
\n<<\/span>\/html><\/span><\/span><\/code><\/p>\n

Wbudowane (zagnie\u017cd\u017cone ) style CSS<\/h3>\n

Jest to styl, deklarowany bezpo\u015brednio w tagu html za pomoc\u0105 style=\"deklaracja\"<\/code><\/p>\n

<<\/span>!DOCTYPE\u00a0html<\/span>><\/span><\/span><\/code>
\n<<\/span>html><\/span><\/span><\/code>
\n<<\/span>body><\/span><\/span><\/code><\/p>\n

<<\/span>h1\u00a0style=\"color:blue;text-align:center;\"<\/span><\/strong><\/span>><\/span><\/span>This is a heading<<\/span>\/h1><\/span><\/span><\/code>
\n<<\/span>p\u00a0style=\"color:red;\"<\/span><\/strong><\/span>><\/span><\/span>This is a paragraph.<<\/span>\/p><\/span><\/span><\/code><\/p>\n

<<\/span>\/body><\/span><\/span><\/code>
\n<<\/span>\/html><\/span><\/span><\/code><\/p>\n

Identyfikatory i klasy w CSS<\/h2>\n

id=””<\/strong>\u00a0– Identyfikator w dokumencie HTML tworzymy poprzez id=\"nazwa_identyfikatora\".<\/code> Identyfikator w arkuszu CSS jest zapisywany w formie #nazwa_identyfikatora {}<\/code>. Identyfikator mo\u017cna u\u017cy\u0107 tylko jeden raz na jeden dokument HTML<\/strong><\/p>\n

class<\/strong> =””- Inaczej jest z klas\u0105 (class), kt\u00f3ra w dokumencie HTML definiowana jest jako class=\"nazwa_klasy\"<\/code> natomiast w arkuszu CSS odnosimy si\u0119 do niej poprzez .nazwa_klasy{}.<\/code> Klas\u0119 mo\u017cna u\u017cywa\u0107 wielokrotnie w obr\u0119bie jednego dokumentu HTML<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Dowiedz si\u0119, czym s\u0105 kaskadowe arkusze styl\u00f3w, jak je u\u017cywa\u0107 w dokumencie HTML.<\/p>\n","protected":false},"author":1,"featured_media":145,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[46],"class_list":["post-140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3-javascript","tag-css3"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/145"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}