69699

СТИЛІ

Лекция

Информатика, кибернетика и программирование

Стиль HTML - це набір характеристик шрифту, символів і абзацу, застосовуваних до певної частини документа. Застосування стилів дозволяє уникнути необхідності додавання до HTML нових тегів форматування, оскільки нові команди форматування можуть включатись у стиль, а не у HTML-файл.

Украинкский

2014-10-08

127 KB

0 чел.

Тема 28: СТИЛІ

Мета: опанувати різні способи створення стилів для HTML-документів.

Стиль HTML - це набір характеристик шрифту, символів і абзацу, застосовуваних до певної частини документа. Застосування стилів дозволяє уникнути необхідності додавання до HTML нових тегів форматування, оскільки нові команди форматування можуть включатись у стиль, а не у HTML-файл. Застосування стилів дозволяє з меншими витратами праці оновлювати сторінки, оскільки форматування буде відділене від змісту.

Таблиці каскадних стилів (Cascading Style Sheets)

CSS - це мова, яка містить набір властивостей для визначення зовнішнього виду документів. За допомогою таблиці каскадних стилів дизайнер може повністю контролювати стиль і розташування кожного елемента HTML-документа.

Internet Explorer підтримує стилі, які задаються одним із способів:

вбудовані стилі {Global Style Sheets) визначають стиль елементів

у всьому документі. Інформація про стиль задається в заголовку документа з використанням тегів <STYLE> і </STYLE>;

залучені стилі {Linked Style Sheets) - інформація про стиль зберігається в окремому файлі, вказаному у тегу <LINK>, і може бути застосована для декількох документів;

внутрішні стилі {Inline Style Sheets) - інформація про стиль розміщується всередині тега HTML і поширюєтьсся на весь текст між цим тегом і відповідним йому кніцевим тегом.

CSS дозволяє маніпулювати такими властивостями елементів: властивості шрифту, властивості тексту, властивості фону і кольору, властивості блоку, властивості елементу та ін.

Всі елементи Web-сторінки можна поділити на блокові і рядкові. Типовим прикладом блокового елементу є малюнок (тег <IMG>). Рядковим елементом є окреме слово або рядок тексту, але цілий абзац вважається блоковим елементом. Стилі, які можна застосувати до

блокових і рядкових елементів, відрізняються. До блокових елементів можна застосувати всі рядкові стилі, але до рядкових елементів не можна застосувати блокові стилі.

До блокових елементів відносяться:

абзац тексту (<Р>);

малюнок, графічне зображення (<IMG>);

таблиця (<TABLE>);

список (<OL>,<UL>).

Крім того, блоковим елементом розмітки можна примусово зробити будь-який рядок і навіть будь-яке слово в документі, застосувавши до нього теги <DIV>...</DIV>.

Вміщення будь-якого елементу між цими тегами дозволяє застосувати до нього атрибути стилю, пов'язані з межами, відступами, «набивками» та ін.

Розглянемо абзац як блоковий елемент (див. рисі).

Рис. 1.

Абзац як блоковий елемент має такі характеристики:

висоту і ширину (height, width);

межі;

оотікання, тобто положення блоку відносно тексту, який зна
ходиться поряд;

поле і «набивка» (margin, padding).

«Набивкою» називається відстань від межі блокового елементу до межі його вмісту. Відстань від межі блоку до зовнішнього блокового елементу називається відступом або зовнішнім відступом.

Правила запису CSS задаються у формі простих і групових селекторів.

Найпростіше правило CSS задається таким чином:

Селектор {властивість CSS: значення}

Селектор - це будь-який із розглянутих тегів HTML (наприклад, BODY, P, HI, LI). Далі у фігурних дужках декларується значення властивостей CSS, які визначають стиль даного елементу в документі.

НАПРИКЛАД:

НІ {colonred} - задає стиль заголовкам першого рівня. Для зручності використання можна декларувати в одному правилі декілька властивостей CSS для декількох селекторів.

НАПРИКЛАД:

BODY {background-colonwhite; colonblack; font-family:Times New Roman; font-style:normal; font-size: 1 Opt} (задає стиль всьому тілу документа замість атрибутів тегу BODY).

Параметри шрифтів і абзаців, доступні в стилях HTML

Параметр

Можливі значення

Font-family

Будь-який шрифт, припустимий у Windows

Font-size

Будь-який розмір шрифту в пунктах (pt), дюймах (in), сантиметрах (cm) або пікселях (рх)

Font-weight

Виділення ("жирність") шрифта: Normal, bold (звичайний, напівжирний)

.Font-style

Стиль елементу - звичайний або курсив (Italics)

t" ont-decoration

"Оформлення" тексту: none, underline, italic, line-through (відсутній, підкреслений, нахилений, перекреслений)

_Color

Будь-яке значення RGB або англійська назва кольору

J'ext-align

Left, center, right, justify (ліворуч, по центру, праворуч, по ширині)

i'ext-indent

Відступ - будь-яка величина в пунктах (pt), дюймах (in), сантиметрах (cm) або пікселях (рх)

Параметри обтікання, тобто позиціонування елементів на сторінці, дозволяють створити ефект, при якому блоковий елемент не розриває текст, а вбудовується в нього. Цього ефекту дозволяє досяіти атрибут float.

Значення атрибуту float

Left        Блок притиснутий ліворуч, текст обтікає його праворуч

Right     Блок притиснутий праворуч, текст обтікає його ліворуч

Both     Текст обтікає блок з обох боків

Відступ і набивка разом становлять те поле, яке знаходиться між межею основного елемента (сторінки) і вмістом внутрішнього (вкладеного) елемента. Поле і набивку можна задати як одразу для всього блоку, так і для кожної сторони окремо. Padding-right Набивка праворуч

Padding-left Набивка ліворуч

Padding-top Набивка зверху

Padding-bottom Набивка знизу

Margin-right Праве поле (відступ)

Margin-left Ліве поле

Margin-top Верхнє поле

Margin-bottom Нижнє поле

Границі блоку можуть характеризуватись кольором, шириною, стилем.

Колір для всієї границі задається «border-соіопколір». Для кожної лінії границі можна задати колір окремо:

Border-right-color - колір правої лінії;

Border-left-color - колір лівої лінії;

Border-top-color - колір верхньої лінії;

Border-bottom-color - колір нижньої лінії.

Ширина границі блоку визначається атрибутом border-width, вона може задаватись у пікселях (рх), друкарських пунктах (pt) або у процентах (%). Можна окремо вказати ширину правої, лівої, верхньої і нижньої лінії: border-right-width, border-left-width, border-top-width, border-bottom-width.

Для границі можна задати стиль за допомогою атрибута border-style:

None - границі не відображуються; Solid - безперервна лінія;

Dotted - пунктирна лінія: Dashed - штрихова лінія; Double - подвійна лінія; Groove - об'ємна канавка; Ridge - об'ємний гребінець; Incet - складка всередину; Outset - складка назовні.

НАПРИКЛАД:

style=border-color:red;border-style:dashed;border-top:lOpx purple double>

{абзац буде окреслений зверху подвійною лінією бузкового кольору шириною 10 пікселів, решта ліній - червоні штрихові).

Списки

CSS дозволяють управляти формою маркера, який розташований поряд з елементом списка за допомогою атрибута list-style-type: disk - маркер у вигляді диску; circle - маркер у вигляді кола; square - маркер у вигляді квадрата.

У нумерованих списках встановлюються такі значення атрибута: Lower-roman - малі римські цифри (і, іі, iv,...); Lower-alpha - малі латинські букви (a,b,c,d,..); Upper-roman - великі римські цифри (I,H,IV,...); Upper-alpha - великі латинські букви (A,B,C,D,F,..); Decimal - цифри (1,2,3,...).

За допомогою атрибута list-style-position можна визначити, яким чином буде розташований маркер відносно списку. Атрибут може приймати значення:

inside - вміст спискового елементу виходить за рівень маркера; outside - вміст спискового елементу не виходить за рівень маркера.

Колір і фон сторінки

Фон сторінки задається атрибутом backgivund-соіогхолір. Фоновий малюнок задається за допомогою атрибута background-image: ім'я файла".

Вбудовані стилі

Інформація про стилі міститься в заголовку документа. Інформація про стилі, задається у такому виді: назва тега, за яким у дужках перелічені характеристики стилю.

