Grunderna i CSS3 Styles - dummies

Det bästa sättet att börja med stilar i CSS3 är att visa dem helt enkelt som ett sätt att formatera information på skärmen. Eftersom det mesta av informationen du arbetar med är text, är det lättast att börja med text som underlag för att förstå stilar. Låt oss börja med den här grundläggande HTML5-formaterade sidan:

En enkel sida

En enkel rubrik

Enkel text att gå med rubriken.

För tillfället är rubriken och stycket ganska vanliga. Texten kommer att visas i vilken standard typsnitt du har valt för din webbläsare. Texten är typiskt svart på en vit bakgrund om du inte valt en annan färgkombination.

På den här tiden kan du börja spela med sidan lite för att se hur du formaterar det på ett annat sätt. Följande procedur hjälper dig att ändra grundsidan så det ser lite mer intressant ut. Du kan använda vilken textredigerare du vill, så länge det inte lägger till någon formatering. Att använda en produkt som Komodo Edit gör dock uppgiften betydligt enklare.

Skapa en ny HTML5-fil med din textredigerare.

Din redaktör kan inte stödja HTML5-filer. Vilken textfil som helst kommer att göra. Att använda en viss filtyp innebär vanligtvis att redaktören sätter in en del av koden automatiskt, vilket sparar skrivningstiden.
Skriv koden för HTML-sidan.

Se till att du skriver in koden exakt som det visas tidigare i det här avsnittet.
Sätt in följande kod direkt efter taggen.
Taggen definierar början på en stil. När du placerar taggen direkt på sidan så här heter den en intern stil . Du kan även skapa externa stilark . Externa stilark ligger i. CSS-filer.

Typattributet berättar om webbläsaren taggen innehåller CSS-information i textformat.
Skriv in följande kod i rubriken (mellan rubrikerna och posterna.
```
p {font-family: cursive; font-size: large; color: # 0000ff; bakgrundsfärg: # ffff00;} > Detta ser komplicerat ut, men det är det verkligen inte. P står för taggen
```
(stycke). Allt i denna post kommer att påverka
-taggarna i ditt dokument. berätta för webbläsaren att alla formateringsinstruktionerna mellan dem är tillämpliga på
-taggarna i dokumentet. Du inkluderar alltid de lockiga axlarna som en del av stildefinitionen.

Inom de krökta axlarna ser du attributnamn och värdepar. Exempelvis är teckensnittsfamiljen namnet på ett CSS-attribut som definierar vilket teckensnitt som ska användas. I det här fallet specificerar attributet det standardformativa teckensnittet för plattformen och webbläsaren.Genom att använda CSS garanterar generiska namn att din ansökan kommer att generera generellt kompatibla resultat på alla plattformar, med en webbläsare.
Teckensnittstorleken definierar en relativ storlek. I det här fallet anger stora att du vill göra teckensnittet stort jämfört med standardstorleken. Du anger ingen specifik typstorlek, vilket innebär att varje plattform och webbläsare kan göra tecknet större än normalt för den enskilda miljön.

Färgattributet anger ett rött, grönt, blått värde som ska användas för teckensfärgen. Värdet föregås av en hash (#) följt av hexadecimala färgvärden från 0 till ff. I det här fallet kommer teckensnittet att vara det ljusaste blået som stöds av plattformen. På samma sätt anger bakgrundsfärgattributet bakgrunden för texten, som blir gul i det här fallet.

Spara sidan och ladda den i din webbläsare.

Du ser effekten av stiländringen som visas i Figur 1-2. Din sida kan se annorlunda ut än den på den här sidan eftersom din plattform eller webbläsare kan använda olika värden för teckensnittsfamiljen eller teckensnittstorleken.
Skriv följande kod efter p-stilen i taggen.

h1 {font-family: "Times New Roman", Georgia, serif; typsnittstorlek: 40px; text-align: center; text-dekoration: understryka; färg: # ff0000; bakgrundsfärg: # 00ffff;}
Denna stil påverkar
```
taggposterna och den har många av de poster som används för
```
taggstilen. Observera dock att den här gången innehåller teckensnittsfamiljattributet tre inmatningar: Times New Roman-värdet är det mest specifika, följt av Georgia följt av det minst specifika serif. När du arbetar med ett värde som innehåller mellanslag måste du bifoga värdet i citat som visas.
Med hjälp av tre-stegs-metoden får du mer kontroll över utseendet på utmatningen, men gör det fortfarande möjligt för webbläsare som inte stöder ett visst teckensnitt för att göra innehållet korrekt. När du tillhandahåller en viss typsnitt, se till att du också levererar mindre specifika typsnitt för webbläsare som inte har tillgång till ditt angivna teckensnitt.
Teckensnittstorleken är också annorlunda. Den här gången använder stilen en specifik storlek på 40 pixlar. Även om ett specifikt värde kan göra det möjligt att skapa special effekter på skärmen, skapar också problem med ett specifikt värde. En 40px-post fungerar bra på skrivbordet eller den bärbara datorn, men kan orsaka problem med en surfplatta och gör definitivt innehållet omöjligt att visa på en smartphone.

Denna stil innehåller också några poster som ändrar textens utseende. Text-align attributet bestämmer var texten är placerad på skärmen, medan attributet text-dekoration bestämmer några speciella teckensnitt. I det här fallet visas teckensnittet centrerat på skärmen med en underlinje.

Spara sidan och ladda den i din webbläsare.

Du ser effekten av stiländringen som visas i Figur 1-3. Rubriken visas i röd text på en ljusblå bakgrund, och stycket visas som blå text på en gul bakgrund.