01 - CSS sintakse ir selektoriai.pdf

01. CSS Justina Balsė 01. CSS. Turinys Kas yra CSS? CSS taikymas CSS sintaksė Selektorių kategorijos* Klasė ir identifikatorius Teksto ir šrifto parametrai Ikonos Komentarai Kas yra CSS? (1) Cascading Style Sheets – pakopiniai stilių šablonai. Kas yra CSS? (...

01. CSS Justina Balsė 01. CSS. Turinys Kas yra CSS? CSS taikymas CSS sintaksė Selektorių kategorijos* Klasė ir identifikatorius Teksto ir šrifto parametrai Ikonos Komentarai Kas yra CSS? (1) Cascading Style Sheets – pakopiniai stilių šablonai. Kas yra CSS? (2) CSS tai rinkinys taisyklių, aprašančių kaip kiekvienas elementas HTML dokumente turi būti atvaizduojamas. Trys būdai kaip taikyti CSS (1) Lorem Inline Lorem ipsum dolor sit Internal amet, consectetur adipisicing elit. Vel, expedita. External Trys būdai kaip taikyti CSS (2) Inline Internal h2 { color: red; External } p { color: green; } Trys būdai kaip taikyti CSS (3) Inline... Internal... External Stilių taikymo tvarka 1. Įkeliamas HTML kodas; 2. Pritaikomos naršyklės vidinės taisyklės pagal nutylėjimą (angl. by default); 3. Pritaikomos išorinių *.css failų taisyklės; 4. Pritaikomos vidinės, žymoje esančios taisyklės; 5. Pritaikomas elemento stilius: style esančios taisyklės. CSS sintaksė selektorius { Selektorius parametras: reikšmė; Deklaracija parametras: reikšmė; parametras: reikšmė; Parametras (savybė) } Reikšmė Taisyklių kiekis neribojamas. Tas pats parametras viename taisyklių bloke gali būti tik vieną kartą. Selektorių kategorijos Paprastas (anlg. simple selector) Kombinacijos (angl. combinators) ID ir klasės selektoriai Su atributu (angl. attribute selector) Pseudo klasės Pseudo elementai Paprastas selektorius | 1 Heading h2, Heading h3 { Lorem ipsum... color: red; Lorem ipsum... } Lorem ipsum... p { color: blue } Paprastas (type) selektorius | 2 h2, h3 { color: red; } p { color: blue } Kombinacijos (Descendant) | 1 article p { Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... color: red; } Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Kombinacijos (Descendant) | 2 article p { article color:pred; { } color: red; } Kombinacijos (Direct Child) | 1 Lorem article > h3{ 2029 color: red; Lorem } Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Kombinacijos (Direct Child) | 2 article > h3{ color: red; } Kombinacijos (Child) | 3 The child selector selects all elements that are the immediate article > h3{ children of a specified color: red; element. } Kombinacijos (Adjacent Sibling) | 1 Lorem article + p { Lorem ipsum dolor sit amet... color: red; Lorem ipsum dolor sit amet... } Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Kombinacijos (Adjacent Sibling) | 2 article + p { article + red; color: p { } color: red; } Kombinacijos (Adjacent Sibling) | 3 The adjacent sibling combinator (+) separates two selectors article + p { and matches the article + pred; color: { second element only if } color: red; it immediately follows } the first element, and both are children of the same parent element. Kombinacijos (General Sibling) | 1 Lorem article ~ p { Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... color: red; } Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Kombinacijos (General Sibling) | 2 article ~ p { color: red; } Kombinacijos (General Sibling) | 3 The general sibling combinator (~) separates two selectors article ~ p { and matches the second article ~ pred; { element only if it color: follows the first } color: red; element (though not } necessarily immediately), and both are children of the same parent element. Klasė | 1.info{ Lorem ipsum color: blue; dolor sit amet... } p.komentaras{ Lorem ipsum dolor sit amet... color: grey; } Klasė | 2.info{ color: blue; } p.komentaras{ color: grey; } Klasė | 3.klase-1{ color: green; Lorem font-family: Arial; ipsum } Lorem ipsum dolor sit amet....klase-2{ text-align: left; word-spacing: 10px; } Klasė | 4.klase-1{ color: green; font-family: Arial; }.klase-2{ text-align: left; word-spacing: 10px; } ID (geriau naudoti class!!!) #top{ Lorem ipsum dolor color: blue; sit amet... } #bottom{ Lorem ipsum dolor sit amet... color: grey; } Universalus selektorius Lorem Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... * { color: green; Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... } Universalus selektorius * { color: green; } Sąrašų parametrai Numeruotam, ženklintam Numeruotam list-style-type start list-style-position reversed list-style-image value Nuorodos parametrai Nuorodos būsena Nuorodos parametrai :link color :visited cursor :hover text-decoration :active background-color Teksto ir šrifto parametrai Teksto parametrai Šrifto parametrai text-align font-family line-height font-size letter-spacing font-style word-spacing font-weight text-transform text-indent text-decoration color Šriftai Yra dvi pagrindinės šriftų klasės: – Serif – šriftai su užraitais: times, times new roman, georgia, serif. – Sans-serif – šriftai be užraitų: arial, helvetica, verdana, sans-serif. Skirtumas. Šriftus su užraitais geriau skaityti spausdintus popieriuje, o šriftus be užraitų geriau skaityti kompiuterio ekrane. Parametro font-family reikšmės html { font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif; } Šriftai | Google Fonts Ikonos https://fontawesome.com/ https://cdnjs.com/libraries/font-awesome Komentarai Yra tik vienas būdas CSS stiliaus faile parašyti komentarą: CSS validator https://jigsaw.w3.org/css-validator/ Praktika (1) Naudojant skirtingas selektorių kategorijas, aprašyti stiliaus taisykles. Duota: index.html, style.css, rezultatas.pdf Patikrinti CSS sintaksę per CSS validatorių. Praktika (2)* Naudosite: background-color (fono spalva) padding (visos vidinės paraštės) border (rėmelis) list-style-type (sąrašo ženklinimo tipas) ir kt. Praktika (2) Naudojant skirtingas selektorių kategorijas, aprašyti stiliaus taisykles. Duota: index.html, style.css, rezultatas.png Patikrinti CSS sintaksę per CSS validatorių. Praktika (3) Naudojant skirtingas selektorių kategorijas, aprašyti stiliaus taisykles. Duota: index.html, styleDefault.css, rezultatas.jpg. Naujas stiliaus taisykles rašyti į kitą CSS failą. Patikrinti CSS sintaksę per CSS validatorių. Vakaro skaitiniai 1. VS Code Top 10 Pro Tips 2. Neviskas apie CSS.