Наприклад, в документі текст має бути шрифтом Arial розміром 14 пунктів, колір тексту чорний, вирівнювання по ширині, заголовки шрифтом Arial розміром 16 пунктів, курсив, вирівнювання по центру:

<HTML>

<HEAD>

<STYLE TYPE=«TEXT/CSS»>

P {color: black; font-family: Arial; font-size: 14 pt; font-style:italic; text-indent:45 px; text-align:justify;}

HI {colonblack; font-size: 16 pt; font-family: arial; text-align:center; font-style:italic}

</STYLE>

</HEAD>

<BODY>

<Н1>Свята й обряди календарного циклу</Н1>

<Р> Календарні свята й обряди - складний фольклорний комплекс, в якому поєднуються раціональний досвід і релігійно-магічні вірування, високоестетичні традиції та пережиткові звичаї.</Р> </BODY> </HTML>

Відображення програмою-броузером:

Залучені стилі

У випадку, якщо планується використовувати одні й ті ж стилі на декількох HTML-сторінках, найбільш ефективним буде збереження інформації про стилі у файлі, до якого будуть звертатись всі HTML-документи.

Для створення залученого стилю необхідно спочатку створити файл стилів. Це звичайний текстовий файл, який містить інформацію про стиль. Файл стилів зберігається з розширенням .ess.

Файл STYLE. CSS:

Р {colonblack; font-family: arial; font-size: 14 pt;font-style:italic; text-align:justify;}

HI {colonblack; font-size: 16 pt; font-family: arial; text-alignxenter; font-style:italic}

Використовуючи тег <LINK> в заголовку кожного HTML-документа, можна посилатись на цей файл таким чином:

<HEAD>

<TITLE> Мій документ </TITLE>

<LINK REL=STYLESHEET HREF="C:/SITE/STYLE.CSS"> </HEAD>

Атрибут REL описує відношення файла, який залучається, до основного, тобто те, що залучуваний файл є файлом стилів.

Внутрішні стилі

Внутрішні стилі можуть бути задані всередині HTML-тега. Відповідний стиль відноситься до частини документа, вміщеній між даним тегом і відповідним йому кінцевим тегом.

ПРИКЛАД:

STYLE=«text-alignxenter; color:blue»>

Національне вбрання

</Р>

<Р>

Народні заняття

(Текст «Національне вбрання» буде розташований по центру і одержить синій колір. Цей стиль діє до тега </р>, і в цьому місці броузер повернеться до того стилю, який використовувався до задан-ня цього внутрішнього стилю).


 

А также другие работы, которые могут Вас заинтересовать

84203. ПАТОЛОГИЯ БЕРЕМЕННОСТИ И ПОСЛЕРОДОВОГО ПЕРИОДА 26 KB
  К паталогии беременности относят: гестоз; внематочную беременность; самопроизвольный аборт; преждевременные роды; в пузырный занос. Экламксия среди проявлений токсикоза беременных наиболее клинически значима и опасна развивается во второй половине беременности реже в родах и послеродовом периоде. Развитие внематочной беременности связано с теми изменениями маточных труб которые препятствуют продвижению по ним оплодотворенного яйца хроническое воспаление врожденные аномалии опухоль.
84204. ПОНЯТИЕ ОБ ИНФЕКЦИОННЫХ БОЛЕЗНЯХ. МЕСТНЫЕ И ОБЩИЕ РЕАКЦИИ ПРИ ИНФЕКЦИЯХ. СЕПСИС 26.41 KB
  В таких случаях говорят об экзогенной инфекции. Однако заражение может быть эндогенным тогда и речь идет об эндогенной инфекции или аутоинфекции. Для инфекционных заболеваний характерен ряд общих признаков: каждое инфекционное заболевание имеет своего возбудителя который выявляется в крови или экскрементах больного; возбудитель инфекционной болезни имеет входные ворота характерные для каждой инфекции; при инфекционной болезни наблюдается образование первичного аффекта очага который обычно появляется во входных воротах. Сепсис ...
