4338

CSS – каскадные таблицы стилей

Лекция

Информатика, кибернетика и программирование

CSS – каскадные таблицы стилей CSS – CascadingStyleSheets (каскадные таблицы стилей). Стили определяют отображение элементов HTML HTML – для логической разметки документа (заголовки, параграфы, списки). Браузеры стали ввод...

Русский

2012-11-16

50.5 KB

39 чел.

CSS – каскадные таблицы стилей

CSSCascading Style Sheets (каскадные таблицы стилей).

Стили определяют отображение элементов HTML

HTML – для логической разметки документа (заголовки, параграфы, списки). Браузеры стали вводить новые тэги и атрибуты для отображения сложных композиций. Для стандартизации этих возможностей и уменьшения несовместимости W3C разработал сначала HTML 3.2, введя ряд тегов визуальной разметки, потом удалил их в HTML 4 и разработал отдельную спецификацию CSS. Все основные браузеры поддерживают CSS.

Стили ускоряют и упрощают верстку

Стили обычно хранятся в отдельном файле с расширением CSS. Внешний CSS-файл позволяет полностью изменить дизайн и компоновку всех веб-страниц сайта, изменением лишь одного этого файла.

В этом файле вы можете определить стиль отображения любого HTML элемента и применить его к любым страницам, каким вам необходимо.

Несколько стилей объединяются в один

Стили могут храниться в разных местах: внутри HTML элемента с помощью атрибута STYLE, внутри тэга HEAD или во внешнем CSS-файле (или даже в нескольких файлах). Для одного HTML элемента стиль может оказаться в нескольких местах и они «каскадно» объединяются в один в соответствии со следующими приоритетами (начиная с младшего):

  •  установки браузера по умолчанию
  •  внешний CSS
  •  встроенный CSS (внутри тэга HEAD)
  •  CSS, встроенная в html-элемент (атрибут STYLE)

Синтаксис

Синтаксис стиля следующий:

селектор {свойство: значение}

В простейшем случае селектор – это HTML-тэг. Например:

 body {background-color: yellow} — задает желтый фон страницы

p {color: blue} — синий цвет текста внутри абзацев

Несколько свойств указывается через точку с запятой, селекторы также можно объединять:

h1, h2, h3, h4, h5, h6 {

color: brown;

font-family:Arial;

}

— заголовки будут отображаться коричневым цветом шрифтом Arial.

Пробелы и регистр не важен.

Селекторы-классы

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

a {text-decoration:underline} — все ссылки подчеркнуты

a.menu {text-decoration:none} — но ссылки класса menu не подчеркнуты

В HTML, чтобы указать класс элемента используется атрибут CLASS:

<a href="about.html" class="menu">О сайте</a>

Можно объявлять селектор-класс без привязки к конкретному элементу, тогда его можно использовать для любых элементов, например:

.important {font-weight: bold}

ID-селектор

Можно объявить стиль для элемента по его идентификатору (задается в HTML атрибутом ID):

#logo {margin: 10px}

В HTML этот элемент оформляется так:

 <img src=”logo.gif” id=”logo”>

Контекстные селекторы

Можно объявить стиль для селектора, при условии, что находится внутри другого селектора, например:

 p em {background: yellow}

– все выделения тэгом em внутри абзацев будут выделяться желтым фоном.

Комментарии

/* абзацы текст выровнены по обоим сторонам */

P {text-align:justify}

Псевдо-классы

Псевдо-классы используются для специальных эффектов с некоторыми селекторами. Основное применение – настройка отображения ссылок:

