CSS-esiintely

Välttämättömät perustiedot

Ennen kuin jatkat, sinun on perustiedot seuraavista:

  • HTML
  • XHTML

Jos haluat oppia näitä projekteja ensin, vieraile Etusivu Vieritään liittyviin ohjeisiin.

CSS yleiskatsaus

  • CSS tarkoittaa tasausstyylejä (CTasainen STyyli STaulukot)
  • Tyyli määrittääMiten näyttää HTML-elementteihin
  • Tyyliä tallennetaan yleensäTyyliarkistotSisällä
  • Lisättiin tyylejä HTML 4.0:eenRatkaisee sisällön ja esityksen erottelun ongelman
  • Ulkoinen tyylitaulukkoVoivat merkittävästi parantaa tehokkuutta
  • Ulkoinen tyyliarkisto tallennetaan yleensä CSS-tiedostoSisällä
  • Useiden tyylejä määrittävätTasainenYksi

Tyyli ratkaisee yleisen ongelman

HTML-merkit alun perin suunniteltiin dokumenttien sisällön määrittämiseen. Käyttämällä <h1>、<p>、<table> -kalvoja HTML:n alkuperäinen tarkoitus oli ilmaista tietoja kuten 'Tämä on otsikko', 'Tämä on kappale', 'Tämä on taulukko'. Samalla dokumentin asettelu hoidetaan selaimella ilman minkäänlaisia muotoilumerkkejä.

Koska kaksi tärkeintä selainta (Netscape ja Internet Explorer) lisäävät jatkuvasti uusia HTML-merkkejä ja ominaisuuksia (esim. fonttikilvet ja väriominaisuudet) HTML-standardiin, on yhä vaikeampaa luoda dokumentteja, joissa sisältö on selkeästi erillinen dokumentin esitysluonnoksesta.

Tämän ongelman ratkaisemiseksi World Wide Web Consortium (W3C), tämä voittonaisten standardointijärjestöjen liitto, otti vastuun HTML-standardoinnin tehtävästä ja loi tyylejä (Style) HTML 4.0:n ulkopuolella.

Kaikki suosituimmat selaimet tukevat tyylejä.

Tyyliarkistot parantavat merkittävästi tehokkuutta

Tyyliarkistot määrittelevät, miten HTML-elementit näytetään, kuten HTML 3.2:n fonttikilpi ja väriominaisuudet toimivat. Tyyliarkistot tallennetaan yleensä ulkoisiin .css-tiedostoihin. Vain yksinkertaisen CSS-dokumentin muokkaaminen antaa sinulle kyvyn muuttaa samanaikaisesti kaikkien sivujen sijaintia ja ulkoasua.

Koska CSS mahdollistaa useiden sivujen tyylin ja sijainnin samanaikaisen hallinnan, se voidaan pitää WEB-suunnittelun alueen läpimurtona. Sivuston kehittäjänä voit määrittää tyylin jokaiselle HTML-elementille ja soveltaa sitä haluamillasi sivuilla. Jos haluat tehdä globaalin päivityksen, muutat vain tyyliä ja kaikki sivuston elementit päivittyvät automaattisesti.

Monet tyylit kietoutuvat yhdeksi

Tyylitaulukot sallivat monin tavoin määrittää tyylimäärittelyjä. Tyylejä voidaan määrittää yksittäisessä HTML-elementissä, HTML-sivun <head>-elementissä tai ulkoisessa CSS-tiedostossa. Voit myös viitata useisiin ulkoisiin tyylitaulukoihin samassa HTML-dokumentissa.

Tasoitussäännöt

Kun sama HTML-elementti määritellään useilla tyyleillä, käytetäänkö tätä tyylejä?

Yleisesti ottaen kaikki tyylit nousevat uuteen virtuaaliseen tyylitaulukkoon seuraavien sääntöjen mukaisesti, joissa numero 4 on korkeimman prioriteetin.

  1. Selaimen oletusasetukset
  2. Ulkoinen tyylitaulukko
  3. Sisäinen tyylitaulukko (<head>-tagin sisällä)
  4. Sisäiset tyylit (HTML-elementin sisällä)

Siksi sisäiset tyylit (HTML-elementin sisällä) ovat korkeimman prioriteetin, mikä tarkoittaa, että ne korvaavat seuraavat tyylideklaroinnit: <head>-tagin sisällä olevat tyylit, ulkoiset tyylitaulukot tai selaimen oletusarvot.