чилка HTML
 
Каскадные таблицы стилей (CSS)

Рамки (блочные параметры)

Значения этих свойств используются для установки характеристик области вокруг элемента.
Это может быть применено к символам, изображениям и т.д.

Параметры ЗначениеОписание
border-top-color
border-right-color
border-left-color
border-bottom-color
border-color
цвет
(нет цвета
по умолчанию)
Определяют цвет четырех сторон рамок. Если вместо цвета подставить URL-адрес изображения, оно будет повторяться, образуя рамку.
border-top-style
border-right-style
border-left-style
border-bottom-style
border-style
none (по умолчанию)
solid
double
groove
ridge
inset
outset
Определяют стиль четырех сторон рамок.
border-top
border-right
border-left
border-bottom
border
ширина_рамки,
стиль_рамки,
цвет

(по умолчанию:
medium, none, нет цвета)
Определяют свойства четырех сторон рамок. Работают так же, как свойства отступов (см.ниже), за исключением того, что рамка видна.

ширина_рамки может быть значением medium, thin или thick или задана в единицах измерения.
стиль_рамки может иметь значение none или solid

Аргумент color используется для определения цвета заполнения фона элемента, пока он загружается, а также позади прозрачных частей элемента. Если передать вместо него адрес изображения, то рисунок будет повторяться, заполняя контур рамки.

border-top-width
border-right-width
border-left-width
border-bottom-width
border-width
thin
medium (по умолчанию)
thick
длина
Определяют ширину рамки вокруг элемента. Каждая сторона может быть задана соответствующим параметром. Можно заменить установку четырех индивидуальных свойств установкой одного свойства border-width так же, как и для свойств отступа margin.
ciip rect (/top/right/bottom/left/)
auto (по умолчанию)
Определяет, какая часть элемента видна. Все, что находится за пределами области, указанной этим параметром, увидеть нельзя.
display "", none
"" (по умолчанию)
Этот параметр указывает, будет ли отображен элемент.
float none (по умолчанию)
left
right
Определяет обтекание элемента другими элементами слева или справа вместо помещения их под ними. Поддерживается тегами <div>, <span> ...
height auto (по умолчанию)
длина
Устанавливают высоту элемента и измеряют ее, если это необходимо. Значение возвращаются в виде строки, включающей единицы измерения (px, % и т.д.). Для получения числового значения используется свойство posHeight.
left auto (по умолчанию)
длина
проценты
Задают горизонтальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (px, % и т.д.). Для получения значения в виде числа используется свойство posLeft.

 

 

Рамки


Пример 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.

Пример:  

<div style="background-color: #00ffff; height: 100px; width: 250px">Блок 1</div>
<div style="background-color: #00ff00; height: 150px; width: 50%">Блок 2</div>
<div style="background-color: #ffff00; height: auto; width: auto">Блок 3</div>

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

 

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

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

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

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

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

Пример:  

<div style="overflow: auto; width: 600px; height: 250px; border: solid 2px #dddddd">
  • <h3 align="center">CSS</h3>
    <b>CSS</b> (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки и т.д. ..............
</div>

Результат

CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Способы подключения CSS к документу

Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)

То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
  1. Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>.
    (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;

    <head>
    .....
    <link rel="stylesheet" href="style.css">
    </head>

  2. Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;

    <head>
    .....
    <style media="all">
    @import url(style.css);
    </style>
    </head>

  3. Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;

    <head>
    .....
    <style>
    body {
    color: red;
    }
    </style>
    </head>

  4. Когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

    <p style="font-size: 21px; color: green;">Купи слона</p>

 

 

 

 

 

Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru