. Voor elk dergelijk element geldt
CSS-eigenschappen:
opvulling,
marge,
grens,
breedte en anderen. De breedte van het rechthoekige blok wordt gespecificeerd door de eigenschap
breedte, vervolgens wordt elk element versierd met velden die zijn afgebakend met behulp van het attribuut
grens. Ten slotte kan een paginacomponent externe marges of opvulling hebben:
marge, waardoor het wordt gescheiden van een ander blok.
Syntaxis van CSS-opvullingseigenschappen
De makers van Cascading Style Sheets hebben verschillende opties geboden voor het schrijven van een attribuut om velden in te stellen. Je kunt met acht een leeg gebied binnen een blok maken op verschillende manieren! In onderstaande tabel staan voorbeelden per optie en wordt deze kort toegelicht.
Gebruiksvoorbeeld
| Uitleg
|
vulling: 15px;
| Als het attribuut wordt gevolgd door een enkel getal, betekent dit dat het element aan alle zijden gelijke marges heeft. Dossier px gaat ervan uit dat de waarde is opgegeven in pixels. Dat wil zeggen dat het blok uiteindelijk velden van 15 pixels zal hebben.
|
vulling: 1836px;
| De eerste van de twee cijfers geeft aan dat de verticale marges 18 pixels zullen zijn, de zijmarges zullen twee keer zo groot zijn: 36 pixels.
|
vulling: 6px 12px 18px;
| Het middelste getal is de waarde van de marges aan de zijkanten (links en rechts), de andere twee zijn de verticale marges. In dit geval verwijst het eerste getal (6 px) naar de bovenmarge en het laatste (18 px) naar de onderste.
|
opvulling: 6 px 12 px 18 px 36 px;
| CSS-eigenschapsrecordformulier opvulling, dat vier cijfers bevat, stelt u in staat marges aan alle zijden van het blok in te stellen. Numerieke waarden worden opeenvolgend toegepast op de bovenmarge en vervolgens met de klok mee naar rechts, onder en links.
|
opvulling links: 14 px;
| Naschrift links spreekt voor zich: de marge wordt alleen links van het element ingesteld.
|
opvulling rechts: 14 px;
| Vergelijkbaar met de vorige opnameoptie: het veld wordt alleen aan de rechterkant van het blok gemaakt.
|
opvulling bovenaan: 14 px;
| De invoer definieert het veld bovenaan.
|
opvulling-bodem: 14 px;
| De invoer definieert het onderstaande veld.
|
Opgemerkt moet worden dat de standaardopvulling in CSS nul is. Dit attribuut is niet erfelijk, wat betekent dat het voor elk blok moet worden geïnstalleerd. Naast de gebruikelijke en begrijpelijke pixels wordt ook de breedte van de lege ruimte rond de blokken gespecificeerd relatieve eenheden. In de bovenstaande voorbeelden kunt u bijvoorbeeld 5% schrijven, waardoor de breedte van het veld automatisch door de browser wordt berekend.
Hoe het pand gebruiken?
We hebben dus de formulieren voor het schrijven van een attribuut besproken, maar hoe gebruik je dit op een HTML-pagina? De eerste optie is “mooier”, als alles erop aankomt CSS-technologieën, is niet in HTML geschreven, maar erin geplaatst apart bestand met de juiste extensie.
De tweede optie is om rechtstreeks naar de tag te schrijven<stijl>. CSS opvulling in dit geval wordt het als volgt gespecificeerd:
<
divstijl = "vulling: 22px">
De lay-outontwerper kiest hoe het attribuut wordt geschreven. In ieder geval moet u alle manieren kennen om de eigenschap te gebruiken om velden te definiëren, zodat u deze indien nodig kunt gebruiken.
Blokken in CSS vertegenwoordigen onafhankelijk voorwerp, met de vorm van een rechthoek. Alle HTML-elementen- documenten vertegenwoordigen onafhankelijke blokken, die elke vorm van informatie bevatten, of het nu tekst of afbeelding (inhoud) is. Bijvoorbeeld: voor een element is de blokinhoud tekst en voor een element -tekst.
Rond de inhoud, in het blok, kunnen zich lege, onbezette velden bevinden (vulling), wat de inhoud van het blok overigens een aantrekkelijker uiterlijk geeft. Direct voorbij de velden ligt de blokgrens (grens), die een bepaalde dikte, kleur en stijl kunnen hebben. Het blok kan inkepingen hebben (marge) die. vrije ruimte rond de grenzen. Marges, randen en opvulling zijn niet inbegrepen in de breedte van het blok; de breedte wordt alleen ingesteld voor de inhoud ervan.
Velden. Eigenschappen MARGE-TOP, MARGE-RECHTS,
MARGE-ONDER, MARGE-LINKS
Deze eigenschappen bepalen de grootte van de marges rond het blok; waarden worden gespecificeerd in lengte-eenheden of percentages:
- marge-top- geeft de breedte van de bovenmarge aan;
- marge-rechts- geeft de breedte van de rechtermarge aan;
- marge-bodem- geeft de breedte van de ondermarge aan;
- marge-links- geeft de breedte van de linkermarge aan.
Een voorbeeldregel voor een alinea met marges van 25 px aan de rechter- en linkerkant zou er als volgt uitzien:
P(
marge bovenaan: 0px;
marge-rechts: 25px;
marge-onder: 0px;
marge-links: 25px;
}
MARGE eigendom
Deze eigenschap is een afkorting, die wordt gebruikt om de hierboven genoemde eigenschappen af te korten. Eigendom marge kan een aantal waarden hebben van één tot vier:
- als er slechts één is opgegeven, zijn de marges aan alle zijden van het blok hetzelfde;
- als er twee waarden worden gegeven, geeft de eerste de velden boven en onder aan, de tweede - naar rechts en links (de waarden van elk paar zijn gelijk);
- als er drie waarden worden gegeven, geeft de eerste de bovenmarge aan, de tweede - links en rechts, de derde - onderkant;
- als alle vier de waarden worden gegeven, dan is de eerste de bovenkant, dan de rechtermarge, dan de onderkant en de laatste de linkerkant.
We schrijven de regel:
p (marge: 15px 5px 20px )
In dit voorbeeld is de bovenmarge van de alinea 15px, de rechter- en linkermarge 5px elk, de ondermarge is 20px.
Grenzen. Eigenschappen BORDER-BOVEN-BREEDTE, BORDER-RECHTS-BREEDTE, BORDER-ONDER-BREEDTE, BORDER-LINKS-BREEDTE
Bij CSS-hulp U kunt de tekst van een alinea in een kader plaatsen, zoals dit bijvoorbeeld op de pagina's van de site gebeurt in de vorm van voorbeelden. Deze eigenschappen bepalen alleen de dikte van de blokranden voor de bovenste, rechter, onderste en linker segmenten. Waarden kunnen worden gespecificeerd met behulp van trefwoorden:
- dun- dun;
- medium- gemiddelde dikte (standaard gebruikt);
- dik- dik.
Waarden kunnen ook in willekeurige lengte-eenheden worden opgegeven; percentagewaarden zijn niet gespecificeerd. De regel kan als volgt worden geschreven:
P(
rand-boven-breedte: 1px;
rand-rechts-breedte: 2px;
rand-onder-breedte: medium;
rand-links-breedte: dun;
}
BORDER-WIDTH eigenschap
Dit is een verkorte eigenschap, waarden worden op dezelfde manier ingesteld als de eigenschap. De onderstaande regel komt overeen met het hierboven geschreven voorbeeld:
p (randbreedte: 1px 2px medium dun)
BORDER-COLOR eigenschap
Deze eigenschap is ook een afkorting, deze wordt gebruikt om de grenzen van het blok in te stellen, de waarden zijn:
- trefwoord (rood, geel, zwart, blauw, etc.);
- hexadecimale kleurcode (00FFFF, 000000, FFFFFF, enz.);
- decimale code naar RGB (kleur: rgb (120, 25, 182));
- transparant- transparante rand.
Als je moet instellen verschillende kleuren elk van de vier grenzen, dan zijn de volgende eigenschappen van toepassing:
- rand-top-kleur- kleur van de bovenrand;
- rand-rechts-kleur- rechterrandkleur;
- rand-onder-kleur- kleur van de onderrand;
- grens-links-kleur- linkerrandkleur.
De regel voor een dergelijk voorbeeld zou er als volgt uitzien:
P(
rand-top-kleur: blauw;
rand-rechts-kleur: 000000;
rand-onder-kleur: FF0000;
rand-links-kleur: rgb (25, 125, 205);
}
BORDER-STIJL eigendom
De eigenschap is een afkorting en specificeert het type lijnen dat de grenzen van het blok vormt. Voor de taak verschillende soorten lijnen, voor blokgrenzen worden individuele eigenschappen gebruikt:
- rand-top-stijl- type lijn van de bovenrand;
- border-right-stijl- rechterrandlijntype;
- rand-onder-stijl- type lijn van de onderrand;
- border-links-stijl- linkergrenslijntype.
Eigenschapswaarden zijn trefwoorden:
- geen- geen rand (standaard gebruikt);
- gestippeld- de rand wordt gevormd door een lijn bestaande uit stippen;
- gestormd- stippellijn;
- stevig- ononderbroken lijn;
- dubbele- dubbele ononderbroken lijn;
- groef- de rand wordt weergegeven als een “ingedrukte” lijn (simuleert het volume);
- nok- de rand wordt weergegeven als een “convexe” lijn;
- inzet- de rand wordt zo weergegeven dat het hele blok er depressief uitziet;
- begin- het hele blok ziet er bol uit.
Laten we naar voorbeelden kijken:
Korte eigendom rand-stijl Hiermee kunt u de stijlwaarden voor alle vier de randsegmenten inkorten, op dezelfde manier ingesteld als voor de . We schrijven een regel voor een blok met randen gemaakt door een stippellijn:
p (randstijl: gestippeld)
Eigenschappen BORDER-BOVEN, BORDER-RIGHT, BORDER-BOTTOM, BORDER-LINKS
Dit zijn verkorte eigenschappen waarmee u de waarden van eigenschappen kunt afkorten grensbreedte,
rand-stijl En randkleur, kijk naar het voorbeeld:
P(
rand bovenaan: 1px effen rood;
rand-rechts: 3px effen rood;
rand-onder: 1px effen rood;
border-left: 3px effen rood
}
De randen van de alinea zijn rood, gemaakt met een ononderbroken lijn. De randdikte aan de boven- en onderkant is 1px, rechts en links - 3px.
GRENS eigendom
Deze eigenschap is een afkorting en wordt gebruikt om parameters in te stellen voor alle vier randsegmenten: breedte, kleur en stijl. Laten we een voorbeeldregel schrijven:
p (rand: 1px effen blauw)
De rand rond deze paragraaf zal aan alle kanten hetzelfde zijn, getekend met een ononderbroken lijn blauw 1px dik.
Inspringingen. Eigenschappen PADDING-TOP, PADDING-RECHTS,
PADDING-ONDER, PADDING-LINKS
Met deze eigenschappen kunt u de inspringgroottes voor elke zijde afzonderlijk instellen; de waarden worden opgegeven in lengte-eenheden of als een percentage:
- opvulling-top- breedte van de bovenmarge;
- opvulling-rechts- breedte van de rechtermarge;
- opvulling-bodem- breedte van de ondermarge;
- opvulling-links- breedte van de linkermarge.
PADDING eigendom
Dit is een verkorte eigenschap die wordt gebruikt om de hierboven beschreven eigenschappen in te korten. Eigendom opvulling kan één tot vier waarden hebben, die op dezelfde manier worden toegewezen als voor (marges) en (grenzen). Laten we deze regel schrijven:
P(
achtergrondkleur: wit;
rand: 2px blauw gestippeld;
opvulling: 10px 25px
}
Laten we aan de hand van het voorbeeld van de resulterende alinea kijken hoe inspringingen werken:
De positie waarin de site zich bevindt, is afhankelijk van hoe geoptimaliseerd de site is. zoekmachines zal het in de zoekresultaten weergeven. Hoe hoger deze positie, hoe meer bezoekers u ontvangt van zoekmachines. Een belangrijke stap Optimalisatie is het vullen van de site met hoogwaardige, unieke inhoud. Het is niet nodig om interessante artikelen over uw onderwerp uit andere bronnen te kopiëren of te herhalen wat al beschikbaar is op het World Wide Web.
Op dit punt geloof ik dat de eerste kennismaking met trapsgewijze tafels CSS-stijlen Je kunt het zelf afmaken en beginnen. Deze kennis is voldoende om te beginnen, dus ga je gang en verover de uitgestrektheid van hyperspace.
Waar je geen website zonder kunt maken:
∼
∼
Veel mensen zijn geïnteresseerd in: ∼
In dit artikel vertel ik je graag hoe je deze correct plaatst velden(vulling) en inkeping(marge) in CSS.
Laten we allereerst de definitie van marges en opvulling onthouden volgens de W3C-specificatie. In het doosmodel zijn de marges de afstand tussen de inhoud en de rand van de doos. En opvulling is de afstand tussen de rand van een blok en de rand van een aangrenzend of bovenliggend element.
Als de rand en achtergrond van het element dus niet zijn gespecificeerd, is er geen verschil. Gebruik de eigenschap opvulling of marge om de inspringingen in te stellen, maar op voorwaarde dat de breedte (breedte) en hoogte (hoogte) van het element niet zijn gespecificeerd en het algoritme voor het berekenen van inhoudsgroottes met behulp van box-sizing-eigenschappen.
Houd er in ieder geval rekening mee dat marges wel of niet meegenomen kunnen worden in de breedte of hoogte van het element. Inspringingen worden altijd buiten het element geplaatst.
Laten we nu eens kijken hoe we de marges en de ruimte tussen de elementen correct kunnen plaatsen. Laten we het volgende blok als voorbeeld nemen.
Dit is het nieuwsblok. Het bestaat uit een titel, een lijst met nieuws en een link 'Meer nieuws'. Laten we ze de volgende klassennamen geven: news__title, news__list en news__more-link.
Omdat elk van deze elementen dezelfde linker- en rechtermarge heeft, is het beter om de marges in te stellen op het bovenliggende blok in plaats van de linker- en rechtermarge voor elk element afzonderlijk in te stellen.
Nieuws (opvulling: 20px 25px; )
Als u dus de waarde van de velden rechts en links moet wijzigen, moet u dit doen op één plek. En als je een nieuw element toevoegt aan het nieuwsblok, zal dat al het geval zijn vereiste streepjes links en rechts.
Het komt vaak voor dat alle elementen binnen een blok links en rechts dezelfde opvulling hebben, behalve één element, dat bijvoorbeeld vanwege de achtergrond helemaal geen opvulling zou moeten hebben. In dit geval kunt u een negatieve opvulling voor het element instellen. Dan hoef je voor andere elementen geen velden binnen het blok te verwijderen.
Nu moet u de verticale marges tussen elementen instellen. Om dit te doen, moet u bepalen welke van de elementen dat is verplicht. Uiteraard kan een nieuwsblok niet bestaan zonder een nieuwslijst; tegelijkertijd mag er geen “Ander nieuws”-link zijn; deze kan bijvoorbeeld ook worden verwijderd als het ontwerp wordt gewijzigd.
Hiermee rekening houdend, hebben we de inspringing onderaan ingesteld voor de titel, en de inspringing bovenaan voor de link ‘Ander nieuws’.
Nieuws__titel ( marge-onder: 10px; ) .nieuws__meer-link ( marge-boven: 12px; )
We zouden hetzelfde externe resultaat kunnen bereiken door opvulling aan de boven- en onderkant van de nieuwslijst toe te voegen.
Nieuws__lijst ( marge: 10px 0 12px 0; )
Nu moet u de inspringingen tussen afzonderlijke nieuwsitems instellen. Houd er wederom rekening mee dat het aantal nieuwsberichten kan variëren en dat er slechts één nieuwsbericht vermeld staat.
U kunt een bovenste inspringing instellen voor elk nieuws behalve het eerste, of een onderste inspringing voor elk nieuws behalve het laatste. De eerste optie verdient de voorkeur omdat de:first-child pseudo-selector is toegevoegd in de CSS 2.1-specificatie en bredere ondersteuning heeft, in tegenstelling tot de:last-child pseudo-selector, die alleen is toegevoegd in de CSS 3.0-specificatie.
Nieuws__lijst-item ( marge-top: 18px; ) .news__list-item:eerste-kind ( marge-top: 0; )
Door de juiste plaatsing van marges en inspringingen kunt u dus flexibel het uiterlijk van elk blok wijzigen zonder wijzigingen aan te brengen in de stijlen en zonder het ontwerp te verstoren. Het belangrijkste is om te bepalen welke blokelementen de belangrijkste zijn ( verplicht), en welke optioneel.
Soms kunnen we er niet op vertrouwen vereiste elementen. We hebben bijvoorbeeld een pop-upvenster waarin een titel en tekst kunnen worden weergegeven. Bovendien is er in sommige gevallen mogelijk geen tekst, en in sommige gevallen is er mogelijk geen titel. Dat wil zeggen dat beide elementen optioneel zijn.
In dit geval kunt u gebruik maken van volgende manier inspringingsopdrachten.
Popup__header + .popup__text ( marge bovenaan: 15px; )
Dan verschijnt de inspringing alleen als beide elementen worden gebruikt. In het geval dat alleen de titel of alleen de tekst wordt weergegeven, zal er geen extra inspringing plaatsvinden.
Instortende verticale marges
Een andere nuance die niet iedereen kent, heeft betrekking op de verticale ruimtes tussen aangrenzende blokken. De definitie van inspringen die ik hierboven gaf, zegt dat inspringen de afstand tussen twee is grenzen huidige en aangrenzende blokken. Als we dus twee blokken onder elkaar plaatsen en één ervan een ondermarge van 30 px geven en de andere een bovenmarge van 20 px, zal de marge ertussen niet 50 px zijn, maar 30 px.
Dat wil zeggen dat de inkepingen elkaar zullen overlappen en dat de inkeping tussen de blokken gelijk zal zijn aan grootste inkeping, en niet de hoeveelheid inspringing. Dit effect wordt ook wel ‘instorting’ genoemd.
Houd er rekening mee dat horizontale vulling, in tegenstelling tot verticale, ‘storten’ niet in, maar worden samengevat. Ook de velden (padding) worden opgeteld.
Omdat we weten wat het inspringen van inspringingen is, kunnen we deze functie in ons voordeel gebruiken. Als we bijvoorbeeld de koppen en tekst in een artikel moeten laten inspringen, dan stellen we voor de kop van het eerste niveau de onderste inspringing in op 20px, en voor de kop van het tweede niveau is de bovenste inspringing 20px en de onderste 10px, en voor voor alle paragrafen stellen we de bovenste inspringing in op 10px.
H1 ( marge-onder: 24px; ) h2 ( marge-boven: 24px; marge-onder: 12px; ) p ( marge-boven: 12px; )
Nu kan de h2-kop na de h1-kop of na de paragraaf worden geplaatst. In ieder geval zal de bovenmarge niet groter zijn dan 24px.
Algemene regels
Samenvattend wil ik graag de regels opsommen die ik volg bij het rangschikken van marges en inspringingen.
- Als aangrenzende elementen dezelfde marges hebben, is het beter om ze in te stellen op de bovenliggende container in plaats van op de elementen.
- Wanneer u inspringingen tussen elementen instelt, moet u overwegen of het element verplicht of optioneel is.
- Voor een lijst met vergelijkbare elementen moet u er rekening mee houden dat het aantal elementen kan variëren.
- Houd rekening met verticale opvulling en gebruik deze functie waar u er baat bij heeft.
Tags: tags toevoegen
De afstand tussen blokken is gelijk aan de grootste van de waarden 
Rijst. 1. Verbeterde webformulieren met HTML5