Css hur man ställer in gränser för ett block. Ramar och bårder

CSS-egenskaper kanter låter dig ange stilen och färgen på ett elements kant.

Gränsstil

Egenskapen border-style anger vilken typ av kant som ska visas.

Ingen av gränsfastigheterna kommer att ha NÅGON effekt förrän fastigheten border-stil inte installerad!

Gränsliknande betydelser

ingen: Ingen gräns

prickig: Prickad kant

streckad: Streckad kant

solid: Solid kant

dubbel: Dubbel kant. Bredden på den dubbla kanten är lika med gränsens breddvärde

spår: Definierar en 3D upphöjd kant. Effekten beror på kantfärgsvärdet

ås: Definierar en 3D åsliknande gräns. Effekten beror på kantfärgsvärdet

infälld: Definierar en 3D-indragen ram. Effekten beror på kantfärgsvärdet

början: Definierar en konvex 3D-kant. Effekten beror på kantfärgsvärdet

Gränsbredd

Egenskapen border-width används för att ställa in bredden på kanten.

Bredd ställs in i pixlar eller med hjälp av ett av tre fördefinierade värden: tunn, medium eller tjock.

Egenskapen "border-width" fungerar inte när den används ensam. Använd först egenskapen "border-style" för att ställa in gränserna.

Gräns ​​färg

Egenskapen border-color används för att ställa in kantfärgen. Färgen kan ställas in med:

• namn - ange namnet på färgen, till exempel "röd"
• RGB - ange ett RGB-värde, till exempel "rgb(255,0,0)"
• Hex - specificera hexadecimalt värde, till exempel "#ff0000"

Du kan också ställa in kantfärgen på "transparent".

Egenskapen "kantfärg" fungerar inte om den används ensam. Ange egenskapen "border-style" först för att ställa in gränserna.

Border - Individuell utformning av sidor

I CSS kan du ange olika gränser för olika sidor:

Exemplet ovan kan göras om med en egenskap:

Egenskapen i kantstil kan ha från ett till fyra värden.

• border-style: prickad solid dubbelstreckad;
  • övre kant - från punkter
  • höger kant - fast
  • nedre kant - dubbel
  • vänster kant - prickad
• border-style: prickad solid dubbel;
  • övre kant - från punkter
  • nedre kant - dubbel
• border-style:prickad solid;
  • övre och nedre gränser - från punkter
  • höger och vänster kanter är fasta
• border-style:dotted;
  • alla fyra gränserna är gjorda av prickar

Egenskapen border-style används i exemplet ovan. Detta fungerar dock även med egenskaperna för kantbredd och kantfärg.

Border - Stenografi (stenografi) egenskap

Som du kan se i exemplen ovan finns det ganska många egenskaper för gränser.

För att förkorta koden kan du ange alla egenskaper för gränsen i en egenskap. Detta kallas egenskapen stenografi (eller stenografi).

Stenografiegenskapen för gränsegenskaper är "border":

När du använder gränsegenskapen är värdeordningen:

• gränsbredd
• border-stil
• gräns färg

Du kan hoppa över vissa värden (även om gränsegendom-stil är fortfarande nödvändig), det viktigaste är att upprätthålla den angivna ordningen.

Fler exempel

Alla övre gränsfastigheter i en deklaration
Det här exemplet visar en förkortningsegenskap för att ställa in alla övre gränsegenskaper i en enda deklaration.

Ställa in den nedre kantstilen
Det här exemplet visar hur du ställer in den nedre kantstilen.

Ställa in bredden på vänster kant
Det här exemplet visar hur du ställer in bredden på den vänstra kanten.

Ställa in färgen på de fyra ramarna
Det här exemplet visar hur man ställer in färgen på fyra ramar. De kan ha från en till fyra färger.

Ställ in rätt kantfärg
Det här exemplet visar hur man ställer in färgen på den högra kanten.

Alla CSS-gränsegenskaper

