Каркас

Проделайте следующий эксперимент. Создайте отдельный файл, например, с именем test1.html. Запишите туда любой текст. Можно выделить пару абзацев прямо на странице, которую вы сейчас читаете, скопируйте в файл test1.html и откройте его браузером.
Вы увидите, что текст распределился по всей ширине страницы. Теперь измените ширину окна. Сделайте его более широким, потом более узким. Вы увидите, что ширина текста подстраивается под ширину окна.

C o p y ri g h t a_r u l . r u
Для того, чтобы наша страница не «расплывалась» по всему окну, нужен каркас. Это пара элементов DIV, один из которых «держит» ширину, другой выравнивает по центру.

<body>
  <div style="border:2px solid orange; text-align:center;">
    <div style="border:2px solid cyan; width:800px; display:inline-block; text-align:left;">
      Данная страница создана учащимся Академии Разнообразных Улучшений на сайте "Путь чайника" с целью ознакомления со стилями, задающими ширину и выравнивание текста. Для того, чтобы разместить текст определенной ширины по центру, мы использовали два элемента DIV. Один из них задает ширину, другой выравнивает по центру.
    </div>
  </div>
</body>

Скопируйте этот код и замените элемент body у себя в файле mysite.html, сохраните и откройте браузером.

Обратите внимание на свойство style каждого из элементов DIV.
Для того, чтобы было понятно, какое место занимает элемент на странице, я добавил свойство border (граница, рамка). Толщина — 1px, тип — solid (сплошная), цвет — orange (оранжевый) и cyan (сине-зеленый).

Посмотрите, что происходит при изменении ширины окна. Вы увидите, что ширина наружного DIV всегда растягивается. А ширина внутреннего DIV остается неизменной (mysite1.html).

C o p y ri g h t a_r u l . r u
Ширина внутреннего элемента задана свойством width и равна 800px. Буквы «px» обязательны. Они означают, что ширина задана в пикселях.
800 пикселей соответствуют примерно двум третьим ширины обычного экрана. Вы увидите, сколько это (800px), когда откроете свою страницу в браузере.

Для того, чтобы внутренний DIV выравнивался по центру, используется следующая комбинация стилей.
У внешнего DIV задан стиль text-align: center. Это означает, что все строковые элементы будут выравниваться по центру.
А у внутреннего — стиль display: inline-block. Это означает, что внутренний DIV будет размещаться как строковый, но при этом сохранять свои блочные свойства (например, отступы по вертикали)

Для того, чтобы внутренний DIV не наследовал выравнивание текста по центру, добавлено свойство text-align: left.
 

C o p y ri g h t a_r u l . r u
Сейчас можно создать копию своего файла и поэкспериментировать с элементами, меняя стили и текст. Заметьте, что перенос текста на другую строку происходит там, где есть пробел. Если пробела нет, то по умолчанию текст не переносится. За разрыв текста отвечает стиль word-break, но он нам здесь не понадобится.

Файл mysite1.html

C o p y ri g h t a_r u l . r u

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Оставить комментарий