CSS ir saīsinājums no Cascading Style Sheets. Izmanto satura (HTML) noformēšanai un izkārtojuma veidošanai. To var veidot pilnībā no nulles vai izmantot kādu no ietvariem, ar kuru palīdzību būvēt mājas lapas vai WordPress tēmas, piemēram, Boostrap. https://getbootstrap.com/
CSS palīdz nodalīt saturu no stila, tādēļ dizainu ir daudz vienkāršāk mainīt, uzlabot.
CSS var plaši pielietot WordPress tēmu uzlabošanai. Katrai tēmai izmaiņu veikšanai visbiežāk ir vajadzīgs savs CSS atbilstoši konkrētās tēmas HTML un CSS lietojumam.
CSS rakstība
Selektors, īpašība un vērtība (selector, property, value)
h1 {color: black;}
CSS izvietošana
- pie elementa (inline CSS)
- pašā dokumentā (internal CSS)
- ārējā failā (external CSS)
CSS pielietošanā izmanto selektorus – visbiežāk tās ir klases, kuras veido noteiktus stilus.
Piemērs: https://www.w3schools.com/code/tryit.asp?filename=GQN3XPL70WBX
Populārākās īpašības (properties)
Teksta noformēšana
Color – krāsa.
Nosaukums https://www.w3schools.com/colors/colors_names.asp vai
HEX vērtība https://htmlcolorcodes.com/
Piemērs:
color: blue; vai color: #1F618D
Tekstu var noformēt arī kā krāsu pāreju jeb gradientu. Piemērs: https://www.w3schools.com/code/tryit.asp?filename=GQQ6AXQSVMCZ
Font-size: teksta izmērs. Visbiežāk izmanto pikseļus (px) mērvienības, bet ir arī citas iespējas.
Font-weight: fonta biezums. Boldēšana. Var izmantot vērtībsa normal, bold, bolder vai skaitliskas vērtības: 100, 200… 900. 900 apzīmē maksimālo fonta biezumu.
Font-family: norāde, kādu fontu lietot. Var izmantot sistēmas fontus – ja vēlas izmantot nestandarta fontus, tas ir atsevišķi jāielādē. Mūsdienās daudz tiek pielietoti Google fonts – bezmaksas iespēja uzstādīt mājaslapā kādu no simtiem fontu. Piemērs: https://www.w3schools.com/code/tryit.asp?filename=GQP0XN3KZMEB
Text-align: teksta līdzinājums. Izmanto šādas vērtības – center (centrēt), left (pa kreisi), right (pa labi), justify (izlīdzināt abas malas).
Text-decoration: teksta noformējums, biežāk izmantotais ir pasvītrojums. Papildu piemēri un vērtības:
https://www.w3schools.com/code/tryit.asp?filename=GQP0L52TW0UM
Teksta transformēšana: pārveidot teksta attēlošanu ar CSS palīdzību – piemēri:
https://www.w3schools.com/code/tryit.asp?filename=GQP0N1BSJZW6
Letter-spacing: atstarpes starp burtiem. Visbiežak izmanto, lai uzlabotu lasāmību vai panāktu īpašus efektus. Vērtības nosaka ar pikseļu (px) mērvienībām, var būt arī negatīvas vērtības (saspiest tekstu). Piemēri: https://www.w3schools.com/code/tryit.asp?filename=GQP0Q0ESMYZT
Text-shadow: teksta ēna, ļoti noderīgi, lai uzlabotu teksta lasāmību, ja fons ir mainīgs vai zems kontrasts. Vislabāk izmantot kādu no ģeneratoriem, kas palīdzēs izveidot atbilstošu noformējumu un jau gatavus efektus. Piemērs: https://www.w3schools.com/code/tryit.asp?filename=GQP0UULRJZTN
Teksta stila un ēnu ģenerators: https://html-css-js.com/css/generator/text-shadow/
Formu ēnojuma piemēri: https://getcssscan.com/css-box-shadow-examples
Fona izveide
Kā fonu var izmantot vienu krāsu (solid), krāsu pāreju (gradient) vai attēlu.
Background-color (var arī vienkārši background) – norādot vienu krāsu vai krāsu pāreju.
Viena krāsa: background-color: green; vai background: green;
Krāsu pāreja – vislabāk ir izmantot kādu no ģeneratoriem, lai izveidotu sev vajadzīgo krāsu savienojumu. Var izvēlēties 2-3 krāsas, virzienu. Ar CSS īstenotas krāsu pārejas ir efektīvākas un vieglāk maināmas kā ar attēliem veidoti foni.
2 krāsu piemērs:
background-image: linear-gradient(to left top, #5f86c0, #00a9e1, #00c9ce, #00e188, #a8eb12);
3 krāsu piemērs:
background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #aa9ae5, #bb99e7, #cd98e8, #ff86ca, #ff7d98, #ff895a, #ffa600);
Attēla izmantošanu fonam
Attēlam ir jāatrodas uz servera, lai varētu to izmantot un css kodā ir jānorāda atrašanās vieta
Piemērs ar saiti uz attēlu uz tā paša servera
background-image: url(“/foni/attels.gif”);
Piemērs ar ārēju saiti
background-image: url(https://images.unsplash.com/photo-1605106715994-18d3fecffb98?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=613&q=80);
Fona krāsu ģeneratori
https://mycolor.space/gradient
Fona attēlu ģeneratori
https://www.magicpattern.design/tools/css-backgrounds – iespēja nokopēt CSS kodu un uzreiz izmantot
CSS foni-strīpas: ģenerators un piemēri https://stripesgenerator.com/stripe-samples
Krāsu gradienta fona piemērs: https://www.w3schools.com/code/tryit.asp?filename=GQP8NR2NCLLL
Praktiskais uzdevums
Izmēģināt dažādus fona noformējuma veidus
https://www.w3schools.com/code/tryit.asp?filename=GQP0F6O1BYHA
Robežas (iekšējās un ārējās)
Robežas var norādīt ar dažādiem parametriem, visbiežāk izmanto pikseļus (px).
Padding: iekšējā robeža
Vērtību piemēri: padding – visas malas vienādas, padding-top – augšējā, padding-right – pa labi, padding-bottom – apakšējā, padding-left – kreisā
Margin: ārējā robeža
margin – visas malas vienādi, margin-top – augšējā, margin-right – pa labi, margin-bottom – apakšējā, margin-left – kreisā
Piemērs: https://www.w3schools.com/code/tryit.asp?filename=GQTWFVXBG1JP
Līnijas
Border: mala. Nosaka biezumu, stilu un krāsu, piemēram, border: 2px solid #1F618D
Līniju stila piemēri: https://www.w3schools.com/code/tryit.asp?filename=GQPA1WZWQCKB
Saišu noformēšana
Saites tiek apzīmētas ar to HTML nosaukumu a. Piemēram, a {color: grey;} – tas ir saišu noklusējuma stāvoklis, savukārt, peles kursoru novietojot uz saites, tiek aktivizēts cits saites stāvoklis – hover. Lai vizuāli parādītu šo lietotāja interakciju, saites noformējumu var mainīt. Tam tiek izmantots CSS ar atbilstošu papildu parametru. Piemērs: a:hover {color:blue; text-decoration: underline;}
Display: hidden
CSS parametrs, kas ļauj noslēpt noteiktus elementus. Atrast atbilstošo HTML elementu, ID vai klasi un piešķirt tam šādu CSS vērtību. Tas paslēps konkrēto elementu, vienkāršojot tēmas pielāgošanu. To izmanto, ja nav citas iespējas veikt izmaiņas pašā HTML.
CSS koda izvietošana WordPress
HTML redaktorā WordPress atbalsta CSS stila pievienošanu
1) pie elementa
Piemērs:
Kanādas izlase Rīgā ieradusies ar 21 debitantu sastāvā
2) Custom CSS pie tēmas uzstādījumiem
3) izmantojot tēmas redaktoru, veikt izmaiņas custom.css failā.
Div konteineri
Tiek izmantots, lai nodefinētu noteiktu bloku vai HTML dokumenta sadaļu. DIV izmanto kā konteineru HTML elementiem, lai to vēlāk vēlāk noformētu ar CSS vai izmantotu Javascript vajadzībām.
Selektori
Selektori ir paredzēti, lai norādītu elementa identitāti, piemēram, piederību klasei
- Vienkāršoti selektori: pēc HTML elementa nosaukuma (p, hr, a, img utml.)
a {color: red;} – sarkana saites krāsa - ID selektors: lapas atvērumā tam ir jābūt unikālam, lai selektors nostrādātu tikai uz atbilstošo elementu. ID selektoru CSS kodā apzīmē ar #, piemēram, #demo-id, savukārt html kodā tas tiek apzīmēts šādi id=”demo-id”, piemēram,…. ID selektoru var izmantot kopā ar klases selektoru, piemēram,
.. - Klases selektors: atzīmē noteiktus elementus un klases var lapas ietvaros izmantot vairākkārt. CSS kodā tiek apzīmēts ., piemēram, .demo-klase. HTML kodā to raksta šādi:..
Selektoru noformēšanas vadlīnijas
ID un klašu nosaukumi nedrīkst sākties ar ciparu, nosaukumus atdala ar -, piemēram, site-content. Tos raksta, lai paši varētu saprast, kā arī ietver nosaukumā atbilstošā bloka nosaukumu, lai varētu ērtāk nolasīt kodu. Piemēram, footer-button.
Klases vienam elementam var tikt pielietotas vairākas, tad to raksta šādi, atdalot klases nosaukumus ar atstarpi:..
, CSS kodā selektorus atdala ar komatu, piemēram, 3 klases ar vienādām īpašībām: .klase1, .klase2, .klase3 {font-size: 12px;}. Ja ID selektors būs atdalīts ar komatu no klases selektora, tad to uzskatīs par savstarpēji nošķirtām vērtībām. Ja komata nav – par hiearhisku selektoru, piemēram, CSS kodā #demo-id .klase3 (saistīti selektori) vai #demo-id, .klase3 (selektori nav saistīti, tiek piešķirtas vienādas vērtības.
Klases var tikt kombinētas ar HTML elementiem, piemēram, CSS kods: p.demo-id – klasei demo-id visiem paragrāfiem tiek piešķirtas noteiktas īpašības.
