www.popularsite.ru

RESTOR- От HTML до С++

Объявление

HTML

JavaScript

CSS

Flash MX

   

Содержание Курса(Введение в HTML)

     

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » RESTOR- От HTML до С++ » Основы работы с CSS » 1. Лекция: Общая информация


1. Лекция: Общая информация

Сообщений 1 страница 5 из 5

1

Технология CSS: общий взгляд

Название "Каскадные таблицы стилей" происходит от английского Cascading Style Sheets, аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения представления элементов HTML и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.

0

2

Пример использования CSS

С помощью CSS документы HTML можно выводить, используя различные стили вывода.

Пример. Возьмем несколько таблиц стилей:

Код:
Style1
p
{
color: blue; font-style: italic;
margin-left: 20pt;
}

ol,ul,li
{
list-style: circle;
font-family: arial; 
}

a:link    {color:black}
a:visited {color:black}

body
{
background-image: url("https://restor.rusff.me/img/pic1.gif")
}
Style2
h1,h3,h6
{
margin: 20pt;
}

h1,h2,h3,h4,h5,h6,p,ol,li
{
font-family: arial, "sans serif";
}

p,table,td,ol,ul
{
font-style: oblique;
}

:link {COLOR: blue;}
:visited {COLOR: blue;}
a:active {COLOR: black;}
a:hover {COLOR: black;}

a.myln:link {COLOR: olive;}
a.myln:visited {COLOR: olive;}
a.myln:active {COLOR: teal;}
a.myln:hover {COLOR: teal;}
Style3
p,ol,ul
{
font-style: italic;
margin-right: 20pt;
}

p,h1,h6  
{
font-family: "comic sans ms", arial, "sans serif"; 
}

p,th
{
font-size: 20%
}

table {background-color: blue}

body {background-color:#FFF000}

p,ol,ul 
{
color:green; 
}

:link    {color:blue}
:visited {color:blue}
:active  {color:green}
:hover   {color:green}
Style4
:link     { color:red }
:visited  { color:red }
:active   { color:yellow }
:hover    { color:yellow }

body
{
background-color: #FAD123;
}

h1,h2,h6
{
margin-left: 20pt;
color: blue;
}

h3,h4,h5
{
margin-left: 10pt;
color: green;
}

p,h1,h3
{
font-size: 150%;
}

p,h1,h2,h3,h4,h5,h6,table
{
font-family: arial;
}

p
{
margin-left: 30pt;
}
Style5
p,h1,h2,h3
{
font-size: 75%;
}

table,h4,h5,h6,li
{
font-family: arial, "sans serif";
margin-left: 20pt;
}

body
{
background-color: #F2FF2F;
}

ol,ul {color: 12a45d;}

:link    {color:brown}
:visited {color:brown}
:active  {color:blue}
:hover   {color:blue}

При последовательном применении этих стилей к одному и тому же документу можно менять его представление.

0

3

Предназначение стилей

Язык HTML был создан для описания содержимого документа. Его теги были предназначены для определения "заголовка", "параграфа", "таблицы" (<h1>, <p>, <table> и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.

Но это породило процесс создания своих тегов и атрибутов к исходной спецификации HTML-браузерами Netscape и Internet Explorer ((такие, например, как тег <font> и атрибут color), что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко отделено от уровня представления документа.

В этой ситуации консорциум W3C (World Wide Web Consortium) — некоммерческая организация, ответственная за стандартизацию HTML — создала при разработке стандарта HTML 4.0 каскадные таблицы стилей.

Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии CSS.

Сегодня эту технологию поддерживают все основные браузеры (Internet Explorer, Mozilla Firefox, Opera и др.).

0

4

Таблицы стилей могут существенно сократить объем работы

Таблицы стилей определяют вывод элементов HTML (как, например, тег font и атрибут color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS.

Еще раз заострим внимание: CSS стали прорывом в Web-дизайне. Основой для него послужило то, что технология позволяет разработчикам одновременно управлять стилем и компоновкой множества Web-страниц, определять стиль для каждого элемента HTML и применять его к любому количеству Web-страниц. Также CSS дает возможность из одного документа ссылаться на несколько внешних таблиц стилей. Таким образом, чтобы сделать глобальное изменение, надо просто изменить стиль, и все элементы в Web будут автоматически изменены.

Разработчик может определять стили следующими способами:

внутри единственного элемента HTML;
внутри элемента <head> страницы HTML;
во внешнем файле CSS.

0

5

Приоритет использования стилей

Для каскадных таблиц стилей определен приоритет использования. Если для элемента HTML определено более одного стиля, то все стили будут последовательно "каскадированы" в новую "виртуальную" таблицу стилей, согласно следующим правилам:

стили, используемые по умолчанию браузером;
стили, хранящиеся во внешней таблице;
стили, хранящиеся во внутренней таблице стилей (внутри тега <head>);
встроенный стиль (внутри элемента HTML).

Эти правила определяют порядок увеличения приоритета стилей.

Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или в браузере (значение по умолчанию).

0


Вы здесь » RESTOR- От HTML до С++ » Основы работы с CSS » 1. Лекция: Общая информация


Рейтинг форумов | Создать форум бесплатно