Panelen CSS-format

Med panelen CSS-format kan du spåra de CSS-regler och -egenskaper som påverkar ett markerat sidelement (Nuvarande läge) eller alla regler och egenskaper som är tillgängliga för dokumentet (Universalläge). Med hjälp av en knapp längst upp i panelen kan du växla mellan de två lägena. I panelen CSS-format kan du också ändra CSS-egenskaper i både Universalläge och Nuvarande läge.

I Nuvarande läge visas tre rutor i panelen CSS-format: rutan Sammanfattning för markeringen som visar CSS-egenskaperna för den aktuella markeringen i dokumentet, rutan Regler som visar platsen för markerade egenskaper (eller en uppsättning regler för den markerade taggen, beroende på vad du väljer) samt rutan Egenskaper där du kan redigera CSS-egenskaper för den regel som används i markeringen.

Du kan ändra storlek på rutorna genom att dra kanterna mellan rutorna och ändra storleken på kolumner genom att dra avdelare.

I rutan Sammanfattning för markeringen visas en sammanfattning av CSS-egenskaperna med respektive värden för det objekt som är markerat i det aktiva dokumentet. I sammanfattningen visas egenskaperna för alla regler som direkt påverkar markeringen. Endast angivna egenskaper visas.

Följande regler skapar till exempel ett klassformat och ett taggformat (i det här fallet stycke):

När du markerar stycketext med klassformatet .foo i dokumentfönstret visas de relevanta egenskaperna för båda reglerna i rutan Sammanfattning för markeringen, eftersom båda reglerna används i markeringen. I det här fallet skulle följande egenskaper visas i rutan Sammanfattning för markeringen:

I rutan Sammanfattning för markeringen ordnas egenskaper stigande efter hur specifika de är. I ovanstående exempel definieras typstorleken av taggformatet och typsnittsfamiljen och färgen av klassformatet. (Typsnittsfamiljen som definieras av klassformatet åsidosätter typsnittsfamiljen som definieras av taggformatet eftersom klassväljarna är mer specifika än taggväljarna. Mer information om CSS-specificitet finns i www.w3.org/TR/CSS2/cascade.html.)

I rutan Regler visas två olika vyer – vyn Om eller vyn Regler – beroende på vad du väljer. I vyn Om (standardvyn) visas namnet på den regel som definierar den markerade CSS-egenskapen samt namnet på den fil som innehåller regeln. I vyn Regler visas en uppsättning, eller hierarki, med alla regler som direkt eller indirekt används i den aktuella markeringen. (Den tagg som tillämpas direkt på regeln visas i den högra kolumnen.) Du kan växla mellan de två vyerna genom att klicka på knapparna Visa information och Visa överlappande i det övre, högra hörnet av rutan Regler.

När du markerar en egenskap i rutan Sammanfattning för markeringen visas alla egenskaper för den definierande regeln i rutan Egenskaper. (Den definierande regeln markeras också i rutan Regler, om vyn Regler har valts.) Om du till exempel har en regel med namnet .huvudtext som definierar en typsnittsfamilj, typstorlek och färg och sedan markerar någon av de egenskaperna i rutan Sammanfattning för markeringen, visas alla egenskaper som definieras av regeln .huvudtext i rutan Egenskaper och även den markerade regeln .huvudtext i rutan Regler. (Om en regel markeras i rutan Regler visas dessutom egenskaperna för den regeln i rutan Egenskaper.) Du kan sedan använda rutan Egenskaper för att snabbt ändra CSS-formatmallen, oavsett om den är inbäddad i det aktuella dokumentet eller länkad från en extern formatmall. Som standard visas endast de egenskaper som redan har angetts i rutan Egenskaper och de ordnas i alfabetisk ordning.

Du kan välja att visa rutan Egenskaper i två andra vyer. I kategorivyn visas egenskaper grupperade i kategorier, som Typsnitt, Bakgrund, Block, Kant och så vidare, med angivna egenskaper längst upp i varje kategori, visade med blå text. I listvyn visas en alfabetisk lista över alla tillgängliga egenskaper och även här sorteras angivna egenskaper längst upp och visas med blå text. Växla mellan vyerna genom att klicka på knappen Visa kategorivy, Visa listvy eller Visa endast de angivna egenskaperna, som finns i nedre, vänstra hörnet av rutan Egenskaper.

