Kurti ir taikyti stilių

Svarbu :  Šis straipsnis išverstas naudojant mašininį vertimą, žr. atsakomybės atsisakymą. Su šio straipsnio versija anglų kalba galite susipažinti čia .

Stilius yra tam tikrų Formatavimo charakteristikų, kurie apibrėžti pakopinio stiliaus aprašo (CSS). Galite taikyti stilių turinio į tinklalapį, įskaitant tekstą (atskirus simbolius arba visą pastraipas), grafinių elementų, sluoksniai, lentelės ir net viso puslapio teksto. Stiliai įgalina efektyviai naudoti ypatybės ir reikšmių rinkinys, nereikia nustatyti ypatybes, kiekvieną kartą, kai norite juos naudoti.

Kad visuotinis stiliaus taisyklės taikomos HTML elementų nebent vietos stiliaus taisykles perrašyti juos pakopinis stilių su CSS. Apskritai vietos stiliaus taisykles pirmenybė bendra stiliaus taisykles. Pvz., stilius, apibrėžti vidaus CSS, į tinklalapį pakeičia apibrėžti yra išorinių CSS stilių. Taip pat įdėtojo CSS apibrėžtas atskirą HTML elementą tinklalapyje pakeičia visus stilius, apibrėžtą to paties elemento vidaus ar išorės CSS tinklalapio. Dalis visuotinio stiliaus taisykles, kurios nėra paneigia vietines CSS stilių taikymas HTML elementų net tada, kai vietiniai stilių yra.

Šiame straipsnyje

Tipų stilius

Stiliaus kūrimas

Stiliaus taikymas

Tipų stilius

