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>
Размеры первого абзаца не указаны в стиле, ширина первого абзаца задана абсолютно в пикселях, а третьего – относительно ширины окна. Теперь, если изменить размер окна, пропорционально изменится ширина тех элементов, где она была задана в процентах.
|
