8 olulist CSS-i nõuannet ja nippi, mida iga arendaja peaks teadma

CSS-i kasutatakse veebilehele stiili lisamiseks pärast HTML-i skeleti seadistamist. Lisaks saate CSS-is luua lihtsaid kujundusi vaid mõne koodireaga.

Iga arendaja peaks teadma neid CSS-i nippe, et oma projekte kiiresti ja tõhusalt arendada. Need tõstavad teie tootlikkust kindlasti järgmisele tasemele – alustame.

1. Hõljutusefektid

Saate lisada HTML-elemendile hõljutusefekti, kasutades :hõljuma valija.

Näide: hõljutusefekti lisamine nupuelemendile.

HTML kood:

Hõljutage kursorit minu kohal

CSS-kood:

nupp: hõljutage {
värv: #0062FF;
ääris: #0062FF tahke 1px;
taust: #FFFF99;
}

Saate selle koodiga ringi mängida ja selliseid efekte lisada hajuma,sissekasvamine, viltu, ja nii edasi. Tee see enda omaks!

CSS-i tuhmumisefekt hõljutisel

nupp{
läbipaistmatus: 0,5;
}
nupp: hover{
läbipaistmatus: 1;
}

CSS-i kasvuefekt hõljutisel

nupp: hover{
-webkit-transform: skaala (1.2);
-ms-teisendus: skaala (1.2);
teisendus: skaala (1,2);
}

2. Muutke piltide suurust, et need sobiksid div konteineriga

Saate muuta pildi suurust, et see mahuks div-konteinerisse, kasutades nuppu kõrgus, laius, ja objektile sobiv omadused.

HTML kood:

CSS-kood:

.random-image {
 kõrgus: 100%;
 laius: 100%;
 objektile sobiv: sisaldama;
 }

3. Kõigi stiilide ületamine

Saate alistada kõik muud atribuudi stiilideklaratsioonid (sh tekstisisesed stiilid), kasutades !tähtis käskkiri väärtuse lõpus.

HTML kood:

 Tere, Maailm!

CSS-kood:

p {
 taustavärv: kollane;
 }
 .className {
 taustavärv: sinine !tähtis;
 }
 #idName {
 taustavärv: roheline;
 }

Selles näites on !tähtis reegel alistab kõik muu taustavärv deklaratsioonid ja tagab, et taustavärviks määratakse pigem sinine kui roheline.

4. Teksti kärpimine ellipsiga

Ületäitunud teksti saab kärpida ellipsiga (...) kasutades teksti ületäitumine CSS-i atribuut.

HTML kood:

 Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

CSS-kood:

.text {
 tühik: nowrap;
 ülevool: peidetud;
 text-overflow: ellips;
 laius: 200 pikslit;
 }

Seotud: Näidetega selgitatud CSS-kasti mudel

5. Teksti teisenduse kasutamine

Saate sundida teksti kirjutama suur-, väike- või suurtähtedega, kasutades teksti teisendus CSS-i atribuut.

Suurtähed

HTML kood:

 Lorem ipsum dolor sit amet, consectetur adipisicing eliit.

CSS-kood:

.suurtähe {
 text-transform: suurtähtedega;
 }

Väiketähtedega

HTML kood:

 Lorem ipsum dolor sit amet, consectetur adipisicing eliit.

CSS-kood:

.lowercase {
 text-transform: väiketähed;
 }

Suurtähtedega

HTML kood:

 Lorem ipsum dolor sit amet, consectetur adipisicing eliit.

CSS-kood:

.capitalize {
 text-transform: suurtähtedega;
 }

6. Üherealise kinnisvaradeklaratsiooni kasutamine

Saate kasutada CSS-i kiirkirja atribuute, et muuta oma kood kokkuvõtlikuks ja hõlpsasti loetavaks.

Näiteks CSS taustal on stenogrammi atribuut, mis võimaldab teil määrata väärtused taustavärv, taustapilt, taustakordus, ja tausta-positsioon. Samamoodi saate määrata atribuudid font, piir, marginaal, ja polsterdus.

Üherealine taustomaduste deklaratsioon

taustavärv: must;
background-image: url (images/xyz.png);
background-repeat: no-repeat;
taustapositsioon: vasak ülemine;

Ülaltoodud deklaratsiooni saate lihtsustada ühele reale:

taust: must url (images/xyz.png) ei kordu vasakul üleval;

Kiirkirja omadusi on väga mugav kasutada, kuid peate mõnega arvestama keerulised servajuhtumid (nagu on kirjeldatud MDN Web Docsis) nende kasutamise ajal.

Tööriistavihjed on viis elemendi kohta lisateabe andmiseks, kui kasutaja viib hiirekursori elemendi kohale.

HTML kood:

Õige tööriistavihje
See on kohtspikri tekst

