Сделай Сам Свою Работу на 5

Включение стилей в документ





 

Встроенные стили. Атрибут Style

 

Встроенный стиль – самый простой способ задать стиль тега. Включите в тег атрибут style со списком свойств и их значений. Пример:

 

<h1 style="color: blue; font-style: italic">Title</h1>

 

Браузер, поддерживающий стили, выведет текст заголовка синим и наклонным шрифтом. Область действия такого типа стилей распространяется только на содержимое тега. Используйте встроенные стили в редких случаях, так как если вы захотите сменить дизайн документа, то это потребует от вас значительных усилий, особенно если документ велик.

 

Таблицы стилей на уровне документа

 

Стили на уровне документа определяются тегом <Style>. Тег <Style> (за описанием этого тега загляните в НTML справочник) может находиться только внутри тега <head>. Все что находиться внутри тега <style> рассматривается браузером как стилевые правила. Стили, определенный в теге <Style>, действует на все теги документа.

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



 

<html>

<head>

<title>Документ со стилями, определенными на уровне

документа.</title>

<style>

.red {font-style: italic; font-color: red}

</style>

<body>

<h2>Красный заголовок</h2>

<h1 class="red">Синий заголовок</h1>

</body>

 

В этом примере мы добрались до использования регулярных классов. Внутри тега <style>, был определен родовой класс red тега <h2> (за описанием этого тега загляните в НTML справочник). Чтобы применить это стилевой правило к тегу некоторому тегу <h2>, надо назначить атрибуту class тега <h2> значение, совпадающее с именем родового класса, в данном случае это red. Аналогично используются родовые классы. Определите стилевое правило для родового класса, потом назначьте атрибуту class некоторого тега значение, совпадающее с именем родового класса. Тогда этот тег отобразится в соответствии со стилевым правилом.

 

Внешние таблицы стилей

 

Стандарт CSS предусматривает создание отдельных файлов со стилями и присоединение их к документу. Пусть ваш стиль находится в файле style.css (расширение .css общепринято для стилевых файлов). Впишите в тег <head> следующую запись:



 

<link rel="stylesheet" type="text/css" href="http://somehost/style.css">

 

URL таблицы стилей может быть как абсолютным, так и относительным.

 

Приоритеты стилей

 

По источнику: стиль, определенный ближе к тегу, имеет больший приоритет, чем стиль определенный дальше.

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

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

По порядку вхождения: последнее описание преобладает над всеми предыдущими.

Такой принцип объединения стилей называется каскадным, поэтому и таблицы называются каскадными.

 

Значения свойств CSS

 

Ключевые слова

 

Значением почти всех свойств в стандарте CSS могут быть ключевые слова, такие как normal, medium, bold и т.д. Ключевые слова не чувствительны к регистру - bold и BOLD - одно и то же.

Каждое свойство может принимать значение inherit, которое указывает, что значение этого свойства надо наследовать у родительского элемента.

 

Длины

 

Этот тип свойств явным образом устанавливает размер элемента. Он поддерживает следующие размерности:

 

em ширина буквы m в настоящем шрифте) например стилевое правило p {text-indent: 3em} задаст красную строку абзаца размером в три буквы m
ex высота буквы x в настоящем шрифте; применяется аналогично em
px размер в пикселях
in дюймы
cm сантиметры
mm миллиметры
pt пункты, 1/72 дюйма
pc пики, двенадцать пунктов

 



 

body {margin: 1in}

table {padding: 1.5cm}

p {text-indent: -2pt}

img.logo {height: 12px}

p {text-indent: 3em}

blockquote {padding-bottom: 2ex}

table {border-width: 7.5pc}

 

Процентные значения

 

Процентные значения могут быть положительными, отрицательными и десятичными дробями.

 

p {line-height: 120%}

 

Это стилевое правило задает высоту строки в абзаце на 20% больше обычной

 

URL

 

Значением некоторых свойств может быть URL. Синтаксис: url("protocol://server/path").

 

body {background-image: url("/img/bg3.gif")}

 

Цвет

 

Цветовые значения определяют цвет. Цвет можно указать с помощью названия (например blue или red) или с помощью RGB кода. Названия цветов CSS совпадают с их названиями в HTML. СSS допускает задание цвета в виде стандартного RGB кода, как #87FED3.

В отличие от HTML, CSS позволяет задавать цвет трехзначным числом, в этом случае каждая цифра числа удваивается. Таким образом #7C5 тоже самое, что и #77CC55. Также можно задавать цвет в десятичных rgb обозначениях. Например: rgb (126, 6, 9) или rgb (30%, 40%, 70%).

 

