Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

Блоки в CSS.



чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - " HTML на примерах, всё доступно и просто (для начинающих)"
- - -чайник, HTML ДЛЯ ЧАЙНИКОВ- - -
>> с к а ч а т ь <<

чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - "Как создать классный сайт!
От начала и до конца"
---чайник, HTML ДЛЯ ЧАЙНИКОВ--->> с к а ч а т ь <<

Блоки в CSS.В HTML к блочной структуре относят: заголовки h1, h2, h3, h4, h5, h6, параграфы <p> и элементы <div> и т.д.
В блоках могут располагаться картинки, ссылки и т.п.

border

Рамка блока. Чтобы сделать рамку видимой и красивой, нужно указать её стиль.

Имеет такие свойства:
-width - толщину рамки
-color - цвет рамки
-style - стиль рамки.

Стили указываются так:
solid - сплошная рамка
dotted - точечная рамка
dashed - пунктирная рамка
double - из двойной сплошной линии (минимальная толщина 3 пикселя)
groove - рамка с имитацией объемной вдавленной линии
ridge - рамка с выпуклой линией
inset - рамка имитирующая вдавленный блок
outset - рамка делает блок так, что он кажется выпуклым.


Можно писать сокращённой формой. Последовательность такая:
толщина стиль цвет.  Все пишется через пробел, например:

h1
{border: 4px dotted red; }

Пример рамки:


CSS Блоки

Также можно задавать разный стиль для каждой стороны рамки. Подставьте к border -top,
-left,
-right,
-bottom
 
(верх,лево,право,низ),
этим вы уточняете какую именно сторону рамки вы бы хотели заменит в стиле.

>> Пример CSS :

h2
{
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 3px;
border-right-style: dotted;
border-right-color: green;
border-bottom-width: 5px;
border-bottom-style: dashed;
border-bottom-color: black; }

В сокращённом виде:

h2{
border-top: 10px solid red;
border-left: 3px dotted green;
border-right: 3px dotted green;
border-bottom: 5px dashed black;}


Можно задать стиль всей рамки, а нужные стороны прописать отдельно.

h2{
border: 20px solid red;
border-top: 5px dashed black;
border-bottom-color: blue; }

 

padding

Это поля внутри блока. Размер от рамки до содержимого в блоке ( размер в пикселях ).

Пример:


CSS Блоки

Здесь также можно задавать значения для отдельных полей, подставляя слова -top, -left, -right, -bottom.

Пример:

h2{
padding: 50px;
padding-top: 10px;
padding-lef: 10px;
padding-right: 10px;
padding-bottom: 10px; }

 

margin

Задаёт расстояние отступа от блока до других элементов на странице.
Вы можете задавать расстояние на каждую сторону, подставляя слова -top, -left, -right, -bottom.
Пример, общий отступ 100 пикселей, а сверху 10 пикселей.

h2{
margin: 100px;
margin-top: 10px; }


Вот что получится:


CSS Блоки



дальше. - Высота и ширина блоков в CSSчайник, CSS  ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 


Понравилась статья? - добавь ее себе!


 

 



сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012