Användarhandbok Avbryt

Förstå Cascading Style Sheets (CSS)

  1. Användarhandbok för Dreamweaver
  2. Introduktion
    1. Grunderna i responsiv webbdesign
    2. Nyheter i Dreamweaver
    3. Webbutveckling med Dreamweaver – översikt
    4. Dreamweaver/vanliga frågor
    5. Kortkommandon
    6. Systemkrav för Dreamweaver
    7. Sammanfattning av funktioner
  3. Dreamweaver och Creative Cloud
    1. Synka inställningarna för Dreamweaver med Creative Cloud
    2. Creative Cloud Libraries i Dreamweaver
    3. Använda Photoshop-filer i Dreamweaver
    4. Arbeta med Adobe Animate och Dreamweaver
    5. Extrahera webboptimerade SVG-filer från bibliotek
  4. Arbetsytor och vyer i Dreamweaver
    1. Arbetsytan i Dreamweaver
    2. Optimera Dreamweaver-arbetsytan för visuell utveckling
    3. Söka efter filer baserat på filnamn eller innehåll | Mac OS
  5. Skapa webbplatser
    1. Om Dreamweaver-platser
    2. Skapa en lokal version av din webbplats
    3. Ansluta till en publiceringsserver
    4. Ställa i ordning en testserver
    5. Importera och exportera inställningarna för en Dreamweaver-plats
    6. För över befintliga webbplatser från en fjärrserver till din lokala platsrot
    7. Tillgänglighetsfunktioner i Dreamweaver
    8. Avancerade inställningar
    9. Ange platsinställningar för överföring av filer
    10. Ange proxyserverinställningar i Dreamweaver
    11. Synka inställningarna för Dreamweaver med Creative Cloud
    12. Använda Git i Dreamweaver
  6. Hantera filer
    1. Skapa och öppna filer
    2. Hantera filer och mappar
    3. Hämta och skicka filer till och från servern
    4. Checka in och checka ut filer
    5. Synka filer
    6. Jämför skillnader mellan filer
    7. Dölja filer och mappar på din Dreamweaver-plats
    8. Aktivera Design Notes för Dreamweaver-platser
    9. Sätta stopp för Gatekeeper
  7. Layout och design
    1. Använda visuella hjälpmedel för layout
    2. Layouta sidor med CSS
    3. Designa responsiva webbplatser med Bootstrap
    4. Skapa och använda mediefrågor i Dreamweaver
    5. Visa innehåll med tabeller
    6. Färger
    7. Responsiv design med flytande stödrasterlayouter
    8. Extract i Dreamweaver
  8. CSS
    1. Förstå Cascading Style Sheets (CSS)
    2. Utforma sidor med hjälp av CSS Designer
    3. Använda CSS-förbehandlare i Dreamweaver
    4. Ange CSS-formatinställningar i Dreamweaver
    5. Flytta CSS-regler i Dreamweaver
    6. Konvertera infogad CSS till en CSS-regel i Dreamweaver
    7. Arbeta med div-taggar
    8. Använda övertoningar på bakgrunden
    9. Skapa och redigera CSS3-övergångseffekter i Dreamweaver
    10. Formatera kod
  9. Sidinnehåll och resurser
    1. Ange sidegenskaper
    2. Ange CSS-rubrikegenskaper och CSS-länkegenskaper
    3. Arbeta med text
    4. Sök och ersätt text, taggar och attribut
    5. DOM-panel
    6. Redigera i live-vyn
    7. Koda dokument i Dreamweaver
    8. Markera och visa element i dokumentfönstret
    9. Ange textegenskaper i egenskapskontrollen
    10. Stavningskontrollera en webbsida
    11. Använda vågräta linjer i Dreamweaver
    12. Lägga till och ändra teckensnittskombinationer i Dreamweaver
    13. Arbeta med resurser
    14. Infoga och uppdatera datum i Dreamweaver
    15. Skapa och hantera favoritresurser i Dreamweaver
    16. Infoga och redigera bilder i Dreamweaver
    17. Lägga till medieobjekt
    18. Lägga till videor i Dreamweaver
    19. Infoga HTML5-video
    20. Infoga SWF-filer
    21. Lägga till ljudeffekter
    22. Infoga HTML5-ljud i Dreamweaver
    23. Arbeta med biblioteksobjekt
    24. Använda arabisk och hebreisk text i Dreamweaver
  10. Länkar och navigering
    1. Om länkar och navigering
    2. Länkning
    3. Bildmappningar
    4. Felsöka länkar
  11. jQuery-widgetar och effekter
    1. Använda jQuery-gränssnitt och mobilwidgetar i Dreamweaver
    2. Använd jQuery-effekter i Dreamweaver
  12. Koda webbplatser
    1. Om kodning i Dreamweaver
    2. Kodningsmiljön i Dreamweaver
    3. Ange kodningspreferenser
    4. Anpassa kodfärger
    5. Skriva och redigera kod
    6. Kodtips och kodkomplettering
    7. Komprimera och utöka kod
    8. Återanvända kod med fragment
    9. Granska kod
    10. Optimera kod
    11. Redigera kod i designvyn
    12. Arbeta med head-innehåll för sidor
    13. Infoga SSI i Dreamweaver
    14. Använda taggbibliotek i Dreamweaver
    15. Importera egna taggar i Dreamweaver
    16. Använda JavaScript-beteenden (allmänna instruktioner)
    17. Använda inbyggda JavaScript-beteenden
    18. Om XML och XSLT
    19. Utföra XSL-omvandlingar på servern i Dreamweaver
    20. Utföra XSL-omvandlingar på klienten i Dreamweaver
    21. Lägga till teckenentiteter för XSLT i Dreamweaver
    22. Formatera kod
  13. Arbetsflöden mellan produkter
    1. Installera och använda tillägg i Dreamweaver
    2. Uppdateringar i appen i Dreamweaver
    3. Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
    4. Använda Fireworks och Dreamweaver
    5. Redigera innehåll på Dreamweaver-webbplatser med Contribute
    6. Integrering mellan Dreamweaver och Business Catalyst
    7. Skapa anpassade e-postkampanjer
  14. Mallar
    1. Om Dreamweaver-mallar
    2. Känna igen mallar och mallbaserade dokument
    3. Skapa en Dreamweaver-mall
    4. Skapa ändringsbara regioner i mallar
    5. Skapa upprepande regioner och tabeller i Dreamweaver
    6. Använd valfria regioner i mallar
    7. Definiera redigerbara taggattribut i Dreamweaver
    8. Skapa kapslade mallar i Dreamweaver
    9. Redigera, uppdatera och ta bort mallar
    10. Exportera och importera XML-innehåll i Dreamweaver
    11. Lägga till eller ta bort en mall från ett befintligt dokument
    12. Redigera innehåll i Dreamweaver-mallar
    13. Syntaxregler för malltaggar i Dreamweaver
    14. Ange markeringsinställningar för mallområden
    15. Fördelar med att använda mallar i Dreamweaver
  15. Mobiler och flera skärmar
    1. Skapa mediefrågor
    2. Ändra sidorientering för mobila enheter
    3. Skapa webbappar för mobila enheter med Dreamweaver
  16. Dynamiska webbplatser, sidor och webbformulär
    1. Förstå webbprogram
    2. Konfigurera datorn för programutveckling
    3. Felsöka databasanslutningar
    4. Ta bort anslutningsskript i Dreamweaver
    5. Utforma dynamiska sidor
    6. Översikt över källor med dynamiskt innehåll
    7. Definiera källor med dynamiskt innehåll
    8. Lägga till dynamiskt innehåll på sidor
    9. Ändra dynamiskt innehåll i Dreamweaver
    10. Visa databasposter
    11. Ange och felsöka livedata i Dreamweaver
    12. Lägga till anpassade serverbeteenden i Dreamweaver
    13. Bygga formulär med Dreamweaver
    14. Använda formulär för att samla in information från användarna
    15. Skapa och aktivera ColdFusion-formulär i Dreamweaver
    16. Skapa webbformulär
    17. Förbättrat HTML5-stöd för formulärelement
    18. Använda Dreamweaver för att utveckla ett formulär
  17. Bygga program visuellt
    1. Bygga huvud- och detaljsidor i Dreamweaver
    2. Bygga sök- och resultatsidor
    3. Bygga en postinmatningssida
    4. Bygga en postuppdateringssida i Dreamweaver
    5. Bygga postborttagningssidor i Dreamweaver
    6. Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
    7. Bygga en registreringssida
    8. Bygga en inloggningssida
    9. Bygga en sida som bara behöriga användare har åtkomst till
    10. Skydda mappar i ColdFusion med Dreamweaver
    11. Använda ColdFusion-komponenter i Dreamweaver
  18. Testa, förhandsgranska och publicera webbplatser
    1. Förhandsgranska sidor
    2. Förhandsgranska Dreamweaver-webbsidor på flera enheter
    3. Testa Dreamweaver-platsen

 