Краткое описание свойств

 

Стандарт CSS2 позволяет задавать значение сразу нескольких свойств одним стилевым правилом. То есть конструкцию

 

селектор {

группа_свойств-свойсво1: значение1;

группа_свойств-свойсво2: значение2;

группа_свойств-свойсво3: значение3;}

 

можно заменить на

 

селектор {

группа_свойств: значение1 значение2 значение3}

 

Пример:

 

h1 {font: bold 12px/15px serif}

td {border-left: solid 1px black}

 

Обратите внимание, что значение свойств перечисляются через пробел. Порядок перечисления определяется в каждом конкретном случае отдельно.

 

Тема 18. PHP в примерах и задачах

 

/* Задание 1

Объявить две переменные типа integer и сложить их. */

 

$var1_int=19;

$var2_int=34;

echo "\$var1_int=".$var1_int."<br />";

echo "\$var2_int=".$var2_int."<br />";

 

$var3_int=$var1_int+$var2_int;

echo "Result 1 (способ 1) = ".$var3_int."<br />";

 

// или вот так

echo "Result 1 (способ 2) = ".($var1_int+$var2_int)."<br />";

 

 

/* Задание 2

Объявить три переменные типа string и сложить их как строки и как числа. */

 

$var1_string="Since";

$var2_string="1930 Minsk is";

$var3_string="a capital of RB";

echo "\$var1_string=".$var1_string."<br />";

echo "\$var2_string=".$var2_string."<br />";

echo "\$var3_string=".$var3_string."<br />";

 

 

$var4_string=$var1_string." ".$var2_string." ".$var3_string;

echo "Result 2 (как строки) (способ 1) = ".$var4_string."<br />";

// или вот так

echo "Result 2 (как строки) (способ 2) = ".$var1_string." ".$var2_string." ".$var3_string."<br />";

 

$var5_int=$var1_string+$var2_string+$var3_string;

echo "Result 2 (как числа) (способ 1) = ".$var5_int."<br />";

// или вот так

echo "Result 2 (как числа) (способ 2) = ".($var1_string+$var2_string+$var3_string)."<br />";

 

 

/* Задание 3

Объявить переменную типа boolean. */

 

$var1_boolean=TRUE;

if ($var1_boolean==TRUE) echo "\$var1_boolean = TRUE<br />"; else echo "\$var1_boolean = FALSE<br />";

$var1_boolean=FALSE;

if ($var1_boolean==TRUE) echo "\$var1_boolean = TRUE<br />"; else echo "\$var1_boolean = FALSE<br />";

 

 

/* Задание 4

С помощью арифметических действий из переменных, объявленных в задании 1, получить переменную типа double. */

 

echo "Result 4 (способ 1) = ".($var1_int/2)."<br />";

 

// или вот так

$var2_int=($var1_int+$var2_int)/3;

echo "Result 4 (способ 2) = ".$var2_int."<br />";

echo "Result 4 (проверим тип) = ".gettype($var2_int)."<br />";

echo "Result 4 (установим тип в integer)<br />";

settype($var2_int,"integer");

echo "Result 4 (проверим тип снова) = ".gettype($var2_int)."<br />";

echo "Result 4 (теперь значение \$var2_int) = ".$var2_int."<br />";

 

 

/* Задание 5

Объявить переменную типа Integer, присвоить ей значение 10.

Написать программу, проверяющую следующие условия:

если переменная == 10 вывести OK

если переменная > 10 вывести Больше

во всех других случаях вывести Меньше */

 

$a=10;

if($a ==10")

{

echo "OK";

}

elseif($a > 10)

{

echo "Больше";

}

else

{

echo "Меньше";

}

 

 

/* Задание 6

Объявить переменную типа Integer, присвоить ей значение 10.

Написать программу, проверяющую следующие условия с помощью switch:

Переменная равна 10

Переменная равна 20

Переменная равна 30

4 - ни одно из перечисленных выше условий не выполнилось */

 

 

$a=10;

 

switch($a)

{

case 10:

echo "Равно 10";

break;

case 20:

echo "Равно 20";

break;

 

case 30:

echo "Равно 30";

break;

 

default:

echo "Ни одно из перечисленных выше условий не выполнилось";

}

 

 

/* Задание 7

 








Не нашли, что искали? Воспользуйтесь поиском по сайту:



©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.