/ / CSS Framework: Impromptu ja vaikutus

CSS-kehys: Impromptu ja vaikutus

CSS-tyylit (CSS) kaikille loogisilleYksinkertaisuus ei ainoastaan ​​luo upeaa suunnitteluratkaisua vaan myös elementtien todellista toimintaa, emuloi todellisen koodin suoritusta.

HTML-merkinnän visuaalinen tunniste -suorakulmainen alue tietyn rakenteen ja sisällön. Elementti sisältää koordinaatit, koot, sisennykset, värit, kirjasin, sen ääriviivat jne. CSS-elementin kehys määrittää sen miehittämän alueen, joka sijaitsee sen reunasta sisäänpäin kuvauksessa esitettyyn leveyteen.

kehys css

Kuvaus Syntaksi

Kohteen koordinaatit antavat elementin sijainninsivun vasempaan yläkulmaan nähden (vasen, ylhäällä), vaaka- ja pystysuoran koon (leveys, korkeus). Kaikki elementin suunnittelu ja animaatio suoritetaan pareittain: "ominaisuus: arvo".

Kuvaus suoritetaan suoraan sivukoodissa, tyyliinsisällä tai erillisessä tiedostossa ja viittaa siihen LINK-linkillä. syntaksi:

#name {omaisuus: arvo; omaisuus: arvo; omaisuus: arvo; ...}

tai

.name {omaisuus: arvo; omaisuus: arvo; omaisuus: arvo; ...}

Nimi voi olla myös p, body, html, table, td ..., eli HTML-merkintämerkin nimi. Sen on sallittava yhdistää tyylikuvaus suoraan elementtiin.

Ennen kuin teet omia muunnelmiakirjoitusstylejä, se ei haittaa näkemään, miten tämä tehdään suosittujen sivustojen kohdalla, tallentamalla sivukoodin tai painamalla Ctrl-U-painiketta nähdäksesi sen suoraan selaimessa.

Perusparametrit

Elementin todellinen CSS-kehys on edustettunatyyli (rajatyyli), väri (raja-väri), leveys (raja-leveys). Voit kuvata kaiken saman omaisuuden rajalla. Jokainen kehysraja voidaan kuvata itsenäisesti (raja-alusta, raja-ala, raja-vasen, raja-oikea).

CSS-kehystä kuvaavat CSS-tyyliarkkien yleiset säännöt:

raja: 3px;
raja-väri: punainen;
rajatyyppinen: kaksinkertainen katkottu kiinteä pisteviiva.

Tämä kuvaus asettaa kehyksen leveyden 3 pikseliin, väri on punainen, sivutyyli: yläsivu on kaksinkertainen, oikea on katkottu, pohja on kiinteä, vasen on pisteviiva.

raja-leveys: 1px 2px 4px 8px;
raja-väri: sininen;
rajatyyli: pisteviiva.

Tällöin myös kummankin sivun mitat näytetään peräkkäin ylhäältä, myötäpäivältä, väreiltä ja tyyliltään.

raja-väri: sininen punainen vihreä musta;

tässä kuvauksessa kunkin sivun väri on erikseen osoitettu. Rajapinta voi sisältää useita parametrejä kerralla ja reunojen kulmat voidaan pyöristää:

raja: 1px vihreä kiinteä;
raja-säde: 0px 4px 8px 12px;
-moz-raja-säde: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;

Kuinka luoda kehys CSS: ssä riippuukävijän mukavuus, koska tavallisesti tätä tyyliefektiä käytetään teknisiin tarkoituksiin: kun on tärkeää osoittaa täsmällisesti alueen paikka tai koko sivulla.

miten tehdä kehyksen css

Rungon paksuus ja sen tarkoitus

Kehyksen paksuuden valitseminen voi käyttää px, pt,em ..., mutta muista, että se on aina elementin alueen sisällä. On vaikea kuvitella, että CSS-kehys on suunniteltu, mutta teknisesti se on erittäin kätevä käyttää sitä korostamaan sivuelementtejä.

Jos kehys on lukittu pääluokkaan, sittenei siis ole, osoita sitä pseudoluokassa: siirrä hiiren osoitin, voit näyttää kävijälle sivun elementin, kun hiiren kohdistin on, esimerkiksi valitse valikkokohta. Joskus sinun on valittava jotain klikkaamalla kuvaa tai vetämällä jotain johonkin. On erittäin kätevää käyttää pisteviitetta, eikä muuttaa elementin taustaa tai sen sisältöä.

Jotkut hakemukset on osoitettavasivualueen tai elementtien valinta jatkokäsittelyyn. Tässä tapauksessa voit luoda divin, jossa on kehys napsautuksen hetkellä, ja kunnes kävijä vapauttaa hiiren painikkeen, muuttaa sen kokoa ja näyttää visuaalisesti valinnan tuloksen.

oppitunnit css

Ulkopuolella määrätty

CSS-oppitunnit ovat erittäin mielenkiintoisia, on myös tärkeää tutkia suosittujen sivustojen koodisivut. Omien varojen on kuitenkin oltava ainutlaatuisia, sillä niillä on oltava oma kasvonsa.

Syntaksin tarjoama CSS-kehys ei sallitällainen monimuotoisuus kuin oma aloite. Impromptu on hyvä alku, eikä mikään estä kehittäjää muodostamaan omaa kehystään. Erityisesti kaikkien Internet-teknologioiden saavutusten ja nykyisten standardien ominaisuuksien kanssa on olemassa monia lupaavia ideoita, jotka perustuvat olemassa oleviin syntaksien todellisiin puutteisiin, jotka (määritelmän mukaan) ovat aina olleet tiukasti muodollisia.

Erityisesti, jos aiomme luoda ne puitteet taimuita seikkoja, vaikuttaa tarkoituksenmukaiselta tehdä tämä kattavasti. Korostamalla tietyn alueen sivuja ja kulmia erillisissä tunnisteissa voit saada upeita vaikutuksia. Ja antamalla asianmukaiset käsittelijät voit luoda dynaamisia sivuelementtejä, muuttaa sijaintia, muotoa ja sisältöä.

Lue lisää: