ОСОБЕННОСТИ CSS

 
Система приоритетов

 

Наиболее приоритетными являются стили для конкретных тэгов

Пример: <p style="color: black">

 

Потом идет приоритет блоков div.  

Пример: #name {color: black;}

 

Потом - приоритет классов

Пример: .nameclass {color: black;}

 

Потом - приоритеты общие для тэгов.

Пример: p {color: black;}

 

Но любые стили из блоков, классов или общих стилей для тэгов можно сделать приоритетными по отношению к конкретным тэгам. Для этого, после описания стилей, достаточно вставить !impotent, и этот стиль станет приоритетным.


Отображаем содержимое не помещающееся в блок

  • overflaw: visible (содержимое заходит за пределы блока, но IE растянет сам блок.
    • Чтобы этого не произошло, используем:
  • overflaw: hidden (выступающая часть прячется за пределами блока)
  • overflaw: scroll (появляется полоса прокрутки).
Псевдоклассы

Чаще всего используются при работе с ссылками:

a.link (не посещенная)

a.visited (посещенная ссылка)

a.hover (на ссылку наведен курсор мыши)

a.active (активная ссылка)

  

Пример:

<head><style type="text/css">
a.lin {color: #993300;}
a:hover {color: #5C743D;}
a:visited { color: green;}
a:active {color:black;}

</style></head>

<body><p><a class="lin" href="#"> ссылка </a></p></body>


Получим:

ссылка

 

Тип носителя

В одном документе может быть несколько стилей для разных носителей.

@media scrin { p {...}} данный тип применяется для экрана

@media print { p {...}} применяется для печати

@media handed { p {...}} применяется для КПК.

 

Особенности задания размеров элементов

Разные браузеры по разному воспринимают стилевые параметры.

 

"Правильные" браузеры должны воспринимать элемент <div> так как показано на рисунке. Но IE, причем все версии, включает в ширину рабочей области и двухсторонний padding. Для того, чтобы избавиться от неприятных багов, которые могут возникнуть от этой неприятной особенности IE, достаточно прописать декларацию Doctype (желательно xhtml) в начале документа. Если документ, даже при наличии Doctype начинается с <? xml...>, то IE опять перейдет в свой режим отображения.

Избавляемся от зазора между <div> и картинкой

По умолчанию любой встраиваемый в html элемент, в том числе и картинка - это инлайновый элемент. Поэтому между картинкой и текстом появляется зазор равный зазору между строками текста. Чтобы избавиться от этого зазора, переводим этот элемент в блочный: display: block

 

Лекция1  Содержание Лекция3

Hosted by uCoz