Sivustoa suunniteltaessa monet aloittelevat sivustojen rakentajat ihmettelevät, kuinka muuttaa otsikoiden fonttia, kokoa ja väriä. Kyllä se todella on loistava vaihtoehto, jolla voit tuoda raikkautta sivuston suunnitteluun. Mutta on toinen yhtä kiehtova kysymys, kuinka tehdä html-kehys.

Mihin html-kehys on tarkoitettu?

Itse asiassa ei mitään erityistä toimintoa annettu elementti ei kanna. Silti teksti, joka on suljettu kauniisti muotoiltuihin kehyksiin, herättää lukijoissa tiettyä kiinnostusta. Siksi tekstin ympärillä olevaa kehystä voidaan turvallisesti kutsua yhdeksi tavoista korostaa kehystetyn tekstin merkitystä.

Tekstin ympärille kehyksen luomisen ominaisuudet

Tietysti kehyssuunnittelun muunnelmia CSS:n avulla paljon enemmän, mutta se on täysin eri tarina. Lisäksi tämä menetelmä sopii edistyneemmille sivuston rakentajille. Luulen, että olemme kanssasi ja muokkauksen avulla html-koodi saa ainakin kaunis kehys html.

Ensimmäisessä vaiheessa on ymmärrettävä, että kehys voidaan tehdä jokaiselle html-elementti ei väliä mikä tagi on

,

, , jne.

Upotetun ja upotetun välillä on puolestaan ​​ero lohkon elementtejä.

Sisäänrakennetun tyyppinen kehys sijaitsee tunnisteiden sisällä, tai pikemminkin sen näytöstä vastaava html-koodi on suljettu tiettyjen tunnisteiden väliin. Tuloksena saamme tekstin ympärille html-kehyksen, jolle on tarpeen rekisteröidä tietyt komennot sisäisten sisennysten asettamiseksi.

Lohkokehyksiä muodostetaan lohkon koko leveydelle, mikä herättää tarpeen asettaa leveysrajoitukseen liittyviä komentoja.

Tietenkin, jotta voimme tehdä tekstin html-kehykseen, meidän on käännyttävä tekstin sisäisiin tyyleihin. Tämä menetelmä on sopivin korostamaan joitain yksittäisiä lauseita, kappaleita tekstissä ja kuvissa. Jos haluat korostaa jotakin tiettyä mallin osaa, joka näkyy sivuston kaikilla sivuilla, on järkevää kääntyä mallin style.css-tiedoston muokkaamiseen.

Kuinka tehdä reunus tekstin ympärille html:ssä

Mielestäni teoria riittää. On aika harjoitella. Esimerkkinä liitän kirkkaan vaaleanvihreän kehyksen kanssa harmaa tausta yksi tämän artikkelin tärkeimmistä ehdotuksista.

Tärkeä pointti! Sisäänrakennetut tyylit toimivat hyvin eivätkä satuta HTML-kelpoisuus sivusto.

Jos haluat toteuttaa saman kehyksen, sinun on viitattava tunnisteeseen

EHDOTUKSESI.

Vuodesta lähtien tämä esimerkki sisäänrakennettu css-tyylejä Pidän yhtä tärkeänä tutustua niihin jokaiseen.

1. rajaa- kehyksen näyttämisestä vastaava omaisuus. Tehtävän yksinkertaistamiseksi en kirjoittanut jokaista ominaisuutta erikseen - reunuksen leveys (kehyksen reunan paksuus), reunan väri (väri html-kehys). Ja sen sijaan lyhensimme hieman html-koodia kirjoittamalla kaikki ominaisuudet kaksoispisteen jälkeen.

Vaihteeksi ulkomuoto tarpeeksi runkoa arvon muuttamiseksi kiinteä. Seuraavat rajat ovat olemassa:

Ridge - kohokuvioitu.

Pisteinen - pilkullinen.

Double - double.

