Свойства отображения тегов
Типы селекторов.
Универсальный селектор
* { … }, применяется по всем тегам.
Теги
тег {…} | 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
запрет обтекания элементов