Randen worden gebruikt in HTML-pagina's om inhoud af te bakenen en te markeren. Als er veel informatie op een pagina staat en u de aandacht van de gebruiker op specifieke delen wilt vestigen, gebruik dan randen rond die inhoud. In dit artikel over grenzen in CSS bespreek ik de volgende onderwerpen:
- Wanneer u randen moet gebruiken
- Grenzen in CSS
- Attributen van CSS Border
- Standaardwaarden voor randattributen
- Definieer grenzen in steno
- Punten om in gedachten te houden bij het ontwerpen van randen in CSS
Wanneer u randen moet gebruiken
De standaardpraktijk is om CSS-randtags te gebruiken om randen in HTML-pagina's te definiëren voor:
- Rond belangrijke rubrieken
- Om postscript of belangrijke opmerkingen te markeren
- Om afbeeldingen, illustraties, citaten van mensen, video's in te sluiten
- Om de aandacht te vestigen op prijzen, tijdlijnen of dergelijke belangrijke informatie
Misschien wilt u de voordat u verder gaat met het leren over CSS-grenzen.
Bezoek voor een uitgebreide CSS-zelfstudie Edureka CSS-zelfstudie voor beginners . U krijgt een uitstekende uitleg over de manier waarop CSS moet worden gebruikt om HTML-webontwerp te verbeteren.
Grenzen in CSS
CSS-randen kunnen worden toegewezen aan verschillende secties van de HTML-pagina, of het nu gaat om het omsluiten van koppen of alinea's. Laten we beginnen met een voorbeeld. Hier definiëren we een rand rond de kop en een andere rand rond de alineatekst.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Grens ook rond de alinea!
Attributen van CSS Border
CSS-randen hebben 3 belangrijke kenmerken voor hun
- stijl:Destijlattribuut definieert het patroon van de rand.
- kleur: De kleur kan elke kleur zijn uit de set die is gedefinieerd door CSS-kleuren.
- breedte: De breedte wordt gebruikt om de dikte van de rand te variëren, om deze prominenter te maken.
In het bovenstaande voorbeeld hebben we gezien dat er slechts één borderattribuut is gedefinieerd, dat is de stijl. De andere attributen, indien niet gedefinieerd, krijgen standaardwaarden. Er is een ander kenmerk genaamd radius, dat minder vaak wordt gebruikt. Het wordt gebruikt om de randen van de rand rond te maken.
hoe u het programma java beëindigt
- border-stijl attribuut
| Stijl | Omschrijving |
| randstijl: solide | |
| randstijl: dubbel | |
| randstijl: groef | |
| border-stijl: nok | |
| border-style: inzet | |
| border-style: begin | |
| border-style: geen | |
| border-style: verborgen | |
| border-style: gestippeld | |
| border-style: onderbroken |
Je zou merken dat er ook een ‘geen grens’ en ‘verborgen grens’ optie is. Een ontwikkelaar kan simpelweg vermijden om een grens te definiëren, waarom zou je deze dan expliciet definiëren als een ‘verborgen grens’? Dit wordt gedaan voor ruimtegebruik en afstemming met andere elementen op de pagina.
Randstijlen kunnen ook binnen een element worden gemengd. Hiervoor kunnen de 4 afzonderlijke randzijden afzonderlijk worden gedefinieerd met verschillende stijlen. Dit kan op 2 manieren. Ofwel definieer alle 4 zijden in een enkele tag. In dit geval begint de telling vanaf de bovenste regel en wordt vervolgens met de klok mee verplaatst. Als alternatief kan elk van de 4 borderlines ook in individuele tags worden gedefinieerd. Beide gevallen worden getoond in het volgende voorbeeld.
| Stijl | Omschrijving |
| border-style: gestippelde gestreepte effen dubbel border-top-style: gestippeld border-right-style: onderbroken border-bottom-style: solid border-left-style: dubbel |
- rand kleur attribuut
Het kleurattribuut voor een rand kan op verschillende manieren worden ingesteld. Dit is vergelijkbaar met het instellen van kleur voor andere elementen. De kleuren kunnen op een van de volgende manieren worden ingesteld:
- naam - specificeer een kleurnaam, zoals 'blauw'. Je kunt ook een paar mooie kleuropties uitproberen, zoals 'Blanched Amandel'!
- Hex - specificeer een hexadecimale waarde, zoals '# ff0000'
- RGB - stel de RGB-code in. RGB (255,255,0) betekent bijvoorbeeld geel.
- instelling - zoals 'transparant' of 'ondoorzichtig'
- grensbreedte attribuut:
De eigenschap width, zoals de naam suggereert, definieert de dikte van de 4 randzijden. Als er één waarde is gedefinieerd, is deze voor alle zijden, anders kunnen ook individuele breedtewaarden worden ingesteld.
De breedte kan worden opgegeven in een van de standaardeenheden, zoals pixels (‘px’), punten (‘pt’) of in centimeters (‘cm’). U kunt ook de breedte specificeren met behulp van vooraf gedefinieerde waarden van ‘dik’, ‘dun’ en ‘gemiddeld’.
| Stijl | Omschrijving |
| border-breedte: 10px | |
| randbreedte: 0,1 cm | |
| border-breedte: medium |
- grens-straal attribuut
Het doel van het definiëren van de straal is om afgeronde hoeken voor de rand te krijgen. De radiusfactor bepaalt de mate van afgerondheid. Hoe groter de waarde, hoe meer gebogen de hoeken worden. Standaard worden radiuswaarden tussen 1-3 keer de randbreedte gehouden.
De volgende code genereert:
hoe u een AI-ingenieur wordt
border-breedte: 10px
border-radius: 30px
Standaardwaarden voor randattributen
Het enige verplichte kenmerk is het stijl . Als de stijl ontbreekt, wordt de rand niet weergegeven.
Als de kleur niet is opgegeven, wordt de kleur van het onderliggende element als standaardwaarde genomen. Als de tekstkleur van een alinea bijvoorbeeld is gedefinieerd als ‘blauw’, is de standaardrandkleur ook blauw. Als er zelfs voor het element geen kleurdefinitie is, is de standaardkleur ‘zwart’.
De standaardwaarde voor breedte is ‘medium’.
Definieer grenzen in steno
Sommige ontwikkelaars geven er de voorkeur aan grensattributen te definiëren in een beknopte tag van één regel. Dit verkorte formaat helpt bij het minimaliseren van de regels code en deskundige ontwikkelaars geven de voorkeur aan dit formaat. Het gebruik van het steno-formaat wordt aanbevolen als de randdefinitie eenvoudig en redelijk gestandaardiseerd is. Als u echter elke kant van de rand in een andere stijl moet markeren, moet u zich houden aan het formaat van het definiëren van individuele tags.
De volgende code wordt gebruikt:
border-style: onderbroken
randkleur: groen
border-breedte: 5px
border: gestreepte groene 5px
Punten om in gedachten te houden bij het ontwerpen van randen in CSS
Gebruik niet te veel randen op een pagina, dit kan afleidend zijn en het moeilijk maken voor de gebruiker om zich te concentreren.
Het is belangrijk om consistentie in randstijlen en kleuren te behouden. Elementen op hetzelfde hiërarchieniveau op een pagina moeten een vergelijkbare randstijl en breedte hebben voor uniformiteit. Als paragraaf wordt gedefinieerd met een effen rand en een breedte van 5 px, behoud dit formaat in alle andere paragraaf elementen tijdens het ontwerp van de website.
verschil tussen overbelasting en overbelasting van de methode
Blijf bij één stijl van tagdefinities. Sommige ontwikkelaars zijn vertrouwd met definities van snelkoppelingen waarbij alle waarden aan een enkele zijn toegewezen grens label. Anderen geven de voorkeur aan een expliciete lijst van alle tags voor breedte, kleur en stijl. De conventie is dat wanneer uitgebreide randversieringen op een pagina nodig zijn, de individuele tags afzonderlijk worden vermeld. Dit helpt bij het debuggen van dergelijke aangepaste randdefinities. In normale gevallen is een definitie van een snelkoppeling voldoende.
Ik hoop dat je de informatie die je zocht op CSS-grenzen hebt gevonden, en wHiermee komen we aan het einde van dit Borders in CSS-artikel.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om te werken met back-end en front-end webtechnologieën. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van de blog 'Border in CSS' en we nemen zo spoedig mogelijk contact met u op.