a:link {color: #FF0000}     /* непосещенная */

a:visited {color: #00FF00}  /* посещенная */

a:hover {color: #FF00FF}   /* с мышью над ссылкой */

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

Вставка стилей

Внешний файл:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

Внутренняя таблица стилей:

<head>

<style type="text/css">

body {background-image: url("images/bg.gif")}

</style>

</head>

Внедренный стиль:

<p style="color: orange; margin-left: 20px">Абзац…</p>

– не рекомендуется.  Лучше всего использовать первый вариант, иногда, в комбинации со вторым (например, если на некоторой странице необходимы особые стили).

Основные свойства

Фон элемента:

background-color: #ff0000

background-image: url(bg.jpg)

Цвет текста:

 color: blue

color: #FF00CC

Выравнивание текста в элементе:

 text-align: left | right | center | justify

Подчеркивание:

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

Красная строка:

 text-indent: 5px <!-- в пикселях -->

text-indent: 5pt <!-- в пунктах -->

 text-indent: 2em <!-- высота шрифта -->

Переводы строк:

 white-space: normal <-- обычным образом -->

white-space: nowrap <-- всё в одну строку -->

white-space: pre <-- предформатированый текст -->

Шрифт:

 font-family: serif | Times | sanf-serif | Arial | monospace | Courier

 font-size: large | 13pt | 150%

font-weight: normal | bold

Отступы вокруг элемента:

margin: top right bottom left <!—например: margin:5px 7px 5px 7px -->

margin-left: 5px

Рамка:

 border: 2px solid red

Отступ от содержимого до рамки:

padding: top right bottom left

padding-top: 5px

Стиль списка и/или его элементов:

 list-style-type: disc | circle | decimal | upper-roman

list-style-image: url(li.png)

Габариты:

 width: 200px

height: 20pt

Стиль отображения:

 display: none | inline | block

Примечание: Селекторы-классы часто используется в сочетании с тэгами div и span. Эти тэги по умолчанию особым образом не выделяются и используются там, где нет подходящих HTML-тэгов. С помощью стилей они могут быть отображены особым образом. div является блоковым элементом (display:block), т.е. после него делается перевод строки, а span – внутри-текстовым элементом (inline). Например:

 <div class="menu"><a href="about.html">О сайте</a>…</div>

 

И пример стиля:

 .menu a {margin:1em; text-decoration:none}

Позиция:

left: -100px

top: 50px

position: static | relative | absolute

 static: позиция не меняется с помощью left  и top (значение по умолчанию)

 relative: позиция (свойства left и top) задается относительно его исходного места,

absolute: позиция задается относительно всего окна документа и он не показывается в обычном потоке документа (наслаивается сверху); однако если у родительского элемента position:relative, то позиция указывается относительного родительского.

 


 

А также другие работы, которые могут Вас заинтересовать

80785. Плата за негативное воздействие на окружающую среду 31.12 KB
  Некоторые общие требования относительно платы за негативное воздействие на окружающую среду определяются в Федеральном законе Об охране окружающей среды ст. Определение размеров и взимание платы за загрязнение окружающей среды регламентируется на федеральном уровне достаточно подробно документом утвержденным постановлением Правительства Порядок определения платы и ее предельных размеров за загрязнение окружающей природной среды размещение отходов другие виды вредного воздействия. Исходными при определении платы за негативное воздействие на...
80786. Экологическое страхование 30.07 KB
  Для экологического страхования главным образом имеют значения положения ПС содержащиеся в статьях 927929931966 которые прямо закрепляют некоторые аспекты относящиеся к страхованию ответственности а именно: Обязательное страхование гражданской ответственности за причинение экологического вреда осуществляется в силу прямого указания закона Данный вид страхования может осуществляться хозяйствующими субъектами как за свой счет так и за счет заинтересованных лиц. Однако обязательное страхование ответственности за счет бюджета не...
80787. Понятие и виды юридической ответственности за нарушение правовых экологических требований 30.62 KB
  Под юридической ответственностью за экологические правонарушения понимается отношение между государством в лице специально уполномоченных органов в области охраны окружающей среды правоохранительных органов иными уполномоченными субъектами и совершившим экологическое правонарушение лицом физическим должностным или юридическим по применению к нарушителю соответствующего взыскания. Сущность юридической ответственности заключается в неблагоприятных последствиях наступающих для нарушителя. Посредством применения юридической ответственности...
80788. Ответственность за экологические преступления 30.98 KB
  К числу таковых отнесены незаконная добыча водных животных и растений незаконная охота нарушение законодательства Российской Федерации о континентальном шельфе и исключительной экономической зоне нарушение правил охраны и использования недр незаконная порядка леса уничтожение или повреждение лесов загрязнение водоемов и атмосферного воздуха загрязнение моря вредными веществами нарушение режима особо охраняемых природных территорий и природных объектов нарушение правил обращения экологически опасных веществ и отходов и др. Субъектами...
80789. Дисциплинарная и материальная ответственность за экологические правонарушения 31.43 KB
  Материальная ответственность заключается в обязанности работника возместить в установленном порядке и в определенных размерах имущественный ущерб причиненный по его вине предприятию организации в результате ненадлежащего исполнения им своих трудовых обязанностей. Для привлечения работника к материальной ответственности необходимы следующие условия ее наступления: 1 причинение работником прямого действительного ущерба. Неполученные доходы улучшенная выгода взысканию с работника не подлежат ст.
80790. Административная ответственность за экологические правонарушения 35.2 KB
  Понятие и виды экологического вреда. Принципы и порядок возмещения экологического вреда Вред причиняемый нарушением правовых экологических требований называется в доктрине экологического права экологическим или экогенным вредом. Новым для российского экологического права элементом экологического вреда является моральный вред. Так как природа удовлетворяет эстетические духовные потребности человека уничтожение к примеру зеленых насаждений в городах также может рассматриваться как фактор причинения морального вреда и соответственно должно...
80791. Правовая охрана земель 36.31 KB
  Охрана земель осуществляется на основе комплексного подхода к земельным угодьям как к сложным природным образованиям и ставит следующие цели: предотвратить деградацию и разрушение земель другие неблагоприятные последствия хозяйственной деятельности путем стимулирования природоохранных технологий производства; обеспечить улучшение и восстановление земель подвергшихся деградации или нарушению; создать механизм учета и проверки экологического состояния земель ст. 100 Земельного кодекса РСФСР. Законодательством предусматривается...
80792. Правовая охрана недр 49.69 KB
  правовые меры охраны водных объектов Статья 55. Основные требования к охране водных объектов 1. Собственники водных объектов осуществляют мероприятия по охране водных объектов предотвращению их загрязнения засорения и истощения вод а также меры по ликвидации последствий указанных явлений. Охрана водных объектов находящихся в федеральной собственности собственности субъектов Российской Федерации собственности муниципальных образований осуществляется исполнительными органами государственной власти или органами местного самоуправления в...
80793. Правовые меры охраны морской воды 36.9 KB
  Конкретизированы экологически значимые виды деятельности которые могут ими осуществляться проведение исследований разведка и разработка добыча водных биологических ресурсов и других природных ресурсов внутренних морских вод и территориального моря а также другая деятельность в том числе с борта летательного аппарата. Экономические отношения по эксплуатации природных ресурсов внутренних морских вод и территориального моря строятся на основе принципов: платности пользования; ответственности за нарушения условий хозяйственной...