CSS от А до Я

CAD обзор
CSS от А до Я

Представьте себе следующую ситуацию. Вы создали серьезный сайт. Вдруг, через некоторое время, вы понимаете: шрифт не тот, фон не тот, цвета не те и т.д. Вам нужно все изменить. Заботясь о своих любимых посетителях, вы спешите исправить недочеты на странице (например, 500) вашего сайта. На это уйдет целый день. В лучшем случае… Как избежать этого? Ответ прост — используйте каскадные таблицы стилей.

Прежде всего, хочу предупредить вас: если вы не знаете HTML, то из этой статьи вы узнаете кое-что новое. Это потому, что вы этого не сделаете. CSS специально разработан для расширения функциональности HTML. Мы рекомендуем вам изучить HyperText Signage (т.е. HTML), прежде чем приступать к работе с каскадными таблицами. Многие семинары по HTML можно найти здесь.

Но давайте вернемся к овцам. Те, кто создавал его вручную (используя HTML, а не редактор WysiWyg), знают, как мало способен этот язык при использовании его в сыром виде (без инструментов). Например, работа с размещением элементов, форматные списки, картинки — это далеко не полный список того, что может вызвать головную боль у HTML-разработчиков. На самом деле, язык гипертекста настолько несовершенен, что простая страница может содержать огромное количество нечитаемого кода. Кроме того, автор страницы не может заранее определить настройки браузера пользователя. Это значительно сокращает количество вариантов отображения информации на странице.

Это не означает, что браузер не пытается изменить эту ситуацию. Первая версия браузера CERN для следующих платформ позволяла авторам страниц обходить настройки браузера по умолчанию с помощью HTML-разметки. Однако этот подход не получил продолжения в коммерческих продуктах и постепенно "угас".

Альтернативным методом проверки настроек браузера по умолчанию является программирование на JavaScript. Хотя этот язык становится все более распространенным, он не является лучшим инструментом и отличается большим объемом кода. По крайней мере, не в ближайшие несколько лет.

Однако есть и решения. Название — CSS (каскадные таблицы стилей). Или по-русски — каскадные таблицы стилей. Спецификация Cascading Style Sheets была разработана неизвестной компанией Microsoft. Кстати, возможно, именно поэтому Internet Explorer поддерживает CSS в большей степени, чем Netscape (хотя NN6 сделал большой шаг вперед в этой области). Да, кстати, он поддерживает браузер Opera, который неплохо поддерживает (хотя и хуже, чем его "старшие братья"). Это способ взять Netscape и Explorer, по крайней мере, всех тех, кто использует CSS на своих страницах, и контролировать его создание. Изначально CSS был разработан для отделения содержимого страницы от любых дополнительных описаний ярлыков. Предположим, вам нужно написать фразу, которая повторяется в тексте. текст, шрифт, отличный от текста, плюс боковые буквы. Если вы хотите создать его только в HTML, вам нужно написать что-то вроде этого

< font color = green face = " your_font">< i> text</i></font>,.

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

ЧИТАТЬ ЕЩЁ:  MySQL против PostgreSQL

Так что идея была хорошей. Но оказалось, что вы знаете, как это сделать. Пока что ни один браузер не поддерживает 100% таблиц эскалации. Другими словами, даже ни одного. Очень многие функции CSS остаются неразработанными. Когда я впервые взял в руки оригинальный перевод спецификации CSS, я прочитал ее как научную фантастику. Очень много полезных возможностей каскадной таблицы стилей. Однако, к сожалению, до сих пор именно эти детали были правильными.

Итак, давайте начнем.

Начнем с того, как таблицы стилей включаются в HTML-документ. Информация о таблице стилей может находиться в отдельном файле или непосредственно в исходном коде сайта. Мы объясним, где и в какой форме в документе автор страницы может описать стиль и как он ссылается на стиль, установленный в другом документе.

Существует четыре основных способа применения CSS к HTML-страницам. Давайте рассмотрим каждый из них подробнее.

1. обход стилей для отмеченных элементов. В целом, этот метод приводит к потере главного преимущества CSS & #8212, возможности отделить информацию от описания представления этой информации. Тем не менее, он по-прежнему часто используется. Чтобы описать стиль таким образом, необходимо применить атрибут style к этому элементу HTML-страницы. Его общий аннуитет выглядит следующим образом.

<element style="property:value;property:value">текст или другой объект</gt,.

Мы оставим эти свойства на потом, а пока посмотрим, как работает таблица масштабирования. Вот первый пример:.

< p style=" font-size: 14pt; font-style: italic; background-colour: lime" > Этот абзац напечатан боковыми буквами, размером шрифта 14 мом и светло-зеленым фоном. </p>,.

Поэтому к тексту, заключенному между метками и lt; P>, применяется соответствующий стиль, стоящий за функцией style. </p> и </p>. Эта функция может быть применена к любому знаку. Однако набор допустимых пар 'свойство:значение' в любом случае немного отличается (объяснение будет дано позже).

ЧИТАТЬ ЕЩЁ:  Как создать сюрреалистический морской пейзаж

