https://vottakvotxo.0pk.me/ поипеньо.о ru-ru Thu, 19 Nov 2009 00:14:41 +0300 MyBB/mybb.ru https://vottakvotxo.0pk.me/viewtopic.php?pid=5#p5 <p>Параметры CSS</p> <p>ПРИМЕЧАНИЕ 1: для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соотвествующего цвета. Их можно найти тут: ТАБЛИЦА ВЕБ-ЦВЕТОВ</p> <p>Например, вот так будет выголядеть код, если элементу1 мы хотим задать красный цвет фона</p> <p>Код:<br />#element1 {background-color: #FF0000;}</p> <p>ПРИМЕЧАНИЕ 2: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения<br />em - текущий кегль (высота шрифта); <br />ех - высота буквы х для текущего кегля; <br />рх - пикселы (относительно координат окна). <br />in - дюймы; <br />cm - сантиметры; <br />mm - миллиметры; <br />pt - пункты; <br />ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ<br />Например, вот так мы задаем ширину и высоту элемента<br />Код:<br />#elemnt1 {height: 200px; width: 70%;}</p> <p>background-color&#160; &#160;<br />Цвет фона элемента. Значением может быть веб-название цвета. <br />Пример: #element1{backgroun-color: #FF0000;}</p> <p>background-attachment&#160; <br />Определяет, будет ли прокручиваться фон. <br />Значения:&#160; <br />scroll - фон поддается прокрутке<br />fixed - не поддается прокрутке.<br />Пример: #element1 {background-attachment: fixed;}</p> <p>background-image<br />Фоновая картинка<br />Значения:<br />url (&quot;...&quot;) - где в скобках адрес картинки<br />none - никакой картинки<br />Пример: #element1 {background-image: url(&quot;http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg&quot;);}</p> <p>background-repeat<br />Определяет, будет ли размножаться фоновая картинка<br />Значения:<br />no-repeat - Не размножается<br />repeatx - размножается по горизонтлаи<br />repeaty - размножанется по вертикали<br />repeatxy - размножается в обоих направлениях.</p> <p>background-position<br />Расположение фоновой картинки на странице<br />Значения:<br />Сначала указывается расположение по вертикальной оси: top, center или&#160; bottom, затем по горизонтальной: left, center или right<br />Пимер: #element1 {background-position: top center;}</p> <p>border<br />Все параметры рамки, например, толщина, цвет и т.д.<br />Пример: #element1 {border: #FF0000 2px;}</p> <p>border-color<br />Цвет рамки<br />Пример: #element1 {border-color: #FF0000;}</p> <p>border-width<br />Толщина рамки<br />Пример: #element1 {border-width: 2px;}</p> <p>border-style<br />Стиль оформления рамки всех сторон рамки<br />Значения:<br />none - указывает на то, что рамки нет.<br />dotted - задает пунктирную рамку из точек<br />dashed - задает штрих - пунктирную рамку<br />solid - задает одинарную сплошную рамку<br />double - задает двойную сплошную рамку<br />groove - создает трехмерный эффект <br />ridge - создает трехмерный эффект возвышающейся рамки<br />inset - создает трехмерный эффект заглубленности фона <br />outset - создает трехмерный эффект выпуклости фона <br />Пример: #element1 {border-style: none solid none none;}</p> <p>border-top<br />Все параметры верхней рамки<br />border-bottom<br />Все параметры нижней рамки<br />border-left<br />Все параметры левой рамки<br />border-right<br />Все параметры правой рамки<br />Пример: #element1 {border-top: none #FF0000 2px}</p> <p>color<br />Цвет шрифта в элементе<br />Пример: #element1 {color: #FF0000;}</p> <p>float<br />Отображение растекающегося объекта<br />Значения:<br />left - отображает растекающийся объект на левой стороне<br />right - отображает растекающийся объект на правой стороне<br />none отображает объект вставленным в страницу<br />Пример: #element1 {float: left;}</p> <p>font-size<br />Размер шрифта<br />Значения: См. Примечание 2.<br />А также:<br />xx-small, x-small, small, medium, large, x-large, xx-large. <br />Пример: #element1 {font-size: small;}</p> <p>font-style<br />Начертание шрифта.<br />Значения: <br />normal - соответствует основному начертанию<br />italic - курсив<br />oblique - чуть менее наклонный, чем курсив<br />Пример: #element1 {font-style: italic;}</p> <p>font-weight<br />Толщина начертания<br />Значения:<br />normal - обычный шрифт<br />bold - полужирный<br />число от 100 (минимальная жирность) до 900 (максимальная)<br />Пример: #element1 {font-weight: 200;}</p> <p>font-family<br />Семейство шрифта<br />Пример: #element1 {font-family: sans serif;}</p> <p>font<br />Все вышеперечисленные параметры шрифта вместе<br />Пример: #element1 {font-: sans serif #FF0000 small bold;}</p> <p>display<br />Способ отображения элемента<br />Значения:<br />none - элемент вообще не виден<br />block - выдает элемент в рамке<br />list-item - выдает элемнт как часть списка и присваивает ему маркер<br />inline - выводит объект в одну строку.<br />#element1 {display: none;} </p> <p>height<br />высота элемента<br />width<br />ширина элемента<br />Значения: см. Примечание2.<br />Пример: #element1 {height: 20px; width: 400px;}</p> <p>padding и margin<br />Это два на первый взгляд похожик параметра. Но между ними есть разница:<br />padding - линия отбивки материнского объекта<br />margin - линия отступа дочернего объекта.<br />Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут распологаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.</p> <p>padding-top<br />Верхняя отбивка<br />padding-bottom<br />нижняя отбивка<br />padding-left<br />левая отбивка<br />padding-right<br />Правая отбивка.<br />padding<br />все стороны отбивки сразу.<br />Значения: смотри Примечание 2.<br />Пример: #element1 {padding-top: 20px;}</p> <p>margin-top<br />Верхний отступ<br />margin-bottom<br />нижний отступ<br />margin-left<br />левый отсуп<br />margin-right<br />Правый отсуп<br />margin<br />все стороны отступа сразу.<br />Значения: смотри Примечание 2. ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ<br />Пример: #element1 {margin-top: -20px;}</p> <p>text-align<br />Выравнимание текста внутри элемента.<br />Значения:<br />left - по левому краю<br />right - по правому краю<br />justify - по ширине<br />center - по центру<br />Пример: #element1 {text-align: center;}</p> <p>text-decoration<br />Украшение текста<br />Значения:<br />underline - подчеркивание<br />overline - верхнее подчеркивание<br />none - никакого<br />blink - мигание.<br />Пример: #element1 {text-decoration: underline;}</p> <p>vertical-align<br />выравнивание элемента по вертикали<br />Значения:<br />top - по верхнему краю<br />bottom - по нижнему<br />middle - посередине<br />Пример: #element1 {vertical-align: middle;}</p> mybb@mybb.ru (bel) Thu, 19 Nov 2009 00:14:41 +0300 https://vottakvotxo.0pk.me/viewtopic.php?pid=5#p5