Свойства отображения тегов

Типы селекторов.

Универсальный селектор

* { … }, применяется по всем тегам.

Теги

тег {…}	h1 { font-family: Arial; }
<тег>…</тег>	<h1>Заголовок</h1>

Классы

.класс { … }	.redtext { color:#FF0000; }
<тег1 class=”класс”>…</тег1> <тег2 class=”класс”>…</тег2>	<h1 class=”redtext”>Заголовок</h1> <p class=”redtext”>Текст</p>

Классы тегов

тег.класс { … }	h1.greentext { color:#00FF00; }
<тег class=”класс”>…</тег>	<h1 class=”greentext”>Заголовок</h1> <p class=”greentext”>Текст</p>

Идентификаторы

#идентификатор { … }	#content { color:#00FF00; } #header { font-weight: bold; }
<тег id=”идентификатор”>…</тег>	<div id=”content”>Текст</div> <h1 id=”header”>Заголовок 1</h1> <h2 id=”header”>Заголовок 2</h1>

img.leftImage {…}– определение правила для тега img с классом leftImage

#container #menu .text { … } – определение правила для любого тега с классом text, который находится в теге с идентификатором menu, который в свою очередь находится в теге с идентификатором container.

#container #page.text { … }– определение правила для любого тега с классом text, который находится в теге с идентификатором page, который в свою очередь находится в теге с идентификатором container.

<div id=”container”>

<div id=”menu”>

<p class=”text”>Текст</p>

</div>

<div id=”page”>

<h1 class=”text”>Заголовок 1</h1>

<img src=”photo.jpg” alt=”фото” class=”leftImage” />

</div>

</div>

 

Теги текстового и блокового уровней.

Теги блокового уровня:

· h1, h2, …, h6;

· p;

· цитата с отступом: blockquote;

· списки : ol, li, ul, dl, dt, dd;

· table, tr, td;

· div

· hr

· center

Свойство тегов блокового уровня:

· могут содержать текст, теги текстового уровня, теги блокового уровня;

· отображаются в виде прямоугольной области;

· отображаются в виде прямоугольных областей, имеющих некоторую ширину и высоту;

· всегда выводятся с новой строки и в конце содержат переход на новую строку:

Текст1<p>Абзац</p>Текст2 отображается как:

Текст1

Абзац

Текст2

Теги текстового уровня:

· b, u, i, sub, sup, s, strike, tt, small, big, font, em, strong, cite, code, dfn, samp, kbd, var, acronym;

· span

· a

· img

· br

Свойства тегов текстового уровня:

· могут содержать текст и теги текстового уровня;

· не могут содержать теги блокового уровня;

· элементы текстового уровня отображаются согласно потоку вывода, т.е. последовательно без переходов на следующую строку:

<a href=”index.html”>Главная</a> | <a href=”news.html”>Новости</a> |

<a href=”price.html”>Прайс</a> | <a href=”contacts.html”>Контакты</a>

Главная | Новости | Прайс | Контакты

· не позволяют устанавливать ширину и высоту;

 

Блоки div и span.

Тег <div> является блочным тегом и предназначен для выделения фрагмента документа с целью изменения вида содержимого с помощью стилей.

Тег <span> принадлежит к тегам текстового уровня. Он применяется для выделения при помощи стилей фрагментов текста внутри других тегов.

Свойства CSS

Свойства шрифтов.

font-weight: normal | bold;

font-variant: normal | small-caps;

font-style: normal | italic;

font-size: значение pt, pc, in, cm, mm | em, ex, px;

отображает малые буквы прописными.

line-height: normal | значение pt,pc,in,cm,mm,em,ex,px;

font-family: название шрифта;

Font: font-weight font-variant font-style

Font-size/line-height font-family

компоненты должны следовать в указанном порядке, могут отсутствовать, обязательными параметрами являються только font-sizeиfont-family

Пример.

p {

font-weight: bold;

font-style: italic;

font-size: 14pt;

font-height: 150%

font-family: Arial;

}

p {font: bold italic 14pt/150% Arial}

 

Свойства текста текста

Color: цвет

цвет может задаватися в rgb-форме и в #-форме

word-spacing: значение | normal

расстояние между словами, единицы измерения любые кроме процентов

letter-spacing: значение | normal

расстояние между буквами, единицы измерения любые кроме процентов

text-decoration: none | underline | overline | line-throungh

text-transform: none | uppercase | lowercase | capitalize

capitalize – начинать каждое слово с большой буквы

text-align: left | right | center | justify

text-indent: +/- значение

white-space: normal | pre | nowrap

особенности интерпретации пробелов

normal –отдельные и подряд идущие пробелы и переводы строки

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

pre –пробелы и переходы на следующую строку отображаются как

есть

nowrap –запрет автоматического разбиения текста на строки;

переход на сл. строку осуществляется только пр и помощи

тега <br />; если текст не помещается на страницу,

появляется полоса прокрутки;

Свойства фона

background-attachment : scroll | fixed

определяет долино ли фоновое изображение прокручиваться вместе с содержимым документа.

background-color : transparent | цвет

background-image: none | url(имя файла)

background-position: [top, center, bottom]

[left, right, center]|[значение ед] [значение ед]

background-repeat: repeat | repeat-x | repeat-y |

No-repeat

background: background-attachment | background-color |

background-image | background-position |

Background-repeat

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

Пример.

.banner{

background: url(images/header.jpg) no-repeat;

font-size: 50pt;

font-family: Arial;

color: red;

}

Свойства отображения тегов

display: none | inline | block | list-item

определяет, как тег должен быть показан в документе

none: тег не отображается, занимаемое им место не резервируется и веб-

страница формируется так, словно элемента и не было.

inline: тег будет выводиться как тег текстового уровня, т.е. содержимое

тега будет выводится не с новой строки, а с того, места, где

окончился предыдущий элемент

block: тег отображается как блочный. Т.е. добавляется перенос строк в

начале и в конце содержимого

list-item: элемент выводится как блочный и добавляется маркер списка.

overflow: auto | hidden | scroll | visible

свойство может применяться только к блочным элементам, определяет как должно отображаться содержимое блока, если оно в него не помещается

visible – Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

hidden – Отображается только область внутри элемента, остальное будет обрезано.

scroll – Всегда добавляются полосы прокрутки.

auto – Полосы прокрутки добавляются только при необходимости

visibility: visible | hidden

visible – отображает элемент как видимый;

hidden – тег не отображается, но занимаемое им место резервируется;

 

cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize |

nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text |

w-resize | wait

float: left | right | none

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

clear: both | left | none | right

запрет обтекания элементов