Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Тип границы или рамки - border-style

↑

⇐ ПредыдущаяСтр 5 из 10Следующая ⇒

Допустимы следующие значения:

none – рамки нет (по умолчанию);

solid – обычная сплошная граница;

double – двойная линия;

groove – «вдавленная» граница;

ridge – «выпуклая» граница;

inset – «вдавленный» элемент;

outset – «выпуклый» элемент.

dashed – пунктирная граница.

dotted – точечная граница.

Например:P {border-style: dashed}

Цвет рамки -border-color

Определяет цвет рамки. Свойство работает, если задано свойство border-style.

Толщина рамки- border-width

Свойство работает, если задано свойство border-style. Ширину можно указывать числовыми единицами (процентной записи нет) или при помощи следующих ключевых слов:

length – на ширину окна;

thin – тонкая;

medium – средняя;

thick – толстая.

Отступы-padding

Задает расстояние между содержимым и рамкой элемента. Допускается числовая или процентная (от ширины элемента) запись.

Определение полей -margin

Задает ширину поля (отступа) элемента от краев блока. Поля задаются свойствами margin, margin-top, margin-right, margin-bottom и margin-left.Допускается числовая, процентная (от ширины блока) запись или ключевое слово auto. В случае auto предполагается, что браузер будет подыскивать оптимальное значение самостоятельно. Пример:

<HTML><HEAD>

<STYLE type="text/css">

<!--P

{ font-family: "Arial Cyr",Helvetica,sans-serif;

font-size: 0.5cm;

color: blue;

background-color:yellow;} -->

</STYLE><TITLE>Пример 4</TITLE></HEAD>

Теги div и span. Примеры использования.

Эти теги играют особую роль для CSS. Они позволяют выделять в документе отдельные области, задавая для них специфические свойства. Все, что нужно сделать —это поместить теги, принадлежащие конструируемой области внутрь <DIV>...</DIV>или<SPAN>...</SPAN>. Разница между <DIV>и <SPAN>только в одном: после блока <DIV>браузер переходит на новую строку, а после блока <SPAN>—нет. Использование тега <SPAN>позволяет тем самым задавать стилевые свойства даже отдельным словам и буквам.

Пример использования<DIV>:

<TITLE>Использование тега DIV</TITLE>

.area1{ color:red; font-weight:bolder;

font-size:40pt; background:aqua}

.area2{color:black; background:#CFB597}

.area3{color:blue;background:#C0C0C0}

</STYLE></HEAD>

<HTML><HEAD><METAhttp-equiv="Content-Type"content="text/html"><TITLE>Использование тега SPAN</TITLE><STYLEtype="text/css">.area1{ color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2{color:maroon; background:#CFB597; padding:6pt}.area3 {color:blue;background:#C0C0C0; padding:6pt}</STYLE></HEAD>

<BODYbgcolor=white text=black>

<SPANclass=area1><IMG src=vopros.gif>Где</SPAN>

<SPANсlass=аrеа2>начало того конца,</SPAN>

<SPANclass=area3>которым оканчивается начало?</SPAN></BODY></HTML>

13) CSS. Контекстные селекторы.Примеры использования.

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, можно установить цвет текста в <EM> синим только для случая, когда этот тег расположен внутри тега <H3>. Например:

<HTML>

<HEAD>

<TITLE>Контекстный селектор</TITLE>

<!--H3 EM{color:blue}

-->

</STYLE>

</HEAD>

<H3>Контекстный<EM>селектор</EM></H3>

<P>Контекстный<EM>селектор</EM></P>

</BODY>

</HTML>

Можно группировать несколько контекстных селекторов:

H1 B, H2 B, H1 EM, H2 EM { color: red }

что эквивалентно:

H1 B{ color: red }

H2 B { color: red }

H1 EM { color: red }

H2 EM { color: red }

CSS. Классы. Примеры использования.

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

Класс записывается следующим образом:.имя

{ характеристика: величина;...

характеристика: величина;}

Иными словами, определение записывается как обычно, но вместо указаний на теги размещается конструкция.имя.

Например, определим стилевой класс с именем def:

.def{color: red; font-size: 16pt;

font-family: Geneva, Helvetica, sans-serif; border: solid 0.2cm blue }

Здесь строка border: solid 0.2cm blue демонстрирует запись в одном стилевом указании нескольких параметров разного назначения (здесь: стиль, толщина рамки и ее цвет). Такую интеграцию допускают специальные обобщающие стилевые свойства, к которым относится border.

Можно образовывать классы на основе существующих стилевых определений:

< HTML >< HEAD >

<TITLE>Определение класса< /TITLE >

P {font-family:Helvetica}

P.def

{text-align: justify; background:#CFB597; font-size:14pt;border:solid 4pt red;

padding:6pt; margin-left:5%;margin-right:5%}

< /STYLE ></HEAD>

<H2>Классы(обычный заголовок)</H2>

<P> Этот абзац использует стилевое определение для тега Р (рубленый шрифт).

<P class=def> Этот абзац использует стиль производного класса def

(в определение стиля для тега Р добавлено:красная рамка, поля, цвет фона, выравнивание слева и справа, повышенный размер шрифта).

< /BODY ></HTML>

В этом примере за основу класса def взято определение стиля для тега<Р> и добавлены новые свойства

15) CSS. Абсолютное позиционирование. Примеры использования.

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью»

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.

В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

}

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

}

#box4 {

position:absolute;

bottom: 50px;

left: 50px; }

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты. Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title тега <img> который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.

CSS. Относительное позиционирование. Примеры использования.

При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.

Пример 1:

#blok1, #blok2, #blok3 {

border:1px solid red;

width:150px;

height:50px;

}

#blok2{

position:relative;

left:50px;

top:25px;

}

Применим2:

<head>

.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px; position:relative; left:100px}

.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px; position:relative; left:250px}

img {position:relative; left:550px; top:100px}

</style>

</head>

<body>

</body>

17) HTML. Тег table. Атрибутытега table. Примеры использования.

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.

Синтаксис

<table>

<tr>

</tr>

</table>

Атрибуты

Align Определяет выравнивание таблицы.

Background Задает фоновый рисунок в таблице.

Bgcolor Цвет фона таблицы.

Border Толщина рамки в пикселах.

Bordercolor Цвет рамки.

Cellpadding Отступ от рамки до содержимого ячейки.

Cellspacing Расстояние между ячейками.

Cols Число колонок в таблице.

Frame Сообщает браузеру, как отображать границы вокруг таблицы.

Height Высота таблицы.

Rules Сообщает браузеру, где отображать границы между ячейками.

Summary Краткое описание таблицы.

Width Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

<html>

<body>

</tr><tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>

</table>

</body></html>

18) Использование списков в html-документе. Типы списков.

Существует три основных вида списков в HTML-документе:

⇐ Предыдущая 1 2 3 456 7 8 9 10 Следующая ⇒

Познавательные статьи:

Коммуникативные барьеры и пути их преодоления

Рынок недвижимости. Сущность недвижимости

Решение задач с использованием генеалогического метода

История происхождения и развития детской игры

Последнее изменение этой страницы: 2017-02-10; просмотров: 194; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.138.134.163 (0.006 с.)