Det här ämnet förklarar grundläggande CSS-begrepp som CSS-regler, väljare, arv och mycket mer. Lär dig även hur du kan koppla CSS till dina webbsidor i Dreamweaver.

Om CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) är en samling formateringsregler som styr utseendet för innehåll på en webbsida. När CSS-format används för att formatera en sida separeras innehåll och presentation. Innehållet på sidan – HTML-koden – finns i HTML-filen och CSS-reglerna som anger hur koden ska presenteras finns i en annan fil (en extern formatmall) eller i en annan del av HTML-dokumentet (vanligen i huvudet). Genom att innehåll separeras från presentation blir det mycket lättare att bibehålla utseendet på platsen centralt, eftersom du inte behöver uppdatera varenda egenskap på varenda sida varje gång du vill göra en ändring. Att separera innehåll från presentation innebär också enklare och renare HTML-kod, vilket ger snabbare inläsning i webbläsaren och förenklar navigeringen för personer som behöver använda hjälpmedel (till exempel skärmläsare).

CSS ger dig större flexibilitet och mer kontroll över exakt hur sidan ser ut. Med CSS kan du styra många olika textegenskaper, som specifika typsnitt och typstorlekar, fetstil, kursiv stil, understrykning och textskuggor, textfärg och bakgrundsfärg, länkfärg och länkunderstrykning samt mycket annat. Om du använder CSS för att styra typsnitten kan du också försäkra dig om att sidans layout och utseende blir konsekvent i olika webbläsare.

