Tworzenie i stosowanie stylu

Ważne : Ten artykuł został przetłumaczony maszynowo, zobacz zastrzeżenie. Angielskojęzyczną wersję tego artykułu można znaleźć tutaj .

Styl to zbiór formatowania, które są definiowane w kaskadowego arkusza stylów (CSS). Stosowanie stylów do zawartości na stronie sieci Web, w tym tekstu (poszczególnych znaków lub całych akapitów), grafik, tabel, warstwy i nawet do treści całą stronę sieci Web. Style umożliwiają efektywne ponowne używanie zestawu wartości i właściwości bez konieczności Ustawianie właściwości w każdym razem, aby z nich korzystać.

Style CSS kaskadowych w znaczeniu, że reguły globalnej stylów mają zastosowanie do elementów HTML, o ile reguły lokalnego stylu zastąpić je. Ogólnie reguły lokalnego stylu pierwszeństwo reguł ogólnego stylu. Na przykład stylu zdefiniowane w wewnętrznych CSS na stronie sieci Web zastępuje stylu zdefiniowane w zewnętrznego arkusza CSS. Podobnie w tekście zdefiniowanych arkuszy CSS w jeden element HTML na stronie sieci Web zastępują wszelkie style zdefiniowane dla tego samego elementu w wewnętrznych i zewnętrznych arkuszy CSS strony sieci Web. Części reguły globalnej stylów, które nie są niezbędne lokalne reguły stylów CSS dotyczą elementów HTML, nawet wtedy, gdy są stosowane style lokalny.

W tym artykule

Typy stylów

Tworzenie stylu

Stosowanie stylu

Typy stylów