Stilius, kurie gyvena su išorės arba vidaus CSS gali būti klasės pagrindu, elementas, arba id. Stilių apibrėžia jo taisyklės rinkinys, kurį sudaro išrinkiklį, po jos einančiu bloko ypatybė deklaracijos kairysis riestinis skliaustas ({}) – Dešinysis riestinis skliaustas ({}). Visų tipų stilių iš kitokio stiliaus išsiskiria savo parinkiklį; taškas (.) prieš parinkiklį klasės pagal stilių; numerio ženklas (#) prieš parinkiklį id pagal stilių; ir parinkiklį elemento stilius sudaro tik HTML elementą, pvz., H1 elementas.

Klasės pagal stilių

Naudoti klasės pagal stilių rinkinio ypatybės, kurią norite naudoti vieną ar kelis elementus į tinklalapį. Jei reikia, kada norite modifikuoti stilių, galite redaguoti stiliaus taisyklę rinkinys ir kiekvieną elementą, kurį pritaikėte stilių, kad būtų automatiškai atspindi pakeitimus.

Šiame pavyzdyje "Įvadas" yra stiliaus pasirinkimas, ir "šrifto dydį: mažas" yra viena ypatybė deklaracija, po antrosios ypatybės paskelbimo.

Pavyzdys taisyklę nustatytas klasės pagal stilių

.introduction {font-size: small; color: white}

Klasės pagal stilius, pritaikytas < p > žymę pavyzdys

<p class="introduction">

Elementas pagal stilių

Naudokite elementą pagal stilius nustatyti norimas kiekvieno konkretaus HTML elemento naudojimas tinklalapį egzemplioriaus ypatybes. Pvz., sukurti paraščių 25 pikselių aplink visas pastraipas (turinio apsupti < p > Žymos) į tinklalapį, galite sukurti elementą pagal stilių, naudoja p elementą kaip savo parinkiklį ir yra deklaracijos paraščių ypatybes, kaip parodyta šį kodą.

Į taisyklę, nustatytą pagal elemento stilius pavyzdys

p { margin-left: 25px; margin-right: 25px }

ID pagal stilių

Naudoti su id pagal stilių, jei norite nustatyti vieno elemento arba bloką elementų, kurių nenorite, kad skirtųsi nuo vieno ar daugiau tinklalapių turinio ypatybes. Naudoti su id pagal stilių, kai norite stiliaus atskirą HTML elementą į tinklalapį.

Nustatyti stilius pagal id taisyklės pavyzdys

#footer {background-color: #CCCCCC; margin: 15px}

Id pagal stilių, taikoma < p > žymę pavyzdys

<p id="footer">

Įdėtuosius stilius

Įdėtojo stiliaus naudokite, kai norite nustatyti vieno elemento arba bloko elementų ypatybes į tinklalapį, ir nenorite, kad pakartotinai naudoti tą stilių. Skirtingai nei pagal id ir elemento pagal klasės pagal stilių, kurios ypatybes apibrėžiamos tinklalapį (vidaus CSS) pagrindinė sekcijoje arba išorės CSS failą, ypatybes, įdėtojo stilius (arba įdėtieji CSS) apibrėžiamos tiesiogiai HTML elemento, kurį norite naudoti stilių.

Įdėtojo stiliaus nustatymas taisyklės pavyzdys

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Puslapio viršus

Stiliaus kūrimas

Nuo pat pradžių arba kopijuoti esamą stilių, galite sukurti naują stilių. Bet kuriuo atveju, naujo stiliaus dialogo langas leidžia jums apibrėžti visa informacija apie jūsų naują stilių, įskaitant tipo išrinkiklis ir ypatybės, stilių, kuriuose bus pateikiami stilių. Jei norite sukurti naują įdėtąjį stilių, taip pat galite CSS ypatybės užduočių sritį. Jei norite greitai kurti ir taikyti naują stilių puslapyje be jokių ypatybes stilių, taip pat galite naudoti stiliaus įrankių juosta.

Stiliaus kūrimas naudojant dialogo langą naujas stilius

  1. Atlikite vieną iš šių veiksmų:

    • Norėdami įtraukti į išorės CSS stilių, atidarykite .css failą.

    • Norėdami įtraukti į vidaus CSS stilių, atidarykite tinklalapį.

    • Įdėtojo stiliaus, atidarykite tinklalapį ir pasirinkite norimą stilių, turinį.

  2. Atlikite vieną iš šių veiksmų:

    • Norėdami sukurti naują stilių    Spustelėkite Naujas stilius vieną iš šių vietų: užduočių sritį Taikyti stilius arba užduočių sritis Stiliai valdymas , stiliaus įrankių juostoje arba meniu Formatavimas .

    • Norėdami nukopijuoti esamą stilių    Atlikite vieną iš šių veiksmų:

      • Užduočių sritį Taikyti stilius , nukreipkite žymiklį į stilių, kurį norite kopijuoti, spustelėkite atsiradusią rodyklę žemyn ir pasirinkite Kopijuoti naują stilių.

      • Užduočių sritis Stiliai valdymas arba CSS ypatybės užduočių srityje, dešiniuoju pelės mygtuku spustelėkite stilių, kurį norite kopijuoti, ir pasirinkite Kopijuoti naują stilių.

  3. Naujo stiliaus dialogo langas, atlikite šiuos veiksmus:

Naudokite

Norėdami atlikti šiuos veiksmus

Parinkiklis

  • Norėdami naudoti klasės parinkiklį, įveskite unikalų pavadinimą taškas (.).

  • Norėdami naudoti su id išrinkiklį, įveskite numerio ženklas (#), po unikalų pavadinimą.

    Pastaba : Klasės ir id parinkiklį pavadinimuose negali būti tarpų, išskyrus atvejus, kai kuriate sudėtingas parinkiklį.

  • Naudoti yra elementas išrinkiklį, arba įveskite HTML elementą arba spustelėkite parinkiklį išplečiamajame lauke ir pasirinkite elemento pavadinimą.

  • Norėdami naudoti su įdėtieji išrinkiklį, pasirinkite Įdėtasis stilius.

  • Norėdami kurti sudėtingas išrinkiklį, įveskite to parinkiklį.

Apibrėžti

Atlikite vieną iš šių veiksmų:

  • Dabartinio puslapio prideda naują stilių vidaus CSS į dabartinį tinklalapį.

  • Naują stilių įtraukia naują stilių į naują tuščią išorės CSS.

  • Esamą stilių padidina esamą išorinių CSS jūsų nurodytą naują stilių.

Naujo stiliaus taikymas dokumento pasirinkimas

Taikyti stilių Dabartinė pažymėta sritis dabartinį tinklalapį.

URL

Jei pasirinkote apibrėžti įesamą stiliaus aprašą , įveskite URL .css failą.

Kategorijos

Pasirinkite bet kurį iš šių veiksmų, o tada ypatybės, rodomos dešinėje dialogo lange:

Patarimas : Kategorijos, rodomas paryškintas sąraše kategorija turi nustatyti ypatybės.

  • Šrifto nustato šrifto ypatybes, įskaitant dydį, storį, apdailos ir spalvų.

  • Blokuoti nustato eilutės aukštį, teksto lygiuotę, teksto įtraukos ir tarpai tarp teksto.

  • Fono nustato fono spalvą ir fono vaizdo ypatybes.

  • Kraštinės nustato kraštinės ir jo ypatybes.

  • Lauke nustato padidinimo ir paraščių ypatybės lauke ir elementais.

  • Padėtį nustato matmenis ir padėtį lauko ir elementais.

  • Maketo nustato matomumo, slankiojantis ir kėlimo veikimas, iškarpos ir kitų maketo ypatybės lauke ir elementais.

  • Sąrašo nustato ypatybės sąrašo elementų, įskaitant tipas, vieta ir vaizdas.

  • Lentelės nustato lentelėmis susijusių elementų, įskaitant tarpus, maketą, kraštinės ypatybių ypatybes.

Pastaba : Taip pat galite kopijuoti stilių iš vieno CSS į kitą. Užduočių sritis Stiliai valdymas , vilkite stilių iš CSS, kuriame yra tą stilių norite nukopijuoti ją į, arba tam tikro sąrašo paskirties CSS stilių CSS pavadinimas.

Įdėtojo stiliaus kūrimas naudojant CSS ypatybės užduočių sritis

  1. Dizaino rodinyje arba kodo rodinį, jūsų tinklalapį – pasirinkite turinį, kurį norite įtraukti į įdėtojo stiliaus.

  2. CSS ypatybės užduočių srityje, dalyje Taikomas taisykles, dešiniuoju pelės mygtuku spustelėkite norite taikyti stilių į įdėtąjį arba pasirodžius "(taisyklės taikomos)", dešiniuoju pelės mygtuku spustelėkite taisyklės Taikomosparinkiklis ir tada kontekstiniame meniu spustelėkite Naujas įdėtasis stilius .

  3. CSS ypatybes, nustatykite norimas ypatybes.

Naujas neapibrėžta stiliaus kūrimas ir taikymas

Galite sukurti stilių ir taikyti juos elementus ir tada vėliau nustatyti stilius. Pvz., jei norite dirbti su dizainerio sukurti puslapio išvaizdą, galite neapibrėžta stilių taikymas elementų į savo puslapį, tada sėdėti su dizaineris vėliau apibrėžti stilius.

  1. Dizaino rodinį ar kodą, jūsų tinklalapį, pasirinkite elementą, kurį norite taikyti stilių.

  2. Kurti ir taikyti naują stilių be apibrėžti bet ypatybės stiliaus įrankių juostoje arba klasės arba ID lauke įveskite unikalų pavadinimą, naują stilių.

Puslapio viršus

Stiliaus taikymas

Taikyti klasės arba id-stilių iš savo vidinių ir išorinių pakopinio stiliaus lapai (CSS), galite naudoti užduočių sritį Taikyti stilius , užduočių sritį Stiliai valdymas arba stiliaus įrankių juosta. Užduočių sritį Taikyti stilius leidžia taikyti kelių stilių pažymėtą sritį, o užduočių sritį Stiliai valdymas ir stiliaus įrankių juosta yra tik viena stiliaus. Stiliaus įrankių juosta leidžia greitai pavadinimas ir taikyti naują neapibrėžta stilius jūsų puslapyje.

Jums nereikia taikyti stilių, kad naudoti elementą parinkiklį (elementas pagal stilius), nes šie stiliai tipas automatiškai taikoma jų susietas elementas visą tinklalapį. Užduočių sritį Taikyti stilius pateikiamos elementas pagal stilių po Kontekstinės programos pasirinkimo, ir kartu su Stilių valdymas užduočių srityje rodomi šalia stiliaus pavadinimo mėlynu tašku. Stiliaus įrankių sąrašo elementas pagal stilių.

  1. Dizaino rodinį ar kodą , jūsų tinklalapį, pasirinkite elementą, kurį norite taikyti stilių.

  2. Atlikite vieną iš šių veiksmų:

    • Į kelių esamų stilių taikymas    Užduočių sritį Taikyti stilius , paspauskite klavišą CTRL, spustelėkite kiekvieną norimą stilių.

    • Norėdami taikyti vieną esamą stilių    Atlikite vieną iš šių veiksmų:

      • Užduočių sritį Taikyti stilius spustelėkite norimą klasės arba id stilių.

      • Stiliaus įrankių juostoje klasės arba ID Išplečiamasis laukas, spustelėkite norimą stilių.

      • Užduočių sritis Stiliai valdymas , dešiniuoju pelės mygtuku spustelėkite klasės arba id stilių ir tada kontekstiniame meniu spustelėkite Taikyti stilius .

    • Kurti ir taikyti naują stilių be jokių ypatybių nustatymas    Stiliaus įrankių juostoje arba klasės arba ID lauke įveskite unikalų pavadinimą, naują stilių.

Puslapio viršus

Pastaba : Mašininio vertimo atsakomybės atsisakymas: Šis straipsnis išverstas naudojant kompiuterinę sistemą be žmogaus įsikišimo. „Microsoft“ pateikia šiuos mašininius vertimus norėdama padėti anglų kalbos nesuprantantiems vartotojams perskaityti turinį apie „Microsoft“ produktus, paslaugas ir technologijas. Šis straipsnis išverstas mašininio vertimo būdu, todėl jame gali būti žodyno, sintaksės ar gramatikos klaidų.

Tobulinkite savo įgūdžius
Ieškoti mokymo
Pirmiausia gaukite naujų funkcijų
Prisijunkite prie „Office Insider“ dalyvių

Ar ši informacija buvo naudinga?

Dėkojame už jūsų atsiliepimus!

Dėkojame už jūsų atsiliepimą! Panašu, kad gali būti naudinga jus sujungti su vienu iš mūsų „Office“ palaikymo agentų.

×