Задание 1. Создать таблицы стилей для трех ранее созданных HTML-страниц, так чтобы дизайн страниц различался.
ПРАКТИЧЕСКАЯ РАБОТА № 8
ТЕМА: Каскадные таблицы стилей (CSS)
Цель работы: изучить каскадные таблицыстилей.
Оборудование: персональный компьютер, Windows XP.
Теоретическая часть:
По сути своей стили - это присвоение группе элементов, промаркированных по типу или присвоенному обозначению ("имени"), каких либо сложных параметров, описание которых для каждого из этих элементов утяжеляет страничку. В общем, прописав какому-либо элементу СТИЛЬ, мы можем впоследствии, имея хоть сто таких элементов, поменять вид каждого в течение буквально пары минут, изменив их СТИЛЬ в одном единственном файле. Теперь о том, как это все прикрепляется к сайту. Хранится CSS обычно в отдельном файле, который браузер и считывает при отображении страничек вашего сайта. Чтобы CSS оказывал воздействие на содержимое странички, в начале ее вставляем вот такой вызов:
<link href="/путь/имя файла. css" rel="stylesheet" type="text/css">
прописать его надо между тегом <html> и тегом <body>.
Подключается оно так: пишем эти теги в блокноте и сохраняем на сайте как "имярек.css"
После этого открываем программу и в самом начале под тегом </head>
вставляем вот такое:
<LINK href="/путь/имярек.css" type=text/cssrel=stylesheet> менять в этой строке можно только путь к файлу стиля и наименование самого файла. ВСЕ, совершенно все имена файла А на вашем сайте должны быть набраны исключительно ЛАТИНИЦЕЙ.
|
|
|
Примерное содержание такого выносного файла стиля:
A:link {COLOR: #666666; TEXT-DECORATION: none}
A:visited {COLOR: #666666; TEXT-DECORATION: none}
A:active {COLOR: #666666; TEXT-DECORATION: none}
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
BODY {margin="5"; SCROLLBAR-FACE-COLOR: #FFFFFF; FONT-WEIGHT: normal; BACKGROUND: #FBFBFB; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; COLOR: #666666; SCROLLBAR-3DLIGHT-COLOR: #AAAAAA; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #EEEEEE; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #555555;}
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.large {FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
.navigation {BACKGROUND: #FFFFFF}
.navigationcell {BACKGROUND: #FFFFFF}
.micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.z1 {FONT-SIZE: 8pt; COLOR=#999999; FONT-WEIGHT: bold; text-align: center}
.t3 {FONT-SIZE: 8pt; }
.link {FONT-SIZE: 12; FONT-STYLE: italic}
.txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
.t: link {COLOR: #777777;FONT-WEIGHT: bold;}
.t: visited {COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
FILTER: dropShadow(Color=white,OffX=1,OffY=1,Positive=2 ); HEIGHT: 10
Разложим все теги по порядку
Начнем со ссылок:
A:link {COLOR: #666666; TEXT-DECORATION: none}
A:visited {COLOR: #666666; TEXT-DECORATION: none}
A:active {COLOR: #666666; TEXT-DECORATION: none}
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
|
|
|
А: здесь означает класс элементов, в HTML называемых "ссылки", то есть теги вида "<a href..."
link - обозначение линка в покое, т.е.исходный вид, в котором он предстаёт, когда мы видим страничку сразу после ее загрузки.{} между таких скобок в CSS прописывается присваиваемый элементу стиль, то есть параметры, какие будут автоматически присвоены выбранному элементу.
Так же у нас тут имеется цвет линка - color:#666666 - то есть темно-серый. И еще один момент: если в коде самой странички пишется font color="", в то время как в CSS - "color: имя цвета;", точка с запятой ставится после каждого свойства в списке, если после него идет другое свойство. После последнего ставить не обязательно, но в принципе можно.
И оформление текста - TEXT-DECORATION. Писать это заглавными, с большой буквы или строчными - совершенно равнозначно
Итак, в этом параметре нас значится "none" - это означает, что нам браузер покажет линк в виде простого текста - не синего, как по умолчанию, и без подчеркивания.
Определение "visited" - оформить ссылку точно так же как и посещенные уже ссылки. Если вы замечали раньше - то они, посещенные, по умолчанию браузерами обозначаются как потемневшие. А у нас будет равнообразно. Итак: первые две строки определили вид, в котором линки находятся по изначальному состоянию.
Но как выделить их, обозначить, что это не просто текст, а все же ссылки?
Для этого у нас прописаны следующие две строчки:
|
|
|
A : active { COLOR : #666666; TEXT - DECORATION : none }
"актив" - это есть линк, выделенный мышкой, но с убранным с него курсором. Если вы присматривались иногда, то могли видеть этакие повисшие вокруг линков или картинок "рамочки" выделения - вот это оно и есть. А вот третий параметр...
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
hover - переводится как "парение" в воздухе
Этот параметр указывает браузеру, как оформить эту ссылку при зависании на ней курсора. Здесь мы оставили ей первоначальный цвет, а выделять решили подчеркиванием. Следует также обратить внимание на то, что тут уже вместо "none" стоит "underline" - что, обозначает "подчеркивание" при наведении курсора.
Этими четырьмя строками мы разом назначили ВСЕМ ссылкам на страничке, в которую будет включен этот стиль, особый внешний вид. Эта настройка касается ВСЕХ ссылок как таковых.
а представьте теперь, что было бы, если бы на каждую ссылку писать вот такое? а ссылок - 30, 40? экономия в 40 раз!
Смотрим дальше:
BODY
{
margin="5";
SCROLLBAR-FACE-COLOR: #FFFFFF;
FONT-WEIGHT: normal;
BACKGROUND: #FBFBFB;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
COLOR: #666666;
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #EEEEEE;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #555555;
}
BODY - это "тело странички".
В ней задать свойства скроллбара (полосы прокрутки)
|
|
|
В данном варианте у нас написано:
margin="5"; - это отступ в 5 пикселей от края браузера (по умолчанию гораздо больше). Если отступ вообще не нужен - ставим значение "ноль":0)
SCROLLBAR-FACE-COLOR: #FFFFFF;
цвет скроллбара. То есть раскрашивает самую большую поверхность заданным цветом. У нас это - в тон странице
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
это блик на ползунке и кубиках со стрелками
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
это "тень" - продолжение "блика", (то же самое, только нижняя грань и правая)
COLOR: #666666;
это цвет вообще...
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
это тонюсенькая каемочка вокруг каждой детальки
SCROLLBAR-ARROW-COLOR: #999999;
цвет треугольных стрелок вверху и внизу линейки
SCROLLBAR-DARKSHADOW-COLOR: #555555;}
глубокая черная тень-контур
SCROLLBAR-TRACK-COLOR: #EEEEEE;
цвет дорожки..
. Таким вот образом красят в разные цвета скроллы страничек. Правда, работает это только в Explorer.
Смотрим далее:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
это обозначает последовательность шрифтов, коими отображается контент сайта. Если нет первого, то браузер использует второй. Если нет второго - то третий.
Рассмотрим теперь ячейки таблиц:
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
Итак... здесь прописано - FONT-WEIGHT: normal; - шрифт нормальной толщины.
FONT-SIZE: 11pt; - размер шрифта. Обратить внимание на "pt" - это не в пикселях! это в ПУНКТАХ. Хотя особо критичных разниц тут нет, просто другие единицы измерения.
Тут можно ставить и просто цифру без приписки, в каких либо единицах. Тогда цифра сработает как размер относительный.
Ну и, наконец, это:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это у нас означает тоже, что в самом теге "Имя шрифта".
Только тут перечислено, на всякий пожарный случай, четыре шрифта, более или менее способных заменяться
Этим абзацем мы прописали, что ВЕСЬ текст на сайте отражается 11-м размером шрифтом, одним из указанных там, выше.
Идем дальше:
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это обрезанный тег слоя, который можно использовать для обозначения выделения определенного участка таблицы или текста. Ну - вот, положим, не надо мне весь текст на страничке однообразным - хочу кусок, какого-нибуть извращенного цвета и вида заключаем его в тег DIV и назначаем определенные параметры. Получаем выделение абзаца :0)
На данный момент он совершенно идентичен основному тексту.
А вот так пишется параграф. Он и обозначается просто буквой P.
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
В нем у нас опять же совершенно идентичные параметры. Но если задать иные, то все параграфы станут выглядеть не так как текст основной странички. Следует помнить, что все параграфы, как правило, выделены некоторым отступом сверху и снизу от остального текста. Это легко поправимо, но об этом позже.
Итак, мы задали параметры отображения всем основным элементам:
Тексту,
Ссылкам,
Таблицам,
Блокам и
Параграфам .
Но что делать, если надо какой-то махонький абзац сделать не таким, как остальные абзацы? Что делать если один или два или больше элементов должно иметь отдельный от большинства вид? Возиться с параграфом тут неуместно
Тут можно выкрутиться таким образом:
начало нового стиля обозначаем точкой: .
а за ней сразу вписываем имя нашего особого стиля. Вложенного, так сказать, каскада:
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это обозначает, что теги, в которые включено "class="small""
будут показывать нам свое текстовое содержимое именно в том виде, который прописан в этом абзаце. То есть, на 1pt меньшего в данном контексте размера
типичный пример:
<b><a href="бла-бла-бла" class=small>текст</a></b>
или <p class=small>текст</p>
или <div class=small>текст</div>
или
<td class=small...
<table class=small..
ну и т.п.
Точно так же внутрь тегов можно одновременно и по нескольку запихивать теги равнения. типа align=center (left, right, justify)
Вот еще один класс:
.large {FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
и еще:
.navigation {BACKGROUND: #FFFFFF}
и еще:
.navigationcell {BACKGROUND: #FFFFFF}
и еще:
.micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
а зачем, собственно, нам каждый раз писать тег выравнивания в самом сайте по сто раз? Мы же можем включить его прямо в стиль!
Вот таким образом примерно:
.z1 {FONT-SIZE: 8pt; COLOR=#999999; FONT-WEIGHT: bold; text-align: center}
только тут он прописывается не просто как align=, а как именно как text-align:
Внимание! - обратить внимание, что не через "равно", а именно через двоеточие!!!
.t3 {FONT-SIZE: 8pt; }
а в этом случае нам нужно было просто изменить лишь размер и остальное мы не прописывали,
что у нас получилось в этом случае?
Рассмотрим пример взаимодействия и взаимовлияния стилей:
(еще это называется "наследованием"):
имеем:
<div class="micro">
текст, текст, текст, текст, текст, текст, текст, текст, текст <p class="large">текст, текст, текст, текст...:0)</p> текст, текст, текст, текст, текст, текст, текст, текст,
</div>
Таким образом, действие стиля распространяется на все, что внутри обозначенного объекта, ЕСЛИ внутренние, вложенные теги, не снабжены СОБСТВЕННЫМИ стилями, противоречащими или дополняющими стиль объекта. Стиль перестает действовать сразу по закрытии тега, его содержащего, и в действие вступает стиль объекта более "высокого уровня" - того, что вокруг вложенного или следующего)
.link {FONT-SIZE: 12; FONT-STYLE: italic}
а вот тут у меня стоит "италик" - это означает, что текст будет подвержен модификации в стиле <i></i> - то есть станет наклонным:
.txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
а вот этим мы выделяем линки другого типа - те, которые в менюшках типа календарей по датам:
.t: link {COLOR: #777777;FONT-WEIGHT: bold;}
.t: visited {COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
но в них уже будет меняться и цвет, и толщина букв:
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
а вот эта приписка только для Explorer, в других браузерах даже не отобразится.
FILTER: dropShadow(Color=white,OffX=1,OffY=1,Positive=2 ); HEIGHT: 10}
Это называется "фильтр", отражающий такие спецэффекты, как "тень", "свечение", "переливание" и многое другое.
Рассмотрим его параметры: (Color=цвет отбрасываемой тени - белый!, OffX и OffY - это на сколько пикселей тень будет отстоять от букв - у нас это на пиксель вправо и на пиксель влево. Можно к цифири припользовать знак "минус" - это даст вывернутую влево и вверх от цифири тень :0)
"Поситиве" я, честно сказать, не помню - по-моему, плотность - поэкспериментируйте :
Внимание!! - обратить внимание, что субпараметры взяты в ( ) и после них идет - ";" - точка с запятой. Закрывает каскад все тот же }
параметры внутри {} разделяются опять же ";" но опосля последнего параметра перед самой "}" точка с запятой вовсе не обязательны.
Ну, вот собственно и все самое основное про CSS.
Осталось только пояснить, что вместо того, чтобы лепить вот такие "многотомники" в каждую опять же программу, можно хранить на сайте всего ОДИН единственный файл, вызывать который из каждой потребной программы. Или - хранить таких стилей несколько - для удобства или дизайна: на одной программе так, на другой - этак.
При помощи стилей можно делать и кучу украшательств: например, таблицы не сплошной линией, а пунктиром или точками:
| 1 | 2 |
В первом случае у нас применен вставленный в начало таблицы тег
style="border: dotted 1pt; border-color: gray;
Во втором случае вместо dotted значится dashed
После этих тегов ставим размер наших точек или тире - и проверяем как смотрится.
Этими же стилями можно преобразить и кнопки, и тег HR. Благодаря стилям можно даже ссылки подчеркивать пунктиром, как сейчас входит в моду.
А еще, некоторые браузеры позволяют переключать стили, что при грамотном их написании может служить своеобразными "скинами" сайту.
Использование в стилях тега <H1></H1>
многие поисковики положительно воспринимают заголовки, прописанные в этом теге. Причем, чем меньше цифра тега, тем выше "приоритет" этого заголовка. Всего их 6, с H1 по H6. H6 самый мелкий и более или менее вписывается в дизайн, а вот H1 норовит растянуться в необъемные величины
- вот такими буквами. Но что же делать? Ведь для увеличения находимости нам нужен этот тег! При всей его неудобоваримости и нежелании вписываться в дизайн он приносит неплохое количество "очков" пользы перед поисковиками. И тут нам помогут стили. Прописываем в CSS вот такой каскад:
H1{FONT-SIZE:10pt; COLOR:#666666; font-style: normal; line-height: 16px; font-weight: bold; margin: 0px; padding: 0px;}
заголовок,
второй заголовок- как видите можно и H1 укротить так, чтобы он отображался не крупнее обычного текста и даже отступов, обычных для него, сверху и снизу не будет. За этот параметр отвечает сразу группа настроек:
line-height: 16px; - это у нас высота того пространства, в котором располагается строка. Не шрифта, а всей строки! То есть поставим его, например, 10 - получим наползание текста:
| line-height: 30px; | line-height: 8px; |
| заголовок второй заголовок | заголовок второй заголовок |
font-weight: bold; - этот тег делает заголовки выделенными жирным
margin: 0px; - отступ от верхнего левого угла ячейки
padding: 0px; - отступ внутри ячейки от всех краев, производит почти тот же самый эффект, что и margin
| margin: 0px; | margin: 30px; |
| заголовок второй заголовок | заголовок второй заголовок |
Если же большой нужды в мощной и сложной таблице стилей нет и нужно лишь одноразово подправить какой-то элемент, достаточно вставить в соответствующий тег "style="параметры" - например вот:
<table height="410" border="0" cellpadding="14" cellspacing="0" class="txt" style="border: dashed 1pt; border-color: gray; border-top: none; border-bottom: none;">
Эта строка заголовка таблицы. Встроенный стиль в ней "убирает" верхнюю и правую границы, оставляя только левую и правую.
Порядок выполнения работы:
Задание 1. Создать таблицы стилей для трех ранее созданных HTML-страниц, так чтобы дизайн страниц различался.
Дата добавления: 2019-02-12; просмотров: 257; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!