15 Naudingi CSS gudrybės, kuriuos galėjote stebėti

Jei jau kurį laiką buvote „frontend“ žiniatinklio kūrėjas, yra didelė tikimybė, kad jūs turėjote akimirką, kai bandėte sužinoti, kaip kažką koduoti ir suprasti po to, kai googling, “tam yra CSS”. Jei neturėjote, gerai jūs ruošiatės.

Šis pranešimas yra tokių CSS kodų rinkinys, kuris gali suteikti jums funkcijų, pavyzdžiui, pasukti elementą lipniąja dalimi, suteikti taškinę liniją, pabrėžiančią galimybes, srauto teksto tekstą specialioje formoje arba pasiekti paralakso efektą. Kai kurie iš jų yra plačiai palaikomi, o kiti - visoms naršyklėms.

1. Numeracijos antraštės ir subpozicijos

   Pasakykite, kad dokumente turite antraštes ir subpozicijas, ir jūs juos numeruojate rankiniu būdu arba per scenarijų. Vietoj to galite naudoti CSS skaitiklius. Čia jau yra išsamus pranešimas. Ir kadangi tai yra iš CSS2 specifikacijos, galite statyti, kad ją palaiko visos naršyklės, išskyrus galbūt IE 6.

2. Spice Up Plain Underlines

   Kartais mes norime pabrėžti gražią taškuotą arba punktyrinę liniją, o ne tvirtą. Kadangi tam nėra pasirinkimo, mes atsiskaitome apačioje. Bet apačioje nėra geras sprendimas, jei tekstas, kurį norite pabrėžti.

   CSS3 nurodė ne vieną, bet tris naujas teksto dekoravimo savybes teksto apdailos spalva, teksto apdailos linija, ir teksto apdailos stilius kuris gali būti įskaitytas į gerą seną teksto apdaila.

   Galite naudoti tuos stilius pabraukimui, viršutinei daliai, netgi teksto mirkymui ir dar daugiau. Nuo 2015 m. Balandžio mėn. Šią funkciją palaiko tik „Firefox“, bet galite įjungti “eksperimentinės žiniatinklio platformos funkcijos” naudoti jį „Chrome“.

3. Citata citata

   Visų pirma, nereikia nerimauti, jei norite įvesti trumpas citatos trumpoms citatoms, nes yra HTML: žyma, nurodanti eilutes.

   The žyma taip pat rūpinasi, kad citatos būtų pateikiamos atskiromis kabutėmis. Taigi, kur yra “yra „CSS“” šiuo metu?

   Sakykime, kad nenorite, kad būtų numatytos dvigubos kabutės, arba turite daugiau nei vieną įdėtų kabučių lygį, galite nustatyti citatos elemento su CSS pirmenybės parinktis naudodami CSS2 kabučių nuosavybė.

4. Negalimų lentelių valdymas

   Gali būti, kad susidūrėte su dideliu stalu su skirtingu turinio dydžiu kiekvienam langeliui, kuris atsisako išlikti nurodyto pločio, nesvarbu, ką bandote. Tame toje lentelėje stenkitės lentelės išdėstymas nuosavybė (vienodo stulpelio aukščio atveju, atlikite šią nuorodą).

   Jei norite būti tiksli, pataisa yra lentelės išdėstymas: fiksuotas; vertė. Priskirdami fiksuotą lentelės išdėstymą, lentelė ir ląstelės plotis nustatomi pagal lentelės plotį arba pirmąją ląstelių eilutę (kurią gali nustatyti vartotojas), o ne turinį. Tai palaiko visos naršyklės.

5. Padarykite jį lipnią

   Lipni elementai yra puslapio elementai, kurie nebus peržiūrėti. Kitaip tariant, jis prilimpa prie matomos srities (peržiūros srities arba slinkties langelio). Tai galite sukurti naudodami CSS padėtis: lipnus;.

   Jie veikia kaip palyginti pozityvūs elementai prieš bet kokį slinkimą ir vėliau kaip ir fiksuoti elementai, kai pasiekiama slinkimo riba. Dabar, tik „Firefox“ palaiko.

