VerticalLine (kant-venstre: tykk, solid # ff0000;)

For å legge til en vertikal linje, må du opprette en hr.

Nå, når du tegner en vertikal linje, vil den vises midt på siden:

Nå, for å peke dit du vil, kan du bruke denne koden:

Dette vil plassere den til venstre, du kan snu den for å plassere den til høyre.

For å lage en vertikal linje midt i midten, bruk:

Posisjon: absolutt; venstre: 50 %;

Jeg brukte en kombinasjon av den foreslåtte koden "hr", og dette er hvordan koden min ser ut:

Jeg endret nettopp verdien på den "venstre" pikselen for å passe til den. (Jeg brukte en vertikal linje for å komponere innholdet på nettsiden min, og så fjernet jeg den.)

Vertikal linje rett til div

Den vertikale linjen til venstre for div

Bilder har flere interessante egenskaper som kan utledes ved å bruke direkte transformasjon (18) i enkle fysiske situasjoner. For vårt nåværende formål trenger vi ikke den fullstendige generaliteten til formel (18); effekten vi ønsker å vise kan demonstreres selv i tilfellet når alle parametere som karakteriserer posisjonen til kameraet er lik null, med unntak av en tiltvinkel. Følgelig vil vi ta og transformere uttrykk (18) til en enklere form:

La oss undersøke egenskapene til bildet av den vertikale linjen. Den vertikale linjen til objektet er tegnet av punktet til objektet

hvor koordinatene til punktet der linjen skjærer gulvplanet, og z er en fri parameter, hvis verdi er tatt blant alle reelle tall. Hvis vi erstatter v i formel (27) og ekskluderer den frie parameteren z fra de to likningene, får vi likningen til en rett linje på bildeplanet

Analyse av denne enkle ligningen gir en rekke interessante observasjoner. Det viktigste er at z-skjæringspunktet er uavhengig av posisjonen til selve den vertikale linjen; det avhenger bare av om linjen faktisk er vertikal. For en gitt kamerageometri passerer altså bildene av alle vertikale linjer gjennom ett punkt i den vertikale skoof, hvis koordinater er like i bildet.

Ris. 10.4. Forsvinningspunkter.

Ris. 10.4 illustrerer denne effekten i et bilde av et enkelt rektangulært parallellepiped tatt med et kamera vippet nedover Leseren kan sjekke andre egenskaper ved ligning (28) som stemmer overens med intuisjon. For eksempel, hvis du øker fra null til 90 °, flyttes det vertikale forsvinningspunktet til midten av bildeplanet, og helningen på linjen blir flatere. På samme måte, for en gitt kameravippevinkel, blir denne effekten mer uttalt når de vertikale linjene til objektet beveger seg mot periferien av synsfeltet (dvs.

Blir stor i forhold til). Så det vertikale forsvinningspunktet kan bare bestemmes av parametrene til kameraet, og det pålegger bildene av vertikale linjer en enkel nødvendig betingelse.

10.5.4. HORISONTALE LINJER OG HORISONTALE VARIASJONSPUNKTER

Som et siste eksempel på bruken av perspektivtransformasjoner, la oss undersøke noen av egenskapene til bildet av en horisontal linje. For enkelhets skyld vil vi vurdere et bilde av en objektlinje som ligger på gulvplanet til det globale koordinatsystemet. Ethvert punkt på et objekt som ligger på en slik linje har henholdsvis hvor og b er helningen til linjen og lengden på segmentet avskåret av denne linjen på Y-koordinataksen. Siden vi ønsker å ta et bilde av et objekt som befinner seg på gulvet er det bedre at kameraet er hevet over gulvet og kanskje peker nedover. I samsvar med dette vil vi ta de geometriske parametrene til kameraet i skjemaet og la verdien være positiv og negativ. For disse parameterne er direkte transformasjon (18) forenklet som følger:

Etter substitusjon i formler (29) og eliminering av den frie parameteren x fra de to ligningene får vi ligningen til en rett linje på bildeplanet

Det er ingen spesielt enkle egenskaper verken for helningen til denne grafiske linjen eller for punktene i dens skjæringspunkt med koordinataksene; vurder imidlertid skjæringspunktet mellom denne bildelinjen og horisontlinjen til dette bildet. Horisontlinjen til ethvert bilde er definert som skjæringspunktet mellom bildeplanet og et plan som går gjennom midten av linsen parallelt med gulvet. Som vist i sideriss på fig. 10.5, har ligningen for horisontlinjen (i bildekoordinater) formen Åpenbart er X-koordinaten til skjæringspunktet mellom bildelinjen (30) og horisontlinjen bestemt ved å likestille uttrykk (30) til verdien -. Løse den resulterende ligningen

i forhold til koordinaten til skjæringspunktet med horisonten, finner vi det

Dette resultatet kan også oppnås ved å erstatte uttrykk (29) i den første ligningen og gå til grensen da x har en tendens til uendelig. Følgelig kalles skjæringspunktet med horisonten fortjent det horisontale forsvinningspunktet eller forsvinningspunktet med horisonten til bildet av denne linjen; dette er grensen som punktet i bildet har en tendens til mens punktet til objektet beveger seg til uendelig langs en rett linje

Ris. 10.5. Til beregning av horisontlinjen.

Vi kan komme med noen interessante bemerkninger om uttrykk (31). Vær først oppmerksom på at forsvinningspunktet er uavhengig av kameraets høyde over planet som inneholder objektlinjen. For det andre er forsvinningspunktet uavhengig av overføringsparameteren b i objektlinjeligningen. Derfor kan vi trekke den viktige konklusjonen at alle to linjer parallelt med gulvets plan har samme forsvinningspunkt hvis og bare hvis de er parallelle med hverandre. Til slutt, anta at vi har to ortogonale objektlinjer på et plan parallelt med gulvet. La deres skråninger være og deres forsvinningspunkter med horisonten ha koordinater; og Siden disse linjene er ortogonale,. Derfor, direkte fra formel (31) får vi

To forsvinningspunkter kalles noen ganger konjugerte forsvinningspunkter. Siden produktet deres har en negativ verdi, ligger de alltid på motsatte sider av senterlinjen i bildet, som vist i fig. 10.4. Konjugerte forsvinningspunkter er et eksempel på hvordan en gitt begrensning på objekter (nemlig ortogonalitet) kan konverteres til en enkel begrensning på bilder.

Oppgave

Legg til en vertikal linje på siden av et tekstavsnitt.

Løsning

Du kan trekke leserens oppmerksomhet til teksten på ulike måter. Gjør for eksempel teksten fet, endre fargen, bruk en bakgrunn, tegn en ramme. Men hva om du ikke bare trenger å velge teksten, hvor mye skal du skille en tekstblokk fra en annen, for å dele dem inn i forskjellige semantiske deler? Det er her bruken av linjer og innrykk rett og slett er uvurderlig.

En tekstblokk på en nettside er veldig forskjellig fra den trykte motparten. Hovedforskjellen er den variable bredden og høyden på teksten, som avhenger av skjermoppløsningen, operativsysteminnstillingene, nettleseren og andre lignende ting. Disse funksjonene legger litt kompleksitet til oppsettet av nettsider, men genererer samtidig spesifikke teknikker som i stor grad forenkler prosessen med å lage et nettsted. La oss se på hvordan du kan bruke stiler til å lage en friformlinje rundt tekst, uavhengig av størrelsen.

For å lage linjene brukes CSS-egenskapsgrensen, som setter en kant rundt blokken. I spesielle tilfeller, for å lage en linje på bare den ene siden av et element, brukes egenskapene kant-bunn, kant-topp, kantlinje-venstre og kantlinje-høyre, de setter henholdsvis linjen fra bunnen, toppen, venstre og høyre .

Verdiene til disse egenskapene er oppført atskilt med et mellomrom og angir umiddelbart linjetypen, dens tykkelse og farge. Linjestilen kan være en av åtte verdier, som vist i fig. 1, og tykkelsen er vanligvis spesifisert i piksler.

Ris. 1. Typer linjer

Eksempel 1 viser hvordan du lager en vertikal linje ved siden av teksten.

Eksempel 1. Vertikal linje til venstre for teksten

HTML5 CSS 2.1 IE Cr Op Sa Fx

J. Moreno studerte prosessene i en liten gruppe fra posisjoner nær gestaltpsykologi og psykoanalyse, som gjenspeiler samfunnets uformelle mikrostruktur. reelle sammenhenger av ting.

For å beholde den opprinnelige avsnittsstilen uendret, har en ny linjeklasse blitt introdusert som setter en vertikal linje nær avsnittet. Denne klassen setter i tillegg også forskyvningen på 20 piksler fra venstre kant av vinduet til teksten ved å bruke margin-left-egenskapen og innrykk fra linjen til teksten med padding-venstre, uten den vil teksten berøre linje for stramt. Resultatet er vist i fig. 2.

For å understreke noen spesielt viktige elementer på nettstedet, ville det ikke skade å bruke alle slags CSS-stiler og egenskaper som er gitt for dette. Du trenger selvfølgelig ikke bry deg for mye med teksten og fremheve den, for eksempel med fet skrift eller kursiv, endre bakgrunn eller lage en ramme rundt teksten. Men ikke alltid en av de presenterte metodene er egnet. La oss si at du har en tekst som må skilles på grunn av dens semantiske belastning. Det er her HTML- og CSS-egenskaper kommer inn.

Hvordan lage en linje i teksten ved hjelp av CSS

For å gjennomføre planene våre må vi henvise til style.css-filen ved å skrive den tilsvarende egenskapen i den grense... Dette vil lage en linje over, under eller på en bestemt side av teksten. I sin tur er det flere egenskaper som er ansvarlige for å vise linjen, nemlig:

- border-top- en horisontal linje over teksten;

- grense-høyre- en vertikal linje til høyre for teksten;

- grense-bunn- en horisontal linje under teksten;

- grense-venstre- den vertikale linjen til venstre.

Hvordan lage en linje i html

Ved å bruke CSS-egenskapene kan du skrive alle nødvendige verdier ved å redigere HTML-koden. For å gjøre dette, må du gå til den administrative delen av nettstedet. Velg et av de publiserte materialene, bytt tekstredigering til HTML-koderedigeringsmodus og legg til CSS-egenskaper. Et eksempel kan sees nedenfor.

Kort forklaring av kommandoer

- bredde- linjelengde;

- fast- solid linje;

- prikkete- stiplet linje.

For en dypere kjennskap til stilene anbefaler jeg å lese denne.

Du må forstå at i prosessen med å gjøre endringer i nettstedskoden, er egenskapene som bestemmer linjetypen, tykkelsen og fargen oppført atskilt med et mellomrom.

Denne metoden har flere fordeler:

Et bredt spekter av muligheter som du kan lage nesten hvilken som helst linje med.

Enkelt å gjøre alle nødvendige endringer direkte i HTML-koden. Dette forenkler oppgaven betraktelig for uerfarne nettstedbyggere.

Hvordan lage en rett horisontal linje ved hjelp av HTML-tag

---

Det første jeg vil gjøre oppmerksom på er at denne taggen, til tross for alle finesser og prinsipper i html, ikke har en avsluttende tag. Den kan brukes hvor som helst i html-koden, mellom tagger og

.

Tag-attributter

---

- bredde- er ansvarlig for lengden på linjen. Kan spesifiseres både i prosent og i piksler.

- størrelse- linjetykkelse. Spesifisert i piksler.

- farge- definerer fargen på linjen.

- tilpasse- attributt ansvarlig for linjejustering. På sin side viser laget til det.