En snabb introduktion till CSS<\/h2>\n
Om du redan \u00e4r bekant med CSS vill jag inte st\u00f6ra dig med en l\u00e5ng \u00f6versikt. Om du aldrig har arbetat med CSS eller om du inte ens \u00e4r s\u00e4ker p\u00e5 vad CSS \u00e4r, v\u00e4nligen kolla in v\u00e5r artikel om \u00e4mnet f\u00f6rst:<\/p>\n
Vad \u00e4r CSS och hur p\u00e5verkar det WordPress?<\/a><\/p>\n Det kommer att t\u00e4cka grunderna om varf\u00f6r CSS anv\u00e4nds f\u00f6r att utforma webbplatser och hur det till\u00e4mpas.<\/p>\n Det finns ett stort misstag som WordPress-anv\u00e4ndare som \u00e4r nya inom CSS g\u00f6r:<\/p>\n De anpassar temafilerna.<\/p>\n Till exempel kan n\u00e5gon som anv\u00e4nder Challenger-temat placera sina CSS-redigeringar direkt i filen style.css som n\u00e5s fr\u00e5n menyn Utseende > Redigerare.<\/p>\n WordPress inneh\u00e5ller nu ett meddelande som varnar dig att inte redigera h\u00e4r<\/p>\n Problemet med att redigera filen style.css \u00e4r att du f\u00f6rlorar alla dina \u00e4ndringar om du uppdaterar till en ny version av Challenger. Lita p\u00e5 mig, att f\u00f6rlora kod\u00e4ndringar som tog l\u00e5ng tid att g\u00f6ra kan vara oerh\u00f6rt nedsl\u00e5ende.<\/p>\n Det finns ett b\u00e4ttre s\u00e4tt att l\u00e4gga till CSS p\u00e5 din webbplats d\u00e4r den aldrig kommer att skrivas \u00f6ver. Dessutom l\u00e4ggs den h\u00e4r koden till p\u00e5 din webbplats p\u00e5 ett s\u00e4tt som g\u00f6r det l\u00e4ttare att \u00e5sidos\u00e4tta temats stilar.<\/p>\n F\u00f6r att l\u00e4gga till CSS p\u00e5 din webbplats vill du \u00f6ppna Customizer (Utseende > Anpassa) och klicka p\u00e5 avsnittet Ytterligare CSS.<\/p>\n Det \u00e4r vanligtvis det sista avsnittet i Customizer<\/p>\n Om du \u00f6ppnar det h\u00e4r avsnittet ser du ett textomr\u00e5de d\u00e4r du kan l\u00e4gga till din kod. WordPress kommer att inkludera n\u00e5gra tips h\u00e4r, men du kan klicka p\u00e5 l\u00e4nken St\u00e4ng f\u00f6r att ta bort den och visade bara kodinmatningen.<\/p>\n Du kan ange och spara vilken CSS du vill l\u00e4gga till h\u00e4r.<\/p>\n Koden du l\u00e4gger till h\u00e4r kommer att uppdatera webbplatsens utseende direkt i f\u00f6rhandsgranskningen. N\u00e4r du \u00e4r n\u00f6jd med dina \u00e4ndringar kan du spara dina \u00e4ndringar.<\/p>\n Den extra bonusen med att placera CSS h\u00e4r \u00e4r att du f\u00e5r se uppdateringarna ske live, s\u00e5 att du snabbt kan testa olika koder f\u00f6r att ta reda p\u00e5 vad du gillar.<\/p>\n Nu n\u00e4r du har f\u00e5tt en titt p\u00e5 hur du l\u00e4gger till CSS p\u00e5 ett s\u00e4kert s\u00e4tt p\u00e5 din webbplats, l\u00e5t oss ta upp grunderna f\u00f6r att skriva CSS!<\/p>\n Proffstips:<\/strong> oroa dig inte f\u00f6r att skada din webbplats. Om du g\u00f6r en d\u00e5lig redigering kan du helt enkelt ta bort den CSS du lagt till. Det \u00e4r om\u00f6jligt att helt bryta din webbplats eller f\u00f6rlora \u00e5tkomst till admin-menyn genom att l\u00e4gga till CSS p\u00e5 detta s\u00e4tt.<\/p>\n Om du n\u00e5gonsin har skrivit CSS vet du att det f\u00f6rsta steget \u00e4r att v\u00e4lja en v\u00e4ljare f\u00f6r att tala om f\u00f6r webbl\u00e4saren vilket element p\u00e5 webbplatsen du riktar in dig p\u00e5. I sk\u00e4rmdumpen ovan riktar jag mig mot alla element som har klassen "site-title".<\/p>\n Om du inte \u00e4r s\u00e4ker p\u00e5 hur du anv\u00e4nder CSS-v\u00e4ljare, kolla in den h\u00e4r fantastiska introduktionen till CSS-v\u00e4ljare fr\u00e5n SitePoint<\/a>.<\/p>\n Nu \u00e4r det h\u00e4r…<\/p>\n \u00c4ven m\u00e5nga erfarna WordPress-anv\u00e4ndare f\u00f6rs\u00f6ker hitta v\u00e4ljare helt fel. De kontrollerar filen style.css f\u00f6r att hitta en v\u00e4ljare som redan anv\u00e4nds av temat. Det h\u00e4r \u00e4r tr\u00e5kigt och du kanske inte ens hittar en l\u00e4mplig v\u00e4ljare f\u00f6r att g\u00f6ra din anpassning.<\/p>\n L\u00e5t mig erbjuda dig en mycket mer produktiv process.<\/p>\n N\u00e4r du skriver CSS beh\u00f6ver du f\u00f6rst en v\u00e4ljare f\u00f6r att tala om f\u00f6r webbl\u00e4saren vilket element du vill redigera. \u00c4ven om du kan kontrollera stilmallen i ditt tema, \u00e4r det mycket enklare att helt enkelt anv\u00e4nda webbl\u00e4sarens webbutvecklarverktyg f\u00f6r att hitta dem.<\/p>\n H\u00e4r \u00e4r ett exempel p\u00e5 vad jag menar:<\/p>\n Detta \u00e4r en sk\u00e4rmdump av Chrome med dess utvecklarverktyg \u00f6ppnade<\/p>\n Du kan se klasserna och ID:n f\u00f6r varje element i de \u00f6ppna utvecklarverktygen. Du kan sedan anv\u00e4nda valfri kombination av tillg\u00e4ngliga klasser och ID:n f\u00f6r att skriva dina egna anpassade v\u00e4ljare.<\/p>\n Jag g\u00e5r in mycket djupare i denna process i denna handledning:<\/p>\n Hur man hittar CSS-v\u00e4ljare p\u00e5 WordPress-webbplatser<\/a><\/p>\n Du kommer att l\u00e4ra dig hur du kommer \u00e5t din webbl\u00e4sares utvecklarverktyg, hur du navigerar i HTML-koden och hur du hittar de CSS-v\u00e4ljare du beh\u00f6ver.<\/p>\n Nu n\u00e4r du har ett mycket snabbare s\u00e4tt att f\u00e5 vilken v\u00e4ljare du vill ha och du vet hur du l\u00e4gger till kod i avsnittet Ytterligare CSS i Customizer, \u00e4r det enda som \u00e5terst\u00e5r att v\u00e4lja de egenskaper du vill \u00e4ndra.<\/p>\n Om du till exempel vill rikta in dig p\u00e5 webbplatsens titel i Challenger<\/a> och g\u00f6ra teckensnittet st\u00f6rre, kan du g\u00f6ra detta med Om du inte \u00e4r s\u00e5 bekant med CSS, kommer du att hitta den h\u00e4r listan med CSS-egenskaper<\/a> s\u00e4rskilt anv\u00e4ndbar. Du kan s\u00f6ka i den listan efter vilken kvalitet du vill redigera (bakgrundsf\u00e4rg, teckenstorlek, ramar, etc.).<\/p>\n CSS-nyb\u00f6rjare eller m\u00e4stare, jag har n\u00e5got jag tror att du kommer att gilla…<\/p>\n Om du anv\u00e4nder n\u00e5got av v\u00e5ra teman kommer du att \u00e4lska de f\u00f6rskrivna CSS-snuttbiblioteken vi har byggt. Till exempel har Tracks CSS Snippets Collection<\/a> dussintals kodavsnitt som du kan kopiera och klistra in i avsnittet Ytterligare CSS f\u00f6r att anpassa din webbplats:<\/p>\n Detta g\u00f6r det v\u00e4ldigt enkelt att anpassa din webbplats med CSS \u00e4ven om du aldrig har skrivit CSS f\u00f6rut. Du kan helt enkelt kopiera och klistra in valfritt utdrag och sedan \u00e4ndra v\u00e4rdet till vad du vill.<\/p>\n F\u00f6r att hitta CSS-kodavsnitt f\u00f6r ditt tema, bes\u00f6k supportcenter<\/a> och v\u00e4lj det tema du anv\u00e4nder. Klicka sedan p\u00e5 knappen Visa CSS Snippets l\u00e4ngst ned i sidof\u00e4ltet:<\/p>\nHur man l\u00e4gger till CSS till din WordPress-webbplats<\/h2>\n
![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\")
<\/a><\/p>\nEtt b\u00e4ttre s\u00e4tt<\/h3>\n
![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\")
<\/a><\/p>\n![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\")
<\/a><\/p>\n![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\")
<\/a><\/p>\nHur man hittar CSS-v\u00e4ljare<\/h2>\n
Hur WP-proffs hittar CSS-v\u00e4ljare<\/h3>\n
![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\")
<\/a><\/p>\nCSS-egenskaper och v\u00e4rden<\/h2>\n
font-size<\/code>egenskapen. Det CSS-uttrycket kan se ut s\u00e5 h\u00e4r:<\/p>\n.site-title {\n font-size: 32px;\n}<\/code><\/pre>\nGRATIS f\u00f6rskriven CSS f\u00f6r v\u00e5ra anv\u00e4ndare<\/h2>\n
![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\")
<\/a><\/p>\n
![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\")
<\/a><\/p>\n