list-style: [{list-style-image}] [{list-style-position}] [{list-style-type}]; Значение по умолчанию disk outside none.
Поддерживается IE начиная с 4.0
list-style-image
Задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type.
list-style-image: none|url({Интернет-адрес файла изображения}); Если задано предопределенное значение none, то стиль маркера берется из установок атрибута list-style-type, если он задан, или отображается маркер по умолчанию. Если задан интернет-адрес файла изображения, то оно отображается в качестве маркера, перекрывая установки атрибута list-style-type.
Значение по умолчанию none.
Поддерживается IE начиная с 4.0
list-style-position
Задает местонахождение маркера позиции списка: в тексте позиции или вне его.
list-style-position: outside|inside; Доступны два значения. Значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции. Значение же inside заставляет Web-обозреватель отобразить маркер позиции в ее тексте в качестве первого символа.
Поддерживается IE начиная с 4.0
list-style-type
Задает тип маркера или номер позиции списка.
list-style-type: disc|circle|square|decimal|lower|roman|upper-roman|lower-alpha|upper-alpha|none;
list-style-type: disc; - (значение по умолчанию) отображает сплошной кружок;
list-style-type: circle; - окружность;
list-style-type: square; - сплошной квадрат;
list-style-type: decimal; - нумерует позиции арабскими цифрами;
list-style-type: lower-roman; - малыми римскими;
list-style-type: upper-roman; - большими римскими;
list-style-type: lower-alpha; - помечает позиции малыми латинскими буквами;
list-style-type: upper-alpha; - большими латинскими;
list-style-type: none; - вообще убирает маркер или нумерацию.
Поддерживается IE и NN начиная с 4.0
Принтер
page-break-after
Устанавливает, будет ли после текущего элемента при печати Web-страницы производиться прогон листа.
page-break-after: auto|always|empty string;
page-break-after: auto; - передает управление размещением информации на листе операционной системе (значение по умолчанию);
page-break-after: always; - заставляет принтер прогнать лист после печати текущего элемента страницы;
page-break-after: empty string; - запрещает принтеру делать это в любом случае.
Поддерживается IE начиная с 4.0
page-break-before
Устанавливает, будет ли перед текущего элемента при печати Web-страницы производиться прогон листа.
page-break-before: auto|always|empty string;
page-break-before: auto; - передает управление размещением информации на листе операционной системе (значение по умолчанию);
page-break-before: empty string; - запрещает принтеру делать это в любом случае.
Поддерживается IE начиная с 4.0
севдостили гиперссылок
active
Применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя.
{Задание стиля гиперссылки}:active {Определение стиля}; Аналогичен атрибуту alink тега <BODY>.
Пример:
A:active {color: lime;} активная гиперссылка будет ярко-зеленой.
По умолчанию в IE активные гиперссылки выделяются красным цветом.
Поддерживается IE начиная с 4.0
hover
Применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши.
{Задание стиля гиперссылки}:hover {Определение стиля}; Пример:
A:hover {color: lime; text-decoration: none;} Гиперссылка, при наведении на нее мыши, будет ярко-зеленой и неподчеркнутой.
По умолчанию в IE гиперссылки подчеркиваются, когда пользователь помещает над ними курсор мыши.
Поддерживается IE начиная с 4.0
link
Применяется к не посещенным еще пользователем гиперссылкам.
{Задание стиля гиперссылки}:link {Определение стиля}; Аналогичен атрибуту link тега <BODY>.
Пример:
A:link {color: black;} По умолчанию в IE непосещенные гиперссылки отображаются синим цветом.
Поддерживается IE начиная с 3.02
visited
Применяется к уже посещенным пользователем гиперссылкам.
{Задание стиля гиперссылки}:visited {Определение стиля}; Аналогичен атрибуту vlink тега <BODY>.
Пример:
A:visited {color: indigo;} По умолчанию в IE посещенные гиперссылки отображаются бордовым цветом.
Поддерживается IE начиная с 3.02
Псевдостили текста
Псевдостили применяются некоторым элементам текстовых абзацев, например, к первой строке абзаца или первой букве первой строки.
first-letter
Применяется к первой букве первой строки абзаца. Может использоваться для создания буквиц.
{Задание стиля абзаца}:first-letter {Определение стиля}; Пример:
st:first-letter {font-size: 16pt;} По умолчанию в IE первые буквы первых строк абзацев никак не выделяются.
Поддерживается IE начиная с 5.0
first-line
Применяется к первой строке абзаца.
{Задание стиля абзаца}:first-line{Определение стиля}; Пример:
st:first-line {text-decoration: underline;} По умолчанию в IE первые строки абзацев никак не выделяются.
Поддерживается IE начиная с 5.0
Правила
Правила используются в таблицах стилей для особых нужд.
charset
Задает текстовую кодировку для внешней таблицы стилей.
@charset {Кодировка}; Пример:
@charset "windows-1251"; Может использоваться только во внешних таблицах стилей; должна быть первой строкой в файле.
Поддерживается IE начиная с 4.0
font-face
Задает файл загружаемого шрифта для использования на Web-странице.
@font-face {Определение загружаемого шрифта}; Определение загружаемого шрифта имеет следующий формат:
font-family: {Имя шрифта}src: url({Интернет-адрес файла шрифта}) } Пример:
@font-face { font-family: comic; src: url(http://www.youodmain.ru/comic_font_file.eot); } Поддерживается IE начиная с 4.0
import
Импортирует внешную таблицу стилей.
@import url("{Интернет-адрес файла таблицы стилей}"); Пример:
@import url("http://www.spravkaweb.ru/style_file.css"); Поддерживается IE начиная с 4.0
page
Используется при задании размеров, ориентаций и полей печатной страницы в таблице стилей.
@page {Селектор страницы} {Правила} Селектор страницы может принимать одно из трех значений:
first: - первая печатная страница;
left: - четная страница;
right: - нечетная страница.
Пример:
@page:first {margin-top: 2cm; margin-bottom: 2cm;} Здесь мы задали для первой печатной страницы поля по два сантиметра сверху и снизу.
Поддерживается IE начиная с 5.5
important
Используется для задания неперекрываемых установок стиля.
{Установки слиля}!important Пример:
<STYLE> P { color: red!important} </STYLE> <P style="color: green">Этот текст останется красным.</P> Здесь установки, сделанные для текстового абзаца <P>, не будут перекрыты в дальнейшем.
Поддерживается IE начиная с 4.0
Единицы измерения CSS
В этой таблице перечислены все единицы измерения, поддерживаемые CSS.
Единица измерения
Обозначение
Высота буквы M текущего шрифта
em
Высота буквы x текущего шрифта
ex
Пикселы
px
Пункты
pt
Пики
pc
Дюймы
in
Миллиметры
mm
Сантиметры
cm
равильное использование - залог успеха
Начинаем свой путь к мастерству. Он будет достаточно долгим и непростым, но вы справитесь, если у вас есть цель. По крайней мере, к этому моменту вы уже обладаете определенным багажом знаний, достаточным для применения на практике. Однако использовать CSS можно по-разному. Цель данной главы - научить вас применять CSS правильно. Поверьте, это не так просто, как кажется на первый взгляд. Ведь можно просто особо не задумываясь написать таблицу стилей с множеством классов и ненужных объявлений, которая будет корректно работать. Но такая таблица стилей будет неоптимальной и неудобной. Неоптимальной потому, что ее можно значительно сократить и уменьшить объем, что немаловажно. Неудобной потому, что разбираться в неупорядоченном нагромождении классов достаточно сложно. Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть множество рекомендаций. Кроме того, можно все же выделить одно главное правило, которое всегда надо применять при использовании CSS.
Правило Прежде чем написать какой-нибудь стиль или ввести новый класс, задумайтесь, нельзя ли оптимизировать и упорядочить код другим способом. Сделать так, чтобы не вводить этот класс или ввести максимально широко. Логика - незаменимый помощник любого профессионального веб-мастера. Запомните это.
Итак, переходим непосредственно к рассмотрению способов, благодаря которым вы существенно облегчите код и собственную жизнь.
Форматирование таблиц стилей
Главное требование - в таблице стилей должен быть порядок. Возьмем пример из предыдущей главы. Вот эта таблица:
P {color: #000; font: x-small Verdana} BODY {background: #FFF} #mainmenu A {color: #000; font: bold small Arial} H3 {color: #000; font-family: Arial}.back {background: url(img/fragment_3.gif) no-repeat;} #submenu A {color: #FFF; font: bold xx-small Arial}.bluecol {background: #1d3d4e}
Согласитесь, что разобраться в ней с первого взгляда не так-то просто. Здесь перемешаны все виды селекторов и нет никакого порядка. Структура таблицы непредсказуема и, что еще хуже, в ней совершенно отсутствует внутренняя логика построения, т. е. нет никаких правил, которые помогли бы найти нужное объявление.
Учтите, что данная таблица очень маленькая, а в большой неупорядоченной таблице разобраться будет еще сложнее. Если попробовать мыслить логично, то можно вывести несколько правил, которые помогут организовать таблицу стилей.
Как вы помните, существует несколько типов селекторов: элементы, классы, ID. Так что если формировать блоки по типам селекторов уже будет какой-то уровень организованности. Первое правило организации таблиц.
Совет Разделяйте селекторы, т. е. сформируйте первый блок из селекторов по элементам, второй блок из селекторов по классам, а третий блок из селекторов по ID. Блоки друг от друга можно отделять дополнительным переводом строки.
В нашем случае блок селекторов по элементам будет состоять из H3, P и BODY, второй блок из селекторов по классам будет состоять из.back и.bluecol, третий блок из селекторов по ID будет состоять из #mainmenu и #submenu. А таблица стилей будет выглядеть так:
BODY {background: #FFF} H3 {color: #000; font-family: arial} P {color: #000; font: x-small Verdana}.back {background: url(img/fragment_3.gif) no-repeat;}.bluecol {background: #1d3d4e} #mainmenu A {color: #000; font: bold small arial} #submenu a {color: #fff; font: bold xx-small arial}
Кроме того, в каждом блоке селекторы надо расставить в алфавитном порядке. На первый взгляд, это не очень сильно упорядочит таблицу стилей, однако есть достаточно веская причина соблюдать такое правило. На первых порах вам будет абсолютно все равно, в каком порядке расположены селекторы в трех блоках, однако постепенно вы привыкните располагать селекторы именно в алфавитном порядке, вследствие чего в своих таблицах стилей будете ориентироваться легко, и быстро находить необходимые правила. Вы будете подсознательно чувствовать, что селектор.back находится в начале блока селекторов по классам, потому что начинается с буквы b, а селектор.vis - в конце, потому что начинается с буквы v.
Отдельно взятое правило тоже можно записать по-разному. Часто вместо того, чтобы записывать правило в одну строку
P {color: #000; font-size: 12px; padding-left: 1em}
используют запись в несколько строк:
P { color: #000; font-size: 12px; padding-left: 1em}
Делается это для облегчения просмотра таблицы стилей. На мой взгляд, писать каждое объявление с новой строки лучше только для небольших таблиц, потому что большая таблица стилей при такой форме записи растянется на несколько экранов, и поиск нужного объявления только затруднится.
Для наглядности запись стилей в несколько строк используется в данной книге. Это улучшает восприятие, потому что длинных листингов кода мало.
Что касается самих свойств, то для них вы можете установить свои собственные правила. Давайте рассмотрим две совсем маленькие таблицы стилей.
Первая:
P.emphasize { font-size: 14px; text-indent: 1em; color: #000; font-style: italic} TD { font-style: italic; color: #000; font-size: 14px}
Вторая:
P.emphasize { color: #000; font-style: italic; font-size: 14px; text-indent: 1em} TD { color: #000; font-style: italic; font-size: 14px}
А теперь внимательно сравните их и ответьте на вопрос, какая структурирована лучше и почему? Подумайте две минуты, не читайте дальше.
Нашли ответ? Если да, то вы конечно согласитесь со мной, что вторая таблица выглядит более логичной. В правилах второй таблицы стилей свойство цвета идет на первом месте, затем следуют свойства шрифта, а затем свойства текста, тогда как в первой таблице стилей нет никакой системы. Особенно это важно для больших таблиц стилей и в том случае, если вы записываете правило в одну строку.
Для себя вы можете выработать какой угодно порядок расположения свойств, однако при написании таблиц стилей вы должны строго его придерживаться. Например, я всегда на первом месте ставлю цвет, на втором - свойства шрифта, на третьем - свойства текста, а затем поля, отступы и рамки. Повторяю, изначально порядок может быть любым, главное, чтобы вы его строго соблюдали и постепенно привыкали к нему.
Совет Сформулируйте раз и навсегда свои собственные правила структуры таблицы стилей и соблюдайте их неукоснительно. Привычка - мощный инструмент увеличения производительности.
Имена классов и ID
При верстке вам частенько придется вводить новые классы и как-то их называть. Естественным образом возникает желание, чтобы названия были короткими и логичными. Если класс для заголовков раздела назвать head1, то это будет достаточно логично и коротко, а если bigblacktext - нелогично и длинно. Конечно, часто встречаются ситуации, когда не получается придумать подходящее короткое имя, тогда приходится чем-то жертвовать: либо длиной, либо логичностью. Лично я предпочитаю жертвовать логичностью, потому что в своем коде я разберусь всегда. Однако если над проектом работает несколько HTML-верстальщиков и каждый из них создает какую-либо часть сайта, то лучше жертвовать длиной, потому что в этом случае логичность гораздо важнее. Согласитесь, далеко не каждый поймет, что класс aa обозначает, к примеру, отступ справа на 10 пикселов, тогда как класс rightpad10 об этом свидетельствует достаточно однозначно. Вообще вам все время придется балансировать на грани между объемом и логикой, важно сохранять баланс в большинстве случаев и четко представлять себе, когда его можно нарушить. Нарушить его можно в двух случаях.
Если вы профессионал и работаете над HTML-кодом сайта в одиночку.
Если вам до зарезу надо максимально уменьшить объем кода и важным становится каждый лишний байт.
Больше о правилах форматирования таблиц стилей ничего сказать нельзя. Перейдем к тому, как создавать оптимизированные таблицы.
Оптимизация таблиц стилей
В любом деле оптимизация есть процесс желательный, а часто необходимый. Это естественно, потому что он несет всяческие выгоды, начиная с увеличения скорости работы приложения и заканчивая уменьшением затрат. Если взять локальную область, такую как верстка сайтов и написание таблиц стилей в частности, то под оптимизацией понимается уменьшение объема кода, что приносит следующие выгоды:
незначительно ускоряется загрузка страниц;
писать и редактировать таблицу стилей становится несколько проще по причине уменьшения числа селекторов и свойств, что в конечном итоге ведет к экономии времени, пусть и незначительной.
Как видите, не стоит ждать от оптимизации каких-то чудес, но и пренебрегать ей не нужно, потому что это характеризует вас как профессионала и показывает ваше отношение к делу. Собственно говоря, стремление к оптимизации кода - одна из отличительных черт профессиональных HTML-верстальщиков.
Существует несколько правил, которые могут помочь вам написать оптимизированную таблицу стилей.
Стили по умолчанию
Не стоит писать ничего лишнего. Практически все свойства CSS имеют какое-либо значение по умолчанию. Не стоит явно их указывать. Например, стиль на элемент
, приведенный ниже
P { font-style: normal; letter-spacing: normal; text-decoration: none}
вообще не имеет смысла, потому что все эти значения для элементов
установлены по умолчанию. Зачем же их указывать явно? Конечно, возможны случаи, когда надо переписать установленный ранее стиль. Например, вы хотите, чтобы все элементы
были подчеркнутыми и пишите стиль:H1 { text-decoration: underline;}Но вдруг вам понадобилось, чтобы некоторые из заголовков первого уровня выводились неподчеркнутыми. Для этого вам придется ввести какой-нибудь дополнительный класс. Например, такой:H1.nounderline { text-decoration: none} То есть вы первым правилом переписали значение по умолчанию для элементов, поэтому потом пришлось явным образом восстанавливать это значение для заголовков с классом nounderline. В этом случае другого выхода нет, но вообще если вам нет необходимости изменять стили элементов, то и не надо прописывать значения по умолчанию явным образом.
Правило Не указывайте в таблице стилей значений, которые являются для данного элемента значениями по умолчанию.
Сокращенные формы записи
Второй способ сократить объем таблицы стилей - использование сокращенных форм записи некоторых свойств. В таблице они систематизированы.
Использование сокращенных форм записи является делом весьма полезным и нужным, потому что объем таблицы стилей при этом значительно уменьшается. Это видно уже из сравнения правого и левого столбцов табл. 5.1, но чтобы окончательно вас убедить, я приведу еще один несложный пример. Пусть нам надо создать блок rule, который имеет черную рамку толщиной один пиксел и внутренние отступы величиной 10 пикселов. Ширина блока будет 300 пикселов, а текст в нем будет выводиться полужирным шрифтом Verdana размером 12 пикселов. Если не пользоваться сокращенными формами записи вообще, то код будет такой:
Первое правило занимало 290 байт, а второе всего 96. Вес уменьшился в три раза, т. е. оптимизация достигла 300%! Конечно, этот пример показывает что будет, если не использовать сокращений вообще, но тем не менее он совершенно реальный и вам частенько придется создавать очень похожие блоки, так что примите к сведению эти 300%.
studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав!Последнее добавление
