Сайт по Электронике и Web-разработке
Как сделать свой сайтКак сделать свой сайт
Подключение CSS. На странице описаны способы подключения CSS в web документ.

Подключение CSS

Подключение CSS

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

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

Встраивание стиля в тег

Стиль в любой тег встраивается с помощью параметра style. Все теги имеют параметр style:

<font style="font-size: 12px">Teкст</font>

Если из нескольких атрибутов состоит определение стиля , то через точку с запятой они указываются:

<font style="font-size: 12pt; color: red">Текст</font>

Если атрибута значение определяет необходимость наличия кавычек, то указывается оно в апострофах:

<font style="font-size: 12pt; color: red; font-family: ' Times New Roman' ">Текст</font>

Встраивание определения стилей в заголовок HTML - документа

В одном месте можно собрать все определения стилей. Между тегами <style> указывются стили</style>. <style> необходимо распологать в разделе <HEAD></HEAD> HTML - Web-документа. В теге к которому необходимо применить стиль, с помощью параметра указывается имя стиля class.

Атрибуты, между тегами <style>, необходимо указывать в фигурных скобках. Если несколько атрибутов, то они пееречисляются через точку с запятой:

< Cелектор > { < Атрибут 1 >:< Значение 1 > ; ..., < Атрибут N >: < Значение N > }

В параметре < Cелектор >, могут указаны быть следующие селекторы:

  • * - все теги. Уберем все внешние и внутренние отступы:

    * - {margin: 0; padding: 0}

  • Тег - все теги, имеющие указанное имя:

    font { font-size: 12pt; color: red; font-family: "Arial" }
    ...
    <font>Текст</font>

  • .Класс - все теги, имеющие указанный класс:

    . text1 { font-size: 12pt; color: red; font-family: "Arial" }
    ...
    <font class="text1">Текст</font>

    "Текст 1" и "Текст 2" будет красного цвета, хотя они находятся в разных тегах;

  • Тег.Класс - все теги, имеющие указанный класс:

    font.text2 { font-size: 12pt; color: blue }
    ...
    <font class="text2">Текст1</font>

    Обратите внимание, что если имя класса указать в другом теге, то он будет не определен:

    <p class="text2">Текст2</p>

    В данном случае фрагмент текста " Текст2" не будет отображен синим цветом, так как имя класса text2 применяется к тегу <font>;

  • #Идентификатор - тег с указанным идентификатором:

    #txt1 {color: red}
    ...
    <p id="txt1">Текст</p>

  • Тег#Идентификатор - идентификатор, указанный в определенном теге:

    р#txt1 {color: red}
    ...
    <p id="txt1">Текст</p>

    Если идентификатор находится в другом теге, то элемент будет проигнорирован.

Стилевой класс можно привязать сразу к нескольким тегам. В этом случае селекторы указываются через запятую:

h1, h2 { font-family: "Arial" }

Как привязаться другими способами, можно узнать на следующей странице:

Стилевое встраивание в HTML - документ

  • Селектор1 Селектор2 - все элементы, параметра Селектор2, распологаются внутри контейнера, параметра Селектор1:

    div a { color: red }

    Цвет ссылки текста станет красным, если тег <a> внутри тега <div>:

    <div><a href="link.html ">Ссылка</a>

    </div>

  • Селектор1 > Селектор2 - элементы, параметра Селектор2, которые для контейнера являются дочерними , параметру Селектор1:

    div > a { color: red }

    Цвет ссылки текста красным станет, если тег <a> внутри тега <div> и более не в один другой тег не вложен:

    <div>
    <a href="link.html"> Ссылка1</a>

    <span><a href="link2.html">Ссылка2<a></span>

    </div>

    Ссылка будет красного цвета, так как вторая внутри тега <span> расположена;

  • Селектор1 + Селектор2 - элемент, соответствующий параметру Селектор2, который является соседним для контейнера, соответствующего параметру Селектор1, и следует сразу после него:

    div + a { color: red }

    Цвет текста ссылки станет красным, если тег<a> следует сразу после элемента div:

    <div>Текст</div><a href="link.html">Cсылка</a>

    При необходимости можно составлять выражения из нескольких секторов:

    div span a { color: red }

    Цвет текста ссылки станет красным, если тег <a> расположен внутри тега <span>, а тот в свою очередь вложен в тег <div>:

    <div>

    <a href="link1.html"Ссылка1</a>

    <span>

    <a href="link2.html">Ссылка2</a>

    </span>

    <div>

    В этом примере Ссылка2 будет красного цвета.

    Для привязки к параметром тегов применяются следующие селекторы:

  • [Параметр] - элементы с указанным параметрам:

    a [id] { color: red }

    Цвет текста ссылки станет красным, если тег <a> имеет параметр id:

    <a id="link1.html">Ссылка1</a>

Итак я показал Вам все возможные способы встраивания стиля в html документ.

Назад в рубрику