Katkoviiva - katkoviiva.

Kiinteä - kiinteä.

2. pehmuste- ominaisuus, joka vastaa kehyksen ja sen sisällä olevan esineen välisestä etäisyydestä.

Voit halutessasi leikkiä tyyleillä lisäämällä komentojen määrään avaus- ja sulkemistunnisteiden väliin vankeja.

Omaisuus marginaali. Tällä tavalla voit sisentää kehyksen ulkopuolella olevia elementtejä.

muuttaakseen tausta riittää rekisteröidä taustaväri-ominaisuus, joka ilmoittaa halutun värin koodin kaksoispisteen jälkeen.

kehystä ympäri html kuvia tehdään samalla tavalla, joten sinulla ei pitäisi olla ongelmia sen kanssa. Aloittelijan on vain tiedettävä, että ominaisuudet on kirjoitettava yhteen tunnisteeseen voidakseen näyttää sen .

Yhteenvetona voidaan sanoa, että kehyksen tekemiseksi kuvan tai tekstin ympärille riittää, että avataan artikkelin html-koodin näyttö ja kirjoitetaan siihen erityisiä ominaisuuksia tiettyjen tunnisteiden väliin.

Kiitos huomiosta ja nähdään pian Stimylrostan sivuilla.

Löytyy tekstistä kielioppivirhe? Ilmoita tästä järjestelmänvalvojalle: valitse teksti ja paina pikanäppäinyhdistelmää Ctrl+Enter

Vlad Merževitš

CSS:n avulla voit lisätä reunuksen elementtiin useilla tavoilla. Periaatteessa sitä tietysti käytetään rajan omaisuutta, monipuolisimpana, sekä ääriviivat ja yllättävän laatikkovarjot , joiden päätehtävänä on luoda varjo. Katsotaanpa näitä menetelmiä ja niiden eroja.

ääriviivat omaisuutta

Yksinkertaisin ominaisuus kehysten luomiseen. Sillä on samat parametrit kuin reunalla, mutta se eroaa siitä merkittävästi joidenkin yksityiskohtien osalta:

• ääriviivat piirretään elementin ympärille (reuna sisällä);
• ääriviivat eivät vaikuta elementin kokoon (reunus lisätään elementin leveyteen ja korkeuteen);
• ääriviivat voidaan asettaa vain koko elementin ympärille, ei yksittäisille sivuille (reunaa voidaan käyttää millä tahansa puolella tai kaikkia kerralla);
• ääriviivaan ei vaikuta border-radius-ominaisuuden määrittämä pyöristyssäde (se vaikuttaa rajaan).

Herää kysymys - missä tapauksissa ääriviivaa tarvitaan, kun sen rooli listatuista eroista huolimatta on kokonaan rajalla? Tilanteita ei ole niin paljon, mutta niitä tapahtuu:

• monimutkaisten moniväristen kehysten luominen;
• kehyksen lisääminen elementtiin vietäessä hiiren osoitinta sen päälle;
• Selaimen automaattisesti lisäämän kehyksen piilottaminen joillekin elementeille, kun se vastaanottaa tarkennuksen;
• ääriviivaa varten voit määrittää etäisyyden elementin reunasta reunaan käyttämällä outline-offset -ominaisuutta luodaksesi .

Moniväriset kehykset

On ymmärrettävä, että ääriviivat eivät millään tavalla korvaa reunaa ja voivat hyvin olla olemassa sen kanssa, kuten esimerkissä 1 näkyy.

Esimerkki 1: Luo kehys

Tässä esimerkissä elementin ympärille on lisätty musta reunus, joka erotetaan taustasta valkoisella reunuksella (kuva 1).

Riisi. 1. Reunus elementin ympärille

Kehys käytettäessä:hover

