Създаване и прилагане на стил

Важно: Тази статия е преведена машинно – вижте отказа от отговорност. Английската версия на тази статия за справка можете да намерите тук .

Стилът е набор от характеристики, които са дефинирани в каскаден лист (със стилове CSS) за форматиране. Можете да приложите стиловете за съдържание в уеб страница, включително текст (отделни знаци или цялата абзаци), графики, слоеве, таблици и дори към тялото на цялата уеб страница. Стилове на ви позволяват да използвате ефективно повторно набор от свойства и стойности, без да се налага да зададете свойствата на всеки път, когато искате да ги използвате.

Стилове на CSS каскадно в смисъл, че глобален стил правила спрямо HTML елементи, освен ако местен стил правила заместете ги. Като цяло местен стил правила предимство пред общия стил правила. Например стил, дефинирани във вътрешната CSS в уеб страница замества дефиниран в външни CSS стил. По същия начин вграден CSS дефинирани в рамките на един HTML елемент на уеб страницата замества всеки стиловете, дефинирани за този един и същ елемент в вътрешни или външни CSS на уеб страницата. Части от стил на глобални правила, които не са в противоречие с местни CSS стил правила се отнасят за HTML елементи дори когато местни стилове се прилагат.

В тази статия

Типове на стилове

Създаване на стил

Прилагане на стил

Типове на стилове

