Свойства отображения тегов
Типы селекторов. Универсальный селектор * { … }, применяется по всем тегам. Теги
Классы
Классы тегов
Идентификаторы
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 запрет обтекания элементов
Популярное: Как вы ведете себя при стрессе?: Вы можете самостоятельно управлять стрессом! Каждый из нас имеет право и возможность уменьшить его воздействие на нас... Почему человек чувствует себя несчастным?: Для начала определим, что такое несчастье. Несчастьем мы будем считать психологическое состояние... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (341)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |