|
|
| Каскадные таблицы стилей
Практически я рассказал уже вполне достаточно, для того, чтобы можно было начать творить сайт, воплощая в жизнь свое идеи. Но, есть такая удобная, замечательная вещь как CSS (cascade style sheets) или по русски каскадные таблицы стилей. Эта технология способна значительно облегчить жизнь веб мастера, и прежде чем окунуться в работу, надо ну... хотя бы знать о ней. А по хорошому её надо использовать на все 100, или на сколько изучил, процентов.
Тема сама по себе достаточно общирная, достойная отдельного учебника, поэтому я постараюсь рассказать о самом основном, что нужно для работы, остальное изучите сами, учебники имеються. Итак,Каскадные таблицы стилей:
- Уменьшают объем работы вебмастера;
- Страницы становятся легче и быстрее грузятся;
- Облегчают работу поисковых машин, что повышает шансы на более высокое место в поисковиках
inline стили (встроенные непосредственно в теги)
Суть в том, что CSS позволяют назначить стиль визуального оформления для любого тега, например:
<b style="font-family:Tahoma; font-size:16pt; color:blue; font-style:italiс"> Так можно задать стиль оформления для каждого тега</b;>
Так можно задать стиль оформления для каждого тега
Внедрённые стили (в тег-контейнере <style> в "голове" документа)
Ну а если для каждого, то значит и для тега <body>и тогда заданный стиль будет соблюдаться на всей странице. Но гораздо интереснее то, что можно задать стиль оформления для нескольких элементов одной страницы и они будут соблюдаться на всей странице. Для этого в голове страницы между тегами <head> и </head> создается контейнер стилей, начинающийся тегом <style> и заканчивающийся тегом </style>. Выглядит это примерно так:
<head>
<style>
body {
text-indent:20pt;
font-family: 'Times New Roman', serif;
font-size: 12pt;
color: #ffffff;
background-color:gray;}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: #ffffff;
font-weight: bold;
text-align: center;}
h2 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: #D3EBE4;
background-color: gray;
font-weight: bold;
font-style: italic;}
p:first-letter {font-size:20pt; color:yellow;}
h5 {
color:#ffff55;text-align:center;font-size:36pt; line-height:3pt;text-indent:5pt;}
em {
color: black;
font-weight: bold;
font-style:normal;}
</style>
</head>
Первыми идут характеристики для тега <body>: величина отступа новой строки("красная" строка), гарнитура шрифта и указание, если такого шрифта нет, заменить подобным (serif), размер основного текста, цвет текста, цвет фона (это на тот случай, если фоновая картинка почему то не загрузиться). Дальше параметры заголовка, здесь появляется насыщеность шрифта font-weight и выравнивание по горизонтали. Параметры следующего заголовка, включают в себя стиль текста font-style, в данном случае italic курсив. Далее идут характеристики параграфа p указание на то, что первая буква в параграфе должна быть другого размера и цвета. В следующем заголовке (h5) указаны расстояния между строками и небольшой отступ новой строки. Таким образом я реализовал возможность создания надписи с тенью.
Надпись с тенью
Надпись с тенью
Код, который вставляется непосредственно на страницу, очень простой:
< h5><font color="black">Надпись с тенью</font><br>Надпись с тенью</h5>< br>
Cделать это средствами HTML, невозможно.
И наконец последнее em тег, который определяет курсив, я использовал для выделения текста. italic я заменил на normal и увеличил жирность шрифта. Однако, если Вы посмотрите код этой страницы, в Internet Explorer это можно сделать выбрав пункт "Исходный текст" в меню "Вид", то никакого тег-контейнера таблицы стилей Вы там не увидите. Кроме того можно заметить, что данный стиль соблюдается на всех страницах сайта. Как это сделать? Очень просто.
Связанные стили (присоединенные к странице тегом <link> в "голове" документа
Для этого нужно тег контейнер, только без тегов <style>, </style>, поместить в текстовый файл и присвоить ему расширение .css, например my.css а на каждой странице, в любом месте между тегами <head> и </head> дать ссылку на этот файл, которая выглядит следующим образом:
<link rel="stylesheet" type="text/css" href="my.css">
Что означает: ссылка на файл, который является таблицей стилей rel="stylesheet" имеет формат .css1 type="text/css" и находится в той же директории, что и страница html href="my.css".
Импортированые стили (атрибут import в тег-контейнере <style>)
Файл таблицы стилей может быть связан с несколькими или даже со всеми страницами сайта или импортирован в них. Для импорта таблицы стилей в том числе с другого сервера:
<head>
<style>
@import url (my.css);
</style>
</head>
Кроме того в тег-контейнере <style> Вы можете задать ещё какие-то свойства, которые будут работать на этой странице и иметь преимущество перед импортируемыми стилями
Вообще приоритеты таблицы стилей выглядят следующим образом
- inline стили
- внедрённые стили
- импортируемые стили
- связанные стили
Когда я познакомился с технологией CSS она произвела на меня большое впечатление, и я с удовольствием её использую. Но тема эта достаточно обширная для одной страницы, и в общем я не ставлю перед собой задачу - создать академический учебник. Всё это уже сделано, людьми понимающими предмет несомненно лучше чем я. Моя же цель дать необходимый минимум, достаточный для начала работы. А учебники для тех, кто решит заниматься веб дизайном серьезно, несомненно понадобяться. Кое в чем я здесь помогу.
Теги HTML Климов А. |
Скачать |
HTML в примерах Дригалкин В. В. |
Скачать |
Учебник CSS Кузина И. А., Храмцов П. Б. |
Скачать |
Только необходимо понимать, что информационные технологии постоянно обновляются. Пока на этом всё, успехов в творчестве Удачи Вам в создании вашего сайта, и пусть он будет лучшим в своей теме.
В этой теме Вы можете задать вопрос о материале Каскадные таблицы стилей.
|
| [Сообщение # 1]
|
| |
Среда 27.11.2024, 14:08:14 
