Способы подключения CSS-таблиц к HTML-страницам.
Существует три вида подключения CSS к веб-странице - создание внешних стилей, применение встроенных каскадных таблиц и внутренние стили. Теперь рассмотрим все по-порядку. Внешние стилиВнешние стили CSS(их еще называют связанными) подразумевают запись параметров каскадных таблиц в отдельном текстовом документе с расширением "css". Стилевой документ помещают в корне сайта, либо в отдельной папке, которая тоже находится(как правило) в корневой директории. Но, ничего не мешает, если очень нужно, создать свой файл стилей для любой отдельной веб-страницы, главное правильно присоединить такой файл к html-странице. Стилевой файл связывают с html-страницей при помощи тега LINK, который располагают в контейнере HEAD. Вот пример двух способов подключения файла style.css к веб-документу: <html> <head> <title>подключение внешних стилей</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="http://divsite.ru/style.css"> </head> <body> </body> </html> В первой строке адрес файлф style.css указан относительно корня сайта, или если оба файла находятся в одной директории. Во втором случае - используется абсолютный адрес стилевого файла. Параметры rel и type всегда одинаковы, меняется лишь значения атрибута href, т. е. адреса файла. Абсолютный адрес дает возможность подключать файлы стилей с любого стороннего интернет-сайта.Встроенные(глобальные) стилевые таблицыЭтот способ взаимодействия html и CSS подразумевает, что таблица стилей внедряется в тег HEAD заголовока html-странички при помощи тегов <style> и </style>, с параметром type, который показывает, что идет подключение именно таблиц стилей CSS, ведь существуют и другие. Пример записи кода глобальных стилей: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Глобальные стили</title> <style type="text/css"> H3 { font-size: 130%; font-family: Verdana, sans-serif; color: #4DB849; } </style> </head> <body> <h3>Пирменение глобальных стилей</h3> </body> </html>
Как
видно из примера заголовок Н3 зеленого
цвета, таким же он будет для всех подобных
заголовков на странице.
Главный
недостаток этого способа очевиден -
таблицу стилей необходимо создавать
для каждой отделбной веб-страницы.
Также, в сложных по дизайну сайтах,
значительно увеличиваеся вес html-страницы,
что ведет к увеличению времени загрузки
проекта.
Внутренние таблицы
стилейВнутренней называют
таблицу стилей, которая задана
непосредственно внутри самого элемента
HTML, также при помощи атрибута style, а в
роли его значений подставляют стилевые
правила. Возьмем пример прошлого
кода(только изменяемое содержимое тега
DODY, все остальное не изменится), и дополним
его внутренними стилями для тега
SPAN:
<body>
<h3><span
style="font-size: 140%; color: #E86F0E">Применение</span>
глобальных стилей</h3>
</body>
Как
видите - первое слово заголовка
немного увеличилось в размере и поменяло
свой цвет.
Применение различных
способов подключения стилей ставит
перед веб-мастером вопрос их приоритета.
Тут в силу вступает принцип
каскадирования, который и разрешает
все конфликты: в нашем примере внутренние
таблицы имеет более высокий приоритет,
поэтому первое слово заголовока и
изменилось. По этому принципу получается,
что первым будет применяется внутренний
стиль, потом глобальный стиль и уже в
последнюю очередь внешние стили.
2)
Синтаксис CSS
Определение стиля в CSS, устанавливающего внешний вид для какого-либо элемента на веб-странице - это всего лишь правило, которое сообщает браузеру, что и каким образом будет отформатировано, например изменить цвет текста заголовка, выделить изображений красной рамкой, фиксированная ширина для меню в 200 пикселей и тд. Любой стиль, состоит из нескольких элементов: селектора, который сообщает браузеру, что именно форматировать и блока объявлений, в котором перечислен список форматирующих команд, используемых браузером для стилизации элемента, определенного селектором. Селектором, как правило, является HTML-элемент, к которому относится блок объявлений. Каждое объявление состоит из свойства и его значения.
Селектор сообщает браузеру, к какому элементу или элементам веб-страницы применяется указанный стиль. Блок объявления - код, расположенный после селектора, содержит форматирующие команды, которые будут применены к указанному селектору. Блок начинается с открывающей фигурной скобки { и заканчивается закрывающей }. Объявление состоит из двух частей: свойства и его значения, заканчивающихся точкой с запятой ";". Свойство - команда форматирования, представляет из себя слово или несколько написанных через дефис слов, определяющих конкретный стиль или стилевой эффект.
|
1 |
p{color:red; font-size:120%;} |
Чтобы сделать правила CSS более удобными для чтения, вы можете писать каждое объявление на новой строке:
|
1 2 3 4 |
p{ color:red; font-size:120%; } |
Браузеры игнорируют пробелы и табуляцию, так что вы можете спокойно добавлять их, создавая хорошо читабельный код. Не забывайте ставить в конце каждого объявления точку с запятой, так как пропущенная в конце объявления ";" может привести к ошибке в коде и ваша страница отобразится некорректно. Опустить указание ";" можно только в конце последнего объявления перед закрывающей фигурной скобкой.
CSS комментарии
Комментарии в CSS используются для объяснения кода или для временного отключения участка кода, для удобства отладки и выявления ошибок. Весь текст между символами /* и */ является комментарием, он не влияет на работу кода и игнорируется браузерами.
|
1 2 3 4 5 |
/*Это комментарий.*/
p{ color:green; /*это свойство задает зеленый цвет текста*/ } |
234) Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.
Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:
p { font-size: 75%}
Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:
h1 { font-family: "lucida calligraphy"}
Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:
table { font-family: arial, "sans serif"; border-style: dotted}
Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:
h2 { font-family: arial; margin-right: 20pt; color:#ffffff }
При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif:
p,table,li { font-family: "sans serif"; }
Селектор класса (class)
При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.
Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:
h1.stepleft { margin-left: 10pt} h2.stepright { margin-left: 20pt}
Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:
< h1 class="stepleft"> Заголовок с внешним отступом 10 пунктов. < /h1> < h2 class="stepright"> Заголовок с внешним отступом 20 пунктов. < /h2>
В тоже время не допускается следующее определение атрибута class:
< h1 class="stepleft" h2 class="stepright"> ,
т.е. можно определить только один атрибут class
Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class.
.left { margin-left: 40pt}
В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.
В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ".left":
< table class="left"> Эта таблица будет иметь внешний отступ, равный 40 пунктам. < /table> < p class="left"> Этот параграф будет иметь внешний отступ, равный 40 пунктам. < /p>
Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.
Селектор идентификатора (id)
Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.
Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением "fontsz":
#fontsz { font-size: 50%}
Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением "first":
ul#first { list-style: disc; color: #ffffff }
Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.
Комментарии css Подключение таблицы стилей
Когда браузер считывает таблицу стилей, он форматирует документ согласно с этой таблицей. Существует три способа подключения таблицы стилей.
Подключение внешней таблицы стилей
Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идеально подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег < link> , который размещается в разделе заголовка:
< head> < link rel="stylesheet" type="text/css" href="/first.css" /> < /head>
Данный код указывает браузеру на то, что определение стиля хранятся в файле first.css. Последний, в свою очередь, выполнит форматирование документа согласно с этим определением стиля.
Некоторые замечания:
внешнюю таблицу стилей можно создать в любом текстовом редакторе;
файл с внешней таблицей стилей не должен содержать никаких тегов html;
файл с внешней таблицей стилей необходимо сохранить с расширением .css.
Пример:
ul { margin-left: 10pt} li { font-family: arial} body { background-color: blue}
Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, т.к. это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.
Пример с пробелом — "margin-left: 20 px";
пример без пробела — "margin-left: 20px".
Подключение внутренней таблицы стилей
Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег < style> , который размещается в разделе заголовка:
< head> < style type="text/css"> li { font-family: arial} p { font-size: 25%} h1 { margin-right: 10pt} < /style> < /head>
В соответствии с определениями стиля браузер форматирует документ. Однако если он встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не поддерживает стили, проигнорирует тег < style> , но содержимое последнего будет выведено на странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария HTML:
< head> < style type="text/css"> < !-- body { background-color: green} table { border-style: dotted} --> < /style> < /head>
Встроенные стили
Данный способ используется в том случае, если необходимо применить стиль к одному появлению элемента. Метод обладает существенным недостатком, т.к. он смешивает содержимое документа с его представлением и теряет, соответственно, многие преимущества таблиц стилей.
Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.
Пример:
< body style="background-color: blue" > < h1 style="color: yellow" > Заголовок H1< /h1> < /body>
В примере показано, как задать цвет фона документа и цвет заголовка h1.
5) Использование HTML-форм для передачи данных на сервер
Как передавать данные серверу? Для этого в языке HTML есть специальная конструкция – формы. Формы предназначены для того, чтобы получать от пользователя информацию. Например, вам нужно знать логин и пароль пользователя для того, чтобы определить, на какие страницы сайта его можно допускать. Или вам необходимы личные данные пользователя, чтобы была возможность с ним связаться.
Формы как раз и применяются для ввода такой информации. В них можно вводить текст или выбирать подходящие варианты из списка. Данные, записанные в форму, отправляются для обработки специальной программе (например, скрипту на PHP) на сервере. В зависимости от введенных пользователем данных эта программа может формировать различные web-страницы, отправлять запросы к базе данных, запускать различные приложения и т.п.
Разберемся с синтаксисом HTML-форм. Возможно, многие с ним знакомы, но мы все же повторим основные моменты, поскольку это важно.
Итак, для создания формы в языке HTML используется тегFORM. Внутри него находится одна или несколько командINPUT. С помощью атрибутовaction иmethod тегаFORM задаются имя программы, которая будет обрабатывать данные формы, и метод запроса, соответственно. КомандаINPUT определяет тип и различные характеристики запрашиваемой информации. Отправка данных формы происходит после нажатия кнопкиinput типаsubmit. Создадим форму для регистрации участников заочной школы программирования.
<h2>Форма для регистрации участников</h2>
<form action="1.php" method=POST>
<!--создаем форму-->
<!--данные формы будет обрабатывать файл 1.php, при отправке запроса будет использован метод POST--> Имя <br>
<input type=text name="first_name" value="Введите Ваше имя"><br> Фамилия <br>
<input type=text name="last_name"><br> E-mail <br>
<input type=text name="email"><br> <p> Выберите курс, который вы бы хотели посещать:<br>
<input type=radio name="kurs" value="PHP">PHP<br>
<input type=radio name="kurs" value="Lisp">Lisp<br>
<input type=radio name="kurs" value="Perl">Perl<br>
<input type=radio name="kurs" value="Unix">Unix<br> <P>Что вы хотите, чтобы мы знали о вас? <BR>
<textarea name="comment" cols=32 rows=5></textarea> <P><input name="confirm" type=checkbox checked>Подтвердить получение <br>
<input type=submit value="Отправить"> <input type=reset value="Отменить"> </form>
Листинг 4.0. form.html
6) Тег <input />создает поле для ввода данных или кнопку:
Атрибуты и значения
Атрибут type="" со значениями: button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week – указывает тип тега <input /> (text – по умолчанию).
Атрибут src="" – указывает url изображения-кнопки, применяется совместно с type="image".
Флажок checked="checked" – устанавливает для примера одно из предложенных значений, применяется совместно с type="checkbox" или type="radio".
Атрибут name="" – присваивает имя элементу. Используется для идентификации полученной информации при обработке данных.
Атрибут value="" используется в различных целях: надписует кнопки (если применяется совместно с type="submit" или с type="reset"), хранит некоторые значения, которые отправляются на обработку (если применяется совместно с type="checkbox" или с type="radio"), устанавливает значения по умолчанию для текстовых полей ввода данных (если применяется совместно с type="text" или с type="password").
Атрибут size="20" – устанавливает длину текстового поля в символах.
Флажок required="required" – определяет обязательное для заполнение поле.
Атрибут autocomplete="" со значениями on, off – говорит браузеру сохранять или не сохранять введенные пользователем данные в поля формы. Другими словами, данные автоматически отобразятся в текстовом поле формы, при повторной попытке ввода, если установлено значение on.
Флажок multiple="multiple" – разрешает выбирать более одного значения из списка.
Атрибут min="6" – устанавливает минимально допустимое количество вводимых символов.
Атрибут max="20" – устанавливает максимально допустимое количество вводимых символов.
Атрибут maxlength="30" – устанавливает максимально допустимое количество вводимых в текстовое поле символов.
Атрибут height="" – определяет высоту поля в пикселях или в процентах.
Атрибут width="" – определяет ширину поля в пикселях или в процентах.
Атрибут form="имя формы" – указывает имя формы, которой принадлежит элемент <input />.
Атрибут formmethod="" со значениями get, post, put, delete – определяет метод отправки данных на обработку по обозначенному url. Имеет преимущество перед атрибутом method="" тега <form>.
Атрибут formaction="url" – определяет url, по которому будут отправлены данные. Имеет преимущество перед атрибутом action="" тега <form>.
Атрибут list="" – смотрите теги <datalist> </datalist>.
7)
Типы данных в РНР
PHP предоставляет определенную гибкость в отношении типов переменных, т.е. с одной и той же переменной на протяжении программы можно работать и как со строкой, и как с числом. Однако, несмотря на это в РНР существуют набор основных типов данных, которые могут явно указываться при работе с переменными:
integer
string
boolean
double
array
object
Есть функция gettype(), возвращающая тип, который РНР назначил переменной:
<?php $var1 = "5"; $var2 = 5; echo( gettype( $var1 ) ); echo "<br/>"; echo ( gettype( $var2 ) ); ?>
В первом случае РНР вернет string, во втором integer.
Существует также функция settype(), которая явно устанавливает тип:
<?php $var = "5"; echo( gettype( $var ) ); settype( $var, integer ); echo "<br/>"; echo( gettype( $var ) ); ?>
Выполнение этого фрагмента кода приведет к тому, что РНР вернет integer.
Кроме функции settype() преобразование типов в РНР можно осуществлять при помощи операторов преобразования типов. Преобразование типов осуществляется путем указания перед переменной ее нового типа, взятого в скобки:
$var = (int)$var;
Соответственно, выполнение следующего кода приведет к тому, что РНР вернет integer:
<?php $var = "5"; // тип string $var = (int)$var; // преобразуем Б int echo( gettype( $var ) ); ?>
8)
В РНР имеется возможность использовать переменные, имена которых содержат переменные. Это сложно понять с первого раза, поэтому сразу в качестве примера приведем листинг 4.17.
‹html› ‹head› ‹title›Динамические переменные‹/title› ‹/head› ‹body› ‹?php $name = "id"; // $name содержит строку "id" $id = 5; // $id содержит число 5 echo $$name; // выводит 5 ?› ‹/body› ‹/html›
В РНР есть такое понятие как ссылка. Для лучшего понимания, о чем идет речь, разберем в качестве примера листинг
‹html› ‹head› ‹title›Ссылки на переменные‹/title› ‹/head› ‹body› ‹?php $a = 1; // $a имеет значение 1 $Ь = $а; // в $b копируется значение $a $с = &$а; // $c является ссылкой на $a $а = 5; // $a имеет значение 5 echo $а; // выводит 5 echo "‹br›"; // перевод строки echo $b; // выводит 1 echo "‹br›"; // перевод строки echo $c; // выводит 5 ?> ‹/body› ‹/html›
Итак, сначала мы присваиваем переменной $а значение 1. Затем кодируем это значение в переменную $Ь. Теперь $а и $Ь имеют одинаковые начения, но они никак не связаны друг с другом, то есть при изменении $а переменная $Ь останется прежней, и наоборот. В следующей строчке используется еще не встречавшийся до этого символ &. В РНР он указывает на то, что создается ссылка $с на переменную $а. Теперь значения этих переменных будут постоянно равны друг другу. Этим и объясняется вывод значения (5, а не 1) переменной $с.
9) Операторы и выражения в РНР (оператор присвоения, арифметические операторы, операторы конкатенации).
Вы уже видели оператор присвоения в работе. Знак равенства (=) является основным оператором присвоения. Запомните, что = не означает «равно чему-либо»! Для этого используется = = (двойной знак равенства), означающий «равно чему-либо», тогда как одиночный знак равенства = обозначает «присвоить значение».
Пример Название Результат
$а + $b Сложение Сумма $а и $b
$а-$b Вычитание Разность $а и $b
$а*$b Умножение Произведение $а и $b
$а/$b Деление Частное от деления $а на $b
$а % $b Остаток Остаток от деления $а на $b
Строковые операторы
Строковые операторыРНР (табл. 3.4) обеспечивают удобные средства конкатенации (то есть слияния) строк. Существует два строковых оператора: оператор конкатенации (.) и оператор конкатенации с присваиванием (.=), описанный в предыдущем разделе «Операторы присваивания».
Конкатенацией
называется объединение двух и более
объектов в единое целое.
Пример Название Результат
$a = "abc"."def" Конкатенация Переменной $а присваивается результат конкатенации $а и $b
$а - "ghijkl" Конкатенация с присваиванием Переменной $а присваивается результат конкатенации ее текущего значения со строкой "ghijkl"
10)
Операторы сравнения — множество логических операторов, предназначенных для совместного использования с оператором if. В предыдущем разделе использовался оператор «больше» (>) для проверки значения переменной $minutes:
$minutes = 4; If ($minutes > 3) { echo "Ваше время истекло! "; echo "Пожалуйста, положите трубку."; $hang_up_now = TRUE; }