CSS part I

CSS (каскадные таблицы стилей) - это язык, отвечающий за внешний вид документа, описанного с помощью языка разметки

<table background="images/awesome-background.gif" border="0" width="300" height="446">
    <tr>
        <td><img src="images/super-icon.gif" alt="Super Icon" title="Super Icon"></td>
        ...
    </tr>
    <tr>
        <td collspan="4">
            <font size="4" face="Comic Sans MS">
                <p align="left">Разнообразный и богатый опыт начало повседневной
                работы по формированию позиции требуют от нас анализа направлений
                развития. Постоянный рост и сфера активности влечет за собой
                процесс внедрения и модернизации систем массового участия.</p>
            </font>
        </td>
    </tr>
    <tr>
        <td>
            <marquee behavior="alternate" direction="right">
                <font size="4" face="Comic Sans MS" color="red">Бегущая строка</font>
            </marquee>
        </td>
    </tr>
</table>

Раньше стили описывались прямо в HTML файле

CSS: Причины появления

  • избыточность HTML
  • мало возможностей HTML для визуального оформления
  • сложность оформления HTML
  • много копипасты
  • смесь контента и визуальной состовляющей страницы
<img
    src="images/super-icon.gif"
    alt="Super Icon"
    title="Super Icon"
>
<p>
    Разнообразный и богатый
    опыт начало повседневной
    работы по формированию
    позиции требуют от нас
    анализа направлений развития.
    Постоянный рост и сфера
    активности влечет за собой
    процесс внедрения и
    модернизации систем
    массового участия.
</p>
<div class="marquee red">строка</div>
img {
    display: inline-block;
    margin: 20px auto;
}

p {
    font: 12px/14px 'Comic Sans MS', serif;
}

.marquee {
    padding-left: -100%;
    overflow: hidden;
    animation: scroll 5s infinite linear;
}

.red {
    color: red;
}

HTML

CSS

Разделение контента и визуальной составляющей страницы

Структура CSS

Правило

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

 /* это правило */

Селектор

селектор

{   /* блок объявления стилей */ 

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

}

селектор

{

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

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

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

}  

селектор,

селектор,

селектор,

селектор

{

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

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

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

}

div                   /* селектор */
{   /* открывается блок объявления стилей */
    font-size: 12px;  /* правило 1 */
    color: red;       /* правило 2 */
}   /* закрывается блок объявления стилей */

Добавление стилей к html

<p style="color: red;">

<style>

    p

    {

        color: red;

    }

</style>

Внутренние стили. Прямо в html элемент

Глобальные стили. В HTML файл

Добавление стилей

Связанные стили. В отделый файл style.css

<head>

     <link rel="stylesheet" href="style.css">

</head>

Еще раз

Селектор это:

селектор

{

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

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

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

}

Селектор тега

<h1>Очень важный текст</h1>

<p>Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>
p
{
    color: red;
}

h1
{
    font-size: 34px;
}

CSS

HTML

<p> - тег текстового абзаца

<h1> - тег заголовка первого уровня

Селектор класса

<h1 class="title">Очень важный текст</h1>

<p class="info red">
Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>
.red 
{
    color: red;
}

.title 
{
    font-size: 34px;
}

.info 
{
    border: 1px solid black;
}

CSS

HTML

Селектор идентификатора

<h1 id="title">Очень важный текст</h1>

<p id="info">
Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>
#red 
{
    color: red;
}

#title 
{
    font-size: 34px;
}

#info 
{
    border: 1px solid black;
}

CSS

HTML

<p class="info red"> - применит стили и info и red 

<p id="info red"> - не заработает (id должен быть один)

id или class

  • class для визаульного стиля

  • id для логических или для функциональных элементов

Селекторы атрибутов

[href]
{
    color: red;
}
<a href="https://yandex.ru">Яндекс</a>
<a>Пустая ссылка</a>

Яндекс
Пустая ссылка

[href="http://yandex.ru"] {
    color: red;
}

<a href="https://yandex.ru">Яндекс</a>
<a href="https://google.com">Google</a>

Яндекс
Google

Ссылки

CSS part I

By Techno School

Made with Slides.com

CSS part I

  • 43

More from Techno School