Ramar placerade runt bilder eller text dekorerar webbplatsen och lägger till variation i dess design. Om du använder tabeller för att skapa gränser tar koden för varje kant för mycket utrymme. I det här fallet måste du också skriva om HTML-koden för varje ram. Med CSS kan du enkelt skapa en ram av vilken tjocklek och färg du helst genom att skriva en enkel kod en gång för alla element som kommer att omges av denna kant. Denna teknik gör det möjligt att vid behov ändra typen av ramar på webbplatsen på några minuter.
Det är nödvändigt
- - ha din egen webbplats;
- - vet vad CSS är och var dessa stilar skrivs på webbplatsen.
Instruktioner
Steg 1
För att skapa en gräns, skriv först följande kod i CSS:
ramka {}
Steg 2
För att göra ramen till den storlek du vill använda, använder du parametern border-width, som anger linjebredden i pixlar. Om ramraden till exempel ska vara 3 pixlar bred, kommer posten att se ut så här:
ramka {kantbredd: 3 pixlar;}
Steg 3
Definiera nu gränsens stil med parametern border-style. Om du vill skapa en kant vars sidor är vanliga heltäckande linjer, lägg sedan följande in i koden mellan de lockiga hakparenteserna - kant-stil: solid.
Steg 4
En prickad kant kan erhållas genom att skriva den så här: border-style: prickad. Kontrollera kantstil: streckad ger dig en streckad kant.
Steg 5
Du kan göra gränsen till en dubbel hel linje så här: border-style: double. Använd border-style: groove eller border-style: ridge för att rama in text eller bilder i ramar med 3D-biverkningar. Skillnaden mellan dessa två alternativ är att i det första fallet består ramen av indragna linjer och i det andra konvexa.
Steg 6
Använd den här koden: border-style: inset för att skapa effekten av en insats med gränsen för ett webbplatselement. För att göra gränsens innehåll, tillsammans med gränsen, tvärtom konvex, skriv kantstil: inledningsvis.
Steg 7
Du kan lägga till önskad färg i ramen med parametern kantfärg, också placerad mellan de lockiga hakparenteserna. Om du vill göra kanten röd, skriv sedan kantfärg: röd, blå - kantfärg: blå, orange - kantfärg: orange.
Steg 8
CSS-gränskoden, inklusive alla alternativ, ser ut så här:
ramka {kantbredd: 3 pixlar; kant-stil: solid; kantfärg: blå;}
Steg 9
Skriv nu detta i HTML:
Raminnehåll I stället för frasen "Raminnehåll", infoga texten eller koden för önskad bild.
Steg 10
Således kan du designa ett obegränsat antal element på webbplatsen. För att ändra utseendet på ramen behöver du bara ändra CSS-koden.