Styl, który znajduje się w zewnętrznym lub wewnętrznym arkuszy CSS może być opartych na klasach, opartych na elementach lub opartych na identyfikatorach. Styl jest zdefiniowany przez jego zestawu reguł składa się z, a po nim bloku deklaracji właściwość, które pojawiają się między lewy nawias klamrowy ({}) i prawy nawias klamrowy (}). Każdego typu styl jest odróżnić od innych typów stylu w selektorze; Selektor stylów opartych na klasach; poprzedza kropki (.) znak numeru (#) poprzedza selektor stylu opartych na identyfikatorach; i Selektor stylów opartych na elementach składa się tylko z elementu HTML, takich jak H1 element.

Style opartych na klasach

Umożliwia określenie pewien zestaw właściwości, które ma być używany na jeden lub więcej elementów na stronie sieci Web opartych na klasach style. Jeśli kiedykolwiek chcesz zmodyfikować styl, można edytować reguły stylu zestaw i każdego elementu, do którego zastosowano styl, który ma automatycznie wprowadzone zmiany zostaną zastosowane.

W poniższym przykładzie "wprowadzenie" jest selektor stylu i "rozmiar czcionki: small" jest jeden deklaracji właściwości, a po nim drugą deklaracji właściwości.

Przykład zestaw reguł dla stylu opartych na klasach

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

Przykład opartych na klasach styl zastosowany do znacznika < p >

<p class="introduction">

Style opartych na elementach

Za pomocą stylów opartych na elementach definiują zestaw właściwości, które chcesz każde wystąpienie tego określonych elementów HTML na stronie sieci Web. Na przykład aby utworzyć margines 25 pikseli wokół wszystkich akapitów (zawartość otoczony < p > Znaczniki) na stronie sieci Web, należy utworzyć opartych na elementach styl, który używa elementu p jako selektorze i zawiera deklaracji dla właściwości marginesów zgodnie z poniższym kodem.

Przykład zestaw reguł dla stylu opartych na elementach

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

Style opartych na identyfikatorach

Jeśli chcesz zdefiniować zestaw właściwości dla pojedynczego elementu lub blok elementy, które chcesz, aby odróżnić od innej zawartości w jednej lub wielu stron sieci Web za pomocą stylu opartych na identyfikatorach. Gdy chcesz stylów pojedynczego elementu HTML na stronie sieci Web za pomocą stylu opartych na identyfikatorach.

Przykład zestaw reguł dla stylu opartych na identyfikatorach

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

Przykład opartych na identyfikatorach styl zastosowany do znacznika < p >

<p id="footer">

Style wbudowane

Użyj stylu wbudowanego, gdy trzeba zdefiniować pewien zestaw właściwości dla pojedynczego elementu lub bloku elementów na stronie sieci Web i nie chcesz ponownie użyć tego stylu. W odróżnieniu od stylów opartych na identyfikatorach, opartych na elementach i opartych na klasach, którego właściwości są definiowane w głowy sekcji strony sieci Web (wewnętrznego CSS) lub w zewnętrznym pliku CSS, właściwości wstawionej style (lub wewnętrznego CSS) są definiowane bezpośrednio w element HTML, którego chcesz użyć stylu.

Przykład zestaw reguł dla styl wbudowany

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

Początek strony

Tworzenie stylu

Możesz utworzyć nowe style od podstaw lub przez kopiowanie istniejącego stylu. W obu przypadkach, okno dialogowe Nowy styl pozwala na zdefiniowanie wszystkich informacji o nowy styl, w tym typ selektora, właściwości i arkusz stylów, który będzie zawierać odpowiedni styl. Chcesz utworzyć nowy styl wbudowany, możesz także korzystać z okienka zadań Właściwości arkusza CSS. Umożliwia szybkie tworzenie i stosowanie nowego stylu na stronie bez właściwości stylu, można także użyć paska narzędzi stylu.

Tworzenie stylu za pomocą okna dialogowego Nowy styl

  1. Wykonaj jedną z następujących czynności:

    • Dodawanie stylu do zewnętrznego arkusza CSS, otwórz plik CSS.

    • Aby dodać styl do wewnętrznego arkusza CSS, otwórz stronę sieci Web.

    • Aby dodać styl wbudowany, otwórz stronę sieci Web, a następnie wybierz pozycję zawartość, która ma mieć styl.

  2. Wykonaj jedną z następujących czynności:

    • Aby utworzyć nowy styl    Kliknij przycisk Nowy styl w jednym z następujących lokalizacji: okienka zadań Stosowanie stylów lub okienko zadań Zarządzanie stylamistylu paska narzędzi i Format menu.

    • Aby skopiować istniejącego stylu    Wykonaj jedną z następujących czynności:

      • W okienku zadań Zastosuj style wskaż styl, który chcesz skopiować, kliknij wyświetloną strzałkę w dół, a następnie wybierz polecenie Kopiuj nowy styl.

      • Okienko zadań Zarządzanie stylami lub okienko zadań Właściwości arkusza CSS kliknij prawym przyciskiem myszy styl, który chcesz skopiować, a następnie wybierz Nowy styl kopii.

  3. W oknie dialogowym Nowy styl wykonaj następujące czynności:

Za pomocą tej funkcji

Czynność

Selektor

  • Aby użyć selektor klasy, wpisz kropki (.), a po nim unikatową nazwę.

  • Aby użyć selektor identyfikatora, wpisz znak numeru (#), a po nim unikatową nazwę.

    Uwaga : Nazwy selektor klasy i identyfikator nie może zawierać spacji, chyba że tworzysz złożonych selektor.

  • Aby użyć selektora elementów, wpisz nazwę elementu HTML lub kliknij selektor pole listy rozwijanej i wybierz nazwę elementu.

  • Aby użyć selektor w tekście, wybierz styl wbudowany.

  • Aby utworzyć złożone selektor, wpisz selektor.

Definiowanie w

Wybierz jedną z następujących opcji:

  • Bieżąca strona dodaje nowy styl do wewnętrznego CSS na bieżącej stronie sieci Web.

  • Nowy arkusz stylów powoduje dodanie nowego stylu do nowego pustego arkusza CSS zewnętrznych.

  • Istniejący arkusz stylów powoduje dodanie nowego stylu do istniejącego zewnętrznego arkusza CSS określonym przez użytkownika.

Stosowanie nowego stylu do zaznaczenia w dokumencie

Stosowanie stylu do bieżącego zaznaczenia na bieżącej stronie sieci Web.

ADRES URL

W przypadku wybrania istniejący arkusz stylów w Definiowanie przy wprowadź adres URL pliku CSS.

Kategoria

Wybierz dowolną z następujących czynności, a następnie ustaw właściwości, które pojawiają się w prawo, w oknie dialogowym:

Porada : Kategorie, które są wyświetlane w Pogrubienie na liście Kategoria zawierają zestaw właściwości.

  • Właściwości czcionek, na przykład rozmiar, grubość, ozdobny i zestawy czcionek.

  • Blokowanie Ustawia wysokość wiersza, wyrównanie tekstu, tekst wcięcia i odstępy w tekście.

  • Tło ustawia tła, kolorów i tła właściwości obrazu.

  • Obramowanie ustawia obramowania i jego właściwości.

  • Pole ustawia właściwości dopełnienia i marginesów pola i elementy blokowe.

  • Położenie ustawia rozmiar i położenie pola i elementy blokowe.

  • Układ ustawia widoczność, przestawne i zawijanie zachowanie, przycinania i inne właściwości układu pola i elementy blokowe.

  • Lista ustawia właściwości elementów listy, w tym typ, położenie i obrazu.

  • Tabela ustawia właściwości elementów związanych z tabeli, w tym odstępy, układ i właściwości obramowania.

Uwaga : Możesz również skopiować styl z jednego arkusza CSS do drugiego. W okienku zadań Zarządzanie stylami przeciągnij stylu z arkusza CSS zawierającego ten styl nazwę arkusza stylów CSS do skopiowania go lub do określonego punktu na liście stylów w celu CSS.

Tworzenie stylu wbudowanego za pomocą okienka zadań właściwości arkusza CSS

  1. W widoku projektu lub widoku kodu na stronie sieci Web wybierz zawartość chcesz dodać styl wbudowany.

  2. W okienku zadań Właściwości arkusza CSS w obszarze Stosowane reguły kliknij prawym przyciskiem myszy selektor, który chcesz zastosować styl wbudowany lub, jeśli pojawi się "(nie zastosowano reguł) ", kliknij prawym przyciskiem myszy dowolne miejsce w obszarze Stosowane reguły, a następnie w menu skrótów kliknij polecenie Nowy styl wbudowany.

  3. W obszarze Właściwości arkusza CSS ustaw żądane właściwości.

Tworzenie i stosowanie nowego stylu nieokreślone

Można tworzyć style i dotyczyć elementów, a następnie zdefiniuj style w dalszej części. Na przykład jeśli chcesz pracować z projektanta, aby utworzyć odpowiedni wygląd strony możesz zastosować style nieokreślone do elementów na stronie, a następnie wspólnie z projektanta, aby później Definiuj style.

  1. W widoku projektu lub widoku kodu na stronie sieci Web zaznacz element, który chcesz zastosować styl.

  2. Aby utworzyć i zastosować nowy styl bez definiowania wszystkie właściwości na pasku narzędzi Styl w polu klasy lub identyfikator wpisz unikatową nazwę nowego stylu.

Początek strony

Stosowanie stylu

Za pomocą okienka zadań Stosowanie stylów, okienko zadań Zarządzanie stylami lub pasek narzędzi stylu stosowanie stylów opartych na klasach lub opartych na identyfikatorach z wewnętrznych i zewnętrznych kaskadowe arkusze stylów (CSS). Okienko zadań Stosowanie stylów umożliwia stosowanie wielu stylów do zaznaczenia, gdy okienko zadań Zarządzanie stylami i pasek narzędzi stylu są ograniczone do stosowania jednego stylu. Pasek narzędzi stylu pozwala szybko nazwy i stosowanie nowego nieokreślone stylów na stronie.

Nie należy zastosować style używające elementu selektora (opartych na elementach style), ponieważ tego rodzaju Style automatyczne są stosowane do ich skojarzony element w całej strony sieci Web. Okienko zadań Stosowanie stylów zawiera opartych na elementach style w obszarze Selektory kontekstowe i wraz z zadań Zarządzanie stylami w okienku są wyświetlane niebieska kropka obok nazwy stylu. Pasek narzędzi stylu nie listy stylów opartych na elementach.

  1. W widoku projektu lub widoku kodu na stronie sieci Web zaznacz element, który chcesz zastosować styl.

  2. Wykonaj jedną z następujących czynności:

    • Stosowanie wielu istniejących stylów    W okienku zadań Zastosuj style naciśnij klawisz CTRL podczas klikania każdego odpowiedni styl.

    • Aby zastosować pojedynczy istniejącego stylu    Wykonaj jedną z następujących czynności:

      • W okienku zadań Zastosuj style kliknij odpowiedni styl klasy lub identyfikator.

      • Na pasku narzędzi stylu, klasy lub identyfikator listy rozwijanej kliknij odpowiedni styl.

      • W okienku zadań Zarządzanie stylami kliknij prawym przyciskiem myszy klasę lub identyfikator stylu, a następnie kliknij przycisk Zastosuj styl w menu skrótów.

    • Aby utworzyć i zastosować nowy styl bez definiowania właściwości    Na pasku narzędzi Styl w polu klasy lub identyfikator wpisz unikatową nazwę nowego stylu.

Początek strony

Uwaga : Zrzeczenie dotyczące tłumaczenia maszynowego: Ten artykuł został przetłumaczony przez system komputerowy bez interwencji człowieka. Firma Microsoft udostępnia te tłumaczenia maszynowe, aby ułatwić użytkownikom, którzy nie znają języka angielskiego, korzystanie z zawartości dotyczącej produktów, usług i technologii firmy Microsoft. Ponieważ ten artykuł został przetłumaczony maszynowo, może zawierać błędy w słownictwie, składniowe lub gramatyczne.

Rozwijaj swoje umiejętności
Poznaj szkolenia
Uzyskuj nowe funkcje w pierwszej kolejności
Dołącz do niejawnych testerów pakietu Office

Czy te informacje były pomocne?

Dziękujemy za opinię!

Dziękujemy za opinię! Wygląda na to, że połączenie Cię z jednym z naszych agentów pomocy technicznej pakietu Office może być pomocne.

×