Как да използвате опциите за оформление в панела със свойства на CSS на Dreamweaver

В горната част на панела CSS Designer Properties ще намерите CSS свойствата, които обикновено се използват за създаване на оформления на страници. Използвате тези опции, за да зададете височина, ширина, подравняване, позициониране и разстояние. Тези настройки са идеални за създаване на оформления на страници със стилове на клас и идентификатор, за да правите неща като подравняване на изображения и позиция

тагове за създаване на оформления с няколко колони.

Можете да използвате опциите за оформление в панела CSS Property, за да зададете тези стойности:

• Ширина: Посочете ширина за всеки елемент, който може да има определени размери, като например a

  етикет. Опциите за размер са пиксел (px), точка (pt), пика (pc), процент (%), em, rem, ex и ch.

• Височина: Посочете височина за всеки елемент, който може да има посочени размери.

  • Минимална и максимална ширина: Посочете минимална и максимална ширина за

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

  • Минимална и максимална височина: Посочете минимална и максимална височина за

    тагове и други блокови елементи.

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

    етикети. Можете да зададете полето отделно за горното, дясното, долното и ляво. Запълването се измерва в пиксели, точки, инчове, сантиметри, милиметри, пики, ems, exs и проценти.

  • Padding: Задава количеството пространство в границите на елемент. Например, можете да използвате padding, за да създадете пространство между границите на a

    етикет и неговото съдържание. Можете да зададете подплънки отделно за горната, дясната, долната и лявата част. Запълването се измерва в пиксели, точки, инчове, сантиметри, милиметри, пики, ems, exs и проценти.

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

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

• Позиция: Опцията Позиция, достъпна от долната част на секцията Оформление на панела Свойства, променя начина, по който елементите са позиционирани на страница. Позиционирането може драстично да промени начина, по който елементите на ниво блок (като таблица, списък, заглавка, параграф и

  тагове) се появяват в браузъра.

  • Наследяване: Не е необходимо да указвате тази опция по подразбиране. Освен ако не е избрана друга опция, всеки елемент наследява позиционирането на своя родителски елемент.

  • Статично: Поставете съдържанието на неговото място в потока на документа. По подразбиране всички HTML елементи, които могат да бъдат позиционирани, са статични.

  • Абсолютно: Използвайте горната и лявата координати, за да контролирате позицията на елемент спрямо горния ляв ъгъл на прозореца на браузъра или горния ляв ъгъл на елемент, който съдържа елемента.

  • Фиксирано: Позициониране на елемент спрямо горния ляв ъгъл на браузъра. Съдържанието на елемент, използващ фиксирано позициониране, остава постоянно, дори ако потребителят превърта надолу или през страницата.

  • Относителен: Използвайте позиция спрямо точката, където вмъквате елемента в страницата или спрямо неговия контейнер.

    

  • Float: Подравнете елементи, като изображения и

    тагове, отляво или отдясно на страница или друг контейнер, което кара текст или други елементи да се обвиват около него. Щракнете върху иконите в полето Float, за да посочите следните четири опции: Inherit, Right, Left или None.

  • Изчистване: Предотвратете припокриването на плаващо съдържание в област отляво или отдясно или от двете страни на елемент. Тази опция е полезна, когато плаващ елемент, като a

    маркер, използван за създаване на странична лента, припокрива друг елемент на ниво блок, като например маркер, използван за създаване на долния колонтитул на страница.

  • Overflow-x и -y: Кажете на браузъра как да показва съдържанието на елемент, ако контейнерът, като

    маркер, не може да побере цялата височина или ширина на елемента. Опциите за препълване са

  • Видимо: Поддържайте видимо съдържание, като изображение или текст, дори ако се разширява извън определената височина или ширина на контейнер.

  • Скрит: Изрежете съдържанието, ако надвишава размера на контейнера. Тази опция не предоставя ленти за превъртане.

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

  • Автоматично: Накарайте лентите за превъртане да се показват само когато съдържанието на контейнер надхвърля границите му.

• Дисплей: Посочва дали или как да изобрази елемент в браузър. Например, можете да промените позиционирането на неподреден списък от хоризонтално към вертикално, като изберете Inline или скриете елемент, правейки го невидим, като изберете Няма. Можете да използвате опцията Display със скриптов език, за да промените динамично показването на елементи.

• Видимост: Контролирайте дали браузърът да показва елемент или не. Опциите за видимост са

  • Наследяване: Елементът има видимостта на елемента, в който се съдържа (по подразбиране).

  • Видим: Елементът се показва.

  • Скрит: Елементът не се показва.

  • Сгъване: За използване с HTML таблици. Свиването може да се използва за премахване на колона или ред, без да се засяга останалата част от оформлението на таблицата.

• Z-индекс: Контролирайте позицията на елемент върху Z-координата, която контролира реда на подреждане на елементите един спрямо друг. Елементите с по-голям номер се припокриват с елементи с по-нисък номер.

• Непрозрачност: Контролирайте нивото на непрозрачност за елемент от 0,0 (напълно прозрачен) до 1,0 (напълно непрозрачен). Например, ако въведете .5 в полето за непрозрачност, непрозрачността на елемент ще бъде намалена до 50 процента.