CSS-kood:

keha {
 teksti joondamine: keskel;
 }
 .tooltip_div {
 asend: suhteline;
 ekraan: inline-block;
 }
 .tooltip_div .tooltip {
 nähtavus: peidetud;
 laius: 170 pikslit;
 taustavärv: sinine;
 värv: #fff;
 teksti joondamine: keskel;
 piiri raadius: 6 pikslit;
 polsterdus: 5 pikslit 0;
 /* Tööriistavihje positsioneerimine */
 positsioon: absoluutne;
 z-indeks: 1;
 ülemine: -5px;
 vasakule: 105%;
 }
 .tooltip_div: hõljutage .tooltip {
 nähtavus: nähtav;
 }

HTML kood:

Vasakpoolne tööriistavihje
See on kohtspikri tekst

CSS-kood:

keha {
 teksti joondamine: keskel;
 }
 .tooltip_div {
 asend: suhteline;
 ekraan: inline-block;
 }
 .tooltip_div .tooltip {
 nähtavus: peidetud;
 laius: 170 pikslit;
 taustavärv: sinine;
 värv: #fff;
 teksti joondamine: keskel;
 piiri raadius: 6 pikslit;
 polsterdus: 5 pikslit 0;
 /* Tööriistavihje positsioneerimine */
 positsioon: absoluutne;
 z-indeks: 1;
 ülemine: -5px;
 paremal: 105%;
 }
 .tooltip_div: hõljutage .tooltip {
 nähtavus: nähtav;
 }

HTML kood:

Ülemine tööriistavihje
See on kohtspikri tekst

CSS-kood:

keha {
 teksti joondamine: keskel;
 }
 .tooltip_div {
 ülemine veeris: 100 pikslit;
 asend: suhteline;
 ekraan: inline-block;
 }
 .tooltip_div .tooltip {
 nähtavus: peidetud;
 laius: 170 pikslit;
 taustavärv: sinine;
 värv: #fff;
 teksti joondamine: keskel;
 piiri raadius: 6 pikslit;
 polsterdus: 5 pikslit 0;
 /* Tööriistavihje positsioneerimine */
 positsioon: absoluutne;
 z-indeks: 1;
 põhi: 100%;
 vasakule: 50%;
 veeris-vasak: -60px;
 }
 .tooltip_div: hõljutage .tooltip {
 nähtavus: nähtav;
 }

HTML kood:

Alumine tööriistavihje
See on kohtspikri tekst

CSS-kood:

keha {
 teksti joondamine: keskel;
 }
 .tooltip_div {
 ülemine veeris: 100 pikslit;
 asend: suhteline;
 ekraan: inline-block;
 }
 .tooltip_div .tooltip {
 nähtavus: peidetud;
 laius: 170 pikslit;
 taustavärv: sinine;
 värv: #fff;
 teksti joondamine: keskel;
 piiri raadius: 6 pikslit;
 polsterdus: 5 pikslit 0;
 /* Paigutage kohtspikker */
 positsioon: absoluutne;
 z-indeks: 1;
 ülemine: 100%;
 vasakule: 50%;
 veeris-vasak: -60px;
 }
 .tooltip_div: hõljutage .tooltip {
 nähtavus: nähtav;
 }

Kohandatud loomiseks saate kasutada ka Bootstrapi teeki Bootstrapi tööriistanäpunäited.

8. Lisage varjuefektid

Saate lisada tekstidele ja elementidele CSS-i varjuefekte, kasutades tekst-vari ja kast-vari CSS-i atribuudid.

CSS-i tekstivari

The tekst-vari CSS-i omadus lisab tekstile varje ja kihte. The tekst-vari atribuut aktsepteerib tekstile rakendatavate varjude komadega eraldatud loendit.

Tekstivarju CSS-i atribuudi süntaks:

/* CSS-i atribuudiga text-shadow saate kasutada nelja argumenti:
nihe-x, nihe-y, hägususe raadius ja värv */
/* nihe-x | offset-y | hägusus-raadius | värv */
tekst-vari: 2px 2px 4px punane;
/* värv | nihe-x | offset-y | hägususe raadius */
tekstivari: #18fa3e 1px 2px 10px;

Märge: värvi ja hägususe raadiuse argumendid on valikulised.

Seotud: Kuidas kasutada CSS-i tekstivarju: nipid ja näited

Näiteks:

taust: #e74c3c;
värv: #fff;
font-perekond: lato;
tekstivari: 1 pikslit 1 pikslit rgba (123, 25, 15, 0,5), 2 pikslit 2 pikslit rgba (129, 28, 18, 0,51), 3 pikslit 3 pikslit rgba (135, 31, 20, 0,52), 14px, 3 pikslit 3px, 22, 0,53), 5 pikslit 5 pikslit rgba (145, 36, 24, 0,54), 6 pikslit 6 pikslit rgba (150, 38, 26, 0,55), 7 pikslit 7 pikslit rgba (154, 40, 28, 0,56), 8 pikslit 8 pikslit rgba (158, 42, 30, 0,57), 9 pikslit 9 pikslit rgba (162, 1, 10, 40) 10 pikslit rgba (166, 45, 33, 0,59), 11 pikslit 11 pikslit rgba (169, 47, 34, 0,6), 12 pikslit 12 pikslit rgba (173, 48, 36, 0,61), 13 pikslit 13 pikslit rgba (176, 50, 37, 0,62), 14 pikslit 14 pikslit rgba (178, 51, 38, 0,63), 15 pikslit 38, 0,63, 8 pikslit 1, 9, 515, 16 pikslit 16 pikslit rgba (184, 54, 40, 0,65), 17 pikslit 17 pikslit rgba (186, 55, 41, 0,66), 18 pikslit 18 pikslit rgba (189, 56, 42, 0,67), 19 pikslit 19 pikslit rgba (191, 57, 43, 0,68), 20 pikslit 20 pikslit rgba (193, 4x, 58, 193, 4, 58 195, 59, 45, 0,7), 22 pikslit 22 pikslit rgba (197, 60, 46, 0,71), 23 pikslit 23 pikslit rgba (199, 61, 47, 0,72), 24 pikslit 24 pikslit rgba (201, 62, 47, 0,73), 25 pikslit 25 pikslit rgba (202, 62, 48, 0,74), 26 pikslit 48, 0,74, 26 pikslit 4, 7, 626, 27 pikslit 27 pikslit rgba (206, 64, 49, 0,76), 28 pikslit 28 pikslit rgba (207, 65, 50, 0,77), 29 pikslit 29 pikslit rgba (209, 65, 51, 0,78), 30 pikslit 30 pikslit rgba (210, 66, 51, 0,79), 31 pikslit 31 pikslit rgba (211, 8x, 67, 211, 3p, 3p 213, 67, 52, 0,81), 33 pikslit 33 pikslit rgba (214, 68, 53, 0,82), 34 pikslit 34 pikslit rgba (215, 69, 53, 0,83), 35 pikslit 35 pikslit rgba (216, 69, 54, 0,84), 36 pikslit 36 ​​pikslit rgba (218, 70, 54, 0,85), 37 pikslit 9 pikslit, 5, 707, 38 pikslit 38 pikslit rgba (220, 71, 55, 0,87), 39 pikslit 39 pikslit rgba (221, 71, 56, 0,88), 40 pikslit 40 pikslit rgba (222, 72, 56, 0,89), 41 pikslit 41 pikslit rgba (223, 72, 57, 0,9), 42 pikslit 42 pikslit rgba (224, 1x, 43, 3p, 7, 4p). 225, 73, 57, 0,92), 44 pikslit 44 pikslit rgba (225, 73, 58, 0,93), 45 pikslit 45 pikslit rgba (226, 74, 58, 0,94), 46 pikslit 46 pikslit rgba (227, 74, 58, 0,95), 47 pikslit 47 pikslit rgba (228, 75, 59, 0,96), 48 pikslit 9 pikslit 9,748, 9,748 pikslit., 49 pikslit 49 pikslit rgba (230, 75, 59, 0,98), 50 pikslit 50 pikslit rgba (230, 76, 60, 0.99);

CSS-i kasti vari

The kast-vari atribuuti kasutatakse HTML-elementidele varju rakendamiseks.

Kasti-varju CSS-i atribuudi süntaks

kast-vari: [horisontaalne nihe] [vertikaalne nihe] [hägususe raadius] [valikuline leviraadius] [värv];

Märge: hägususe, hajumise ja värviparameetrid on valikulised.

Seotud: Kuidas kasutada CSS-i kastivarju: nipid ja näited

Näiteks:

kast-vari: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Kui soovite vaadata kogu selles artiklis kasutatud lähtekoodi, siis siin GitHubi hoidla.

Stiilige oma veebisait kaasaegsete CSS-i trikkide abil

CSS-i tekstivarjude lisamine veebisaidile on suurepärane viis kasutajate tähelepanu tõmbamiseks. See võib anda veebisaidile teatud elegantsi ja ainulaadse tunde. Olge loominguline ja katsetage mõnega tekst-vari näiteid, mis võivad teie veebisaidi teemaga ühtida.

11 CSS-i tekstivarju näidet, mida saate oma veebisaidil proovida

Saate CSS-is tekstivarjuefektidega palju ära teha, kuid võib olla keeruline täpselt teada, mis on võimalik. Hankige abi nende visuaalsete näidete osas.

Loe edasi

Autori kohta