Студопедия  
Главная страница | Контакты | Случайная страница

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

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

Идентификаторы схожи по применению с классами, но в отличие от классов, в веб-документе они указываются только один раз! Уникальное имя элемента указывается для изменения его стилей, а также обращений к нему через скрипты. В файле CSS идентификаторы обозначаются латинскими буквами (допускается _ и -), перед которым ставится знак #:

#ukaz {text-align:center; font-size:15px}- в файле стилей

<p id="ukaz">Заголовок</p>- в HTML-документе

Как и классы, в файле CSS идентификаторы могут применяться отдельно и вместе с тегами.

Применение классов и идентификаторов значительно увеличивают возможности вёрстки и упрощает многие задачи.

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

CSS предлагает нам четыре удобных способа указать цвет.

· По имени. Используются англоязычные названия цветов, например blue или red (см.Именованные цвета).

· В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).

· В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.

· В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.

12.Текст и шрифты. Свойства шрифтов.

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

· HTML текст является основной составляющей большинства страниц интернета.

· По ключевым фразам в тексте HTML-страницы пользователи могут найти ваш сайт.

· HTML текст может быть любого размера и цвета, по вашему усмотрению. Вы также можете определить вид шрифта и его объемность.

· HTML размер шрифта обыкновенно устанавливается в пикселях.

· HTML форматирование текста широко распространено, применяются форматирующие теги.

Смотрите ниже теги, форматирующие HTML текст:

· Теги <strong> </strong> → жирный HTML текст (жирный шрифт).

· Теги <b> </b> → жирный HTML текст (жирный шрифт).

· Теги <kbd> </kbd> → моноширинный HTML текст (моноширинный шрифт).

· Теги <code> </code> → моноширинный HTML текст (моноширинный шрифт).

· Теги <samp> </samp> → моноширинный HTML текст (моноширинный шрифт).

· Теги <big> </big> → HTML текст, размер больше обычного (крупный шрифт).

· Теги <small> </small> → HTML текст, размер меньше обычного (мелкий шрифт).

· Теги <em> </em> → наклонный HTML текст (наклонный шрифт).

· Теги <i> </i> → наклонный HTML текст (наклонный шрифт).

· Теги <dfn> </dfn> → наклонный HTML текст (наклонный шрифт).

· Теги <ins> </ins> → подчеркнутый HTML текст (подчеркнутый шрифт).

· Теги <del> </del> → зачеркнутый HTML текст (зачеркнутый шрифт).

· Теги <sub> </sub> → HTML текст (шрифт) в нижнем индексе.

· Теги <sup> </sup> → HTML текст (шрифт) в верхнем индексе.

Свойство стиля Описание свойства Значения Значение по умолчанию
font-family Гарнитура шрифта список имен шрифтов, перечисленных через запятую в порядке убывания предпочтения; список может заканчиваться одним из родовых имен: serif (с засечками, "антиква"), sans-serif (без засечек, "рубленый"), cursive (курсив), fantasy (аллегорический), monospace (моноширинный)  
font-size Размер шрифта размер, процент, xx-small,x-small, small, medium, large, x-large, xx-large, larger, smaller medium
font-style Начертание шрифта normal, italic (курсив), oblique (наклонный) normal
font-weight Насыщенность шрифта число от 100 до 900 (кратное 100), normal, bold, bolder, lighter normal
font-variant Может задать вывод капителью (символами, похожими на прописные, но малого размера); капитель есть не во всяком шрифте normal, small-caps (капитель) normal
font-stretch Задание нормального, разреженных (expanded) или сжатых (condensed) начертаний из текущей гарнитуры шрифта normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded normal
font Стенографическое свойство для одновременного задания нескольких свойств шрифта список свойств шрифта, разделенных пробелами, в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family  

 

13.Блочная модель. Поля, границы и отступы. Размер области содержимого.

Все HTML элементы могут рассматриваться как блоки (в смысле контейнеры, оболочки и т.п.). В CSS, термин "блочная модель" используется, когда говорят о дизайне и компоновке.

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

Блочная модель позволяет нам устанавливать границу вокруг элементов и располагать элементы по отношению к другим элементам.

Объяснение различных частей:

Для того чтобы установить ширину и высоту элемента корректно во всех браузерах, вам необходимо знать, как работает блочная модель.

Поля

Полем будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Из-за того, что значения полей могут различаться на каждой стороне, применяют выражения «верхнее поле» или «поле сверху», и им подобные для других сторон. Обозначение «поля» следует понимать как одинаковое значение полей для всех сторон. Основное предназначение полей — создать пустое пространство вокруг содержимого блочного элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование полей повышает читабельность текста и улучшает внешний вид страницы. В примере 3.1 показано использование полей для оформления текста.




Дата добавления: 2015-02-16; просмотров: 29 | Поможем написать вашу работу | Нарушение авторских прав




lektsii.net - Лекции.Нет - 2014-2024 год. (0.007 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав