Pasirinktinis CSS žymeklis

Pasirinktinis Css Zymeklis



Žymeklis rodo vietą ekrane, kur vartotojas gali spustelėti arba įvesti tekstą. Skirtingiems svetainės komponentams gali būti naudojami skirtingi žymekliai. Kūrėjas turi užtikrinti, kad programoje naudojami žymekliai būtų patrauklūs. Pavyzdžiui, ant pelės žymeklio mygtuko galima naudoti nukreipiančios rankos žymeklį. Teksto (mirksinčios linijos) indikatorius naudojamas teksto laukelyje, kuriame reikia įvesti tekstą.

CSS yra keli žymeklio stiliai, naudojami tiesiog nurodant žymeklio ypatybės reikšmę. Tačiau kūrėjas gali sukurti tinkintą žymeklį naudodamas CSS.





Šiame studijų vadove bus pateikta:



    • CSS žymeklis
    • Pasirinktinis žymeklis CSS

Prieš įsigilindami į temą, pažiūrėkime kai kurias CSS žymeklio formas su praktiniu pavyzdžiu.



CSS žymeklis

CSS“ žymeklį “ nuosavybė turi skirtingas vertes, pvz., rodyklė, nėra, progresas ir kt. Sukurkime lentelę, kurioje būtų eilutės, ant kurių užvedus pelės žymeklį bus rodomi skirtingi žymekliai.



Pavyzdys: lentelės, vaizduojančios skirtingus CSS žymeklius HTML, sukūrimas

Pirmiausia į HTML pridėkite elementą

. Šio elemento viduje:



    • Žyma
