Суббота, 12 Июль 2014 00:00

Интеграция CSS в xHTML-документ

CSS (Cascading Style Sheets — каскадные таблицы стилей) – способ видоизменения частей документов, созданных при помощи языка разметки.
  
CSS может быть внедрена непосредственно в документ. Это делается с помощью открывающего тега <style> с параметром type=text/css. После чего указываются компоненты документа, к которым будут применены стили. Функции к параметрам начинаются с фигурной скобки  и заканчиваются обратной фигурной скобкой }. Между функцией и её значением ставится двоеточие : . Функция закрывается точкой с запятой ; после описания её значения. Затем устанавливается закрывающий тег </style>, после которого идёт уже редактирование документа.

 Пример внедрения css в документ:

КОД:

<style type="text/css">
font
{
family : Times New Roman ;
size : 14pt ;
}
</style>

Так же CSS может работать в документе, являясь отдельным документом – списком стилей для отдельных компонентов. Документ будет обладать расширением *.css, а в сам документ разметки CSS будет внедрён благодаря тегу <link href="/папка с css/документ.css" rel="stylesheet" type="text/css" /> вначале документа между тегами <head></head>, т.е.

КОД:

<html>
<head>
<title></title>
<link href="/папка с css/документ.css" rel="stylesheet" type="text/css" />
</head>
<body>…

Здесь параметр:
- href=’/папка с css/документ.css’ указывает путь к файлу CSS, при помощи которого будет применено видоизменение данного документа.

На практике бывают такие моменты, когда необходимо, чтобы из всего контента страницы стиль был применен к какому-либо одному элементу. Так, например, из всего текста необходимо выделить некую фразу, другими словами придать ей стиль. Можно, конечно, присвоить для такого элемента отдельный стиль и прописать его отдельным контейнером в CSS-документе. Но согласитесь, по каждому отдельному элементу создавать отдельный класс - это не удобно. А что делать, если у вас таких фраз, которые надо выделить по особому - будет на каждой странице? Не запутаетесь? Есть выход. Прямо в коде страницы приписываем стиль именно к данной фразе. Делается это следующим образом:

КОД:

<xhtml>
<head>
<title></title>
<link href="/папка с css/документ.css" rel="stylesheet" type="text/css" />
</head>
<body>
<font style="color: #ff0000; font-family: Arial; font-size: 21px" >Я-некая фраза, которая написана красным шрифтом Arial и размером 21px</font>
</body>
</xhtml>

Следите за синтаксисом при подобном присвоении стиля - в противном случае стиль может быть либо не применён к конкретному элементу, или и вовсе - изменить дизайн всей страницы в целом.

Спонсоры: