Назад Вперед

Часть 7. Три кита WEBa. Кит второй — CSS.

Основы CSS — языка описания внешнего вида документа. Оформление шаблона страницы.

Для статьи буду использовать страницу, созданную в прошлом материале. Закончил на том, что созданная страница имеет совсем не тот вид, который можно использовать в реальном проекте. HTML позволяет расставить содержимое документа по всем нужным местам и применить стандартное оформление, для этого он и создавался, а вот чтобы оформить его уже в "красивую" страницу, используются каскадные таблицы стилей — CSS. В частности его новая версия CSS3. Все «красивости» и дизайнерские штучки можно сделать с помощью стилей. Вообще, даже современные сайты, адаптивные под разные размеры экрана с множеством интересных дизайнерских решений, можно сделать только с помощью HTML5 и CSS3. Это конечно по времени более затратно, чем использование специальных библиотек и готовых фреймворков, и в основном приводит к изобретению велосипеда, но это возможно.

Сайт на чистом HTML5 и CSS3

Итак, CSS отвечает за внешнее оформление всех тегов указанных в документе, всех классов прописанных для определенных элементов или отдельных элементов с указанным id. В самой простой форме язык можно использовать для изменения шрифта (указать семейство), его размера, цвета, для определения внешних и внутренних отступов, для отображения цвета фона, для размещения элементов друг за другом горизонтально, для центрирования и много чему другомую Список можно продолжать очень долго.

Начну с того, как же подключать таблицу стилей, какие есть способы и какой в основном буду сам использовать. Самый первый — самый простой, описать стиль оформления в самом теге использую атрибут тега и его параметры.


    ...
    <p style='color: red;'>
        Этот текст выделен в один абзац красного цвета.
    </p>
    <p>
        А это уже следующий абзац черного цвета.
    </p>
    ...
 

Есть тег, например <p></p> с определенным содержимым. Прописываю ему атрибут style='', а в кавычках уже указываем стилевые правила (свойства). Например, цвет текста color: red; Все правила должны разделяться точкой с запятой и указывать их можно любое количество. Я этим способом вообще не пользуюсь, так как это пришлось бы для каждого тега прописывать правила, что вообще не рационально. Даже если возникает необходимость изменить стиль только у одного конкретного элемента, проще присвоить ему класс или идентификатор, если он один на всю страницу такой будет, и изменить уже другим способом.

Абзац с текстом красного цвета

Еще один способ — создание глобальных стилей, которые прописываются в теге head. Выглядит это следующим образом.


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>
            <style>
                body {
                    background-color: grey;
                }
            </style>
        </head>
        <body>
            <p style='color: red;'>
                Этот текст выделен в один абзац красного цвета.
            </p>
            <p>
                А это уже следующий абзац черного цвета.
            </p>
        </body>  
    </html>
 

Все правила записываются между тегами <style></style>. Дальше указывают элемент, к которому нужно применить правило и сами уже свойства записываю между фигурных скобках, разделяя точкой с запятой. Таким образом описанные стили будут использоваться для всего документа. НО, если нужно будет использовать такое же оформление на другой странице, необходимо будет копировать и вставлять эту часть кода, а если на 100 страницах…

Страница с серым фоном

Опять же этот способ тоже мне не подойдет. Поэтому я использую связанные стили. Их проще всего подключать ко всем документам. Суть в том, что все правила и свойства прописываются в специально созданном файле с расширением .css и подключается к тем документам, где эти правила нужно использовать.

Файл test.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>
            <link rel='stylesheet' href='style.css'>
        </head>
        <body>
            <p style='color: red;'>
                Этот текст выделен в один абзац красного цвета.
            </p>
            <p>
                А это уже следующий абзац черного цвета.
            </p>
        </body>  
    </html>
 

В том же теге head прописываю еще один тег <link>. У этого тега есть атрибут href='', который указывает путь к созданному файлу. Путь может быть как внутри каталога проекта, так и на внешний ресурс. Еще один атрибут с параметром rel='stylesheet', который явно указывает, что этот документ используется для стилей.

Новый файл style.css

Открываю новый созданный файл style.css и в нем уже прописываю все нужные свойства. Правила для элементов можно указывать тоже несколькими способами. Самый простой написать имя тега, который собираюсь форматировать. Например, body { } и в фигурных скобках уже записывать правила. И это правило будет применяться для всех тегов body во всех документах, где подключен файл.

Файл style.css:


    body {
        background-color: grey;
    }
 