Utöver textformatering kan du också använda CSS för att styra format och placering av blocknivåelement på en webbsida. Ett blocknivåelement är en fristående innehållsdel som vanligen avgränsas med en ny rad i HTML-koden och som är visuellt formaterad som ett block. Exempelvis skapas blocknivåelement på en webbsida av h1-taggar, p-taggar och div-taggar. Du kan ange marginaler och kantlinjer för blocknivåelement, placera dem på en specifik plats, lägga till bakgrundsfärg i dem, figuranpassa text kring dem och så vidare. I princip kan man säga att utformningen av sidor med CSS sker genom hantering av blocknivåelement.

Om CSS-regler

En CSS-formateringsregel består av två delar – väljaren och deklarationen (eller, som i de flesta fall, ett block med deklarationer). Väljaren är ett villkor (till exempel p, h1, ett klassnamn eller ett id) som anger det formaterade elementet och deklarationsblocket anger vilka formategenskaperna är. I följande exempel är h1 väljare och allt som står inom klammerparenteserna ({}) är deklarationsblocket:

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

En enskild deklaration består av två delar: egenskapen (till exempel font-family) och värdet (till exempel Helvetica). I föregående CSS-regel har ett visst format skapats för h1-taggar: texten för alla h1-taggar som är kopplade till det här formatet använder typstorleken 16 pixel, typsnittet Helvetica och fetstil.

Formatet (som kommer från en regel eller en samling regler) finns på en plats som är separat från den text det formaterar – vanligen i en extern formatmall eller i ett HTML-dokumenthuvud. Följaktligen kan en regel för h1-taggar användas i flera taggar samtidigt (och om en extern formatmall används kan regeln användas i flera taggar samtidigt på flera olika sidor). Med CSS blir det på så sätt väldigt lätt att göra uppdateringar. När du uppdaterar en CSS-regel på en plats, blir formateringen för alla element som använder det definierade formatet automatiskt uppdaterade till det nya formatet.

