Основные csSстили
Чтобы начать создавать первые веб-страницы, достаточно знать некоторое количество основных CSS свойств.
Удалим теги внутри тегаbody в файлеindex.php:
<html>
<head>
<title>PagePHP</title>
<link href="site.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
И удалим содержимое файла: site.css,кроме верхней строки:
@CHARSET "UTF-8";
В файле index.phpдобавим тегspan cидентификатором: span1и надписью CSS, программный код получится следующим:
<html>
<head>
<title>PagePHP</title>
<link href="site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span id="span1">CSS</span>
</body>
</html>
Далее переходим в файл:site.css. Добавим селектор по тегу:
@CHARSET "UTF-8";
body
{
}
Добавлен селектор для тега: body –это содержимое нашей страницы, которое отображает браузер. Добавим первые два свойства:
@CHARSET "UTF-8";
body
{
width: 100%;
height: 100%;
}
Свойство width –ширина, height–высота. Эти свойства записаны для тега body –это значит, что они задают ширину и высоту страницы. Значение размера можно задавать как в пикселях, так и в процентах. 100%означает, что наша страница будет занимать все место по ширине и высоте. Далее добавим несколько свойств, отвечающих за фон:
@CHARSET "UTF-8";
body
{
width: 100%;
height: 100%;
background-color: red;
background-image: url('p.jpeg');
background-repeat: repeat;
background-attachment: fixed;
background-position: topleft;
}
background-color: цвет фона;
background-image: картинка фона;
background-repeat: повторение картинки фона;
background-attachment: будет ли прокручиваться фон;
background-position: начальное выравнивание картинки фона.
В файле CSSтоже имеется подсветка кода.Например, введем самое первое свойство из списка –background-color.Набираем первые две буквы: "ba", нажимаем комбинацию клавиш <Ctrl+Пробел>- автоматически откроется окно подсветки. Выбираем из списка background-color и нажимаем клавишуEnter.
Далее, когда курсор стоит после двоеточия –снова нажимаем комбинацию клавиш <Ctrl+Пробел>, автоматически откроется окно подсветки, но на этот раз уже со списком возможных значений. Выбираем из списка нужное значение , напримерred.
Нажмем клавишуEnter–получится следующая строка:
background-color: red;
Цвет может указываться двумя способами:
Из списка стандартных цветов.
При помощи указания компонентов цвета: rgb, в этом случае перед компонентами цвета ставится символ "#" – решетка.
Примеры:
/* Синий цвет */
background-color: #0000FF;
/* Красный цвет */
background-color: #FF0000;
/* Зеленый цвет */
background-color: #00FF00;
Вспомним!!!Похожим образом, через RGB указывается цвет в Java. RGB - это сокращение от RedGreenBlue – красный, зеленый, синий. Именно в этом порядке указываются компоненты цвета.
Обратите внимание, что под значение каждой компоненты выделяется по два символа в шестнадцатиричной системе счисления. В шестнадцатиричной системе счисления кроме цифр от 0 до 9 также используются буквы от A до F. Таким образом,число 15 –это буква F в шестнадцатиричной системе счисления, а число 255 –это две буквы FF в шестнадцатиричной системе счисления. Как и в Java,каждая компонента цвета может быть в пределах от 0 до 255, но в шестнадцатеричной системе счисления - это значение будет от 00 до FF.Когда стандартных цветов не достаточно –можно указать цвет при помощи RGB –в это случае можно получить16 777 216(почти семнадцать миллионов цветов).
Примечание!!!Узнать значение компонентов цвета по его виду можно на многочисленных сайтах в интернете, если вбить в поисковой строке:основные web-цвета, то в результатах поиска отобразятся сайты с таблицами цветов.
Очень полезно, что языкCSS поддерживает использование комментариев:
/*Это комментарий*/
background-color: #00FF00;
Комментарий в CSS записывается также,как и многострочный комментарий в Java.
Конструкция: /* */применяется сразу для многострочных и однострочных комментариев!
Язык CSSявляется регистронезависимым. Две записи равносильны:
BACKGROUND-COLOR: RED;
background-color: red;
Несмотря на то, что языки HTML и CSS являются регистронезависимыми –используется малый(нижний) регистр букв !!!
Важно!!!Размещение файлов сайта PHP, хостинг, как правило находится на веб-сервере с операционной системой Linux. Операционная система Linux, в отличии от Windows чувствительна к регистру букв!!! В Linux файлы: P.JPEG и p.jpeg – это разные имена файлов! При указании имен файлов и обращении к ним из программного кода необходимо учитывать это обстоятельство. Иначе сайт, работающий при запуске Денвера в Windows, после копирования на веб-сервер с Linux потребует исправлений для правильной работы! Рекомендуется все имена файлов указывать малыми буквами, слова разделять символом нижнего подчеркивания и указывать точное имя файла в программном коде с учетом регистра. Пример правильного имени файла: fon_image.png, обращение из программного кода:background-image: url('fon_image.png');
Свойство:background-image: url('p.jpeg'); указывает файл с изображением для фона. Внутри кавычек указывается имя файла.
Свойство: background-repeat: repeat; указывает на вариант повторения картинки:
repeat –повторять по ширине и высоте
repeat-x –повторять по ширине
repeat-y –повторять по высоте
no-repeat –не повторять
Когда размер изображения меньше размера элемента с фоном –изображение можно размножить.
Свойство: background-attachment: fixed; указывает вариант прокрутки фона:
scroll –фон прокручивается
fixed –фон фиксируется
Свойство: background-position: topleft;задает начальное выравнивание изображения: top left –это выравнивание по верхнему левому углу –изображение начнет размножаться именно из этого угла.
В итоге у нас получилсяCSS код:
@CHARSET "UTF-8";
body
{
width: 100%;
height: 100%;
background-color:red;
background-image:url('p.jpeg');
background-repeat: repeat;
background-attachment: fixed;
background-position: topleft;
}
Посмотрим на результат в браузере - увидим надпись: CSS, (которая находится внутри тега span)и изображение фона, которое повторяется по ширине и высоте. Мы указали цвет фона красный, но картинка закрывает красный фон. (см. рис. 3.10):
Рис. 3.10
Отключим временно свойство для указания картинки фона:
Посмотрим снова на результат
После эксперимента снова включим свойство:
background-image: url('p.jpeg');
Подобная группа свойств для настройки фона применима не только к фону страницы, но и к другим элементам страницы!
Теперь добавим селектор по идентификатору для тега span c надписью CSS:
@CHARSET "UTF-8";
body
{
width: 100%;
height: 100%;
background-color: red;
background-image: url('p.jpeg');
background-repeat: repeat;
background-attachment: fixed;
background-position: topleft;
}
#span1
{
font-style: italic;
font-weight: bold;
font-family: Verdana,Sans-Serif;
font-size: 60px;
color:red;
}
Посмотрим в браузере(см. рис. 3.11):
Рис. 3.11
Изменился внешний вид надписи CSS: шрифт, размер, цвет, наклонность шрифта и толщина букв.
font-style –стиль шрифта (обычный или наклонный);
font-weight –толщина шрифта(обычный или жирный);
сolor –цвет текста;
font-size –размер текста, если в пикселях, то после числа указываются буквы:px;
font-family –шрифт. Можно указать несколько шрифтов через запятую. Это необходимо на тот случай, если браузер не поддерживает первый шрифт из списка. В этом случае будет использован следующий шрифт в списке.
Мы рассмотрели несколько основных стилей CSS, В процессе верстки веб-страниц мы будем знакомиться с другими свойствами CSS по мере необходимости.
Итог занятия:На этом занятии мы:• изучили основы CSS;• научились пользоваться справочником по CSS;• рассмотрели несколько вариантов подключения CSS к HTML;• изучили основные стили CSS.
1Описание любого нужного вам свойства вы всегда найдете в справочнике и сможете изучить его самостоятельно
Занятие 4. "Начало создания проекта "Винни-Пух и компания":реализация клиентской части наJava"
На этом занятии мы познакомимся с проектом “Винни-Пух и компания”: -рассмотрим основные составляющие проекта; -узнаем о взаимодействии составляющих проекта; -создадим клиентскую часть проекта на Java.