Все кто увлекается WEB технологиями, слышали про такую технологию как CSS. И они, наверное, хотят знать основы CSS, для того чтобы уметь изменять стили своих сайтов или страничек, или просто уметь читать и понимать CSS файлы. Сегодня мы с Вами и займемся рассмотрением основ CSS.
Для начала давайте разберемся, что же такое CSS. Как Вы знаете HTML — это язык разметки гипертекста. А CSS в свою очередь язык визуального оформления этой самой разметки.
CSS (Cascading Style Sheets) — каскадные таблицы стилей. В HTML существуют свои инструменты визуального оформления, но они во многом уступают возможностям CSS, да и если у Вас много страничек, то представьте себе, Вам вдруг захотелось поменять цвет всех заголовков, Вам придется вносить изменения во все HTML файлы, а на CSS это делается в одной строке. Я думаю, что хватит только этого аргумента, для того чтобы начать изучать CSS.
CSS кстати используется не только для визуального оформления страниц размеченных на HTML, но и тех страниц написанных с помощью языка разметки XHTML, также отлично подходит для оформления XML документов.
Так как мы с Вами только новички, то и начнем с самых основ, в дальнейшем будем уже углубляться в эту технологию, так как CSS это довольно мощная штука и в рамках одной статьи все просто не уместить, поэтому разобьем изучение CSS на несколько уроков, с постепенным углублением в эти каскадные таблицы стилей.
Ну что переходим к практике, и начнем мы с Вами с простого синтаксиса. Выглядит он примерно так:
Элемент оформления{
свойство: значение;
}
Элемент оформления принято называть селектор, но для простоты я указал его именно так.
Чтобы был понятен синтаксис, приведем простейший пример:
p {
color: red;
}
где,
- p – это тег абзаца;
- color – это свойство, т.е. в нашем случае это цвет;
- red – это значение, в нашем случае это красный.
И в итоге у Вас текст во всех абзацах станет красным цветом.
С синтаксисом немного разобрались, перейдем к тому моменту, где это все писать, т.е. подключать CSS к нашему HTML документу.
Способы подключения CSS
1. Непосредственно в самом элементе документа по средствам атрибута style, например, если перевести вышеуказанный пример в сам документ и описать его в самом элементе, то это будет выглядеть так:
<p style = "color: red;">Пример</p>
Данный способ не удобен тем, что опять же если у Вас будет много документов, то Вам придется менять во всех этих документах, причем в каждом элементе.
2. Немного по удобней способ — это применение CSS, когда таблица стилей описана в самом документе. В разделе head применяется элемент style, в котором и описывается сама таблица стилей. Например, снова задействуем вышеуказанный пример, но уже с использованием этого способа:
<head>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p >Пример </p>
</body>
Получится то же самое, что и было выше. Этот способ иногда используют, но он все равно не идеален.
3. В третьем способе используется импорт CSS документа, я редко встречал применение этого способа, может им и никто и не пользуется, но знать о нем нужно. Здесь таблица стилей уже описана в отдельном документе.
<head>
<style type="text/css" media="all">
@import url(css-file.css);
</style>
</head>
<body>
<p>Пример</p>
</body>
где,
css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.
4. Самый распространенный способ применений каскадной таблицы стилей — это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.
<head>
<link rel="stylesheet" type="text/css" href="/css-file.css">
</head>
<body>
<p>Пример</p>
</body>
где,
css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.
Виды селекторов в CSS
Так с подключением CSS разобрались теперь перейдем к селекторам, т.е. способам поиска этих самых элементов в Вашем документе, другими словами, если Вам не нужно, что все абзацы были красным цветом как в вышеуказанном примере, а например, у одних абзацев он был черным, а у других он был красный. На самом деле их девять видов, но мы пока рассмотрим самые популярные.
С селекторами элементов (тегов) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:
p {
color: red;
}
p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.
На мой взгляд, самые популярные виды селекторов это с использованием классов и идентификаторов. Другими словами, при разметке своего документа Вы помечаете элементы документа с помощью идентификаторов (которые являются уникальными во всем документе) или приводите их к одному классу (он может повторяться в документе). Чтобы было понятней, приведем пример, в котором у нас будет два абзаца, один из которых будет красным цветом, а другой черным.
Текст CSS будет таким:
#idred {
color: red;
}
.black {
color: black;
}
Текст документа будет таким:
<p id = "idred">Пример красного абзаца </p> <p class = "black">Пример черного абзаца </p>
Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.
Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).
В HTML документе они обозначаются с помощью соответствующих тегов: id для идентификатора и class для классов.
Также есть селекторы атрибутов, например, Вы хотите что бы конкретная ссылка отображалась в том виде в котором Вам надо, при этом все остальные ссылки были неизменны, то тогда можно использовать селектор атрибутов.
Текст CSS:
a[href="/ваша нужная ссылка"]{
font-size: 20px;
Текст HTML документа:
<p><a href = "ваша нужная ссылка">ссылка</a></p> <p><a href = "обычная ссылка">ссылка</a></p>
Как Вы видите у нужной нам ссылки, шрифт стал 20 пикселей.
Теперь рассмотрим тоже популярный вид селекторов это — селекторы потомков. Другими словами, Вы указываете, что этот элемент, идентификатор или класс имеет вот таких потомков, т.е. он находится в том или ином элементе который, например, имеет тот или иной id или class. Пример:
Текст CSS:
p {
color: red;
}
div p {
color: green;
}
Текст HTML документа:
<p>Пример красного абзаца </p> <div><p>Пример абзаца, который имеет потомка элемент div</p></div>
Вы здесь видите что абзац, который находится в элементе div стал зеленым, а все абзацы, которые не находятся в элементе div, станут красным.
Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).
Как Вы видите, сегодня мы использовали всего два свойства: это font-size и color. На самом деле их очень много поэтому на сегодня я думаю достаточно, в следующих уроках продолжим рассмотрение других свойств и много чего еще! А пока рекомендую почитать книгу по CSS для начинающих, где более подробно описаны все возможности CSS и как их применять на практике.
Надеюсь, Вы хоть немного стали понимать суть этих самых каскадных таблиц стилей CSS. В дальнейшем будут уроки посложней! Чтобы Вы убедились, что CSS это очень прикольная вещь, вот пример кулинарного сайта, где главное меню реализовано только с использованием HTML и CSS, без всяких там java скриптов. Надеюсь, мы в дальнейшем тоже научимся так делать.
Для совсем не знающих css слишком мало примеров, плюс пара грубоватых ошибок — в первом пункте вариантов вставки таблиц перепутано понятие тега и аттрибута, в примере с div и p понятие предка — с понятием потомка.
Но вообще неплохое начало и спасибо за сайт
2 года статье (