84205. КИШЕЧНЫЕ ИНФЕКЦИИ. ХОЛЕРА. САЛЬМОНЕЛЛЕЗЫ 23.78 KB
  САЛЬМОНЕЛЛЕЗЫ Холера Сальмонеллезы Холера острое инфекционное заболевание с преимущественным поражением желудка и тонкой кишки. В тонкой кишке отмечаются резкое полнокровие отек некроз и слущивание энтелиальных клеток ворсин инфильтрация слизистой лимфоцитами нейтрофилии очаги кровоизлияний. Между петлями тонкой кишки обнаруживается прозрачная липкая тянущаяся в виде нитей слизь. Септическая форма отличается от интерстициальной тем что при незначительно выраженных изменениях в тонкой кишке гесперемия отек гиперплазия лимфатического...
84206. КИШЕЧНЫЕ ИНФЕКЦИИ. ДИЗЕНТЕРИЯ. БРЮШНОЙ ТИФ 24.46 KB
  БРЮШНОЙ ТИФ Дизентерия Амебиаз брюшной тиф Дизентерия острое кишечное инфекционное заболевание с преимущественным поражением толстой кишки и явлениями интоксикации. Местные изменения развиваются в слизистой толстой кишки прямой и сигмовидной. Стадия катарального колита 2 3 дня характеризуется гиперемией и набуханием слизистой кишки в которой встречаются поверхностные участки некроза и кровоизлияния. Просвет кишки в связи со спазмом мышечного слоя сужен.
84207. БОЛЕЗНИ ОРГАНОВ ДЫХАНИЯ. БРОНХОПНЕВМОНИЯ 24.31 KB
  БРОНХОПНЕВМОНИЯ Болезни органов дыхания. Аэродинамическая фильтрация Бронхопневмония Болезни органов дыхания отмечаются многообразием клини коморфологических проявлений. Бронхопневмония воспаление легких развивающееся в связи с бронхитом или бронхиолитом. Бронхопневмония возникает гематогенным путем.
84208. БОЛЕЗНИ ОРГАНОВ ДЫХАНИЯ. КРУПОЗНАЯ ПНЕВМОНИЯ. РАК ЛЕГКОГО 25.98 KB
  РАК ЛЕГКОГО Крупозная пневмония Рак легкого Крупозная пневмония инфекционноаллергическое острое заболевание при котором поражается одна или несколько долей легкого в альвеолах выявляется фибринозный экссудат а на плевре фибринозные наложения. Ткань легкого темнокрасная приобретает плотность печени. Ретонарные лимфоузлы в отношении пораженной доли легкого увеличены полнокровны. Доля легкого в этой стадии увеличена плотная тяжелая на плевре значительные фиброзные наложения.
84209. ПЕРВИЧНЫЙ ТУБЕРКУЛЕЗ 27.3 KB
  Морфологическим выражением первичного туберкулеза является первичный туберкулезный комплекс. Он состоит из трех компонентов: очага поражения в органе первичного очага или аффекта туберкулезного воспаления отводящих лимфатических сосудов лимфангита и туберкулезного воспаления регионарных лимфатических узлов лимфаденита. Образуется как бы дорожка от первичного очага к прикорневым лимфатическим узлам.
84210. ГЕМАТОГЕННЫЙ ТУБЕРКУЛЕЗ 22.97 KB
  Виды гематогенного туберкулеза Генерализованный гематогенный туберкулез Гематогенный туберкулез с преимущественным поражением легких Гематогенный туберкулез с преимущественными внелегочными поражениями Гематогенный туберкулез объединяет род проявления заболевания возникающего и развивающегося в организме человека через значительный срок после перенесенных первичных инфекций и представляет собой послепервичный туберкулез. Гематогенный туберкулез возникает у больных у которых первичная инфекция оставила изменения в виде очагов отсевов в...
84211. Вторичный туберкулез 25.48 KB
  Характеристики вторичного туберкулеза Патологическая анатомия. Осложнения Вторичный туберкулез реинфицированный развивается в организме взрослого человека перенесшего ранее первичную инфекцию которая обеспечила ему относительный иммунитет но не оградила от возможности повторного заболевания после первичного туберкулеза для которого характерны: избирательно легочная локализация процесса; контактное и интраканаликулярное бронхиальное дерево желудочнокишечный тракт распространение; смена клиникоморфологических форм. Выделяют...