Home-theater-designers
CSS kuuluu kolminkertaiseen ydinverkkoteknologiaan HTML: n ja JavaScriptin rinnalla. Huolellisella suunnittelulla CSS edistää huolenaiheiden erottamista. Riippumattomat resurssit hallitsevat sisällön rakennetta, esitystä ja käyttäytymistä.
Tyylisivuilla on tärkeä rooli saavutettavuudessa, skaalautuvuudessa ja jopa verkon suorituskyvyssä. Sisällöntekijänä tai verkkosuunnittelijana he voivat hallita sitä, miten laitteet esittävät sisältöä. Asettelusta kirjasinkokoon ja väriin CSS muuntaa sisällön kauniiksi näyttäviksi sivuiksi.
Miltä CSS näyttää?
CSS on suuri kieli - tyylillä on paljon erilaisia asioita! Mutta sen syntaksi on yksinkertainen, ja vain muutamia sääntöjä on opittava.
HTML -elementeillä on erilaisia ominaisuuksia, joita CSS voi muotoilla. The väri ominaisuus asettaa etualan (esim. tekstin) värin. Fontin koko riippuu Fonttikoko omaisuutta.
Jokainen ominaisuus voidaan asettaa tuetulle arvolle. Arvon määrittäminen kiinteistölle on 'ilmoitus'. Yleensä ne näyttävät tältä:
property: valueEsimerkiksi:
miten löydän mitä emolevyä minulla on
color: redEri kiinteistöjen arvot voivat näyttää hyvin erilaisilta, jopa saman omaisuuden arvot. Tässä on esimerkiksi kaksi muuta tapaa kirjoittaa edellinen ilmoitus:
color: #ff0000
color: rgb(255, 0, 0)
Miten HTML ja tyylitaulukot yhdistyvät
Voit yhdistää HTML: n ja CSS: n muutamalla eri tavalla, joista jokaisella on omat etunsa.
Kirjoitustyylit riviin
Yksinkertaisin tapa on liittää tyyli -ilmoitukset suoraan HTML -tiedoston elementtiin. Voit tehdä tämän käyttämällä tyyli ominaisuus näin:
Most of this text is red …
… but this isn’t!
Vaikka tällaiset inline -muotoiluelementit voivat olla käteviä, sillä on useita haittoja. Aluksi se monimutkaistaa HTML -koodia, mikä vaikeuttaa lukemista yhdellä silmäyksellä. On myös hankalaa ylläpitää: kuvittele pitkä asiakirja, johon haluamme asettaa jokaisen kappaleen värin. Tämä on CSS, mutta se ei ole tyylitaulukoita.
Tyylien upottaminen päähän
Voit alkaa nähdä, miltä tyylisivu näyttää toisella mekanismilla, upottaminen . Tätä lähestymistapaa käyttämällä keräämme kaikki tyylivakuutukset yhteen a tyyli elementti pää asiakirjamme. Se näyttää jotakuinkin tältä:
/* style instructions go here */
...Tyyliohjeemme vaativat kuitenkin hieman enemmän yksityiskohtia kuin ennen. Koska olemme siirtäneet ne päähän, jokainen sääntö ei enää liity elementtiin. Olisimme ehkä julistaneet väri punainen mutta minkä värinen sen pitäisi olla?
Tässä ovat CSS -valitsimet. Niiden avulla voimme kohdistaa tietyt sivun osat ja määrittää niiden tyylin yhdessä paikassa käyttämällä tätä syntaksia:
löytää kirjan sen kannen perusteella
selector {
declaration1;
declaration2;
/* etc. */
}
Jos esimerkiksi haluat muotoilla kappaleiden tekstin siniseksi, voimme määrittää seuraavat:
p {
color: blue;
}Tässä esimerkissä valitsin on yksinkertainen s , joka vastaa kaikkia asiakirjamme kappaleita. Se värittää kaiken tekstin siniseksi niin kauan kuin se on Viimeinen tapa peittää linkitys. Tämä on ylivoimaisesti hyödyllisin lähestymistapa, ja sinun pitäisi valita useimmiten. Sen sijaan, että upottaisit CSS -säännöt tyyli elementti suoraan asiakirjassa, voit siirtää ne erilliseen tiedostoon. Liitä tämä koodi HTML -tiedoston tunnisteilla, jotka linkittävät ulkoisen tyylitaulukon. Linkitetyn menetelmän avulla hyödynnämme CSS: n ydinvoimaa: huolenaiheiden erottaminen. Kaikki semanttiset tiedot - mitä sisältö tarkoittaa - sisältyvät HTML -asiakirjaan. Muotoilu - miltä se näyttää - on erillisessä tiedostossa, tyylitaulukossa. Tässä on vain muutama etu tästä erottamisesta: Olet oppinut paljon tyyleistä ja tyylitaulukoista, mutta entä CSS: n porrastettu osa? Kaskadi päättää, mitä tyylejä käytetään, kun useita tyylitaulukoita on läsnä. Olet nähnyt, kuinka kirjoittaja voi määrittää tyylejä sisällölle. Mutta toinen CSS: n ominaisuus on, että se antaa lukijoille ja selainvalmistajille myös sananvaltaa asiasta. Olet ehkä jo ihmetellyt oletustyylejä. Esimerkiksi kuinka an H1 elementti näyttää isolta ja rohkealta, jopa ilman tekijän tyylisivuja? Tämä johtuu joukosta erityissääntöjä, jotka muodostavat käyttäjäagentin tyylitaulukon. Verkkoselaimesi soveltaa näitä sääntöjä aluksi kaikkiin vierailtuihin sivuihin. Kaskadi määrittää, että tekijän tyylitaulukko on voimassa käyttäjäagenttityylien jälkeen. Jos selaimesi sanoo, että otsikot ovat lihavoituja, mutta sivun kirjoittaja ilmoittaa, että tämän sivun otsikot ovat vaaleita, ne päätyvät vaaleiksi. On toinenkin tyylitaulukon lähde, joka antaa jonkin verran hallintaa lukijalle. Kuka tahansa verkkokäyttäjä voi teoriassa ylläpitää käyttäjätyylisivua mukautetuilla säännöillä. Nämä ovat keskellä: käyttäjäsäännöt ohittavat selaimen oletusasetukset, mutta kirjoittajatyylit ohittavat ne itse. Valitettavasti käyttäjien tyylitaulukoiden tuki ei ole koskaan ollut laajaa. Voit käyttää tyylitaulukoita eri yhteyksissä, näytön ulkopuolella. The puoli attribuutti linkki elementti määrittää, mitä mediatyyppejä tyylitaulukko koskee. Voit esimerkiksi määrittää a tyylitaulu tulostettavaksi käyttämällä merkintöjä kuten seuraava: Voit kerätä yleisiä tyylejä yhteen yleiseen tyylisivulle ja mediakohtaiset tyylit erillisiin tiedostoihin. On olemassa myös mediatyyppejä, jotka tarjoavat sisältösi ääneen tai pistekirjoitukseen. CSS on tärkeä väline saavutettavuuden parantamisessa. Aiheeseen liittyviä: Webin selaaminen, jos olet sokea tai näkövammainen Wikipedian kaltaiset sivustot käyttävät CSS: ää ohjaamaan tulostustyyliään, piilottamaan ei -toivotut elementit ja yksinkertaistamaan asettelua. Tyylitaulukot kattavat paljon: kaskadin, perinnön, valitsimet, lähteet, median jne. Mutta niiden voima mahdollistaa modernin verkon. Tämä on väline, joka tarjoaa sisäänrakennetun uudelleenkäytettävyyden, joustavuuden ja helppokäyttötoiminnot. Jos haluat nähdä CSS: n täyden tehon ja sen tarjoamat mahdollisuudet, tutustu huijausarkkiimme, joka kattaa kaikki olennaiset CSS3 -ominaisuudet. Hallitse olennainen CSS -syntaksi CSS3 -ominaisuuksien huijausarkin avulla. Bobby on teknologian harrastaja, joka työskenteli ohjelmistokehittäjänä lähes kaksi vuosikymmentä. Hän on intohimoinen pelaamisesta, työskentelee Switch Editor Magazine -lehden arvostelutoimittajana ja on upotettu kaikkeen verkkojulkaisemiseen ja -kehitykseen. Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!Ulkoisen tyylitaulukon linkittäminen
CSS: n voima
Kaskadin selittäminen
Eri medioihin kohdistaminen
paras ilmainen mielen kartoitusohjelmisto 2018
CSS saa HTML: n näyttämään hyvältä
Kirjailijasta Bobby Jack(58 artikkelia julkaistu) tilaa uutiskirjeemme