Компютри » Как да свържете CSS: от статиката към динамиката

Как да свържете CSS: от статиката към динамиката

Компютри

Статичното свързване на CSS стиловете HTML-страница е проста задача. Формираните традиции предлагат три основни опции: директно върху етикета, в специален стилов етикет и чрез свързване на външен css файл. Използването на сървърния език ви позволява да осигурите динамика за тези методи, но използването на езика на JavaScript браузъра отваря напълно различни начини.

HTML и CSS тагове

Уеб страница е формализиран стил на представяне. Всеки текстов или графичен елемент се показва "както е" по подразбиране от браузъра или може да бъде описан от CSS правилата и да се показва, както е проектиран от дизайнера и реализиран от програмиста. Всяко CSS правило е името и стойността. Разработването на каскадни стилови таблици доведе до множество имена и стойности. Имаше псевдокласи и псевдоелементи. Използването на CSS класове и идентификатори е тясно преплетено с HTML тагове. Задачата за свързване на CSS към конкретен таг е получила широка гама от допустими решения.


Съществуват три основни възможности за свързване на CSS правилото с желания таг:
  • директно чрез атрибут style tag;
  • чрез специален таг;
  • чрез свързване на външен файл със стилове.
    • Всяка неточност или грешка в описанието и връзката със стила ще бъдат игнорирани. HTML - езикът на твърдите конструкции, за да го направи динамичен, използвайки сървърния език е позволен само в определени граници. Използването на механизма AJAX разширява границите на възможното. Но във всеки единслучаят на решаване на задача, как да се свърже CSS правило с HTML тагове, е статичен: правилото се записва и показва за какво се отнася.

    Рамка на стила на HTML страница

    Примерът показва как да се свърже външен стилов лист със sci-index.css

    и как да се направи чрез специален стил

    : тук цвета на фона на тялото на тялото се променя. Как да се свърже CSS правило директно към маркер два пъти (чрез id; чрез атрибута style) е описано в
    . Тук scWelcomeLabel идентифицира стила (набор от правила) от външния стилов файл, а атрибутът на стила определя само едно правило: отгоре - координатата Y от горния край на блока, в който се намира този маркер.


    Използването на сървърния език PHP
    за създаване на формата налага друго ниво на "твърдост" на рамката на стила.
    По същество задачата за създаване на уеб страница е процедура за точно определяне на поредица от тагове, които поставят съдържанието (информацията) правилно поради правилата на CSS. Ако страницата се генерира от PHP кода, тогава структурата на твърдите маркери и техните връзки към CSS правилата "усилват" PHP кода. В действителност, задачата за свързване на CSS HTML при използване на PHP е двойно по-висока от твърдостта. Ако дизайнът се промени и трябва да промените правилото за CSS, тогава ще трябва да направите промени в CSS /HTML и PHP кода.

    Динамика на прости правила на CSS

    Няма проблем да се намери маркерът getElementById () и да му се присвои нов стил или да се промени отделно правило за стил. Следващият пример показва заглавието, съдържанието и етикетите на клетките, след което техните координати се променят. Тази логика ви позволява да напишете функцията scfChange иприсвояване на събитията - промяна на размера на прозореца на браузъра.
    Резултат: Посетителят може да променя размера на прозореца на браузъра и сайтът автоматично настройва позицията на заглавието, съдържанието и избата.

    CSS Stylesheet

    HTML е тясно свързан с CSS и не е проблем да създаде специален стилов етикет в реално време и да използва нови (модифицирани) правила. Няма нужда да се решава проблемът как да се свърже CSS файл: желаното съдържание може да бъде генерирано динамично.
    Тук CSS-стилът се формира динамично и се свързва. Можете да направите това няколко пъти. Първо се създава символен низ от StyleText, който съдържа "литералното" описание на необходимия набор от CSS правила. Правилото за фоново изображение тук е обозначено с текста на желаното изображение: производствените разходи са снимка в стила, но това не изисква външен файл на това изображение. След описване на необходимия набор от правила под формата на символен низ, се създава стилов таг, посочва се неговият тип текст /css и съдържанието на стилизирания маркер се попълва с изискваното съдържание. Задачата за свързване на CSS в хода на курса, в процеса на работа на посетителите на сайта, е решена!
    Добавянето в тялото на документа на нов маркер от автомат прави достъпни всички стилове, описани в него. Свържете CSS в динамика - тя е проста, практична и надеждна.

    Свързани публикации