04 - CSS fonas, css reset, BEM.pdf

04. CSS Justina Balsė 04. CSS Fono parametrai CSS Reset ir CSS normalize CSS Naming Conventions Fono parametrai — background-color; — background-image; — background-size; — background-clip; — background-attachment; — background-repeat; Fono parametrai section{ background-color: green; } header{ background-color: rgba(255, 255, 128,.5); } main{ background-color: hsl(50, 33%, 25%); } Fono parametrai.fonas-1{ background-image: url("../../media/examples/lizard.png"); }.fonas-2{ background-image: url("../../media/examples/lizard.png"), url("../../media/examples/star.png"); } Fono parametrai background-image: – linear-gradient; – radial-gradient; Fono parametrai.fono-dydis-auto{ background-size: auto; }.fono-dydis-cover{ background-size: cover; }.fono-dydis-contain{ background-size: contain; } Fono parametrai.fono-karpymas{ background-clip: border-box; }.fono-karpymas{ background-clip: padding-box; } Fono parametrai.fono-karpymas{ background-clip: content-box; }.fono-karpymas { background-clip: text; color: transparent; } Fono parametrai background-clip: – If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions. Fono parametrai background-repeat: – repeat; – no-repeat; – repeat-x; – repeat-y; – space; – round; Fono parametrai background-attachment: – fixed – slenkant puslapiu žemyn, paveikslėlis vizualiai lieka toje pačioje vietoje; – scroll – slenkant puslapiu žemyn, paveikslėlis fiziškai išlieka toje pačioje vietoje; Fono parametrai background-position: – 1 reikšmė: center, top, left, bottom, right; – 2 reikšmės X ir Y: center, top, left, bottom, right; Reikšmės: – 100px 5px – 100% 5% – top right – bottom 10px right 20px Fono parametrai background-image: url(giftbox.png), url(giftbox.png); background-size: auto, auto; background-repeat: repeat-x, no-repeat; background-position: left top, right bottom; Fono parametrai: shorthand section { section{ background-color: #000; background-image: url(images/bg.gif); background: #000 background-repeat: no-repeat; url(images/bg.gif) background-position: left top; } no-repeat left top; } Priešdėliai | background section { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff)); background: -webkit-linear-gradient(top, #000 0%, #fff 100%); background: -moz-linear-gradient(top, #000 0%, #fff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0); background: -ms-linear-gradient(top, #000 0%, #fff 100%); background: -o-linear-gradient(top, #000 0%, #fff 100%); } Bėda HTML, CSS tokie patys, tačiau naršyklėse rezultatas skiriasi. CSS reset All your browsers have some kind of default styles applied to common elements in your website. Reset stylesheets are used to override the browser’s default styles. Reset CSS is important if you are looking to build a clean and controlled website. CSS reset vs. Normalize HTML5 Reset Stylesheet Normalize.css A CSS Reset is a short, When an element has often compressed different default styles in (minified) set of CSS different browsers, rules that resets the styling normalize.css aims to of all HTML elements to a make those styles consistent baseline. consistent and in line with modern standards when possible. CSS Naming Conventions.redBox {.red-box { border: 1px solid red; border: 1px solid red; } } CSS Naming Conventions There are 3 problems that CSS naming conventions try to solve: – To know what a selector does, just by looking at its name – To have an idea of where a selector can be used, just by looking at it – To know the relationships between class names, just by looking at them CSS Naming Conventions.post {.tabs { border-bottom: 1px solid margin: 2em 0; silver; } text-align: center; }.post-title { font-size: 2em;.tab { font-weight: normal; background: #e5e5e5; border: 1px solid silver; } color: #666; } Justina Balsė BEM | 1 BEM is a convention maintained to help you organize your code and reduce the overall CSS footprint. This, in turn, results in greater efficiency across the board. BEM | 2 BEM | 3 I am a card I am the card paragraph Learn more BEM | 4 Pavyzdys Naudingos nuorodos CSS BEM CSS BEM 2 CSS BEM CHEAT SHEET Praktika (1) Įterpti tris nuotraukas viename bloke. Nuotraukų šaltiniai: – https://www.freepik.com/ Daugiau pvz.: – https://www.w3schools.com/css/tryit.as p?filename=trycss3_background_multi ple – https://developer.mozilla.org/en-US/doc s/Web/CSS/CSS_backgrounds_and_b orders/Using_multiple_backgrounds 2024 V-H grupės darbų galerija Praktika (2) Sukurti CSS klasių rinkinį mygtukams stilizuoti. Trys spalvos, trys dydžiai, trys formos. Naudoti BEM metodiką. Kartojimas CSS Backgrounds – https://www.youtube.com/watch?v=zdubzXvqUyw&t =3s BEM – https://www.youtube.com/watch?v=MNPdifWAAa4 CSS Reset – https://www.youtube.com/watch?v=L4wPV-K1lNI Praktika (2.1) Sukurti tinklapį pagal pavyzdį. Spalvos ir turinys laisvai pasirenkamas. Duota: – index.html Naudoti: – CSS reset (minimalų); – Normalize.css Praktika (2.2) Rekomendacijos – Apgalvokite kaip sudėsite turinį į semantinius elementus: header, main, article, section, footer ir pan. – Pirmiausiai sukurkite HTML dokumentą su minimaliu turiniu, įkelkite paveikslėlius ir ikonas; – Pasirinkite spalvų paletę: http://blog.visme.co/website-color-schemes/ – CSS faile pirmiausiai užrašykite CSS reset taisykles, vėliau bendrąsias (teksto spalvas, nuorodos stilius ir pan.) – Naudokite Google Fonts ir Font Awesome. Justina Balsė Praktika (3) Puslapis Duota: – index.html, – style.css – piktograma style.css faile aprašyti užduoties atlikimo žingsniai Justina Balsė Praktika (4) Laiško šablonas Duota: – index.html, – style.css – Img style.css faile aprašyti užduoties atlikimo žingsniai Justina Balsė

04 - CSS fonas, css reset, BEM.pdf

Document Details

Related

Full Transcript

Upgrade to continue