bus naudojama eilutėms kurti.
  • Pirmoje eilutėje yra antraštės.
  • Šios antraštės nurodomos naudojant
    • žymose yra dvi
    žymas. Kitose
    žymos, skirtos užpildyti stulpelius duomenimis.
  • Antroji žyma
    		• žymi mygtuko elementus, taikomus su CSS. žymeklį “ skirtingos vertės turtą.

    Aukščiau pateikto scenarijaus HTML kodas pateikiamas toliau:

    < stalo >
    < tr >
    < th stilius = 'plotis: 200 piks.'; > css žymeklio parinkiklis th >
    < th stilius = 'plotis: 200 piks.'; > žymeklio stilius th >
    tr >
    < tr >
    < td > žymeklis: rodyklė td >
    < td >< mygtuką stilius = 'žymeklis: rodyklė;' > rodyklė mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: progresas td >
    < td >< mygtuką stilius = 'žymeklis: progresas;' > progresas mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: neleidžiama td >
    < td >< mygtuką stilius = 'žymeklis: neleidžiama;' > neleidžiama mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: nėra td >
    < td >< mygtuką stilius = 'žymeklis: nėra;' > nė vienas mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: perkelti td >
    < td >< mygtuką stilius = 'žymeklis: perkelti;' > judėti mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: patraukti td >
    < td >< mygtuką stilius = 'žymeklis: patraukti;' > patraukti mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: kopija td >
    < td >< mygtuką stilius = 'žymeklis: kopija;' > kopija mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: col-size td >
    < td >< mygtuką stilius = 'žymeklis: pakeiskite dydį;' > keisti dydį mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: eilutės dydžio keitimas td >
    < td >< mygtuką stilius = 'žymeklis: eilutės dydžio keitimas;' > eilutės dydžio keitimas mygtuką > td >
    tr >
    < tr >
    < td > žymeklis: tekstas td >
    < td >< mygtuką stilius = 'žymeklis: tekstas;' > tekstą mygtuką > td >
    tr >
    stalo >


    Aukščiau pateiktas kodas sugeneruos tokį rezultatą:


    Kitame skyriuje HTML elementams pritaikysime skirtingus stilius.

    Stilius „visi“ elementai

    * {
    pamušalas: 0 ;
    marža: 0 ;
    šriftų šeima: Arial, Helvetica, sans-serif;
    }


    Visi HTML elementai taikomi su CSS stiliais, kurie paaiškinti toliau:

      • “ kamšalas “ nuosavybė su “ 0 “ vertė neapima tarpo aplink elemento turinį.
      • “ marža “ nuosavybė su “ 0 “ vertė neprideda jokios vietos už kiekvieno elemento.
      • “ šrifto šeima 'turtui priskiriama vertė' Arial, Helvetica, sans-serif “. Šrifto stilių sąrašas pateikiamas siekiant užtikrinti, kad jei naršyklė nepalaiko pirmojo stiliaus, turi būti taikomi kiti stiliai.

    Stiliaus 'stalo' elementas

    stalo {
    paraštė: 0px automatinis;
    kraštinė: 1 piks. vientisas pastiprinimas;
    }


    HTML lentelės elementas taikomas su CSS ypatybėmis, kurios aprašytos toliau:

      • “ siena 'ypatybė nustatyta reikšme ' 1px solid gainsboro “, kuris atitinkamai nurodo kraštinės plotį, kraštinės stilių ir kraštinės spalvą.

    “ marža “ nuosavybė elgiasi taip, kaip nurodyta aukščiau.

    Stiliaus „td“ elementas

    td {
    teksto lygiavimas: centre;
    }


    Elementas

    		taikomas su savybe ' teksto lygiavimas 'su reikšme ' centras “. Jis sulygiuos stulpelio tekstą centre.

    Stiliaus „mygtuko“ elementas

    mygtuką {
    fono spalva: kadeto mėlyna;
    užpildymas: 10 piks. 10 piks.;
    spalva: #ffffff;
    plotis: 150 pikselių;
    }


    Aukščiau pateiktame HTML kode naudojamas mygtuko elementas yra sukurtas naujomis CSS ypatybėmis, kurios paaiškintos toliau:

      • “ fono spalva “ nurodo elemento fono spalvą.
      • “ kamšalas “ su reikšmėmis, priskirtomis kaip „ 10 piks. 10 piks “ prideda 10 pikselių vietos viršuje ir apačioje ir 10 pikselių kairėje ir dešinėje elemento elementų pusėse.
      • “ spalva “ koreguoja elemento šrifto spalvą.
      • “ plotis “ yra ypatybė, koreguojanti elemento plotį.

    Aukščiau pateiktas kodas sugeneruos tokį rezultatą:


    Iki šiol aptarėme CSS teikiamus žymeklius. Būsimame skyriuje pavyzdyje bus aprašyta, kaip sukurti pasirinktinį žymeklį naudojant CSS.

    Pasirinktinis žymeklis CSS

    Kūrėjai savo programoms turi naudoti tinkamus žymeklius. Žymekliai turėtų būti patrauklūs, kad atkreiptų vartotojų dėmesį. Be to, šiam tikslui galima sukurti pasirinktinį žymeklį.

    Pažvelkite į žemiau esantį pavyzdį!

    Pavyzdys: Kaip sukurti pasirinktinį žymeklį naudojant CSS?

    HTML pridėkite du div elementus. Vienas su klase“ ratas “ o kitas su klase “ tašką “.

    HTML

    < div klasė = 'ratas' > div >
    < div klasė = 'taškas' > div >


    Pereikime prie CSS skyriaus.

    Stiliaus „kūno“ elementas

    kūnas {
    aukštis: 100vh;
    }


    HTML failo kūno elementas taikomas su stiliumi ' aukščio “ savybė elemento aukščiui nustatyti.

    Stilius 'ratas' skyr

    .ratas {
    plotis: 20px;
    aukštis: 20px;
    kraštinė: 2 pikseliai vientisai baltas;
    sienos spindulys: penkiasdešimt % ;
    }


    Žemiau pateikiamas CSS ypatybių, taikomų div elementui, kurio klasė ' ratas “:

      • “ plotis “ savybė koreguoja elemento plotį.
      • “ siena “ nuosavybė, kurios vertė nurodyta kaip „ 2px vientisai baltas “ reiškia kraštinės plotį, kraštinės stilių ir spalvą.
      • “ pasienio spindulys “ ypatybė pakeičia elemento kraštinę.

    Stilius „taškas“ skyr

    .taškas {
    plotis: 5px;
    aukštis: 5px;
    fono spalva: balta;
    sienos spindulys: penkiasdešimt % ;
    }


    Div elementas su klasės tašku turi skirtingas savybes, kurios aprašytos toliau:

      • “ fono spalva “ ypatybė nurodo elemento fono spalvą.
      • “ pasienio spindulys “ apvalina elemento kraštus.
      • Kitos savybės veiks taip pat, kaip aptarta.

    Pateiktas kodas tinklalapyje parodys šį žymeklį:


    Mes sukūrėme žymeklį naudodami HTML ir CSS. Dabar kitame skyriuje yra parašytas „JavaScript“ kodas, kad būtų galima pridėti reikiamą funkcionalumą prie žymeklio.

    JavaScript

    < scenarijus >
    const cursorCircle = document.querySelector ( '.ratas' ) ;
    const cursorPoint = document.querySelector ( '.point' ) ;
    const moveŽymeklis = ( ir ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` išversti ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` išversti ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemove' , perkelti žymeklį )
    scenarijus >


    Aukščiau pateikto „JavaScript“ kodo aprašymas pateikiamas žemiau:

      • “ žyma, kuri naudojama „JavaScript“ kodui rašyti.
      • “ konst “ raktinis žodis nurodo, kad raktinio žodžio const, po kurio yra kintamasis, negalima priskirti iš naujo.
      • “ document.querySelector('.circle') “ grąžina apskritimo div elementą, atitinkantį nurodytą parinkiklį dokumente.
      • “ document.querySelector('.point') “ grąžina taško div elementą, atitinkantį nurodytą parinkiklį dokumente.
      • “ const moveCursor = (e) => “ ši funkcija nurodo žymeklio funkciją.
      • “ e.klientas “ grąžina vertikalią koordinatę, kai buvo suaktyvintas pelės įvykis.
      • “ e.clientX “ grąžina horizontalią koordinatę, kai suaktyvinamas pelės įvykis.
      • “ cursorCircle.style.transform “ apskritimo skirsnis taikomas su stiliaus transformacija.
      • “ cursorPoint.style.transform “ taškas div taikomas su stiliaus transformacija.
      • “ išversti (${mouseX}px, ${mouseY}px) ” transformacijos savybės reikšmė nustato horizontalias ir vertikalias koordinates.
      • “ window.addEventListener('pelė', perkelti žymeklį) “ įvykių klausytojo metodas klausys pelės judėjimo. Tai yra pasaulinio lango objekto dalis.

    Pateikus aukščiau nurodytus kodų blokus, žymeklis automatiškai judės ekrane, kaip parodyta toliau:


    Tai kieta! Sukūrėme pasirinktinį žymeklį su skirtingomis CSS savybėmis.

    Išvada

    CSS“ žymeklį “ ypatybė turi daugybę reikšmių, kurios nurodo įvairius žymeklio stilius. Tačiau naudodami HTML elementus ir CSS ypatybes galime sukurti pritaikytus žymeklius. Tada įdiegiamas JavaScript kodas, kad suaktyvintų jo funkcijas. Šis tyrimas parodė, kaip sukurti pasirinktinius CSS žymeklius naudojant praktinį pavyzdį.

    Kita

    Kategorija

    Populiarios Temos

    Kaip naudoti Upper_bound() funkciją C++

    Kurie ESP32 kaiščiai turi ištraukimus

    Kaip pasiekti ir modifikuoti Tensor reikšmes „PyTorch“?

    Kaip šnibždėti Roblox?

    Kaip taikyti užvedimo, fokusavimo ir aktyvias būsenas su teksto dekoravimo storiu „Tailwind“.

    Kas yra nullptr C++

    Kaip naudoti kur (bendras tipo apribojimas)

    Koks skirtumas tarp potenciometrų ir reostatų

    Kaip įdiegti „g++“ sistemoje „Linux Mint 21“.

    „AutoSSH“ komanda „Linux“.

    Kaip atnaujinti Debian

    9 Windows 10 kompiuterio pataisymai įstrigo paleidžiant iš naujo

    Kaip gauti buferio ilgį Node.js?

    Kaip atsisiųsti ir įdiegti „Safari“ naršyklę „Windows“.

    Kaip atsisiųsti AWS Vault?

    Kubectl sąrašo vaizdai

    „Microsoft Word“ įtraukos ir pakabinamos įtraukos nustatymas

    Kada naudoti paraštę ir užpildymą CSS

    Kaip naudoti „Emacs“ organizacijos režimą

    Kaip „createInterface()“ veikia Node.js?