Главная > Дизайн > CSS > Что такое CSS?

Что такое CSS?

8.02.2010. CSS, Дизайн

0

Мужчина по-настоящему женат лишь тогда, когда уже перестал иметь друзей.
                -- Ванда Блоньская

Что такое CSS?

CSS, или каскадные таблицы стилей (Cascading Style Sheets) - это способ описания внешнего вида документа. Обычно используется вместе с html и xml. Основой задачей CSS является придание документу\странице\сайту своего собственного стиля, начиная от цвета и размера шрифта и заканчивая всевозможными эффектами, типа прозрачности, закругленных углов таблицы и т.д. Причиной к создание CSS послужила необходимость управлять внешним видом web-страниц и теперь эта технология используется в большинстве сайтов.

Синтаксис CSS очень прост. Любой CSS состоит из правил. Правило состоит из селектора и описания.

Селектор отвечает за то, к чему будут применены свойства в правиле. Селектор может быть именем тега, специальным классом или уникальным идентификатором. Также один селектор может зависеть от другого. Например, у нас есть тег <em>. С помощью CSS можно указать, что, например, жирный текст внутри этого тега должен быть не жирным, а красным. Это реализуется вот таким образом:

селектор селектор2 селектор3

{

//стиль

}

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

В стеле описываются свойства и их значения. Синтаксис выглядит так:

свойство: значение;

Например, запись color:red задает свойству "цвет текста" значение красный.

Еще немного про селекторы:

Селектор, означающий имя тега пишется также, как и имя тега:

Например, селектор тега <a> пишется a:

a

{

color:green;

}

Здесь, для текста внутри тега <a> устанавливается зеленый цвет.

Селектор-класс должен начинаться с точки:

.myclass

{

font-size:14pt;

color:#FFF;

}

В этом примере я создал свой класс с белым цветом шрифта и размером в 14 пунктов.

Для указания какому-либо экземпляру тега, что он должен использовать определенный класс для отображения своего содержимого, нужно в атрибутах тега прописать class="myclass":

<p class="myclass> Здесь будет белый текст в размером шрифта в 14 пунктов</p>

Кроме классов существуют еще ID, уникальные идентификаторы. В любом документе может быть только один тег, использующий ID. Чтобы указать тегу, что он должен для отображения использовать стиль с таким-то ID надо прописать в атрибут тега id="myid". Любой ID в CSS начинается с #:

#myid

{

background:grey; //установка фона в серый цвет.

}

-----------------------------------

<div id="myid">

Текст с примененным стилем myid. Этот текст будет на сером фоне

</div>e

Способы подключения CSS к HTML:

Подключить CSS к HTML-файлу можно несколькими способами:

  1. Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
  2. Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:

    <link rel="stylesheet" type="text/css" href="style.css" />

  3. Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:

    <span style="color:green background: black">зеленый текст на черном фоне</span>

Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз

P.S. Нужен реферат? Вот вам рефераты на заказ.




Похожие записи:


Метки:

Rambler's Top100 Блогун - монетизируем блоги