Hoe om `n css-lêer by html te voeg

Hypertext Markup Taal (HTML) definieer wat die verskillende stukke van `n webblad is. Die Cascading Style Sheets (CSS) kodering taal beskryf hoe daardie stukke moet lyk. `N CSS-lêer kan by HTML as `n eksterne stylblad gevoeg word, CSS ingesluit in `n aparte lêer vanaf die HTML, of `n interne stylblad, CSS ingesluit in die HTML-lêer. Leer hoe om `n CSS-lêer by HTML te voeg om jou webwerfontwerp aan te pas.

Stappe

Metode 1 van 2:
Voeg `n eksterne stylblad by HTML
  1. Image Titled Voeg `n CSS-lêer by HTML Stap 1
1. Skep die CSS-lêer. Berei en stoor jou CSS-lêer met die ".css" leër tipe.
  • Image Titled Voeg `n CSS-lêer by HTML Stap 2
    2. Laai jou CSS-lêer op na jou webwerf.
  • Image Titled Voeg `n CSS-lêer by HTML Stap 3
    3. Kopieer die URL van u CSS-lêer. Die URL kan dalk lyk jou site.com / stylet.css.
  • Dit is goeie vorm om die hoof domeinnaam te verwyder van die skakel (URL). Daarom is `n URL van "http: // mysite.com / css / standaard.css" sal verkort word aan "/ css / standaard.css". U moet die voorste slash insluit ("/"). Dit word `n relatiewe pad genoem.
  • Image Titled Voeg `n CSS-lêer by HTML Stap 4
    4. Voeg `n skakel by die lêer. Vind thetag in jou HTML-lêer, en skep `n leë lyn net bokant die tag. Byvoeg
    tot daardie leë lyn, verander "julle..." na die skakel na jou CSS-lêer.
  • Image Titled Voeg `n CSS-lêer by HTML Stap 5
    5. Stoor jou HTML-lêer, en laai dit op na jou webwerf.
  • Image Titled Voeg `n CSS-lêer by HTML Stap 6
    6. Verifieer dat alles op jou werf lyk hoe dit veronderstel is om te kyk. As dit nie doen nie, moet u dalk teruggaan en kyk na enige regstellings of aanpassings wat u moet maak.
    • Metode 2 van 2:
    Voeg `n interne stylblad by HTML
    1. Skep die merker. In u HTML-lêer, vind thetag. Voeg `n paar ekstra lyne bo dit by en tik die volgende:
    Image Titled Voeg `n CSS-lêer by HTML Stap 7
    1. Image Titled Voeg `n CSS-lêer by HTML Stap 8
      1. Voeg al jou CSS tussen die twee etikette wat jy pas bygevoeg het.
    2. Image Titled Voeg `n CSS-lêer by HTML Stap 9
      2. Stoor jou HTML-lêer (as HTML).
    3. Image Titled Voeg `n CSS-lêer by HTML Stap 10
      3. Verifieer dat jou webblad lyk of dit veronderstel is om te kyk. Maak veranderinge as nodig as dit nie.

    Wenke

    Kontroleer altyd jou webwerf se voorkoms in verskillende webblaaiers en op verskillende rekenaarstelsels. Sommige blaaiers internet CSS `n bietjie anders, selfs tussen dieselfde blaaier se Mac en Windows-uitgawes. As u webwerf in verskillende blaaiers anders lyk, veral in hoe sekere voorwerpe soos lyste gespasieer is, is die probleem die blaaier se standaard. Vind `n meesterstylblad om aan die begin van jou CSS te voeg om alle blaaier standaard te ignoreer, dus jou instellings voeg niks by iets wat die blaaier reeds opstel nie.
  • As u die opsie het, gebruik `n eksterne stylblad. Om dit te doen, sal u die voorkoms van die terrein aanpas deur die kode in die een naam lêer te verander, eerder as om die CSS op elke bladsy in u werf te verander.
  • As jou webwerf nie op jou CSS reageer soos verwag nie, kontroleer al jou kode om seker te maak dat jy nie besonderhede vergeet het nie. Gee veral aandag aan die semikolons ("-") en sluiting van pylhakies ("}"). Dit is nie ongewoon om een ​​in jou CSS te mis nie.
  • As u die HTML-lêer op u rekenaar stoor, kan u die lêer in u webblaaiers oopmaak om die voorkoms op u rekenaar te monitor voordat u dit oplaai, maar u sal waarskynlik u CSS as `n interne stylblad in die HTML-lêer moet hê. Die voorkoms om te laai.
  • Wanneer `n stylblad homself weerspreek - byvoorbeeld, as dit eers sê dat die teks blou sal wees en later sê dit sal rooi wees - die latere toestand sal altyd van toepassing wees. As een opdrag in `n eksterne stylblad is, en die ander in `n interne stylblad is, sal die interne een van toepassing wees.

    • Waarskuwings

    Moenie gebruik nie "in lyn" CSS, CSS wat in die HTML-tag ingesluit is. (Byvoorbeeld: die "Align = `Center`" is in lyn CSS.) Dit is verouderd, slegte sintaksis, en moeilik om aan te pas wanneer u die webwerf later moet opdateer.
    Deel op sosiale netwerke:
    Soortgelyk