Стил, който се намира в външни или вътрешни CSS може да бъде класово, базирани на елемент или базирани на ИД. Стил се определя от поставянето му правило, което се състои от селектор, последван от блок от свойството декларации, които се появяват между Лява фигурна скоба ({}) и дясна фигурна скоба (}). Всеки тип стил се отличава от другите типове стил от му селектор; точка (.) предшества селектора за класово стил; знак за номер (#) предшества селектор за стил на базата на ИД; и селектора за стил на базата на елемент се състои само от HTML елемент, като например H1 елемент.

Стилове на базата на класа

Използвайте класово стилове, за да се дефинира набор от свойства, които искате да използвате на един или повече елементи в уеб страница. Ако някога искате да промените стила, можете да редактирате стил правило набор и всеки елемент, който сте приложили стил за автоматично ще отразява промените.

В следващия пример, "Въведение" е стил избора, и "размер на шрифта: малък" е едно свойство декларация, последван от второто свойство декларация.

Пример за това правило за стил на базата на класа

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

Пример за класово стил, приложен към < p > етикет

<p class="introduction">

Стилове на базата на елемент

Използвайте стилове на базирани на елемент, за да се дефинира набор от свойства, които искате всеки екземпляр на даден HTML елемент за използване в уеб страница. Например за да създадете граница на 25 пиксела около всички абзаци (съдържание, заобиколен от < p > етикети) във вашата уеб страница, създавате елемент на стил, който използва p елемента като му селектор и съдържа декларации за свойства на полета, както е показано в следния код.

Пример за това правило за стил на базата на елемент

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

ИД на базата на стилове

Използвайте стил на базата на ИД, когато искате да се дефинира набор от свойства за единичен елемент или блок от елементите, които искате да се прави разлика от друго съдържание в един или повече уеб страници. Използвайте ИД базиран стил, когато искате да стил един HTML елемент в уеб страница.

Пример за това правило за стил на базата на ИД

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

Пример на базата на ИД на стил, приложен към < p > етикет

<p id="footer">

Вградени стилове

Използвайте вграден стил, когато искате да дефинирате набор от свойства за единичен елемент или блок от елементи в уеб страница и не искате да използвате повторно този стил. За разлика от ИД базирани, базирани на елемент и класово стилове, чиито свойства са дефинирани в главата раздел на уеб страница (вътрешен CSS) или във външен CSS файл, свойствата на вградени стилове (или вграден CSS) са дефинирани директно в HTML елемент, който искате да използвате стила.

Пример за правило за вграден стил

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

Най-горе на страницата

Създаване на стил

Можете да създадете нови стилове, от самото начало или чрез копиране на съществуващ стил. И в двата случая диалоговия прозорец нов стил ви позволява да дефинирате всичко за вашия нов стил, включително селектор на тип, свойства и лист със стилове, който ще съдържа желания стил. Когато искате да създадете нов вграден стил, можете също да използвате прозореца на задачите на CSS свойства . Когато искате да бързо да създадете и приложите нов стил във вашата страница, без да задавам всички свойства за стил, можете също да използвате стил на лентата с инструменти.

Създаване на стил с помощта на диалоговия прозорец нов стил

  1. Направете едно от следните неща:

    • За да добавите стил на външни CSS, отворете .css файл.

    • За да добавите стил на вътрешен CSS, отворете уеб страницата.

    • За да добавите вграден стил, отворете уеб страницата и след това изберете съдържанието, което искате да направите.

  2. Направете едно от следните неща:

    • За да създадете нов стил    Щракнете върху нов стил в една от тези местоположения: Прилагане на стилове на задачите или прозореца на задачите за Управление на стилове , стил на лентата с инструменти или менюто формат .

    • За да копирате съществуващ стил    Направете едно от следните неща:

      • В прозореца на задачите Прилагане на стилове посочете стила, който искате да копирате, щракнете върху стрелката надолу, която се появява и след това изберете Нов стил копие.

      • В прозореца на задачите за Управление на стилове или CSS свойства на задачите щракнете с десния бутон стила, който искате да копирате и след това изберете Нов стил копие.

  3. В диалоговия прозорец нов стил направете следното:

Използвайте това

За да направите това

Селектор на

  • За да използвате селектор на класа, въведете точка (.), последвано от уникално име.

  • За да използвате селектор на ИД, въведете знак за номер (#), последвано от уникално име.

    Забележка: Класа и ИД селектор на имената не могат да съдържат интервали, освен ако създавате сложен селектор.

  • За да използвате селектор на елемент, въведете името на HTML елемент или щракнете върху полето селектор на падащото меню и изберете име на елемент.

  • За да използвате вградено селектор, изберете вграден стил.

  • За да създадете селектор на сложни, въведете селектора.

Определяне на в

Изберете едно от следните неща:

  • Текущата страница добавя нов стил на вътрешен CSS в текущата уеб страница.

  • Нов лист със стилове добавя нов стил към нов празен външни CSS.

  • Съществуващ лист със стилове добавя нов стил към съществуващ външен CSS, от вас условия.

Прилагане на нов стил на документа селекцията

Прилагане на стил към текущата селекция в текущата уеб страница.

URL АДРЕС

Ако сте избрали съществуващ лист със стилове в Дефиниране в, въведете URL АДРЕСА на .css файл.

Категория

Изберете някоя от следните неща и след това задайте свойствата, които се показват отдясно в диалоговия прозорец:

Съвет: Категории, които се показват в получер шрифт в списъка категория съдържат Задаване на свойства.

  • Шрифт задава шрифта свойства, включително размер, тегло, украса и цвят.

  • Блок задава височина на ред, подравняване на текст, отстъп на текста и разредката на текста.

  • Фон задава фоновия цвят и фон свойства на изображението.

  • Граница задава граница и свойствата му.

  • Поле задава допълването и марж свойства на полето и блокови елементи.

  • Позиция задава размерите и позицията на поле и блокови елементи.

  • Оформление задава видимост плаващ и обтичане поведение, изрязване и други свойства на оформлението на полето и блокови елементи.

  • Списък задава свойствата на елементите от списъка, включително тип, позиция и изображението.

  • Таблица задава свойствата на таблицата, свързани с елементи, включително разредка, оформление, свойства на границата.

Забележка: Можете също да копирате стил от един CSS в друг. В прозореца на задачите Управление на стилове плъзнете стил от CSS, която съдържа този стил към или името на CSS, който искате да го копирате до или до определена точка в списъка на стиловете в целевата CSS.

Създаване на вграден стил с помощта на прозореца на задачите на CSS свойства

  1. В изглед за проектиране или изглед на код във вашата уеб страница изберете съдържанието, което искате да добавите вграден стил към.

  2. В прозореца на задачите на CSS свойства под Приложени правилащракнете с десния бутон селектор, който искате да приложите вграден стил или, ако се появи "(няма приложени правила за)", щракнете с десния бутон под Приложени правилаи след това щракнете върху Нов вграден стил в контекстното меню.

  3. Под Свойства на CSSЗадайте свойствата, които искате.

Създаване и прилагане на нов стил на неопределена

Можете да създадете стилове и ги прилага към елементи и след това дефинирайте стиловете по-късно. Например ако искате да работите с designer за създаване на външния вид на вашата страница, можете да приложите неопределена стилове към елементите във вашата страница, след което седнете с designer за дефиниране на стилове по-късно.

  1. В изглед за проектиране или изглед на код във вашата уеб страница изберете елемента, който искате да приложите стил.

  2. За да създадете и приложите нов стил, без да дефинирате всички свойства, в лентата със стил , в раздела класа или ИД на поле, въведете уникално име за новия стил.

Най-горе на страницата

Прилагате на стил

Можете да използвате прозореца на задачите Прилагане на стилове , Управление на стилове на задачите или лентата с инструменти за стил да приложите класово или базирани на ИД на стилове от вашите вътрешни и външни каскадни листове със стилове (CSS). Прилагане на стилове на задачите ви позволява да приложите няколко стилове към селекция, докато прозорецът на задачите за Управление на стилове и стил на лентата с инструменти са ограничени до прилагане на стил на един. Стил на лентата с инструменти ви позволява да бързо име и прилагане на нов неопределена стиловете в страницата си.

Не трябва да приложите стилове, които използват елемент за селектор (стилове на базата на елемент), тъй като тези видове стилове автоматично се прилагат към свързаните елемент в цялата уеб страница. Задачите Прилагане на стилове показва стилове на базата на елемент под Контекстна Селекторите, а заедно с Управление на стилове задачата екран показва синя точка до име на стил. Стил на лентата с инструменти не са изредени стилове на базата на елемент.

  1. В изглед за проектиране или изглед на код във вашата уеб страница изберете елемента, който искате да приложите стил.

  2. Направете едно от следните неща:

    • За да приложите няколко съществуващи стилове    В прозореца на задачите Прилагане на стилове натискайте клавиша CTRL, докато щраквате върху всеки стил, който искате.

    • За да приложите един съществуващ стил    Направете едно от следните неща:

      • В прозореца на задачите Прилагане на стилове щракнете върху стила на класа или ИД, който искате.

      • Лентата с инструменти на стил в класа или ИД на падащото поле щракнете върху желания стил.

      • В прозореца на задачите Управление на стилове щракнете с десния бутон на класа или ИД на стила и след това щракнете върху Прилагане на стил в контекстното меню.

    • За да създадете и приложите нов стил, без да дефинирате всички свойства    В лентата с инструменти на стил в класа или ИД на поле, въведете уникално име за новия стил.

Най-горе на страницата

Забележка: Отказ от отговорност за машинен превод: Тази статия е преведена от компютърна система без човешка намеса. Microsoft предлага тези машинни преводи, за да помогне на потребителите, които не говорят английски, да се възползват от съдържанието за продукти, услуги и технологии на Microsoft. Тъй като статията е преведена машинно, е възможно да съдържа грешки в речника, синтаксиса и граматиката.

Разширете уменията си
Преглед на обучението
Получавайте първи новите функции
Присъединете се към участниците в Office Insider

Беше ли полезна тази информация?

Благодарим ви за обратната връзка!

Благодарим ви за вашата обратна връзка. Изглежда, че ще бъде полезно да ви свържем с един от нашите агенти по поддръжката на Office.

×