Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

январь 2021
Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31


Чувашия-это моя Россия

Введение в блоковую модель в CSS.

Блоковая модель страниц сайта (box model) - это краеугольный камень системы визуального форматирования в CSS. Это очень важная концепция для понимания работы таблиц стилей.

В соответствии блоковой модели любой элемент, блочный или внутристрочный, генерирует вокруг себя прямоугольник, называемый блоком элемента (хотя блоки для блочных и внутристрочных элементов обрабатываются несколько поразному). К блоку элемента можно применять такие свойства, как границы, поля и фон. Блоки также могут использоваться для позиционирования элементов( то естьопределения его на странице Вашего сайцта) и формирования раскладки страницы сайта.

Блоки элементов в CSS состоят из четырех основных компонентов. В основе блока страниц сайта лежит его содержание. Содержание окружает определенный интервал, после чего идет граница ( border), окруженная полями ( margins).

• Интервалы, границы и поля в CSS не являются обязательными при оформлении блоков. Если Вы укажете для них нулевые значения, они будут просто удалены из блока.

• Область интервала (padding) в CSS - это пространство между краем области содержания и границей (если она есть). Фоновый цвет или изображение, применяемые к элементу, доходят до этой области. Значение padding легко и просто дает позицинировать содержание блока относительно его границ: 


                          div#nav h2 a {
                                        padding: 5px 10px; 
                                        margin: 0px 2px;
			                            background-color: #999; 
			                            text-decoration: none; 
			                            text-align: center;
			                            background-image: url(../../fon/630b2020.jpg); 
			                            }

• Границы (borders) создаются стилевыми свойствами, которые определяют их вид (сплошной или пунктирный), толщину и цвет. Если в границе есть пустое пространство (щель), в этом пространстве отображается фон. Иными словами, фон распространяется под границей до ее наружного края:


                           a img {
                                 /* этот селектор убирает стандартную синюю рамку, 
                                     которая появляется у изображений в некоторых 
                                     браузерах, если вокруг изображения есть ссылка */
	                              border: none;
                                   }
                                   
                              или
                              
                            
                           table { 
                                  font-family: Georgia, "Times New Roman", Times, serif;
			                      font-size: 14px;
			                      color: #000;
			                      border-spacing: 0 0;
			                     }
                                 
                     здесь border-spacing: 0 0; убирает зазор между колонками страницы сайта.

• Поля (margins) всегда прозрачны, а это значит, что сквозь них будет виден фоновый цвет или изображение родительского элемента. Граница поля (наружный край элемента) не видна, но является вычисляемым значением:


                            tr td#tdleft ul a p {
	                                text-align: left;
	                                padding: 5px 5px;  
			                        background-color: #FFF;     
			                        text-decoration: underline; 
			                        margin-left: 10px;
	                                margin-right: 10px;
			                        background-image: url(../../fon/bkgnd.jpg);
			                        text-decoration: none;
			                         }
                                     
                    здесь ( margin-left: 10px; margin-right: 10px;) устанавливают расстояние
                    от границ блока слева и справа до границ левой колонки( sidebar) по 10px.

• Шириной элемента называется только ширина области содержания. Это означает, что если Вы укажете, что элемент должен быть шириной 200 пикселей, то содержимое будет шириной 200 пикселей, а общая ширина будет складываться из ширины интервала, границы и полей, добавленных к этому значению.

• Стиль для верхней, правой, нижней и левой сторон блока может задаваться независимо. Например, Вы можете добавить границу только к нижней части элемента или только к левой или правой стороне.

Указание значений.

Важно использовать правильный синтаксис при указании значений для длины и цвета в правилах таблиц стилей.

В CSS размеры можно указывать в различных единицах. При указании длины принимайте во внимание следующее:

• Не ставьте пробел между числом и двухбуквенным сокращением. Следует писать 24рх, а не 24 рх.

• Единственным значением, для которого не требуется указывать сокращенное наименование единиц, - это 0 (нуль).

• Значения могут содержать дробную часть, например 14.5 ст.

• В некоторых свойствах, например в полях, допустимы отрицательные значения: margin: -500рх.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: