Öppna egenskapsinspektören (Fönster > Egenskaper), om den inte redan är öppen och välj CSS-alternativet i vänstra hörnet av panelen.
Senast uppdaterad den
20 dec. 2021
Lär dig hur du använder egenskapskontrollen för text för att tillämpa HTML- eller CSS-formatering i Dreamweaver.
Du kan använda textegenskapsinspektören för att använda HTML-formatering eller Cascading Style Sheet (CSS)-formatering. När du använder HTML-formatering lägger Dreamweaver till egenskaper i HTML-koden i brödtexten på din sida. När du använder CSS-formatering skriver Dreamweaver egenskaper till huvudet av dokumentet eller till en separat formatmall.
När du skapar infogade CSS-format lägger Dreamweaver till formategenskapkod direkt i BODY-delen av sidan.
Om textformatering (CSS kontra HTML)
Formatering av text i Dreamweaver liknar att använda en vanlig ordbehandlare. Du kan ställa in standardformateringsformat (Stycke, Rubrik 1, Rubrik 2 och så vidare) för ett textblock, ändra typsnittet, storleken, färgen och justeringen av markerad text, eller använda textformat som fet, kursiv, kod (monospace) och Understruken.
Dreamweaver har två egenskapsinspektörer, integrerade i en: CSS-egenskapsinspektören och HTML-egenskapsinspektören. När du använder CSS-egenskapsinspektören formaterar Dreamweaver text med hjälp av Cascading Style Sheets (CSS). CSS ger webbdesigners och utvecklare större kontroll över webbsidans design, samtidigt som det ger förbättrade funktioner för tillgänglighet och minskad filstorlek. CSS-egenskapsinspektören låter dig komma åt befintliga format och skapa nya.
Att använda CSS är ett sätt att kontrollera formatet på en webbsida utan att kompromissa med dess struktur. Genom att separera visuella designelement (typsnitt, färger, marginaler och så vidare) från den strukturella logiken hos en webbsida ger CSS webbdesigners visuell och typografisk kontroll utan att offra innehållets integritet. Dessutom gör det att definiera typografisk design och sidlayout från ett enda, distinkt kodblock – utan att behöva använda bildkartor, font-taggar, tabeller och spacer-GIF:ar – att nedladdningar går snabbare, platsunderhållet blir mer strömlinjeformat och ger en central punkt från vilken du kan kontrollera designattribut över flera webbsidor.
Du kan lagra format som skapats med CSS direkt i dokumentet, eller för mer kraft och flexibilitet kan du lagra format i en extern formatmall. Om du kopplar en extern formatmall till flera webbsidor reflekterar alla sidor automatiskt alla ändringar du gör i formatmallen. För att komma åt alla CSS-regler för en sida använder du CSS Styles-panelen (Fönster > CSS Styles). För att komma åt regler som gäller för en aktuell markering använder du CSS Styles-panelen (Aktuellt läge) eller Targeted Rule-popupmenyn i CSS-egenskapsinspektören.
Om du föredrar det kan du använda HTML-taggar för att formatera text på dina webbsidor.För att använda HTML-taggar istället för CSS formaterar du din text med HTML-egenskapsinspektören.
Du kan använda både CSS- och HTML 3.2-format på samma sida. Formaten tillämpas hierarkiskt: HTML 3.2-format gäller oavsett eventuella format i externa CSS-stilmallar, och CSS i ett dokument gäller oavsett om det finns någon extern CSS-kod.
Redigera CSS-regler i egenskapsinspektören
Gör något av följande:
- Placera infogningspunkten inuti ett textblock som har formaterats av en regel du vill redigera. Regeln visas i Targeted Rule-popupmenyn.
- Välj en regel på snabbmenyn Målregel.
- Klicka på Redigera regel.
Gör ändringar i regeln med hjälp av de olika alternativen
i CSS Property inspector.
Målregel
Är den regel som du redigerar i CSS-egenskapskontrollen. När du har en befintlig stil tillämpad på text visas regeln som påverkar textens format när du klickar inuti texten på sidan. Du kan också använda popup-menyn Targeted Rule för att skapa nya CSS-regler, nya inline-stilar eller tillämpa befintliga klasser på vald text. Om du skapar en ny regel behöver du fylla i dialogrutan Ny CSS-regel. För mer information, se länkarna i slutet av det här ämnet.
Redigera regel
Öppnar dialogrutan CSS Rule Definition för den riktade regeln. Om du väljer Ny CSS-regel från popup-menyn Targeted Rule och klickar på knappen Redigera regel öppnar Dreamweaver dialogrutan Ny CSS-regel definition istället.
CSS Designer
Öppnar CSS Designer panel och visar egenskaper för den riktade regeln i Current-vy.
Teckensnitt
Ändrar typsnittet för målregeln.
Storlek
Anger teckenstorlek för målregeln.
Textfärg
Anger den valda färgen som teckenfärg i målregeln. Välj en webbsäker färg genom att klicka på färgrutan eller ange ett hexadecimalt värde (till exempel #BB5153) i det intilliggande textfältet.
Fet
Lägger till egenskapen fetstil i målregeln.
Kursiv
Lägger till egenskapen kursiv stil i målregeln.
Vänsterjustera, Centrera och Högerjustera
Justerar den riktade regeln till vänster, mitten eller höger.
Egenskaperna Typsnitt, Storlek, Textfärg, Fet, Kursiv och Justering visar alltid egenskaperna för den regel som gäller för den aktuella markeringen i dokumentfönstret. Om du ändrar någon av dessa egenskaper påverkar du den valda regeln.
Redigera textfärg med hjälp av egenskapskontrollen
Om du inte har använt någon särskild regel för din text kan du redigera färgen på texten direkt från egenskapskontrollen. Observera textens färg innan redigering i följande exempel. Fältet intill färgväljaren visar vitt, vilket indikerar färgen på texten där du har placerat din markör.
Om du vill redigera färgen på texten markerar du texten som du vill redigera. Klicka på färgväljaren och välj en färg. Se följande bild där egenskapsinspektören visar den nya färgen.
Ange HTML-formatering i egenskapsinspektören
Öppna egenskapsinspektören (Fönster >
Egenskaper), om den inte redan är öppen, och klicka på HTML-knappen.
Välj texten som du vill formatera.
Ange alternativen som du vill använda på den markerade texten:
Format
Anger den markerade textens styckeformat. Stycke tillämpar standardformatet för en <p>-tagg, rubrik 1 lägger till en H1-tagg, och så vidare.
ID
Tilldelar ID för markeringen. ID-popup-menyn (om tillämpligt) listar alla dokuments oanvända, deklarerade ID:n.
Klass
Visar den klassstil som för närvarande tillämpas på den valda texten.Om inga stilar har tillämpats på markeringen visar popup-menyn No CSS Style.Om flera stilar har tillämpats på markeringen är menyn tom.
Använd stilmenyn för att göra något av följande:
Välj den stil du vill tillämpa på markeringen.
Markera Inget om du vill ta bort det markerade formatet.
Välj Döp om om du vill byta namn på formatet.
Välj Attach Style Sheet för att öppna en dialogruta som gör att du kan bifoga en extern stilmall till sidan.
Fet
Tillämpar antingen <b> eller <strong> på den valda texten enligt stilinställningen som är angiven i kategorin Allmänt i dialogrutan Inställningar.
Kursiv
Tillämpar antingen <i> eller <em> på den valda texten enligt stilinställningen som är angiven i kategorin Allmänt i dialogrutan Inställningar.
Osorterad lista
Gör om den markerade texten till en punktlista. Om ingen text är vald startas en ny punktlista.
Numrerad lista
Gör om den markerade texten till en numrerad lista. Om ingen text är vald startas en ny numrerad lista.
Blockcitat och Ta bort blockcitat
Gör indrag eller ta bort indrag från den valda texten genom att tillämpa eller ta bort taggen blockquote.I en lista skapar indrag en kapslad lista och att ta bort indraget tar bort kapslingen av listan.
Länk
Gör om den markerade texten till en numrerad lista. Klicka på mappikonen för att bläddra till en fil på din webbplats; skriv URL:en; dra ikonen Point-To-File till en fil i panelen Filer; eller dra en fil från panelen Filer till rutan.
Titel
Anger textverktygstipset för en hypertextlänk.
Mål
Anger den ram eller det fönster där det länkade dokumentet kommer att läsas in:
_blank läser in den länkade filen i ett nytt, namnlöst webbläsarfönster.
_parent läser in den länkade filen i den överordnade ramuppsättningen eller fönstret för ramen som innehåller länken.Om ramen som innehåller länken inte är kapslad läses den länkade filen in i hela webbläsarfönstret.
_self läser in den länkade filen i samma ram eller fönster som länken.Detta Target är underförstått, så du behöver vanligtvis inte ange det.
_top läser in den länkade filen i hela webbläsarfönstret och tar därmed bort alla ramar.
Byta namn på en klass från HTML-egenskapsinspektören
Dreamweaver visar alla klasser som är tillgängliga för din sida i klassmenyn i HTML-egenskapsinspektören.Du kan byta namn på stilar i den här listan genom att välja alternativet Byt namn i slutet av listan över klassstilar.
I panelen Egenskapsinspektör väljer du rullgardinslistan Klass.
Från listan som visas väljer du Byt namn längst ned i listan.
Välj den stil du vill byta namn på från popup-menyn Byt namn på stil.
Ange ett nytt namn i fältet Nytt namn och klicka på OK.
Liknande innehåll
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
