Студопедия — CSS-свойства: поля, заполнение, границы
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

CSS-свойства: поля, заполнение, границы






В CSS каждый элемент располагается в блоке, которому можно задать значе-

ния полей (margin), заполнения (padding) и границы (border). Поле является

отступом элемента от соседних, а заполнение – пустой областью между гра-

ницей и содержимым

 

 

Ширина полей и заполнения задается следующими CSS свойствами:

margin-top, margin-right, margin-bottom, margin-left – для верхней, правой, нижней, левой стороны поля.

margin – сокращенная запись. Задает значение сразу для всех сторон.

Пример:

P {margin: 10px}

аналогично записи

P {

margin-top: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 10px;

}

 

padding-top, padding-right, padding-bottom, padding-left – устанавливают ширину заполнения сверху, справа, снизу и слева от содержимого соответственно. padding – устанавливает значение сразу для всех сторон.

 

Для границ можно задать толщину, цвет и стиль:

border-width – толщина границы;

border-color – цвет границы (по умолчанию – черный);

border-style – стиль границы. Может принимать значения solid (по умолчанию), dotted, dashed, double, groove, ridge, inset или outset.

 

 

 

 

 

Существует сокращенная запись: свойство border задает одновременно толщину, цвет и стиль. Значения указываются через пробел в любом порядке.

Например: <P style="border: solid 1px green">Текст</P>;

 

Для определения размера в CSS существуют свойства width и height. Чаще всего ширину и высоту задают в пикселях (px) или в процентах (%) от ширины родительского элемента.

Пример:

HTML-код:

<html>;

<head>;

<title>Пример</title>;

<style>;

P {font-size: 10pt}

60 Тема 3

#text1 {

border: 1px solid black;

}

#text2 {

border: 1px solid black;

width: 300px;

}

#text3 {

border: 1px solid black;

width: 50%;

}

</style>;

<body>;

<p id="text1">Что такое JavaScript?<BR>;

JavaScript представляет собой ООР (O bject O rientated P rogramming, объектно-ориентированный язык программирования). Это значит, что с его помощью можно строить небольшие объекты, из которых потом складывается целое. «Java-applet» («приложеньице») может запускаться с веб-страницы, нo на самом деле это полностью независимая программа, хоть и маленькая. К тому же ее нельзя просмотреть в виде текста. Для запуска ее необходимо «транслировать» в то, что называется «машинным языком».

</p>

<p id="text2"> JavaScript не может существовать сам по себе, он должен находиться внутри веб-траницы, а веб-страницу необходимо просматривать в браузере, который понимает язык JavaScript (скажем, Netscape Communicator и Internet Explorer).

</p>

<p id="text3">

Как писать на JavaScript

Для начала запомните, что JavaScript — это не HTML! Во-первых, JavaScript располагается внутри документа HTML. JavaScript сохраняется в виде текста вместе с документом HTML. Главная же разница в том, что в HTML имеет довольно расплывчатые правила. Не имеет значения, сколько пробелов вы оставляете между словами или абзацами. По правде говоря, HTML можно было бы писать одной сплошной строкой.

</p>

</body>

</html>

 

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

 

 







Дата добавления: 2015-09-04; просмотров: 704. Нарушение авторских прав; Мы поможем в написании вашей работы!



Обзор компонентов Multisim Компоненты – это основа любой схемы, это все элементы, из которых она состоит. Multisim оперирует с двумя категориями...

Композиция из абстрактных геометрических фигур Данная композиция состоит из линий, штриховки, абстрактных геометрических форм...

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

ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...

Педагогическая структура процесса социализации Характеризуя социализацию как педагогический процессе, следует рассмотреть ее основные компоненты: цель, содержание, средства, функции субъекта и объекта...

Типовые ситуационные задачи. Задача 1. Больной К., 38 лет, шахтер по профессии, во время планового медицинского осмотра предъявил жалобы на появление одышки при значительной физической   Задача 1. Больной К., 38 лет, шахтер по профессии, во время планового медицинского осмотра предъявил жалобы на появление одышки при значительной физической нагрузке. Из медицинской книжки установлено, что он страдает врожденным пороком сердца....

Типовые ситуационные задачи. Задача 1.У больного А., 20 лет, с детства отмечается повышенное АД, уровень которого в настоящее время составляет 180-200/110-120 мм рт Задача 1.У больного А., 20 лет, с детства отмечается повышенное АД, уровень которого в настоящее время составляет 180-200/110-120 мм рт. ст. Влияние психоэмоциональных факторов отсутствует. Колебаний АД практически нет. Головной боли нет. Нормализовать...

Условия приобретения статуса индивидуального предпринимателя. В соответствии с п. 1 ст. 23 ГК РФ гражданин вправе заниматься предпринимательской деятельностью без образования юридического лица с момента государственной регистрации в качестве индивидуального предпринимателя. Каковы же условия такой регистрации и...

Седалищно-прямокишечная ямка Седалищно-прямокишечная (анальная) ямка, fossa ischiorectalis (ischioanalis) – это парное углубление в области промежности, находящееся по бокам от конечного отдела прямой кишки и седалищных бугров, заполненное жировой клетчаткой, сосудами, нервами и...

Основные структурные физиотерапевтические подразделения Физиотерапевтическое подразделение является одним из структурных подразделений лечебно-профилактического учреждения, которое предназначено для оказания физиотерапевтической помощи...

Studopedia.info - Студопедия - 2014-2024 год . (0.01 сек.) русская версия | украинская версия