Fast egendom	Beskrivning
gräns	Anger alla gränsegenskaper i en deklaration
gräns-botten	Anger alla nedre kantegenskaper i en deklaration
kant-botten-färg	Ställer in färgen på den nedre kanten
kant-botten-stil	Ställer in den nedre kantstilen

CSS-kant Ett element är en eller flera linjer som omger elementets innehåll och dess utfyllnad. Gränsen specificeras med egenskapen stenografi kantlinje. Ramstilen ställs in med tre egenskaper: stil, Färg Och bredd.

Dekorera ramar och kanter av HTML-element med CSS-egenskaper

1. Border-stil

Som standard ritas kanter alltid ovanpå elementets bakgrund, med bakgrunden som sträcker sig till elementets ytterkant. Ramstilen avgör dess visning utan denna egenskap, ramar kommer inte att synas alls. För ett element kan du ställa in en kantlinje för alla sidor samtidigt genom att använda egenskapen border-style, eller för varje sida separat med hjälp av border-top-style kvalificerande egenskaper, etc. Inte ärvt.

border-stil (border-top-style, border-right-style, border-bottom-style, border-left-style)
Värden:
ingen	Standardvärdet betyder ingen ram. Tar också bort gränsen för ett element från en grupp av element med ett inställt värde av denna fastighet.
dold	Motsvarar ingen.
prickad	prickad
streckade	streckade
fast	fast
dubbel	dubbel
räffla	räffla
bergsrygg	bergsrygg
infälld	infälld
början	början
{1,4}	Listar fyra olika stilar för ett elements kant på en gång, bara för egenskapen kantstil: (kantstil: fast prickad ingen prickad;)
första
ärva

Syntax

P (border-style: solid;) p (border-top-style: solid;)

2. Ramfärg kant-färg

Egenskapen ställer in färgen på ramarna på alla sidor samtidigt. Med hjälp av de förtydligande egenskaperna kan du ställa in en annan färg för kanten på varje sida av elementet. Om ingen färg är angiven för ramen kommer den att vara samma som färgen på elementets text. Om elementet inte har någon text kommer kantfärgen att vara densamma som det överordnade elementets textfärg. Inte ärvt.

gräns färg (kant-topp-färg, kant-höger-färg, kant-botten-färg, kant-vänster-färg)
Värden:
transparent	Installerar transparent färg för ramen. Samtidigt förblir ramens bredd. Kan användas för att ändra kantfärgen när du håller musen över ett element för att undvika att elementet förskjuts.
Färg	Färgen på ramarna ställs in med värdena för egenskapen. (kantfärg: #cacd58;)
{1,4}	Samtidig överföring av fyra olika färger för elementkanter, endast för egenskapen border-color: (kantfärg: #cacd58 #5faf8a #b9cea5 #aab238;)
första	Ställer in egenskapsvärdet till standardvärdet.
ärva	Ärver egenskapsvärdet från det överordnade elementet.

Syntax

P (kantfärg: #cacd58;)

3. Kantbredd

Rambredden anges med längdenheter eller nyckelord. Om egenskapen border-style är inställd på ingen och elementets kant är inställd på en viss bredd, I detta fall Rambredden är noll. Inte ärvt.

Syntax

P (kantbredd: 2px;)

4. Ställa in en ram med en egenskap

Border-egenskapen låter dig kombinera följande egenskaper: border-width , border-style , border-color , till exempel:

Div (bredd: 100px; höjd: 100px; kant: 2px fast grå;)

I det här fallet kommer de angivna egenskaperna att tillämpas på alla gränser för elementet samtidigt. Om något värde inte anges, kommer standardvärdet att ta dess plats.

5. Ställa in en ram för en kant av ett element

Om det är nödvändigt att ställa in annan stil gränser för ett element, kan du använda förkortningen för motsvarande gräns.
Egenskaperna nedan kombinerar följande egenskaper till en enda deklaration: border-width , border-style och border-color . Listan över egenskaper anges i en given ordning, medan ett eller två värden kan hoppas över, i vilket fall deras värden kommer att anta standardvärdena.

Stilen för den övre kanten ställs in med egenskapen border-top, bottom-border-bottom, left-border-left och höger-kant-höger.

Syntax

P (kant-top: 2px fast grå;)

6. Extern konturkontur

Egenskapen anger en yttre ram runt element (dvs utanför den normala gränsen). Huvudsyftet med den här egenskapen är att markera ett element. Till skillnad från border-egenskapen påverkar tillämpningen av denna egenskap inte storleken eller positionen för elementet, eftersom konturen visas ovanpå elementets box, vilket i sin tur kan resultera i att elementets yttre stoppning och intilliggande områden överlappar varandra.

Dessutom omger den yttre konturen, till skillnad från elementets ram, elementet på alla sidor och ramar in det helt.

Den yttre konturen är alltid rektangulär och följer inte gränsen för det block för vilket kantradie är specificerad.

Egenskapen outline låter dig kombinera följande egenskaper: outline-color , outline-style , outline-width . Om något värde inte anges, kommer standardvärdet att ta dess plats.

Div ( bredd: 100px; höjd: 100px; kontur: #cacd58 solid 2px; )

6.1. konturstil

Linjevy yttre kontur ställs in på samma sätt som stilen på elementets ram. Inte ärvt.

Syntax

P (konturstil: ås;)

6.2. Ytterkonturfärg konturfärg

Färgen på den yttre konturen kan endast anges när satt värde konturstil. Inte ärvt.

Syntax

P ( konturstil: ås; konturfärg: silver; )

6.3. Ytterkonturtjocklek konturbredd

Tjockleken på den yttre konturlinjen ställs in på samma sätt som tjockleken på elementets ram. Inte ärvt.

Syntax

P ( konturstil: prickad; konturbredd: 5 px; )

Oavsett hur mycket tillverkarna av superplatta bildskärmar skryter, finns det alltid en kraft som verkar i motsatt riktning: det här är programmerare som inte kan förlika sig med skärmens tvådimensionella och vid varje steg skanderar de: "bring it 3D!"

Pseudo-tredimensionalitet omger oss överallt: där vi behöver det och där vi inte behöver det. Om till exempel en knapp per definition måste sticka ut från monitorn, vad är då de ofarliga hr och bordsskyldiga? Den första har redan diskuterats i not nr 12, låt oss nu prata om hur man helt dödar den senares tredimensionalitet.

Uppgift: få följande tabell:

Metod ett

Låt oss använda attributet cellspacing, som skapar en transparent ram mellan alla celler i tabellen. Du behöver bara färga den i en viss färg, och detta kan göras med hjälp av egenskapen bgcolor i tabellen och td-taggarna:

Den milda läsaren kommer att fråga: varför kan inte bgcolor=white placeras direkt i tr-taggen och därmed komprimera koden avsevärt? Vilket författaren kommer att svara på: för, min kära, den stackars NN6-renderaren målade hela linjen vit, och våra vertikala ramar grät.

Koden är dock riktigt krånglig, så på väg...

Metod två

Idén hittades i Lebedev Studios källkod och skiljer sig inte i grunden från den föregående: vi inkluderar helt den ursprungliga tabellen i den externa, för vilken vi anger den nödvändiga bgcolor .

Koden har blivit mycket lättare, tack vare kodarna från Lebedev Studio. Men denna metod är inte utan sina nackdelar: försök skriva ut en sådan tabell på en skrivare. Hände? Figuriner, eftersom Internet Explorer som standard skriver inte bakgrundsfärger och mönster ut.

"Innan du skriver ut den här sidan, gå till menyn Service, Välj föremål Internet-alternativ,öppna fliken Dessutom och i avsnittet Täta markera rutan Skriv ut färger och bakgrundsdesign. Tack". Sluta tjafsa, låt oss böja oss för CSS:

Metod tre

Egentligen, vad hindrar oss från att ge varje cell en gränsegenskap?

td(
kant: helsvart 1px
}

Annars mina kära, på det här sättet, vid den punkt där cellerna berör, kommer du att få en ram två pixlar tjock. Enligt specifikationen ska detta problem lösas av gränskollapsegendomen med värdekollaps . I det här fallet måste intilliggande gränser "svälja" varandra. Låt oss lämna denna lycka till våra barnbarn, för idag stöder ingen webbläsare den här egenskapen. Det följer av detta...

Metod fyra

Vetenskapligt kallas detta arbetsfördelning:

table.border(
kantfärg: svart;
border-style: solid;
kantbredd: 0 1px 1px 0
}

kantfärg: svart;
border-style: solid;
kantbredd: 1px 0 0 1px
}

Allt är bara upprörande. Varje cell ansvarar endast för de övre och vänstra ramarna. Allt som återstår är att färdigställa de långa högra och nedre ramarna. Detta är tilldelat border-egenskapen för själva tabellen.

Anteckning från webbplatsens författare. Egenskapen border-collapse CSS stöds faktiskt fullt ut (separata och komprimera värden) av IE5+, NN6/Mozilla, Opera 4+, vilket fullt ut motiverar dess användning. Tänk bara på att egenskapen border-collapse måste ställas in när du deklarerar tabelltaggen, medan gränsen ställs in när du beskriver celler:

table.border(
border-collapse:kollaps
}

Table.border td, table.border th(
kant: 1px fast #CC0000

Hej alla! Så nu vet du hur du skapar elementära tabeller som består av så många rader och kolumner som behövs. Inte illa, inte illa. Låt oss nu prata om designen av dessa bord.

I föregående lektion visades tabeller utan ramar. Och, du förstår, det ser så som så, du kan inte ens kalla det ett tecken. För att göra tabellkanter i HTML bör du lägga till i taggen

attribut gräns, vilket ger det ett annat värde än noll.

Så låt oss göra gränserna för bordet. Till exempel, för den vi redan har:

Den övre vänstra cellen	Upptill höger cell
Nedre vänstra cellen	Nedre högra cellen

Resultat i webbläsaren:

Hur man tar bort bordskanter

I sin tur att ta bort gränser HTML-tabeller, eller du kan också säga, gör dem osynliga, du behöver ett attribut gräns satt värde 0 . Efter dessa enkla steg kommer ramen att tas bort.

Attributet låter dig skapa, men inte hantera, gränser. Det låter dig bara ändra deras tjocklek.

Därför ska vi nu prata om CSS, vars egenskaper gör det möjligt att använda gräns skapa olika gränser, både inuti varje cell och externa, runt bordet som helhet.

Låt oss titta på hur man använder CSS för att skapa de yttre och inre gränserna för en tabell.
För att göra detta, ta bort border-attributet från vår tabell och lägg till stilar:

Den övre vänstra cellen	Upptill höger cell
Nedre vänstra cellen	Nedre högra cellen

Resultat i webbläsaren:

Låt oss nu lägga till ramar till varje cell också. För att göra detta, lägg helt enkelt till stilar:

Resultat i webbläsaren:

Hur man tar bort utfyllnad mellan celler i en HTML-tabell

Håller med om att gränsen anges med använder CSS, har inte sådana utseende, som vi skulle vilja. Utan tvekan finns det ur estetisk synvinkel något att jobba på. På webbläsarsidan kan du se att den som standard visar tabell- och cellgränser separat. Exemplet visar tydligt detta.

Du kan dock helt bli av med sådana gränser, som kallas dubbla, om du använder egenskapen border-collapse CSS. I praktiken ser det ut så här:

Tabell (kant: fast 1px blå; kant-kollaps: komprimera;) ...

Som ett resultat tas avståndet mellan cellerna bort:

Kollapsvärdet som tilldelas border-attributet låter dig ta bort dubbla ramar. Som du kan se är resultatet kollaps av intilliggande cellkanter, såväl som cellramar och den yttre bordsramen. När det gäller det senare kan det tas bort helt. Och om det finns ett behov av att visa det måste du öka dess bredd. På så sätt blev vi av med separatorer i tabellen. Och i nästa lektion kommer vi att prata om hur du kan sätta vertikala och horisontella gränser. Lycka till allihopa!

Vlad Merzhevich

Med CSS kan du lägga till en kantlinje till ett element på flera sätt. I grund och botten används naturligtvis gränsegenskapen, som den mest universella, såväl som kontur och, överraskande, box-shadow , vars huvuduppgift är att skapa en skugga. Därefter kommer vi att överväga dessa metoder och deras skillnader sinsemellan.

skissera egendom

Den enklaste egenskapen för att skapa ramar. Den har samma parametrar som border , men skiljer sig markant i vissa detaljer:

• kontur visas runt elementet (kanten inuti);
• kontur påverkar inte elementets dimensioner (kanten läggs till elementets bredd och höjd);
• kontur kan bara ställas in runt hela elementet, men inte på enskilda sidor (kanten kan användas för vilken sida som helst eller alla på en gång);
• kontur påverkas inte av den kälradie som anges av egenskapen gränsradie (gränsen påverkas).

Frågan uppstår - i vilka fall behövs disposition, när dess roll, trots de uppräknade skillnaderna, helt övertas av gränsen? Det finns inte många situationer, men de förekommer:

• skapa komplexa flerfärgade ramar;
• lägga till en ram till ett element när du håller musen över det;
• dölja gränsen som webbläsaren automatiskt lägger till i vissa element när fokus tas emot;
• för outline kan du ställa in avståndet från kanten av elementet till ramen med hjälp av outline-offset-egenskapen för att skapa .

Flerfärgade ramar

Du måste förstå att konturen inte på något sätt ersätter gränsen och lätt kan existera tillsammans med den, som visas i exempel 1.

Exempel 1: Skapa en ram

I det här exemplet läggs en svart ram runt elementet, som skiljs från bakgrunden med en vit ram (Fig. 1).

Ris. 1. Ram runt elementet

Ram när du använder:hover

När man lägger till en ram via border ökar bredden på elementet, vilket är ganska märkbart när man kombinerar border och pseudoklassen :hover. Det finns två sätt att "vinna" detta. Det enklaste är att ersätta border med outline , vilket, som vi vet, inte påverkar storleken på elementet (exempel 2).

Exempel 2: Ram vid hovring

kontur är inte alltid lämplig, om så bara för att runda hörn inte påverkar den. Den andra metoden är lämplig här - lägg till en osynlig ram eller en ram som matchar bakgrundsfärgen och ändra sedan dess parametrar när du svävar (exempel 3). Då kommer ingen förskjutning av elementet att ske, eftersom ramen initialt redan finns. Men vi kommer alltid ihåg att elementets bredd är summan av värdena för bredd , kant till vänster och kant till höger. Situationen är liknande med höjden.

Exempel 3: Ram vid hovring

Kant runt formulärfält

I vissa webbläsare (Chrome, Safari, senaste versionerna Opera) visas en liten ikon runt formulärfälten när de får fokus. färg ram(Fig. 2). För att ta bort det, lägg bara till värdet none till outline-egenskapen i stilarna, som visas i exempel 4.

Ris. 2. Rama in runt marginalerna

Exempel 4. Ta bort ramen

Ramar via box-skugga

Även om egenskapen box-shadow är avsedd att lägga till en skugga runt ett element, kan den också användas för att skapa kanter som inte kan skapas med hjälp av border eller outline . Detta är allt tack vare det faktum att antalet skuggor kan vara obegränsat, vars parametrar är listade separerade med kommatecken.

För att få en ram bör de tre första parametrarna ställas in på noll, de är ansvariga för skuggans position och dess oskärpa. Den fjärde parametern i detta fall är ansvarig för tjockleken på gränsen, och den femte anger färgen på gränsen. För den andra ramen är den fjärde parametern lika med summan av tjockleken på de två ramarna.

Exempel 4 visar hur man lägger till två ramar och en kant till höger med en enda box-shadow-egenskap.

Exempel 4: Använda box-shadow

Resultat detta exempel visas i fig. 3.

Ris. 3. Ramar skapade av egenskapen box-shadow