Reunuksen lisääminen reunuksen yli lisää elementin leveyttä, mikä on varsin havaittavissa, kun yhdistetään border ja :hover pseudoluokka. On kaksi tapaa "voittaa". Yksinkertaisin on korvata reuna ääriviivalla , jonka tiedämme olevan vaikutusta elementin kokoon (esimerkki 2).

Esimerkki 2: Kehys päällä

ääriviivat eivät aina ole sopivia, jos vain siksi, että pyöristetyt kulmat eivät vaikuta siihen. Toinen menetelmä sopii tähän - lisää näkymätön reunus tai taustaväriä vastaava reunus ja muuta sitten sen parametreja hiirellä (esimerkki 3). Tällöin elementtiä ei siirretä, koska kehys on jo alun perin siellä. Mutta muista aina, että elementin leveys on summa leveysarvot, reuna vasemmalla ja reunus oikealla. Sama pätee korkeuteen.

Esimerkki 3: Kehys päällä

Reuna lomakekenttien ympärillä

Jotkut selaimet (Chrome, Safari, uusimmat versiot Opera) näyttää pienen kuvakkeen lomakekenttien ympärillä, kun ne saavat tarkennuksen. värillinen kehys(Kuva 2). Sen poistamiseksi riittää lisääminen outline-ominaisuuteen tyyleissä ei mitään arvoa, kuten esimerkissä 4 näkyy.

Riisi. 2. Kehys peltojen ympärille

Esimerkki 4. Irrota kehys

Kehykset box-shadowin kautta

Vaikka box-shadow -ominaisuuden tarkoituksena on lisätä varjo elementin ympärille, sitä voidaan käyttää myös reunusten luomiseen, ja sellaisia, joita ei voi tehdä reunalla tai ääriviivalla. Tämä johtuu siitä, että varjojen määrä voi olla rajoittamaton, jonka parametrit on lueteltu pilkuilla erotettuina.

Kehyksen saamiseksi kolme ensimmäistä parametria tulee asettaa nollaan, ne ovat vastuussa varjon sijainnista ja sen epäterävyydestä. Neljäs vaihtoehto sisään Tämä tapaus vastaa reunuksen paksuudesta, ja viides määrittää reunuksen värin. Toiselle kehykselle neljäs parametri on yhtä suuri kuin kahden kehyksen paksuuksien summa.

Esimerkki 4 näyttää kuinka lisätään kaksi ruutua ja yksi reunus oikealle käyttämällä yhtä box-shadow ominaisuutta.

Esimerkki 4: Box-shadowin käyttö

Tämän esimerkin tulos on esitetty kuvassa. 3.

Riisi. 3. Box-shadow-ominaisuuden luomat kehykset

CSS3 kehys laajentaa elementtien reunojen muotoiluominaisuuksia ominaisuuksilla, jotka mahdollistavat pyöreät kulmat elementtiä ja myös käyttöä Kuvat elementin reunojen tyyliin.

Pyöristetyt kulmat ja kuvakehykset

1. Kulmien pyöristys reunasäteellä

Selaimen tuki

IE: 9.0
Firefox: 4.0
Kromi: 4.0
safari: 5.0, 3.1 -verkkopaketti-
ooppera: 10.5
iOS Safari: 7.1
Ooppera Mini: —
Android-selain: 4.1
Kromi Androidille: 44

Tämän ominaisuuden avulla voit pyöristää rivi- ja lohkoelementtien kulmia. Jokaisen kulman käyrä määritellään yhdellä tai kahdella sen muodon määrittävällä säteellä − ympyrä tai ellipsi. Säde ulottuu koko taustalle, vaikka elementillä ei olisikaan reunaa, sekantin tarkka sijainti määritetään background-clip-ominaisuuden avulla.

border-radius-ominaisuuden avulla voit pyöristää kaikkia kulmia samanaikaisesti ja käyttämällä ominaisuuksia border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left- säteen voit pyöristää jokaisen kulman erikseen.

