3.1 что такое CSS

CSS (Cascading Style Sheets = CSS) — это язык, который отвечает за визуальное представление HTML пользователю.

как внедрять стили?

атрибут style(не очень)

<p style="color: #ff0000; font-size:12px">
    это параграф с индивидуальным стилем
</p>

тег <style>(не очень)

<!DOCTYPE html>
<html>
    <head>
        <title>Тег style</title>
        <style type="text/css">
            p {color: #ff0000; font-size:14px}
        </style>
    </head>
    <body>
        <p>На этом сайте Вы найдёте любую 
        информацию о слонах.</p>
    </body>
</html>

отдельный css файл

<!DOCTYPE html>
<html>
    <head>
        <title>Тег style</title>
        <!-- подключаем наши стили -->
        <link rel="stylesheet" href="style.css" 
            type="text/css">
    </head>
    <body>
        <p>На этом сайте Вы найдёте любую 
        информацию о слонах.</p>
    </body>
</html>

обьявление самих стилей

у нас есть три метода применить стиль к какому-то тегу. мы можем использовать селекторы, class или id.

селекторы - часть CSS-правила, которая сообщает к какому тегу будет применён стиль

приминение стиля к тегу p

class - это описание элемента или группы элементов, к которым применяется указанное правило стиля 

<!DOCTYPE html>
<html>
    <head>
        <title>Внедрение класса</title>
        <style type="text/css">
            body {background-color: #c5ffa0}
            
            // сначало мы применяем ко всем тегам p черный 
            // цвет и размер 14
            p {color: black; font-size:14px}

            // создаем тег, который будет изменять цвет
            // на розовый и менять шрифт, но размер будет 
            // такой же, потому что мы его не изменяли
            p.pink {color: pink; font: italic 16px Arial}
        </style>
    </head>
    <body>
        <!-- этот текст будет черным с размером 14 -->
        <p>
            На этом сайте Вы найдёте любую 
            информацию о слонах.
        </p>
        <!-- этот текст будет розовым и 
        написан други шрифтом -->
        <p class="pink">
            Специальное предложение для девушек! 
            Розовые слоны!! только у нас!!!
        </p>
    </body>
</html>

id - это уникальное описание элемента, которое используется для изменения только одного элемента

<!DOCTYPE html>
<html>
    <head>
        <title>Идентификаторы и скрипты</title>
        <style type="text/css">
            body {background-color: #c5ffa0}
            
            #uniquePinkText {color: pink; font-size:14px}

            .blueText {color: pink; font: italic 16px Arial}
        </style>
    </head>
    <body>
        <h2 id="uniquePinkText">this is unique pink text</h2>
        <hr>
        <h2 class="blueText">some text</h2>
        <h2 class="blueText">another text</h2>
    </body>
</html>

шпаргалка по css свойстам

полезные ссылки:

Previous2.2 домашкаNext3.2 оформление(о цвете)

Last updated

Was this helpful?