Пример 1:   Эта строка подчеркнутая пунктиром.
<style type="text/css"> .dastext {border-bottom: 8px dashed red;} </style> <span class="dastext">Эта строка подчеркнутая пунктиром.</span>

 

Пример 2:  Разные типы рамок.

1. none - Нет границы {border:none;}

2. solid - Есть граница {border: 1px solid;}

3. double - Двойная граница {border: double;}

4. dotted - В точку {border:2px dotted;}

5. dashed - Тире {border:4px dashed;}

6. inset - Вдавленная {border:10px inset #fffacd;padding:5px;}

7. outset - Выпуклая {border:10px outset;}

8. groove - Углубление {border:10px groove #fffacd; padding:5px;}

9. ridge - Ребристая {border:10px ridge;}

 

Пример 3:  Обтекание картинки текстом.

Картинка находится справа, а текст обтекает ее. У картинки есть отступы (параметр margin) с левого края и снизу, чтобы текст не прилипал к картинке. Создана серая рамка вокруг изображения. CSS: .floatright {float:right; margin:0 0 10px 10px; border:20px inset #ffffff;} HTML: <img class=floatright src="image.jpg"> Свой текст ...   Для отмены обтекания картинки используется свойство clear (отмена):     <div style="clear: right;">

 

Пример 4:  Рамка с круглыми углами.

 

Начиная с 1 января 2014 года новые коды ОКТМО, указываются в:
  • в налоговых декларациях;
  • справках 2-НДФЛ;
  • платежных поручениях (поле 105);
  • квитанция на оплату налогов, сборов, пошлин формы ПД-4 налог.

Во всех перечисленных документа указывается 11-ти значный код ОКТМО взамен ранее используемых кодов ОКАТО.

 

CSS: #org { width: 80%; margin-top:2em; margin-left: auto; margin-right: auto; border-radius: 10px 10px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; padding: 15px 20px 15px 80px; margin: 0px 0px 0px 0px; -webkit-box-shadow: 2px 2px 3px #999; -moz-box-shadow: 2px 2px 3px #999; /*IE min-height hack*/ min-height:40px; height:auto !important; height:40px; overflow:visible; position:relative; bottom:6px; right: 6px; border: 1px solid #7e5a25; /*Set the position of the background image*/ background-position: 20px 50%; background-repeat: no-repeat; text-align: justify; font-size: 0.9em; background-color: #e8e3d4; background-image: url(baba.gif); }

HTML: <div id="org"> Начиная с 1 января 2014 года новые коды ОКТМО, указываются в:   • в налоговых декларациях;   • справках 2-НДФЛ;   • платежных поручениях (поле 105);   • квитанция на оплату налогов, сборов, пошлин формы ПД-4 налог. Во всех перечисленных документа указывается 11тизначный код ОКТМО взамен ранее используемых кодов ОКАТО. </div>

 

Пример 5:  Рамка оформлена с помощью вложенных таблиц.

 

Суворов А.В.

 

Вложенные таблицы

<table 1><tr><td> <table 2><tr><td> <table 3><tr><td> <table 4><tr><td> картинка </td></tr></table 4> </td></tr></table 3> </td></tr></table 2> </td></tr></table 1> Таблица 1 Узкая черная рамка (5px) Параметры таблицы: table--> bgcolor=#000000 style="border:2px solid #a3852f" td--> style="padding:5px" Таблица 2 Фон - УЗОР высотой 25px Параметры таблицы: table--> background="УЗОР.png" style=border:2px solid #a3852f td--> style="padding:25px" - задаем "видимую высоту" фона - УЗОР.png Таблица 3 Повторная узкая черная рамка (5px) Параметры таблицы: table--> bgcolor=#000000 style="border:2px solid #a3852f" td--> style="padding:5px" Таблица 4 Портрет (картинка) Параметры таблицы: td--> img src="ПОРТРЕТ.png"

 

Пример 6:  Вертикальная рамка.

CSS: <style type="text/css"> p.line1 { border-left: 3px dotted red; padding: 5px; } p.line2 { border-left: 10px solid green; padding: 10px; background:#d9ffd9; } </style>

HTML: <p class="line1">Текст 1 <br>Текст 1</p> <p class="line2">Текст 2 <br>Текст 2</p> Результат: Текст 1 Текст 1 Текст 2 Текст 2 Текст 2

Свойства CSS width и height - устанавливают ширину и высоту блочных элементов.
Ширина и высота элемента может быть задана следующими способами:

• auto - Размеры элемента определяется его содержанием. (по умолчанию)
• % - Размеры элемента задаётся в процентах от высоты/ширины элемента родителя.
• px - Размеры элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.

Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание "выползет" за пределы элемента.

Управление содержанием элемента

Что делать с содержанием элемента, если оно превышает его размер?

Если элементу присвоены точные значения высоты и ширины (height, width) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow, который указывает браузеру, что делать с элементом в таких случаях.

Свойство overflow может иметь следующие значения:

• visible - Элемент растягивается до необходимых размеров. (по умолчанию)
• hidden - Содержание элемента "обрезается" видна лишь та его часть что помещается в элементе.
• scroll - Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).
• auto - Полосы прокрутки добавляются при необходимости.

• <h3 align="center">CSS</h3>
  <b>CSS</b> (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки и т.д. ..............