Jos asetat raja-säteen ominaisuudelle kaksi arvoa, ensimmäinen arvo pyöristetään ylävasen Ja oikeassa alakulmassa, ja toinen on Yläoikea Ja alhaalla vasemmalla.

Arvot annetaan / define kautta vaakasuoraan Ja pystysuorat säteet. Omaisuutta ei ole peritty.

Vaihtoehdot

Div (leveys: 100px; korkeus: 100px; reunus: 5px kiinteä;) .r1 (reunuksen säde: 0 0 20px 20px;) .r2 (reunuksen säde: 0 10px 20px;) .r3 (reunuksen säde: 20pxpx ;) .r4 (reunuksen säde: 10px/20px;) .r5 (reunuksen säde: 5px 10px 15px 30px/30px 15px 10px 5px;) .r6 (reunuksen säde: 10px 20px 0px3p3) raja-säde: 50 %;) .r8 (reunus-ylä: ei mitään; reunus-ala: ei mitään; reuna-säde: 30px/90px;) .r9 (reuna-ala-vasen-säde: 100px;) .r10 (reuna -säde: 0 100 %;) .r11 (reunuksen säde: 0 50 % 50 % 50 %;) .r12 (reuna-ylä-vasen-säde: 100 % 20px; reunus-alha-oikea-säde: 100 % 20px ;)
Riisi. 1. Esimerkkejä erilaisia ​​vaihtoehtoja lohkon kulman pyöristys

2. reuna-kuva

Selaimen tuki

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Kromi: 16.0, 7.0 -webkit-
safari: 6.0, 3.0 -webkit-
ooppera: 15.0, 11.0 -o-
iOS Safari: 7.1
Ooppera Mini: 8-o-
Android-selain: 4.4, 4.1 -verkkopaketti-
Chrome Androidille: 42

Ominaisuuden avulla voit asettaa kuvan elementin reunaksi. Kuvan päävaatimus on, että sen on oltava symmetrinen. Kiinteistö sisältää seuraavat arvot: (border-image: leveys lähdeviipaleen toiston alussa;) .

Sellaisten avulla yksinkertainen kuva voit hankkia nämä kehykset elementille.

