Fragmente de cod 2025, Ianuarie
A, input, input, label, select, button, .pointer (cursor: pointer;) Unele elemente care pot fi făcute clic misterios nu declanșează un cursor de pointer în „
Html (overflow-y: scroll;) Acesta este CSS nevalid, dar funcționează în orice, cu excepția Opera. Motivul pentru aceasta este de a preveni „săriturile de centrare” atunci când „
În momentul scrierii acestui articol, acest lucru va funcționa numai în Chrome 18+, dar este standardizat, astfel încât asistența va ajunge în cele din urmă peste tot. @media print (corp ("
Firefox și IE au butonul „alegeți fișierul” din dreapta traseului fișierului, în timp ce WebKit îl pune în stânga. Acest lucru face ca WebKit să o pună la dreapta ca „
* Stivă bazată pe Times New Roman * / font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New"
Corpul sintaxei (font: font-style font-variant font-weight font-size / line-height font-family;) În Utilizați corpul (font: italic cu majuscule normale 13px / 150% Arial, "
* (margine: 0; umplutură: 0;) html, body (înălțime: 100%;) body #fixedElement (poziție: fix! important; poziție: absolut; / * ie6 și peste * / top: 0; "
#footer (poziție: fix; stânga: 0px; jos: 0px; înălțime: 30px; lățime: 100%; fundal: # 999;) / * IE 6 * / * html #footer (poziție: absolută; "
Ghidul nostru complet pentru aspectul flexbox CSS. Acest ghid complet explică totul despre flexbox, concentrându-se pe toate diferitele proprietăți posibile pentru elementul părinte (containerul flex) și elementele copil (articolele flex). De asemenea, include istoric, demonstrații, modele și o diagramă de asistență pentru browser. "
Dan Cederholm a folosit de multă vrăjeală Baskerville Italic și ne spune să folosim cea mai bună șarpantă disponibilă (și aici). În bine sau în rău, acest lucru are „
Puteți întoarce imagini cu CSS! Scenariu posibil: având un singur grafic pentru o „săgeată”, dar răsucind-o pentru a indica în direcții diferite. ”
Din proiectarea v8 a CSS-Tricks. Vizualizare navă demonstrativă (fundal: # 444; bordură-fund: 8 px solid # E6E2DF; depășire: ascuns; poziție: relativă; lățime: 100%;) "
Mod accesibil Cel mai bun pariu este să vizionați videoclipul de 5 minute al lui Ethan și apoi să faceți referire la acesta: CodePen Embed Fallback Modul cross-browser (marcaj suplimentar) "
.center (lățime: 300px; înălțime: 300px; poziție: absolută; stânga: 50%; sus: 50%; margine-stânga: -150px; margine-sus: -150px;) Marjele negative sunt exact "
P: ultimul copil: după (conținut: "2766"; / * Aici vine frunza de iederă * / font-size: 150%; / * Face frunza mai mare decât textul normal * / padding-left: 10px; "
# exemplu-gradient (înălțime: 200px; margine: 0 0 20px 0; fundal-culoare: #eaeaea; fundal-dimensiune: 20px 20px; fundal-imagine: "
HTML Le puteți face cu o singură div. Este frumos să ai cursuri pentru fiecare direcție. CSS Ideea este o casetă cu lățime și înălțime zero. „
Dacă sunteți interesat de stilul specific Webkit / Blink / Chrome, există un pseudo-element de proprietate de ascuns și apoi utilizați și un non-standard "
Folosit pentru a arunca umbre de pe elemente la nivel de bloc (cum ar fi divs). .shadow (-moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; "
#foo: bifat :: înainte, intrare (poziție: absolut; clip: rect (0,0,0,0); clip: rect (0 0 0 0);) #foo: bifat, intrare + etichetă :: înainte ( conţinut:"
Gradientele repetate au un truc pe care îl putem face deja cu utilizarea creativă a opririlor de culoare pe notațiile gradient liniar () și gradient radial () și „
Selectoarele de aici sunt specifice marcajului Wufoo, dar conceptele de la locul de muncă pot funcționa pentru orice formă. Ideea generală este că creați radioul implicit "
Umbra regulată a textului: p (text-umbră: 1px 1px 1px # 000;) Umbre multiple: p (text-umbră: 1px 1px 1px # 000, 3px 3px 5px albastru;) Primele două valori "
Aceasta este o colecție de șabloane de pornire pentru machete și modele folosind CSS Grid. Ideea de aici este să arate ce este capabilă să facă tehnica și „
Firefox 2 html> / ** / body .selector, x: -moz-any-link (color: lime;) Firefox 3 html> / ** / body .selector, x: -moz-any-link, x: implicit (culoare: lime;) Orice "
Un motiv important pentru a utiliza preîncărcarea imaginii este dacă doriți să utilizați o imagine pentru imaginea de fundal a unui element de pe mouse-ul sau evenimentul hover. Dacă tu doar "
Găsiți greșeli în HTML și evidențiați merda din ele. / * Elemente goale * / div: gol, interval: gol, li: gol, p: gol, td: gol, th: gol (padding: "
Sans-Serif Arial, sans-serif; Helvetica, sans-serif; Gill Sans, sans-serif; Lucida, sans-serif; Helvetica Narrow, sans-serif; sans-serif; Serif Times, "
Tbody tr: nth-child (impar) (background-color: #ccc;) "
În zilele noastre, nu trebuie să vă faceți griji că opacitatea este un lucru dificil în browser. Pur și simplu folosiți proprietatea opacității, astfel: .thing („