Mikä on HTML-tyylisivut?
HTML-asteikon tyylisivu on arkki, jossa on joukko sääntöjä ja ominaisuuksia, joka kertoo selaimelle, kuinka HTML-tiedosto renderöidä käyttämällä kaikkia määritettyjä tyylejä.
CSS on tapa, jolla muokkaamme mitä tahansa verkkosivuja. CSS: llä on kaikki ominaisuudet, kuten tausta, värit, fontit, etäisyys, reunat jne., Jotka voimme määritellä jokaiselle sivun elementille.
HTML-tyylitaulukoita käytetään myös asettamaan sivun asettelu, kuten esimerkiksi otsikko, alatunnisteet tai muut elementit sivulle. CSS: stä puhutaan aina HTML: n kanssa, sillä sivut, joissa ei ole muotoilua, ovat hyvin vaaleita, eikä niissä ole korostettu otsikoita jne. Ja koko fonttikoko on koko sivulla, mikä ei anna käyttäjille hyvää kuvaa.
Kuinka käyttää HTML-tyylitaulukoita?
Aikaisemmin tyylit, skriptit, HTML-muodossa kaikki oli kirjoitettu samalla sivulla. Tämä teki sivuista erittäin pitkiä ja erittäin vaikeita lukea ja muokata. Sitten tuli tapa erottaa HTML, tyylit ja Javascript.
Tapoja sisällyttää HTML-tyylitaulukoita verkkosivulle:
Tyylejä voidaan sisällyttää kolmella tavalla:
-
Sisäinen tyyli
Tämä on tapa kirjoittaa tyylejä jokaiselle HTML-elementille itse tyylin nimeltä määritteessä.
Tätä muotoilutapaa ei lainkaan suositella, koska HTML näyttää sotkuiselta, eikä emme voi noudattaa lähestymistapaa "Kirjoita kerran, käytä monissa paikoissa"
Eg: Hello World!
-
Sisäinen muotoilu
Tyylit sisällytetään tyylitunnisteeseen ja sijoitetaan verkkosivulle HTML-päälle. Tämä muotoilutapa on silti parempi kuin inline-muotoilu, koska meillä voi olla yhteisiä tyylejä kerhottuna yhdessä, jos sitä on käytettävä useisiin elementteihin kerrallaan.
Kehitysvaiheessa on helpompaa muokata HTML-tiedostoa, eikä meidän tarvitse joka kerta avata vastaavaa CSS-tiedostoa ja muokata sitä joka kerta.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Ulkoinen muotoilu
Tämä on yleisin ja paras tapa muodostaa tyylejä verkkosivulle. Tämä on samanlainen kuin sisäinen muotoilu, mutta ero on siinä, että tyylit on kirjoitettu erilliseen tiedostoon, jonka tunniste on .css, ja viittaus siihen sijoitetaan verkkosivun otsikkotunnisteeseen.
Verkkosivun CSS-tiedoston linkitys syntaksi on:
Tyylit tulee sisällyttää HTML-tunnisteen yläosan (eli todellisen sisällön) yläosaan
Mikä on etusija integroidun, sisäisen ja ulkoisen muotoilun välillä?
Sisäiset tyylit ovat tärkeämpiä kuin sisäiset, ja sitten ulkoinen muotoilu tulee viimeiseksi.
Inline> Sisäinen> Ulkoiset
Parhaat käytännöt CSS: ää käytettäessä:
- CSS voidaan jakaa useisiin tiedostoihin yhden sijaan.
- Erotetut CSS-tiedostot voidaan joko sisällyttää yksi kerrallaan otsikkotunnisteeseen linkkitunnisteiden avulla.
- Tai yhdessä CSS-tiedostossa voi olla useita tuontilausekkeita muiden CSS-tiedostojen tuomiseksi. Tämä erottaa loogisesti CSS: n, mutta lopulta kaikki tyylit saadaan samasta tiedostosta.
Käyttö: @import './process.css';
- Tyylit voidaan määrittää kaikille verkkosivun elementeille valitsimilla itse HTML-tunnisteina, luokan niminä, tunnuksina ja määritteiden niminä.
- On olemassa joitain näennäisvalitsimia, kuten:
- ennen
- jälkeen
- nnen lapsen
- ensimmäinen lapsi
- viimeinen lapsi
- häilyä
- vieraili
Nämä ovat pohjimmiltaan valittujen elementtien tiloja, eivät oikeastaan tarkkoja elementtejä.
- Kun sivulle on kerrottuja CSS-tiedostoja, viimeksi mainittu asettaa korkeimman prioriteetin ja ohittaa aiemmat tiedostot, joilla on sama valitsin, olemassa olevat tyylit.
- Tyylitaulukoita tulee käyttää ennen itse HTML-koodia, jotta tyylit otetaan käyttöön sivun latauksen aikana. Jos HTML sisällytetään loppuun, HTML latautuu ensin ja sitten tyylit otetaan hitaasti käyttöön, mikä antaa käyttäjälle erittäin huonon kokemuksen.
HTML-CSC-tyylilehtien eri ominaisuudet:
- CSS tarjoaa animaatioita : Aiemmin javascriptiä käytettiin vain animaatioihin. Mutta viimeisin CSS eli CSS3 tarjoaa animaatioita itse ominaisuuksia käyttämällä.
- Toimittajan etuliitteet: Ennen kuin selaimet julkaisevat uusien ominaisuuksien vakioversion / ominaisuuden nimen, selaimet toimittavat meille kokeiluna joitain toimittajien etuliitteitä jonkin aikaa jonkin aikaa. Kehittäjien on odotettava, kunnes selain julkaisee vakioversiot, ja sillä välin kokeellisia ominaisuuksia voidaan käyttää toimittajien etuliitteiden kanssa.
- CSS-muunnokset: Siirtymää käytetään asteittain siirtymiseen kiinteistön yhdestä arvosta toiseen tietyn ajan kuluessa.
Eg: -webkit-transition: width 2s, height 4s;
- CSS-muunnos: CSS-muunnos antaa sinun kääntää, kiertää, skaalata ja vinoa elementtejä.
Mediakyselyt:
Mobiililaitteet, pöytätietokoneet ja iPadit käyttäytyvät eri tavalla, mutta emme voi tyyliä sivuja samalla tavalla. Aikaisemmat verkkostandardit ovat suunnitelleet siten, että meillä oli erilainen CSS jokaiselle laitetyypille.
Verkkostandardien kehityksen ja verkon rakentamistavan avulla selaimet kehitetään yhdeksi CSS: ksi, jota voidaan käyttää minkä tahansa tyyppisiin laitteisiin. Laitteiden tyylien muuttamiseksi leveyden ja korkeuden perusteella käytetään mediakyselyjä, joiden avulla voimme määrittää laitteen vähimmäis- tai enimmäisleveyden ja kirjoittaa tyylejä siihen.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Tyylit ovat ehdottomasti siunaus webille. Ja koska web-kehitys on lisääntynyt räjähdysmäisesti viime aikoina, CSS3 on ehdottomasti saanut paljon kysyntää tehdä sivuista erittäin vuorovaikutteisia ja intuitiivisia.
Suositellut artikkelit
Tämä on ollut opas HTML-tyylitaulukoihin. Tässä keskustellaan siitä, kuinka käyttää HTML-tyylitaulukoita, erilaisia ominaisuuksia ja tapoja sisällyttää CSS Web-sivulle. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- Johdanto CSS: ään
- CSS: n edut web-suunnittelussa
- Mikä on CSS? | Kuinka käyttää?
- Onko CSS-kirjainkoko herkkä?
- Eri HTML-luettelotyylejä