/* Esimerkki 1 */ div ( leveys: 260px; korkeus: 100px; reunuksen tyyli: kiinteä; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Esimerkki 2 */ div ( leveys: 260px; korkeus: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30; border-image-repeat: pyöreä; )
Riisi. 2. Esimerkki lohkoreunusten suunnittelusta kuvan avulla

Viipaleet A - B - C - D muodostavat kehyksen kulmat, ja niiden välissä oleva kuvion osa täyttää kehyksen jäljellä olevan tilan kehyksen mukaisesti. aseta arvo ominaisuudet border-image-repeat . Kulmakappaleen koko (tässä esimerkissä numero 30) asetetaan käyttämällä border-image-slice -ominaisuuden arvoa.

2.1. raja-kuvan leveys

Ominaisuus määrittää kuvan leveyden elementin reunukselle. Jos leveyttä ei ole määritetty, se on oletuksena 1.

raja-kuvan leveys
Arvot:
pituus	Asettaa kehyksen leveyden pituusyksiköissä - px/em. Voit asettaa yhdestä neljään arvoa samanaikaisesti. Jos annetaan yksi arvo, niin kehyksen kaikkien sivujen leveys on sama, kaksi arvoa määrittävät ylä-alas- ja oikea-vasemman leveyden ja niin edelleen.
määrä	Numeerinen arvo, jolla reunan leveyden arvo kerrotaan.
%	Elementin kehyksen leveys lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora suhteessa korkeuteen.
auto	Vastaa border-image-slice -arvoa.
alkukirjain
periä

Syntaksi

Div (reunuksen kuvan leveys: 30 pikseliä;) 3. Esimerkki kehyskuvan leveyden asettamisesta käyttämällä erilaisia ​​tyyppejä arvot

2.2. border-image-source

Ominaisuus määrittää polun kuvaan, jota käytetään koristamaan lohkon reunoja.

Syntaksi

Div (border-image-source: url(border.png);)

2.3. border-image-slic -elementit

Ominaisuus määrittää elementin reunojen koristeluun käytettävien kuvan osien koon ja jakaa kuvan yhdeksään osaan: neljään kulmaan, neljään kulmien väliseen reunaan ja keskiosaan.

Arvot:
määrä	Kehysosat voidaan mitoittaa yhdellä, kahdella, kolmella tai neljällä arvolla. Yksi arvo asettaa samankokoiset reunat elementin jokaiselle puolelle. Kaksi arvoa: ensimmäinen määrittää yläosan koon ja alaraja, toinen - oikea ja vasen. Kolme arvoa: ensimmäinen määrittää yläreunan koon, toinen - oikea ja vasen ja kolmas - alareunus. Neljä arvoa: määrittää ylä-, oikea-, ala- ja vasemman reunan koon. Numeerinen arvo edustaa kuvapisteiden määrää .
%	Reunusten koot lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora suhteessa korkeuteen.
täyttää	Arvo määritetään yhdessä numeron tai prosenttiarvon kanssa. Jos se on asetettu, kehyksen sisäreuna ei leikkaa kuvaa, vaan se täyttää myös kehyksen sisällä olevan alueen.
alkukirjain	Asettaa tämän ominaisuuden oletusarvoon.
periä	Perii tämän ominaisuuden arvon emoelementiltä.

Syntaksi

Div (reunakuva: 50 20;)
Riisi. 4. Esimerkki kuvakehysosien asettamisesta

2.4. raja-kuva-toisto

Ominaisuus ohjaa, kuinka taustakuva täyttää kehyksen kulmien välisen tilan. Se voidaan asettaa joko yhdellä arvolla tai arvoparilla.

Syntaksi

Div (border-image-repeat: toista;) 5. Esimerkki kuvakehyksen keskiosan toistamisesta erityyppisillä arvoilla

2.5. border-image-outset

Ominaisuuden avulla voit siirtää kuvakehystä elementin rajojen ulkopuolelle määritetyn pituuden verran. Voidaan asettaa joko yhdellä tai neljä arvoa.

Syntaksi

Div (reunus-kuva-alku: 10px;)
Riisi. 6. Esimerkki kehyskuvan siirtämisestä erityyppisten arvojen avulla

3. Ulkokehyksen poikkeama ääriviiva-offset

Ominaisuus määrittää elementin reunan ja outline-ominaisuuden avulla luodun ulkoreunuksen välisen etäisyyden.

/*Kuva 1:*/ img ( reunus: 1px tasainen vaaleanpunainen; ääriviivat: 1px katkoviivoinen harmaa; ääriviivojen siirtymä: 3px; ) /*Kuva 2:*/ img ( reunuksen leveys: 1px 10px; reunuksen tyyli: kiinteä; reunuksen väri: vaaleanpunainen; ääriviivat: 1px katkoviivoinen harmaa; ääriviivojen siirtymä: 3px; ) /*Kuva 3:*/ img (reunus: 3px upotettu vaaleanpunainen; ääriviivat: 1px katkoviivoinen harmaa; ääriviivojen siirtymä: 1px; )
Riisi. 7. Esimerkki kuvan sisustamisesta ulkokehyksellä

4. Gradienttikehys

Reunuskuvan arvo voi olla paitsi kuva, myös gradienttitäyttö.

Läpinäkyvä kehys

Yksi väreistä on läpinäkyvä. Tällä tavalla voit asettaa reunat elementin kaikille sivuille kerralla tai erikseen kullekin sivulle. Reunuksen leveyttä ohjaa border-widd -ominaisuus.

* (box-sizing:border-box;) .wrap (korkeus: 200px; täyte: 25px; tausta: #00E4F6; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä ; reunuskuva: lineaarinen gradientti (oikealle, läpinäkyvä 0%, #ADF2F7 100%); reunuskuva: 1; )

Postikuori

* (box-sizing:border-box;) .wrap ( korkeus: 200px; täyte: 25px; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä; reunuskuva: 10 toistuvaa lineaarista gradienttia (45 astetta, #A7CECC, #A7CECC 10px, läpinäkyvä 10px, läpinäkyvä 20px, #F8463F 20px, #F8463F 30px, läpinäkyvä 30px, läpinäkyvä 40px);)

Yksi mielenkiintoinen sovellus CSS3 box-shadow ominaisuudesta on luoda kaksoiskehys elementin ympärillä. Erittäin mielenkiintoinen vaikutus sivun muotoilua varten, mutta se toimii vain uusissa selainten versioissa, jotka tukevat box-shadow .

On kuitenkin olemassa useita muita tapoja luoda tällainen vaikutus. Ja ilmeinen käyttö taustakuva on hyvin kaukana ihanteesta.

SISÄÄN tämä oppitunti viisi tapaa luoda kaksoisreunus elementin ympärille. Ja vain yksi niistä vaatii kuvan, ja kaikki muut käyttävät puhdas koodi css kanssa erinomainen tuki selaimissa.

Tapa 1: reunus ja ääriviivat

Tämä menetelmä toimii vain selaimissa, jotka tukevat outline-ominaisuutta (kaikki paitsi IE6/7). Lisäät elementtiin sekä reunuksen että ääriviivan ominaisuudet.

Yksi (reunus: kiinteä 6px #ffff; ääriviivat: kiinteä 6px #888; )

Syy, miksi tämä menetelmä toimii, johtuu siitä ääriviivakehys tulostetaan aina suorakulmion ulkopuolelta. Outline-ominaisuuden ongelma tulee esiin käytettäessä kelluvia elementtejä, koska ääriviivat menevät päällekkäin viereisten elementtien kanssa.

Menetelmä 2: pseudoelementti

Tämä menetelmä vaatii absoluuttinen paikannus puitteet:

Kaksi ( reunus: kiinteä 6px #fff; sijainti: suhteellinen; z-indeksi: 1; ) .two:before ( sisältö: ""; näyttö: lohko; sijainti: absoluuttinen; yläosa: -12px; vasen: -12px; reuna: kiinteä 6px #888; leveys: 312px; pehmuste-ala: 12px; min-korkeus: 100%; z-indeksi: 10; )

Tärkeimmät kohdat ovat z-indeksiominaisuuden asettaminen (niin että pseudoelementti menee päällekkäin sisällön kanssa), sijoittelu ja min-height-arvo. Viimeinen ominaisuus säilyttää rungon joustavuuden.

Menetelmä 3: varjo

Suurin osa paras tapa, koska box-shadow-ominaisuuden asettaminen vie vain yhden rivin koodia.

Kolme (laatikkovarjo: 0 0 0 6px #fff, 0 0 0 12px #888; )

Kaksi varjoa käytetään tuomaan kaksoisreuna näkyviin. Ne erotetaan pilkuilla. Sumennus on asetettu arvoon 0. Koska toinen varjo on päällekkäinen ensimmäisen kanssa, siinä on kaksinkertainen määrä suurempi leveys. Keskeinen hetki- läpinäkymättömien värien käyttö, mikä luo selkeän rajan kehysten väliin.

Kuten outline-ominaisuus, laatikkovarjolla ei ole vaikutusta viereisiä elementtejä ja voi peittää ne. Siksi on tarpeen asettaa kenttä koostumuksen ulkonäön muodostamiseksi.

Luonnollisesti box-shadow-ominaisuuden tuki on rajoitettu uudempiin selaimiin.

Tapa 4: Div-lisäelementti

SISÄÄN tätä menetelmää käytetty ulkoinen elementti