VerticalLine (rand-links: dik vol #ff0000; )

Om een ​​verticale lijn toe te voegen, moet u een hr maken.

Wanneer u nu een verticale lijn maakt, verschijnt deze in het midden van de pagina:

Om nu te wijzen waar u wilt, kunt u deze code gebruiken:

Dit zal het aan de linkerkant plaatsen, u kunt het omkeren om het aan de rechterkant te plaatsen.

Om een ​​verticale lijn midden in het midden te maken, gebruik je:

positie: absoluut; links: 50%

Ik heb een combinatie van de voorgestelde "hr"-code gebruikt en dit is hoe mijn code eruit ziet:

Ik heb zojuist de waarde van de "linker" pixel gewijzigd om erin te passen. (Ik heb een verticale lijn gebruikt om inhoud op mijn webpagina samen te stellen en daarna heb ik deze verwijderd.)

verticale lijn recht naar div

verticale lijn links van de div

Afbeeldingen hebben verschillende interessante eigenschappen die kunnen worden afgeleid door directe transformatie (18) toe te passen in eenvoudige fysieke situaties. Voor ons huidige doel hebben we de volledige algemeenheid van formule (18) niet nodig; het effect dat we willen laten zien, kan zelfs worden aangetoond als alle parameters die de camerapositie kenmerken, gelijk zijn aan nul, behalve één hellingshoek. In overeenstemming hiermee zullen we uitdrukking (18) nemen en transformeren in een eenvoudigere vorm:

We onderzoeken de eigenschappen van het beeld van een verticale lijn. De verticale lijn van een object wordt getrokken door het punt van het object

waar zijn de coördinaten van het punt waarop de lijn het vloervlak snijdt, en z is een vrije parameter, waarvan de waarde wordt genomen uit alle reële getallen. Als we v substitueren in formule (27) en de vrije parameter z uitsluiten van de twee vergelijkingen, krijgen we de vergelijking van een rechte lijn op het beeldvlak

Een analyse van deze eenvoudige vergelijking levert een aantal interessante observaties op. Het belangrijkste is dat het snijpunt met de Z-as onafhankelijk is van de positie van de verticale lijn zelf; het hangt er alleen van af of de lijn daadwerkelijk verticaal is. Dus, voor een bepaalde camerageometrie, gaan de afbeeldingen van alle verticale lijnen door één punt van de verticale schuif, waarvan de coördinaten in de afbeelding gelijk zijn aan .

Rijst. 10.4. Verdwijnpunten.

Rijst. Figuur 10.4 illustreert dit effect in een afbeelding van een enkele kubus, genomen met een camera die erg naar beneden is gekanteld. De lezer kan andere eigenschappen van vergelijking (28) controleren die met intuïtie overeenkomen. Als het bijvoorbeeld wordt verhoogd van nul naar 90°, wordt het verticale verdwijnpunt naar het midden van het beeldvlak verplaatst en wordt de helling van de lijn vlakker. Evenzo wordt dit effect voor elke camerahoek meer uitgesproken naarmate de verticale lijnen van het onderwerp naar de periferie van het gezichtsveld bewegen (d.w.z. wanneer

Wordt groot vergeleken met ). Het verticale verdwijnpunt kan dus alleen worden bepaald aan de hand van de cameraparameters en het legt een eenvoudige noodzakelijke voorwaarde op aan afbeeldingen van verticale lijnen.

10.5.4. HORIZONTALE LIJNEN EN VERDWIJNENDE PUNTEN

Laten we als laatste voorbeeld van het gebruik van perspectieftransformaties eens kijken naar enkele eigenschappen van het beeld van een horizontale lijn. Voor de eenvoud beschouwen we het beeld van een objectlijn die op het vloervlak van het globale coördinatensysteem ligt. Elk punt van het object dat op zo'n lijn ligt, heeft waar en b - respectievelijk de helling van de lijn en de lengte van het segment afgesneden door deze lijn op de coördinatenas Y. Omdat we een afbeelding willen maken van een object dat zich bevindt op de vloer, is het beter dat de camera boven de vloer wordt geheven en mogelijk naar beneden wijst. In overeenstemming hiermee nemen we de geometrische parameters van de camera in de vorm en laten we de waarde positief en - negatief zijn. Voor deze parameters wordt directe transformatie (18) als volgt vereenvoudigd:

Na vervanging in formules (29) en uitsluiting van de vrije parameter x van de twee vergelijkingen, verkrijgen we de vergelijking van een rechte lijn op het beeldvlak

Er zijn geen bijzonder eenvoudige eigenschappen van de helling van deze grafische lijn of de snijpunten ervan met de coördinaatassen; houd echter rekening met het snijpunt van deze beeldlijn met de horizonlijn van dit beeld. De horizonlijn van elk beeld wordt gedefinieerd als het snijpunt van het beeldvlak met een vlak door het midden van de lens evenwijdig aan de vloer. Zoals te zien is in het zijaanzicht van Fig. 10.5 heeft de vergelijking van de horizonlijn (in beeldcoördinaten) de vorm Het is duidelijk dat de X-coördinaat van het snijpunt van de beeldlijn (30) met de horizonlijn wordt bepaald door uitdrukking (30) gelijk te stellen aan de waarde - . De resulterende vergelijking oplossen

met betrekking tot de coördinaat van het snijpunt met de horizon, vinden we dat

Dit resultaat kan ook worden verkregen door uitdrukking (29) in de eerste vergelijking te vervangen en door te gaan naar de limiet aangezien x naar oneindig neigt. Daarom wordt het snijpunt met de horizon terecht het horizontale verdwijnpunt of het verdwijnpunt met de horizon van het beeld van een bepaalde lijn genoemd; dit is de limiet waartoe het punt van het beeld neigt terwijl het punt van het object langs een rechte lijn naar oneindig beweegt

Rijst. 10.5. Naar de berekening van de horizonlijn.

Over expressie kunnen we een aantal interessante opmerkingen maken (31). Merk allereerst op dat het verdwijnpunt niet afhangt van de hoogte van de camera boven het vlak dat de lijn van het object bevat. Ten tweede is het verdwijnpunt niet afhankelijk van de overdrachtsparameter b in de objectlijnvergelijking. Daarom kunnen we de belangrijke conclusie trekken dat twee lijnen evenwijdig aan het vloervlak hetzelfde verdwijnpunt hebben als en alleen als ze evenwijdig aan elkaar zijn. Stel ten slotte dat we twee orthogonale objectlijnen hebben die op een vlak evenwijdig aan de vloer liggen. Laten hun hellingen zijn en hun verdwijnpunten met de horizon coördinaten hebben; en Aangezien deze lijnen orthogonaal zijn, . Daarom verkrijgen we direct uit formule (31)

De twee verdwijnpunten worden soms geconjugeerde verdwijnpunten genoemd.Omdat hun product negatief is, liggen ze altijd aan weerszijden van de middellijn van de afbeelding, zoals weergegeven in Fig. 10.4. Geconjugeerde verdwijnpunten zijn een voorbeeld van hoe een gegeven objectbeperking (namelijk orthogonaliteit) kan worden omgezet in een eenvoudige afbeeldingsbeperking.

Een taak

Voeg een verticale lijn toe aan de zijkant van een alinea met tekst.

Oplossing

Je kunt op verschillende manieren de aandacht van de lezer op de tekst vestigen. Maak bijvoorbeeld de tekst vet, verander de kleur, gebruik een achtergrond, teken een kader. Maar wat als het niet alleen nodig is om de tekst te markeren, maar om het ene tekstblok van het andere te scheiden, om ze in verschillende semantische delen te verdelen? Dit is waar het gebruik van lijnen en opvulling van onschatbare waarde is.

Een tekstblok op een webpagina is heel anders dan zijn gedrukte tegenhanger. Het belangrijkste verschil is de variabele breedte en hoogte van de tekst, die afhankelijk is van de monitorresolutie, de instellingen van het besturingssysteem, de browser en andere soortgelijke zaken. Deze functies geven de lay-out van webpagina's een zekere complexiteit, maar geven tegelijkertijd aanleiding tot specifieke technieken die het proces van het maken van een site aanzienlijk vereenvoudigen. Laten we eens kijken hoe stijlen kunnen worden gebruikt om een ​​aangepaste regel rond tekst te maken, ongeacht de grootte.

Om lijnen te maken, gebruikt u de CSS-eigenschap - border , die een rand rond het blok instelt. In speciale gevallen, om een ​​lijn aan slechts één kant van een element te maken, worden de eigenschappen border-bottom , border-top , border-left en border-right gebruikt, die respectievelijk de lijn naar onder, boven, links en rechts instellen .

De waarden van deze eigenschappen worden vermeld gescheiden door een spatie en stellen onmiddellijk het lijntype, de dikte en de kleur in. De lijnstijl kan een van de acht waarden aannemen, zoals weergegeven in Fig. 1, en de dikte wordt in de regel in pixels aangegeven.

Rijst. 1. Lijntypen

Voorbeeld 1 toont het maken van een verticale lijn naast tekst.

Voorbeeld 1: Verticale lijn links van tekst

HTML5 CSS 2.1 IE Cr Op Sa Fx

Door de processen in een kleine groep te bestuderen, die de informele microstructuur van de samenleving weerspiegelen, vanuit posities dicht bij de Gestaltpsychologie en psychoanalyse, toonde J. Moreno aan dat dwangmatigheid stress geeft, waardoor het subjectieve en objectieve vermengt, zijn interne motivaties overbrengt naar de echte verbindingen van dingen.

Om de oorspronkelijke stijl van de alinea ongewijzigd te laten, is een nieuwe klassenlijn geïntroduceerd, die een verticale lijn bij de alinea plaatst. Deze klasse stelt daarnaast ook de verschuiving in van 20 pixels vanaf de linkerrand van het venster naar de tekst met behulp van de eigenschap margin-left en de inspringing van de regel naar de tekst door opvulling-left , zonder dat de tekst de lijn te strak. Het resultaat wordt getoond in fig. 2.

Om enkele van de belangrijkste elementen van de site te benadrukken, zou het geen kwaad kunnen om allerlei CSS-stijlen en eigenschappen te gebruiken die hiervoor zijn voorzien. Natuurlijk kunt u zich niet bijzonder druk maken over de tekst en deze bijvoorbeeld vet of cursief markeren, de achtergrond wijzigen of een kader rond de tekst maken. Maar niet altijd is een van de gepresenteerde methoden geschikt. Stel dat u een tekst hebt die moet worden gescheiden vanwege de specifieke kenmerken van de semantische lading. Dit is waar HTML- en CSS-eigenschappen binnenkomen.

Hoe maak je een regel in tekst met CSS

Om ons doel te bereiken, moeten we ons wenden tot style.css-bestand, door er de corresponderende eigenschap in te schrijven grens. Hierdoor verschijnt er een regel boven, onder of aan een bepaalde kant van de tekst. Op hun beurt zijn er verschillende eigenschappen die verantwoordelijk zijn voor het weergeven van de regel, namelijk:

- grens boven– een horizontale lijn boven de tekst;

- grens-rechts- een verticale lijn rechts van de tekst;

- border-bottom– een horizontale lijn onder de tekst;

- grens-links is de verticale lijn aan de linkerkant.

Hoe maak je een regel in html

Met behulp van CSS-eigenschappen kunt u alle benodigde waarden instellen door de HTML-code te bewerken. Ga hiervoor naar het administratieve gedeelte van de site. Selecteer een van de gepubliceerde materialen, schakel de teksteditor over naar de HTML-codebewerkingsmodus en voeg CSS-eigenschappen toe. Een voorbeeld is hieronder te zien.

Korte uitleg van commando's

- breedte– lijnlengte;

- solide- ononderbroken lijn;

- gestippeld- stippellijn.

Voor een beter begrip van stijlen raad ik aan dit te lezen.

U moet begrijpen dat tijdens het aanbrengen van wijzigingen in de sitecode, de eigenschappen die het type lijn, de dikte en kleur bepalen, worden vermeld met een spatie.

Deze methode heeft verschillende voordelen:

Een uitgebreid scala aan mogelijkheden waarmee je bijna elke lijn kunt maken.

Gemakkelijk om alle noodzakelijke wijzigingen rechtstreeks in de HTML-code aan te brengen. Dit vereenvoudigt de taak voor onervaren sitebouwers aanzienlijk.

Hoe maak je een rechte horizontale lijn met een HTML-tag

---

Het eerste waar ik uw aandacht op wil vestigen is dat deze tag, ondanks alle subtiliteiten en principes van html, geen afsluitende tag heeft. Het kan overal in de html-code worden gebruikt, tussen tags En

.

Tag attributen

---

- breedte- is verantwoordelijk voor de lengte van de lijn. Het kan zowel als een percentage als als pixels worden opgegeven.

- maat- lijndikte. Gespecificeerd in pixels.

- kleur– bepaalt de kleur van de lijn.

- uitlijnen– attribuut dat verantwoordelijk is voor lijnuitlijning. Op zijn beurt solliciteert het team op hem.