Fragmente de cod 2025, Ianuarie
.cusut (umplutură: 20 px; marjă: 10 px; fundal: # ff0030; culoare: #fff; dimensiunea fontului: 21 px; greutatea fontului: aldin; înălțimea liniei: 1,3em; chenar: 2 px punctat "
P (font-size: 24px! important;) Regula! important de la sfârșitul unei valori va suprascrie orice alte declarații de stil ale atributului respectiv, inclusiv inline "
A (/ * URL complet valid, probabil link extern * /) a (/ * link către un anumit site web * /) a, a (/ * link relativ intern * /) a (/ * link e-mail * /) a (/ * "
O tehnică de proiectare populară este crearea unui container de conținut care să arate ca o foaie de hârtie și stivuirea altor foi de hârtie sub aceasta, adăugând un strat "
Acasă Catalog Preț Despre Contact nav (lățime: 960px; înălțime: 100px; marjă: 120px automat; text-align: center;). Top-menu li (afișaj: inline-block; "
Iată pentru Google Code Prettify (găsit la această sursă). .prettyprint (color: # 839496; background-color: # 002b36;) .prettyprint .pln (color: inherit;) "
H1 # logo (lățime: 200px; // lățimea înălțimii imaginii: 100px; // înălțimea fundalului imaginii: url (../ cale / către / imagine.jpg.webp); text-indent: -9999px;) Această tehnică "
Cota de blocare se afișează în browsere conforme cu standardele cu efectul „ghilimele mari înainte” și în IE cu o margine stângă groasă și un gri deschis ”
Necesită jQuery și jQuery UI pentru glisorul real. Fața este realizată din elemente transformate în cercuri cu raza de margine. Gura, indicând fericirea "
Din subsolul proiectării v8 a CSS-Tricks. Vizualizați subsolul demonstrației (clar: ambele; depășire: ascuns; dimensiunea fontului: 16 px; înălțimea liniei: 1,3;) # footer-boxes ("
În mod implicit, toate versiunile IE au o bară de defilare pe zone text, chiar și atunci când acestea sunt goale. Niciun alt browser nu face acest lucru, deci dacă doriți să îl eliminați, astfel încât IE să poată "
Orice link de ancorare poate fi un link către un document PDF, dar dacă faceți clic pe un link de genul acesta, poate fi surprinzător și inconfortabil pentru un utilizator. Acest"
Aceasta presupune utilizarea unui autoprefixer. .face: hover (animație: shake 0.82s cubic-bezier (.36, .07, .19, .97) ambele; transformare: translate3d (0, 0, 0); "
Standard: -moz-border-radius: 10px; -webkit-border-radius: 10px; raza chenarului: 10px; / * verificare viitoare * / -khtml-border-radius: 10px; / * pentru vechi "
Aduceți propriile prefixe! .grow (tranziție: toate .2s ușor de intrat;) .grow: hover (transformare: scară (1.1);) "
Toată lumea iubește panglicile
.ribbon (font-size: 16px! important; / * Această panglică "Pentru includerea graficii de înaltă rezoluție, dar numai pentru ecranele care le pot folosi. „Retina” fiind „2x”: @media (-webkit-min-device-pixel-ratio: 2), „
Gestionarea cuvintelor lungi și a adreselor URL (pauze forțate, cratimare, elipsă etc.) - CSS-Tricks
Există momente în care un șir de text foarte lung poate revărsa containerul unui aspect. De exemplu: adresele URL nu au de obicei spații în ele, așa că „
Pentru limbile de la dreapta la stânga, puteți schimba aspectul implicit de la stânga la dreapta în majoritatea browserelor, pur și simplu prin atributul dir. text în dreapta-stânga "
A (schiță: 0;) Aveți grijă să eliminați stilurile de schiță de pe linkuri, deoarece acestea sunt o caracteristică de utilizare. Dacă da, asigurați-vă că definiți stiluri de focalizare clare. Dacă"
Uneori poate fi de dorit să îndepărtați marginea superioară sau stânga de la primul element dintr-un container. La fel, marja din dreapta sau de jos din ultima "
Această pagină listează o mulțime de diferite dispozitive și interogări media care ar viza în mod specific dispozitivul respectiv. Probabil că aceasta nu este, în general, o practică excelentă, dar este util să știm care sunt dimensiunile pentru toate aceste dispozitive într-un context CSS. "
Webkit-tap-highlight-color: rgba (0,0,0,0); Și apoi pentru a permite: stilurile active să funcționeze în CSS pe o pagină din Mobile Safari: "
Bordurile punctate din jurul linkurilor sunt o caracteristică de accesibilitate pe care majoritatea browserelor o au în mod implicit. Este pentru utilizatorii care trebuie sau aleg să navigheze de la tastatură, acolo "
HTML: .. sau .. Accesați CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Indentare negativă singură, din păcate, nu funcționează pentru a elimina textul "
Culoare ușor mai deschisă (presupunând că textul dvs. este negru), marginea de jos punctată și un cursor cu semn de întrebare. Aceasta a devenit o abordare oarecum standardizată "
Pentru imagini de fundal CSS.
Notă mare aici! Ușile glisante sunt o tehnică destul de veche. Și-a petrecut timpul pe web, dar probabil că nu este cel mai inteligent mod de a merge în aceste zile. Avem"
Sup, sub (vertical-align: baseline; position: relative; top: -0.4em;) sub (top: 0.4em;) "
@media print (a :: after (content: "(" attr (href) ")";)) "