Du kan definiera följande typer av format i Dreamweaver:

  • Klassformat gör att du kan använda formategenskaper i alla element på sidan.

  • HTML-taggformat definierar om formateringen för en viss tagg, till exempel h1. När du skapar eller ändrar ett CSS-format för h1-taggen uppdateras all text som är formaterad med h1-taggen omedelbart.

  • Avancerade format definierar om formateringen för en viss kombination av element eller för andra väljarformer som tillåts av CSS (exempelvis används väljaren td h2 varje gång en h2-rubrik finns inuti en tabellcell). Avancerade format kan också definiera om formateringen för taggar som innehåller ett specifikt id-attribut (exempelvis används de format som definieras med #mittFormat i alla taggar som innehåller attribut-/värdeparet id="mittFormat").

CSS-regler kan finnas på följande platser:

Externa CSS-formatmallar

Samlingar med CSS-regler som sparats i en separat, extern CSS-fil (.css) (inte en HTML-fil). Den här filen är länkad till en eller flera sidor på en webbplats med hjälp av en länk eller en @import-regel i ett dokumenthuvud.

Interna (eller inbäddade) CSS-formatmallar

Samlingar med CSS-regler som finns i en style-tagg i ett HTML-dokumenthuvud.

Infogade format

Definieras inom specifika instanser av taggar i ett HTML-dokument. (Du rekommenderas inte att använda infogade format.)

I Dreamweaver kan format som har definierats i befintliga dokument identifieras så länge de stämmer överens med riktlinjerna för CSS-format. I Dreamweaver återges också de flesta format som används direkt i designvyn. (Om du däremot förhandsvisar dokumentet i ett webbläsarfönster får du den mest korrekta återgivningen av sidan så som den kommer att visas.) En del CSS-format återges på olika sätt i Microsoft Internet Explorer, Netscape, Opera, Apple Safari samt andra webbläsare och en del stöds ännu inte i någon webbläsare.

Om formatmallar

Termen överlappande hänvisar till sättet på vilket en webbläsare visar format för specifika element på en webbsida. Tre olika källor är ansvariga för formaten som du ser på en webbsida: formatmallen som skapades av författaren till sidan, användarens anpassade formatval (om sådana finns) och standardformaten för själva webbläsaren. I föregående avsnitt beskrivs hur du skapar format för en webbsida som författare till både webbsidan och formatmallen som kopplats till den sidan. Men webbläsare har också sina egna standardformatmallar som styr återgivningen av webbsidor och utöver det kan användare anpassa sina webbläsare genom att göra val som justerar visningen av webbsidor. Det slutliga utseendet på webbsidan är resultatet av reglerna för alla tre källorna tillsammans (eller ”överlappande” för att återge webbsidan på bästa sätt.

En vanlig tagg, stycketaggen eller <p>-taggen, visar konceptet. Som standard innehåller webbläsare formatmallar som anger typsnittet och typsnittsstorleken för stycketexten (d.v.s. texten som hamnar mellan <p>-taggarna i HTML-koden). I Internet Explorer visas t.ex. all brödtext, inklusive stycketext, i Times New Roman, med mellantypsnitt som standard.

Som författare till en webbsida kan du dock skapa en formatmall som åsidosätter webbläsarens standardformat för typsnittet och typsnittsstorleken i stycken. Du kan t.ex. skapa följande regel i formatmallen:

p { 
font-family: Arial; 
font-size: small; 
}

När en användare läser in sidan åsidosätter typsnittet och teckenstorleken för stycket som du angivit standardtextinställningarna för stycken i webbläsaren.

Användare kan göra val för att anpassa visningen i webbläsaren på bästa sätt för dem. I Internet Explorer kan t.ex. användare välja Visa > Textstorlek > Största för att utöka sidans typsnitt till en mer läsbar storlek om de tror att typsnittet är för litet. Slutligen (åtminstone i detta fall) åsidosätter användarens val både webbläsarens standardformat för typsnitt i stycken och styckeformaten som skapats av författaren till webbsidan.

Arv är en annan viktig del av överlappandet. Egenskaperna för de flesta element på en webbsida ärvs. T.ex. ärver stycketaggar vissa egenskaper från body-taggarna, span-taggar ärver vissa egenskaper från stycketaggar, osv. Du kan därmed skapa följande regel i formatmallen:

body { 
font-family: Arial; 
font-style: italic; 
}

All stycketext på webbsidan (samt texten som ärver egenskaper från stycketaggen) kommer att bli Arial och kursiv eftersom stycketaggen ärver dessa egenskaper från body-taggen. Du kan dock specificera reglerna ännu mer och skapa format som åsidosätter standardformeln för arv. Om du t.ex. skapar följande regler i formatmallen:

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

All brödtext kommer att vara i Arial och kursiv förutom stycket (och dess ärvda) text, som kommer att visas i Courier med normal stil (ej kursiv). Tekniskt sett ärver stycketaggen först egenskaperna som är angivna för body-taggen, men ignorerar sedan de egenskaperna eftersom den har egna angivna egenskaper. Med andra ord orsakar det direkta tillägget av en egenskap till en tagg alltid att standardformeln för arv åsidosätts, medan sidelementen i allmänhet ärver egenskaper från ovanstående.

Kombinationen av alla faktorer som nämns ovan, samt andra faktorer som CSS-specificitet (ett system som ger en annan betydelse till vissa typer av CSS-regler) och ordningen på CSS-regler, skapar slutligen ett komplext överlappande där objekt med högre prioritet åsidosätter egenskaper med lägre prioritet. Mer information om reglerna som styr överlappandet, arvet och specificiteten finns på www.w3.org/TR/CSS2/cascade.html.

Om textformatering och CSS

Text formateras med CSS (Cascading Style Sheets) i Dreamweaver, om inget annat anges. De format du tillämpar på text med hjälp av egenskapskontrollen eller menykommandona skapar CSS-regler som bäddas in i det aktuella dokumenthuvudet.

Du kan också använda CSS Designer när du vill skapa och redigera CSS-regler och -egenskaper. CSS Designer är en mycket kraftfullare redigerare än egenskapskontrollen och visar alla CSS-regler som har definierats för det aktuella dokumentet, oavsett om reglerna är inbäddade i dokumenthuvudet eller finns i en extern formatmall. Adobe rekommenderar att du använder CSS Designer (i stället för egenskapskontrollen) som primärt verktyg för att skapa och redigera CSS-formatmallen. Om du gör detta blir koden renare och lättare att underhålla.

Mer information om CSS Designer finns i Utforma sidor med hjälp av CSS Designer.

Förutom de format och formatmallar du skapar, kan du använda formatmallar som medföljer Dreamweaver när du vill använda format i dokumenten.

En självstudiekurs om hur du formaterar text med CSS finns på www.adobe.com/go/vid0153_se.

Om CSS-egenskaper i kort notation

Tack vare CSS-specifikationen går det att skapa format med hjälp av en förkortad syntax som kallas CSS i kort notation. CSS i kort notation innebär att du kan ange värden för flera egenskaper med en enda deklaration. Till exempel kan du med egenskapen font ange egenskaperna font-style, font-variant, font-weight, font-size, line-height och font-family på en enda rad.

Viktigt att notera när CSS i kort notation används är att de värden som utelämnas från en CSS-egenskap i kort notation tilldelas standardvärdet. Detta kan innebära att sidor visas felaktigt när två eller flera CSS-regler tilldelas samma tagg.

Till exempel, i h1-regeln som visas nedan används vanlig CSS-syntax. Notera att egenskaperna font-variant, font-stretch, font-size-adjust och font-style har tilldelats standardvärden.

h1 { 
font-weight: bold; 
font-size: 16pt; 
line-height: 18pt; 
font-family: Arial; 
font-variant: normal; 
font-style: normal; 
font-stretch: normal; 
font-size-adjust: none 
}

Omskriven som en enskild egenskap med kort notation kan samma regel se ut enligt följande:

h1 { font: bold 16pt/18pt Arial }

När kort notation används tilldelas utelämnade värden automatiskt standardvärden. Alltså utelämnas taggarna font-variant, font-style, font-stretch och font-size-adjust i föregående exempel på kort notation.

Om du har definierat format på mer än en plats (till exempel både inbäddade i en HTML-sida och importerade från en extern formatmall) i både den korta och långa formen av CSS-syntaxen, ska du tänka på att utelämnade egenskaper i en kort notationsregel kan åsidosätta (eller överlappa) egenskaper som har angetts explicit i en annan regel.

Av den här anledningen används den långa formen av CSS-syntaxen som standard i Dreamweaver. Detta förhindrar eventuella problem som orsakas av att en kort notationsregel åsidosätter en vanlig regel. Om du öppnar en webbsida i Dreamweaver som har kodats med CSS i kort notation, ska du tänka på att alla nya CSS-regler skapas med den långa formen av CSS-syntaxen i Dreamweaver. Du kan ange hur CSS-regler ska skapas och redigeras i Dreamweaver genom att ändra inställningarna för CSS-redigering i kategorin CSS-format i dialogrutan Inställningar (Redigera > Inställningar i Windows eller Dreamweaver > Inställningar på en Macintosh-dator).

Dreamweaver och CSS

Du kan arbeta med CSS i Dreamweaver på flera olika sätt:

  • Du kan använda CSS Designer för att skapa din CSS med minimalt med kodning. Mer information finns i Utforma sidor med hjälp av CSS Designer
  • Du kan också koda din CSS manuellt. Mer information om kodningsfunktioner i Dreamweaver finns i Kodningsmiljö i Dreamweaver.
  • Om du föredrar att arbeta med Sass-, Scss- eller Less-filer kan du koda filerna med önskad syntax och använda i Dreamweaver. Mer information finns i CSS-preprocessorer.
Adobes logotyp

Logga in på ditt konto