I alla vyer visas angivna egenskaper med blå text; egenskaper som är irrelevanta för en markering visas med röd, genomstruken text. Om du håller musen över en regel som är irrelevant visas ett meddelande som förklarar varför egenskapen är irrelevant. När en egenskap är irrelevant beror det vanligen på att den har åsidosatts eller inte är en ärvd egenskap.

Alla ändringar du gör i rutan Egenskaper används omedelbart, så att du kontinuerligt kan förhandsgranska arbetet.

Panelen CSS-format i Universalläge

I Universalläge visas två rutor i panelen CSS-format: rutan Alla regler (längst upp) och rutan Egenskaper (längst ned). I rutan Alla regler visas en lista över regler som har definierats i det aktuella dokumentet samt över alla regler som har definierats i formatmallar kopplade till det aktuella dokumentet. I rutan Egenskaper kan du redigera CSS-egenskaper för valfri markerad regel i rutan Alla regler.

Du kan ändra storlek på rutan genom att dra kanten mellan rutorna och ändra storlek på kolumnerna Egenskaper genom att dra dess avdelare.

När du markerar en regel i rutan Alla regler, visas alla egenskaper som har definierats i den regeln i rutan Egenskaper. Du kan sedan använda rutan Egenskaper för att snabbt ändra CSS-formatmallen, oavsett om den är inbäddad i det aktuella dokumentet eller länkad från en extern formatmall. Som standard visas endast de egenskaper som redan har angetts i rutan Egenskaper och de ordnas i alfabetisk ordning.

Du kan välja att visa egenskaper i två andra vyer. I kategorivyn visas egenskaper grupperade i kategorier, som Typsnitt, Bakgrund, Block, Kant och så vidare, med angivna egenskaper längst upp i varje kategori. I listvyn visas en alfabetisk lista över alla tillgängliga egenskaper och även här sorteras angivna egenskaper längst upp. Växla mellan vyerna genom att klicka på knappen Visa kategorivy, Visa listvy eller Visa endast de angivna egenskaperna, som finns i nedre, vänstra hörnet av rutan Egenskaper. I alla vyer visas angivna egenskaper med blå text.

Alla ändringar du gör i rutan Egenskaper används omedelbart, så att du kontinuerligt kan förhandsgranska arbetet.

Knappar och vyer i panelen CSS-format

I både Universalläge och Nuvarande läge innehåller panelen CSS-format tre knappar som du kan använda när du vill ändra vy i rutan Egenskaper (den nedersta rutan):

Delar in CSS-egenskaper med Dreamweaver-stöd i åtta kategorier: typsnitt, bakgrund, block, kant, ruta, lista, placering och tillägg. Egenskaperna för varje kategori finns i en lista som du visar eller döljer genom att klicka på plusknappen (+) bredvid kategorinamnet. Angivna egenskaper visas (med blå text) längst upp i listan.

Visar alla CSS-egenskaper med Dreamweaver-stöd i alfabetisk ordning. Angivna egenskaper visas (med blå text) längst upp i listan.

Visar endast de egenskaper som har angetts. Vyn för angivna egenskaper är standardvy.

I både Universalläge och Nuvarande läge innehåller panelen CSS-format även följande knappar:

Öppnar dialogrutan Koppla en extern formatmall. Markera en extern formatmall som du vill länka eller importera till det aktuella dokumentet.

Öppnar en dialogruta där du kan välja vilken typ av format du skapar – till exempel om du vill skapa ett klassformat, definiera om en HTML-tagg eller definiera en CSS-väljare.

Öppnar en dialogruta där du kan redigera formaten i det aktuella dokumentet eller i en extern formatmall.

Tar bort den markerade regeln eller egenskapen från panelen CSS-format och tar bort formateringen från alla element som den användes i. (Klass- eller ID-egenskaper som refereras till av formatet tas emellertid inte bort.) Knappen Ta bort CSS-regel kan också koppla loss (eller ”bryta länken till”) en kopplad CSS-formatmall.

Öppna panelen CSS-format

Du använder panelen CSS-format när du vill visa, skapa, redigera och ta bort CSS-format samt när du vill koppla externa formatmallar till dokument.