Результат будет такой же, как и с глобальными стилями.

Использование связынных стилей

Но если взять например тег p и задать ему свойство с размером шрифта, а в одном из документов мне нужно будет, чтобы размер шрифта в абзаце был больше или меньше. Тогда на помощь приходят классы. Можно сгруппировать теги присваивая им определенный класс.

Файл test.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>
            <link rel='stylesheet' href='style.css'>
        </head>
        <body>
            <p>
                Этот текст выделен в один абзац красного цвета с размером 20 пикселей.
            </p>
            <p class='small-text'>
                А это уже следующий абзац с размером 14 пикселей.
            </p>
        </body>  
    </html>
 

Для наглядности, всем абзацам, где я хочу, чтобы шрифт был 14px, я присвою класс class='small-text'. И теперь в подключенном файле стилей пропишу следующее:

Файл style.css:


    body {
        background-color: black;
    }
    p {
        font-size: 20px;
        color: red;
    }
    .small-text {
        font-size: 14px;
    }
 

В итоге получилось следующее, везде, где был указан класс, размер шрифта поменялся на 14px. Но цвет текста остался красный во всех абзацах, так как он был прописан для элемента p в целом и не был переписан в классе .small-text. В этом и заключается суть каскадных стилей, правила накладываются друг на другу, и в итоговом варианте используются те, которые имеют больший приоритет.

Разные шрифты с помощью классов

Что касается приоритета, то во-первых, он зависит от порядка записи правил в файле, чем позже описано правило, например, для одинакового класса или элемента, тем оно приоритетнее (переписывает предыдущее). Самый большой приоритет имеют правила прописанные для тега с идентификатором. Записывается он так: #id_name { }, а в самом теге указывается <p id='id_name'>. Дальше идут классы и уже потом просто элементы. На самом деле есть целая система расчета приоритета использования правил, так как там есть варианты записи с указанием конкретного класса во вложенном теге и тому подобное. Но для начала об этом думать не стоит и хватит мне того, что описано было выше.

Комментарии в языке стилей указываются следующим образом /* текст комментария */. На первых порах есть большая необходимость описывать комментами определенные правила, чтобы быть в курсе для чего они.

Сейчас немного по-развлекаюсь со своей страницей, записав несколько правил для определенных тегов и тегов с классами. Комментариями описаны, за что отвечают те или иные правила.

Файл index.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>
            <link rel='stylesheet' href='style.css'>                
        </head>
        <body>
            <header>
                <nav>
                    <h1>
                        Главная страница
                    </h1>
                </nav>    
            </header>
            <main>
                <h2>
                    Жуков Иван Васильевич
                </h2>
                <p>
                    Руководитель проекта <span class='name'>LOVEtoPLAY</span>. 
                </p>
                <p>
                    Мое увлечение: <i>программирование, геймдизайн, создание игр</i>.
                </p>
                <img src='http://www.zhutiko.com/assets/img/image_one.jpg' alt='Изображение'>
            </main>
            <footer>
                <a href='https://vk.com/zhutiko' target='_blank'>
                    <span class='small-text'>Группа ВКонтакте</span> 
                </a>
            </footer>   
        </body>  
    </html>
 

Файл style.css:


    /*Применяется ко всему документу*/
    * {
        margin: 0; /*внешний отступ*/
        padding: 10px 0; /*внутренний отступ*/
    }
    /*Применяется к телу документа*/
    body {
        background-color: grey; /*цвет фона*/
        text-align: center; /*расположение по центру содержимого*/
        color: white; /*цвет текста*/
        padding-top: 0; /*верхний внутренний отступ*/
    }
    /*Применяется к шапке документа*/
    header {
        background-color: black;
    
    }
    /*Применяется к подвалу документа*/
    footer {
        background-color: black;
    }
    /*Применяется ко всем абзацам*/
    p {
        font-size: 20px; /*размер шрифта*/
       
    }
    /*Применяется к элементу с классом name*/
    .name {
        color: green;
    }
    /*Применяется к элементу с классом small-text*/
    .small-text {
        font-size: 14px;
        color: white;
    }
 

Как можно увидеть теперь в окне браузера, страница стала совсем другой. Конечно, такое оформление подходит лишь для личного пользования или для экспериментов, но на игру или сайт это совсем не похоже, абсолютно. Поэтому в следующем материале я уже познакомлюсь с основами языка программирования JavaScript.

Итоговый вариант страницы

Спасибо за внимание!

Назад Вперед