Când și de ce să utilizați eticheta de stil în afara foilor de stil CSS
Publicat: 2017-10-29Etichetele de stil sunt o parte destul de interesantă a dezvoltării web. Adică sunt fundamentale și de bază pentru modul în care funcționează actualul web, dar de cele mai multe ori, stilul real al site-ului dvs. provine din importarea și utilizarea numeroaselor foi de stil CSS pentru teme, pluginuri și aspectul cotidian pe care îl văd vizitatorii dvs.
Dar, în vremurile vechi de construire a site-ului web, ați putea folosi etichete de stil chiar în corpul site-ului web și ar fi în regulă. Majoritatea, dacă nu toate, din CSS pentru pagină ar merge pe pagina însăși, și atunci ... funcționa bine. În zilele noastre, există probleme, desigur - cum ar fi viteza de încărcare a paginilor și ordinele de execuție, iar cu cât tehnologiile web mai mature cresc, cu atât mai puțin doriți să utilizați etichete de stil, toate singure.
Există, totuși, momente în care ați dori să le folosiți. Uneori, îți îmbunătățesc fluxul de lucru, în timp ce alte instanțe chiar îți îmbunătățesc viața utilizatorilor - optimizarea mobilă, de exemplu, sau atragerea atenției asupra unui anumit element printr-un stil minunat.
Utilizare tipică a foii de stil
În aproape fiecare site web de astăzi, veți vedea stilul implementat astfel:
<link rel='stylesheet' id='divi-style-css' href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />
Dacă sunteți un membru Elegant Themes care folosește Divi (ar trebui să fiți!), Acesta va apela la foaia completă de stil din care am luat acest fragment:
/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
Acum, teoretic, ați putea pune asta într-o etichetă de stil în antetul oricărei pagini pe care o scrieți. Cu siguranță ar funcționa, dar asta este o codare împuțită și deloc pentru ce sunt potrivite etichetele de stil.
Etichete stil, utilizare modernă
Desigur, site-ul dvs. web are foi de stil CSS ca acestea. O să le folosești. Aveți custom.css și stylesheet.css și probabil mult mai mult decât atât. V-ați dat seama exact cum ar trebui să arate site-ul dvs. și sunteți mulțumit de el.
Deci, de ce aveți nevoie de etichetele de stil?
Deoarece foile de stil sunt soluții de ansamblu. O etichetă de stil este o soluție la scară mică.
Foile se ocupă de aspectul mai mare al site-ului dvs., nu de elementele individuale ciudate și de aspectele speciale. Uneori, este mai mult de lucru decât merită să arunci o bucată unică de cod într-o foaie de stil.
Atunci, etichetele de stil devin cu adevărat utile. De asemenea, uneori trebuie să modificați un singur element sau să alegeți un anumit stil pentru anumite dispozitive sau cazuri de utilizare. Atunci, etichetele de stil strălucesc cu adevărat în dezvoltarea web modernă.
O singură instanță a unui element
Probabil că principalul motiv pentru care ați folosi etichete de stil pe site-ul dvs. este dacă aveți de-a face cu un singur element unic pe pagina dvs. Poate fi o mulțime de probleme (pentru foarte puțin, dacă este cazul, reveniți) să includeți stilul într-un fișier CSS extern atașat la ID-ul acelui element. Totuși, ceea ce puteți face este să aruncați o etichetă de stil pe element și să continuați cu ziua.
De exemplu, dacă aveți un widget bara laterală care are nevoie de un font special, ai putea pune - l într - un div, da div un id CSS, și apoi capul în foaia de calcul pentru a include ceva la fel de simplu ca {font-family: „Exo“ , Arial, sans-serif;} , dar asta este o mulțime de probleme.
Cea mai bună opțiune ar fi să faci pur și simplu acest lucru?
<div style="font-family: "Exo", Arial, sans-serif;" />
Bada-bing, bada-boom, ați terminat și acel widget se remarcă acum, deoarece este singurul care primește acel stil special. (Și da, îmi dau seama că utilizarea unui font nou și diferit se confruntă probabil cu restul designului dvs. Dar este un exemplu.)
O pagină simplă
Uneori, aveți o pagină foarte simplă, unică pe site-ul dvs. Poate fi o pagină de presă sau o pagină de stoarcere. Probabil că aveți nevoie doar de câteva modificări pentru stilul dvs. aici, dar trebuie să le aplicați doar pe această pagină.
Deci, puteți utiliza eticheta importantă deseori calomniată, împreună cu stilul, pentru a face lucrurile mai repede și mai ușor decât crearea unei noi foi de stil și conectarea acesteia. Această metodă este folosită cel mai bine dacă nu aveți o mulțime de CSS noi, deoarece încărcarea de oodle de CSS de acest fel poate încetini încărcarea paginii. Dar știai deja asta.
Ceva simplu ca acesta, totuși, nu ar fi o presiune prea mare asupra conexiunilor utilizatorilor dvs. și nu merită sincer să adăugați într-o foaie de stil. (Și pentru a fi corect, acest CSS este hidos și nu merită adăugat pe niciun site. Tee hee!)
<style>
h2, h3, h4 {
font-family: "Exo", Arial, sans-serif!important;
text-align: right;
font-size: 2rem;
color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important;
font-size: 1.2rem;
color: red;
background: #000;}
</style>
Totuși, punctul aici este că HTML 5 este grozav cu adăugarea de etichete de stil în capul site-ului dvs. web, astfel încât să modificați foile de stil existente. Deși etichetele ! Importante nu sunt cu siguranță necesare în acest caz (rareori sunt), mă simt de parcă aceasta este, poate, singura dată când le folosesc, deoarece nu vor provoca o mulțime de etichete spaghete ca dvs. (sau alți dezvoltatori) încep să lucreze pe site deoarece se aplică numai acestei singure pagini.
Dimensiuni multiple ale ferestrelor
Interogările media sunt prietenul tău. Dacă nu sunteți familiarizați cu ei, vă recomand să le citiți. Practic, puteți declara ce parametri trebuie respectați pentru ca anumite CSS să aibă efect. Cu toate acestea, în principal, veți utiliza acest lucru pentru a vă asigura că site-urile dvs. funcționează pe diferite dispozitive. Când aveți nevoie de o reacție la nivel de site, aceasta va merge într-o foaie de stil.
Dar, din nou, dacă aveți o singură pagină sau element care trebuie să apară diferit sau deloc pe mobil (sau chiar rezoluții desktop mai mici sau mai mari), puteți face acest lucru cu etichete de stil în antet.
<style>
@media (max-width: 767px) {
.white_text {
color: #ffffff;
}
.blue_text {
color: #cbe1f3;
}
.white_background {
background-color: #ffffff;
}
.blue_background {
background-color: #003663;
}
#email_form_a {
display:none;
}
</style>
Stylin 'și Profilin'
CSS este o parte atât de importantă a dezvoltării web acum că este ceva ce trebuie să știe și să folosească aproape toată lumea. Și chiar mai mult decât a cunoaște CSS este să știi când să folosești instrumentele nuanțate la care ai acces.
Așadar, nu vă simțiți de parcă vă limitați la foi de stil. Sigur, sunt fantastice și utile și fac din întreaga rețea un loc mai plăcut, dar poți totuși să folosești și etichete de stil simple și să le oferi site-urilor un pic mai mare pop.
Deci, cum folosiți etichetele de stil în afara foilor de stil .css? Ce informații puteți oferi oamenilor?
Imagine în miniatură a articolului de Creative Thoughts / shutterstock.com