Я хочу сказать несколько коротких замечаний о пенсиях. Стилевая черта пишется с заглавной буквы только для удобства. Вы можете написать следующее, как вам нравится, или: style или что-то вроде: style — результат будет точно таким же. Набор пар "свойство: значение" должен быть заключен в кавычки, и каждая пара должна быть отделена от следующей точкой.

2. поместить описание стиля в заголовок документа.

Стили описываются через элементы (а не черты) таким образом&.#8216;STYLE’ помещается в заголовок документа, т.е. между метками < head> и </head>.

Это наиболее распространенный способ использования эскалационных таблиц. Он также является самым долговечным. Общая пенсия по этому методу выглядит следующим образом.

< head>,.
< style type=" text/css" >,.
элемент <свойство: значение; свойство: значение>
</style> ,,
</head>,.

Во всем документе предметы, описанные в &.#8216;STYLE’ В заголовках элементы форматируются и приписываются в соответствии с установленным стилем, если это не обойдено функцией стиля (см. пункт 1) или обычными средствами HTML. Кстати, параметр type = " text/css" является обязательным и помогает указать браузеру на использование CSS. Вот пример:.

< head>,.
< style type=" text/css" >,.
B 
</style> ;
</head>,.
< body>, < body>.
...

Чтобы определить несколько элементов с одинаковым стилем, можно использовать группировку. Затем все предметы должны быть перечислены следующим образом и разделены по сторонам следующим образом

H1, H2, H3 

Такая запись означает, что заголовки первого, второго и третьего уровней окажутся удаленными.

CSS предоставляет еще одну замечательную возможность: определение классов. С помощью классов можно выборочно назначать стили не всем элементам страницы. Хотя классы лишь слегка поддерживаются в Netscape, они дают вам большую гибкость в управлении элементами и иногда не позволяют игнорировать их. Чтобы использовать класс, он должен быть сначала установлен в элементе &.#8216;STYLE’ и ссылаться на этот класс в некоторых пунктах внутри#8216;BODY’ Использование атрибутов класса:.

< head>,.
< style type=" text/css" >,.
.имя_класса <свойство: значение; свойство: значение>
</style> ,,
</head>,.
< body>, < body>.
...

< element class = " class name " > Стили </element > … </body>,.

ЧИТАТЬ ЕЩЁ:  Руководство по методам slideUp и slideDown в jQuery

Вот пример:.

< head>,.
< style type=" text/css" >,.
.x 
.y 
</style> ,,
</head>,.
< body>, < body>.
< table border = 1 bgcolor = grey border = white <, <
< tr>,.
< td > cell1 </td >,.
< td class = " x " > cell2 </td>,.
</tr>,.
< tr>,.
< td class = " y " > cell3 </td>, < /td>
</tr>,.
</table>,.
</body>,.

В этом примере Cell2 имеет класс 'x", его элементы имеют ширину 160 пикселей, cell3 — класс " y", все элементы которого имеют отступ ('quot;quit;quot;) 15 пикселей. Ячейке 1 не присваивается класс, поэтому она форматируется в соответствии с общими стандартами HTML и в соответствии с возможностями, описанными в Label< Table>.

Предположим, писатель предсказывает все детали <Таблицы> (логическое условие).#8216;CITE’ (логическое обозначение, обычно используемое для обозначения названия книги или статьи и выполненное наклонными буквами), & находится внутри названия#8216;H3’ окрашен в пурпурный цвет. Однако, в дополнение ко всем пунктам и 8217; названиям, они должны быть выделены фиолетовым цветом.#8216;CITE’ Из названия.#8216;H3’цвет по умолчанию (т.е. черный). В этом случае контекстный селектор очень востребован для облегчения использования каскадных таблиц. Например, в данном случае желаемый результат может быть достигнут следующим образом

H3 CITE 

Здесь пункт &.#8216;H3’ это своего рода поисковая маска. Описанный стиль (цвет: фиолетовый) применяется только к последнему элементу (в данном случае &.#8216;CITE’) и только при положительном результате поиска. Давайте на этом примере покажем работу селектора кадров.

< body>, < body>.
< h3> В этом заголовке используется < cite> логическая пометка 'cite' </cite> </h3>
</body>,.

3. ссылка на внешний файл описания стиля.

Вы можете ввести таблицу стилей на любую страницу из внешнего файла. Он должен быть предварительно создан и иметь расширение .CSS. Содержимым этого файла должно быть описание стиля, созданного пенсией, описанной в пункте 2. Подключение внешнего файла осуществляется через элемент &.#8216;LINK’ пункт. Это может быть как в заголовке, так и в теле документа.

< link type = " text/css " rel = " styleSheet " href = " http: // path/to/your/css " >

Отличительное значение rel должно быть 'styleSheet'.

4) Введите описание таблицы стилей. Это соизмеримо с приведенным выше способом определения описания. С его помощью также можно обратиться к внешней таблице масштабирования.

< style type = " text/cs" >,.
@import: url (http:// path/to/your/css)
</style> ,,

Импортные стили можно заменить одним из описанных выше способов. Однако этот способ подключения внешних файлов поддерживается не всеми браузерами и не рекомендуется.

Оцените статью