Некоторые сведения о технологии CSS
Если вы впервые столкнулись с понятием CSS — то вы, несомненно, попали по адресу. Здесь вкратце будет рассказано, что из себя представляет CSS, для чего она нужна и как не допустить ее использование во вред (ага — и такое бывает, уж поверьте мне).
CSS — сокращенная аббревиатура от «Cascading Styles Sheets», что буквально переводится как «каскадные таблицы стилей». А если конкретнее — описание стилей для элементов HTML-страниц. Обычно описание стилей помещается в файл с расширением *.css. Чтобы использовать CSS-файл, необходимо прописать в файле HTML следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
...
Можно также не выносить стили в отдельный файл, а прописать их прямо в HTML-файле:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Title</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
div {
width: 100px;
height: 120px;
background-color: #555555;
}
ul {
width: 89%;
}
/*]]>*/
</style>
</head>
...
CSS-стили можно применить как к любому тэгу, так и к элементу body, который является laquo;телом страницы». Примеры использования стилей приведены ниже:
body {
font: small Verdana, Arial, Helvetica, sans-serif;
color: #444444;
background-color: blue;
}
h1 {
font-size: medium;
}
p {
font: 110%/150% Geneva, 'Times New Roman', Times, serif;
color: #111111;
}
Применение не исключается только тэгами. Также можно создавать классы, причем один и тот же класс можно использовать для разных тэгов многократно:
h1.class1 {
color: red;
}
.class2 {
font-weight: bold;
}
Использование в html-разметке приведенных выше стилей:
<h1 class="class1">Заголовок первого уровня</h1> <p class="class2">Просто жирный абзац.</p> <h2 class="class2">А это жирный заголовок :)</h2>
Причем, как вы уже убедились, в файле CSS перед именем класса (перед точкой) записывать тэг, с которым используется
класс необязательно. В этом случае класс может быть использован совместно с любым тэгом. Класс class1,
объявленный как h1.class1, будет распространяться только на тег h1. И если мы будем его использовать для других тэгов это будет являться ошибкой.
Кроме классов существуют селекторы, которые используются только один раз. Обычно их используют для того, чтобы выделить один структурный элемент разметки из всех остальных. После присвоения селектора, с этим элементом с помощью javascript можно проделывать все что угодно: изменять цвет, видимость и т.д.
#identifier1 {
background-color: #7e7e7e;
border: 1px solid #aaaaaa;
height: 120px;
}
div#identifier2 {
background-color: yellow;
border: 2px solid #b1b1b1;
height: 10px;
}
Разметка, в которой используются эти стили:
<div id="identifier1">Первый блок</div> <div id="identifier2">Второй блок</div>
Существуют еще и некие псевдоклассы, с помощью которых также можно манипулировать стилями тэгов. К псевдоклассам
можно отнести состояние ссылок (элемента <a>) — с помощью псевдокласса hover можно изменить цвет и подчеркивание ссылки:
a:hover {
color: green;
text-decoration: none;
}
И так далее. Кроме всего вышеперечисленного, для того чтобы прописать для какого-либо тэга стиль, используют следующую запись:
<p style="background-color: #777777; color: red"> Это обычный абзац с темным фоном и красными буквами.</p>
Еще много интересного можно сделать, используя данную технологию. Надеюсь я заинтересовал вас и вы продолжите ее изучать. Удачи!
Отправить комментарий