6. Gaukite tekstą formoje

   Ar norite, kad jūsų puslapio tekstas būtų gražiai kreivesnis už kai kurį vaizdą, kurį rodėte šalia? Galite pabandyti CSS formos. Norėdami įdiegti CSS formas, galime pasinaudoti trimis savybėmis formos išorė, formos marža ir formos ir vaizdo slenksčio. Nuo 2015 m. Balandžio mėn. CSS figūras palaiko žiniatinklio naršyklės.

7. Privalomi laukai

   Jei turite formą, yra didelė tikimybė, kad tam tikri laukai bus reikalingi, o kiti ne. Jums reikės leisti naudotojams žinoti, kuris iš jų yra. CSS už tai yra : reikia : neprivaloma pseudo klasės. Visos šiuolaikinės naršyklės palaiko jas.

8. Picky With Colors

   Jei jums nepatinka tam tikra spalva, pvz., Mėlyna, pasirinktą plotą galime spalvoti kita spalva ir ::pasirinkimas pseudo elementas yra CSS. Tai palaiko visos modernios naršyklės.

9. Ar aš jį patikrinti?

   Tais atvejais, kai pažymėtas žymimasis langelis, būtų malonu turėti kitą nuorodą iš mažos žymės, esančios numatytojo žymės langelyje, kad būtų pažymėta, kad elementas buvo patikrintas.

   Yra CSS už tai, kuri išnaudoja ryšį tarp artimiausių brolių ir seserų, du elementus šalia. CSS turi gretimą brolio pasirinkimą, pažymėtą pliusu + ženklas, ir mes galime jį naudoti norėdami nukreipti etiketę šalia žymės langelio. Bet kas pirmiausia turi būti pažymėta žymimuoju langeliu? Yra : patikrinta pseudo klasė.

10. Kaip pasakojimas

    Tada, ar ne būtų malonu, jei pirmasis “O” viduje konors “Vieną kartą” atrodo gražiai? Galime tai padaryti gana gražią, galų gale yra CSS. Štai kur ::pirmoji raidė pseudo elementas ateina į gelbėjimą. Jis nukreiptas į pirmąją tikslinės elemento pirmos eilutės raidę. Daugiau apie tai skaitykite čia.

11. Ar norėtumėte daugiau sužinoti?

    Elementas gali turėti klasę X arba duomenis Y arba kitą reikšmę atributui. Jei kada nors reikės parodyti tokią elemento vertę šalia jos, galime naudoti turinys: attr (X). Jis atkuria elemento X atributo vertę, tada galime parodyti jį šalia elemento.

12. Mažai truputį daugiau į kairę

    CSS pradedantiesiems skirti elementai yra gana svarbūs. Skirtingiems elementams reikalingi skirtingi CSS savybių rinkiniai. Mes išnagrinėsime vieną iš daugelio pavyzdžių, kurie yra prieinami pasauliniame žiniatinklyje, kad galėtumėte dar kartą prisiminti, kad yra CSS, kad sutelktų dalykus.

13. Atskleisti nuorodų failo formatą

    Kada nors matėte mažą vaizdą šalia nuorodos, nurodančią, kas yra ši nuoroda? PDF? ar DOC? Taip, tai yra CSS. The turinys: URL () tai, ką mes naudosime atvaizdui už nuorodų.

14. Paleiskite paralakso efektą

    Paralakso efektas yra efektas, naudojamas apibūdinti tariamai lėtą fono judėjimą, lyginant su priekine. Šis efektas yra populiarus svetainėse, kurios įdiegia paralaksų slinkimą. Yra įvairių būdų jį įgyvendinti, toliau pateiktas pavyzdys veikia su „Firefox“ foninis priedas: fiksuotas;.

15. CSS animacijos galia

    Tikriausiai ne didžiulis “tam yra CSS” momentas, nes jūs visi greičiausiai žinote apie CSS animacijas. Tačiau šiek tiek priminimas nėra žalingas. Yra daug naudojimosi CSS animacijomis, tačiau čia yra vienas paprastas dažymas.

Dabar perskaitykite: 50 Naudingi CSS fragmentai Kiekvienas dizaineris turi turėti