Johdanto CSS: ään
Cascading Style Sheets, joka tunnetaan paremmin CSS: nä, on hyvin yksinkertainen suunniteltu prosessi, jota käytetään verkkosivujen muokkaamiseen. CSS antaa sinun laittaa tyylejä verkkosivujen mukauttamiseen. Paras osa tämän muotoilutoiminnon hyödyntämisessä on, että CSS on riippumaton HTML-tavasta luoda verkkosivuja. Perusero hypertekstin merkintäkielen ja CSS-tyylisivujen välillä on, että entisen tiedetään lähinnä tarjoavan maiseman rakenteellista tapaa verkkosivulle, kun taas entisen on tarkoitus tarjota voimakas värikoodaus- ja muotoilutekniikka. Sitä käytetään ohjaamaan useamman kuin yhden verkkosivun asettelua kerralla. Kaikki ulkoiset tyylitaulukot tallennetaan CSS-tiedostoina.
CSS: n pääkomponentit
Yllä olevassa jaksossa olemme tutkineet johdantoa CSS: ään, joten jatkamme seuraavia CSS: n pääkomponentteja:
1. Helppo ylläpitää: Jos aiot tehdä globaaleja muutoksia, muuta vain tyyliä ja näet kaikkien muiden verkkosivujen kaikki muut osat päivittyvät automaattisesti.
2. CSS säästää aikaa: Voit kirjoittaa komentosarjan vain kerran ja käyttää samaa arkkia uudelleen niin paljon aikaa kuin haluat.
3. Ensiluokkaiset tyylit alkuperäiseen käyttöliittymään: CSS: llä on suhteellisen paljon laajempi määrää attribuutteja ja luetteloa HTML: ään verrattuna. Siksi HTML-sivulla voi olla kirkkaampi ilme ja verrattuna normaaliin HTML-määritteeseen.
4. Helppokäyttöisyys hakukoneilla: CSS: ää pidetään erittäin kätevänä ja helppolukuisena tyylitaulukkona. Tämä tarkoittaa, että hakukoneiden ei tarvitse panostaa paljon tekstin lukemiseen.
5. Tehokas välimuistin tallennus: CSS: ää voidaan käyttää Web-sovellusten tallentamiseen paikallisesti offline-välimuistimekanismin avulla, jota voidaan käyttää offline-sivustojen tarkastelemiseen.
CSS: n ominaispiirteet
Kuten keskustelimme johdannosta CSS: ään ja sen komponenttiin. nyt aiomme oppia CSS: n ominaisuuksista. CSS: n tärkeimpiä ominaisuuksia ovat tyylisäännöt, jotka asiakasselain tulkitsee ja soveltaa dokumentin eri osiin. Tärkeimpiä ominaisuuksia ovat:
- Tyylisääntö koostuu valintakomponentista ja ilmoituslohkokomponentista.
- Valitsinta käytetään osoittamaan HTML-komponenttiin, jonka haluat muotoilla.
- Ilmoituslohkon sisällä on yksi tai useampia ilmoituksia ja puolipisteitä.
- Jokaisella annetulla ilmoituksella on CSS-ominaisuuden nimi, puolipiste ja arvo. Esimerkiksi väri on ominaisuus ja arvo on punainen. Fonttikoko on omaisuus ja 15px on arvo.
- CSS-ilmoitus päättyy puolipisteellä ja nämä lohkot ympäröivät kiharaketjuilla.
- CSS-valitsimia käytetään etsimään HTML-elementtejä, jotka perustuvat elementin nimeen, tunnukseen, määritteeseen, luokkaan ja muuhun.
- Yksi ainutlaatuinen elementti valitaan elementin tunnuksella.
- Jos haluat valita tietyn elementin tietyllä id: llä, tulee käyttää #-funktiota yhdessä id-määritteen kanssa.
- Jos haluat valita tietyn luokan elementit, pistemerkki ja nimiluokka tulisi kirjoittaa.
- Yleisvalitsin: Jos et ole kiinnostunut tietyn tyyppisten elementtien valitsemisesta, yleinen valitsin yksinkertaisesti vastaa elementin nimeä.
- Elementin valitsin: Nämä valitsimet valitsevat elementin elementin nimen perusteella.
- Laskettava valitsin: Kun tietty elementti on toisen elementin sisällä, niin sitä kutsutaan laskevaksi valitsijaksi.
- ID-valitsin: Tämä valitsin käyttää HTML-elementin tunnusta, jotta tietty elementti voitaisiin valita.
- Luokan valitsimet: Se valitsee elementin tietyllä luokan määritteellä.
- Valitsimien ryhmittely: On hyvä vaihtoehto ryhmitellä valitsimet koodin minimoimiseksi. Jokaista valitsinta ja pilkkua tulisi käyttää ryhmien valitsemiseksi.
CSS: n sovellukset
Opittuamme johdannon CSS: ään ja CSS: n ominaisuudet aiomme oppia CSS: n soveltamisen. HTML-muodossa on kolme tapaa käyttää CSS: ää:
1. Inline:
Sisäistä tyylitaulukkoa käytetään vain siihen tunnisteeseen, jossa se on. Tämä tarkoittaa käytännössä sitä, että sivun pieniä yksityiskohtia voidaan muuttaa muuttamatta sivun yleistä asettelua tai kaikkea sivulla olevaa. Tämä on edullista, kuin jos sinulla olisi kaikkea ulkoisilla sivuilla, sinun on lisättävä lisätunnisteita yksityiskohtien muuttamiseksi. Inline ohittaa ulkoisen, mikä tarkoittaa, että pienet yksityiskohdat voidaan muuttaa. Se myös korvaa sisäisen.
2. Sisäinen:
Sisäistä käytetään vain, kun haluat lisätä pienen muutoksen yksittäiseen tunnisteeseen. Tämä johtuu siitä, että rivillä on vain yksi tunniste, joka sisältyy siihen, kun taas sisäinen muotoilu asetetaan HTML-asiakirjan päähän. Tämä tarkoittaa, että jos haluat mukauttaa sivua, kaikki tarvittavat muutokset nähdään vain vierittämällä. Sisäinen muotoilu on sijoitettu tunnisteiden sisään. Verrattuna tämä näyttää vaatimuksellisemmalta, yksinkertaiselta, tyylikkäiseltä ja järjestetyltä erillisen muotoilun ja merkintöjen vuoksi.
3. Ulkoinen
Ulkoisia tyylitaulukoita käytetään ihmisten muotoilemaan ja luomaan verkkosivunsa kokonaan eri asiakirjassa. Tämä tarkoittaa käytännössä, että sinulla voi olla kaksi tai useampia työpaikkoja, koska asiakirjan sisään voidaan upottaa useita tyylitaulukoita, jolloin työtila on paljon puhtaampi. Tyylitaulukko olisi tässä tapauksessa helposti saatavilla, mikä on valtava etu, mutta toisaalta, kaikki muutokset, jotka tehdään ulkoisessa taulukossa, vaikuttavat kaikkiin emolevyihin, joihin se on linkitetty.
CSS: n edut ja haitat:
CSS: n edut
- Laitteiden yhteensopivuus
- Nopeampi verkkosivuston nopeus
- Helppo ylläpitää
- Johdonmukaiset ja spontaanit muutokset
- Kyky asettaa uudelleen
- Parantaa hakukoneiden kykyä indeksoida verkkosivuja
CSS: n haitat
- Selainten väliset kysymykset
- haavoittuva
- Useista tasoista johtuvat ongelmat
- Turvallisuuden puute
- pirstoutuminen
Johtopäätös - Johdatus CSS: ään
CSS antaa web-suunnittelijalle vallan, jotta kaikkien verkkosivujen ulkoasuun voidaan tehdä laajoja muutoksia yhdellä verkkosivustolla käyttämällä vain yhtä tiedostoa. Se auttaa suunnittelemaan kevyttä ja luovaa verkkosivustoa, jolla on suuri reagointikyky ja joka tekee yleisölle vaikutuksen näytöllä. Siksi se on olennainen osa verkkosivustoja, joita ei pidä unohtaa.
Suositellut artikkelit
Tämä on ollut CSS: n johdannon opas. Tässä olemme keskustelleet CSS: n pääkomponenteista, ominaisuuksista, eduista ja haitoista. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- CSS: n haastattelua koskevat kysymykset ja vastaukset
- Johdanto GIT: ään
- Johdanto PHP: hen
- Johdanto JavaScriptiin