Способы объявления сss

1 2 3 4 5 6

Оглавление

Что такое CSS

Синтаксис СSS

Оформление CSS

Комментарии в CSS

Способы объявления сss

Inlineстили

Cтили в разделе head

Внешний CSS файл

Какой способ подключения стилей выбрать?

Селекторы в CSS

Селекторы тегов

Селекторы идентификаторов (id)

Селекторы классов (class)

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

Свойства стилей

Единицы измерения в CSS

Относительные единицы измерения

Пиксели

Проценты

Абсолютные единицы измерения

Способы задания цветов

Функциональный RGB

Шестнадцатеричный RGB

Свойства стилей CSS.

Ширина и высота: width и heightФон элемента backgroundborder – рамка вокруг элемента

Цвет текста color

Шрифт font

Оформление списков liststyle

Вложенность.Контекстные селекторы

Дочерние селекторы

Соседние селекторы

Наследование

Группировка свойств

Приоритеты стилей в css

Приоритеты источников стилей

Приоритеты стилей автора

Практика

Создание стилей для меню сайта

Домашнее задание

Дополнительные материалы

Используемая литература

Что такое CSS

CSS (Cascading Style Sheets) – это каскадные листы стилей, которые применяются для описания внешнего вида вебдокумента, написанного при помощи языка разметки HTML.

Другими словами, с помощью HTML появляется структура документа, а CSS это уже его оформление. При помощи CSS можно менять цвета, шрифты у текста, изменять положение элементов на странице, их размеры, задавать элементам рамки, границы и отступы.

Раньше, когда не было CSS, документы оформляли при помощи атрибутов, но у такого способа очень ограниченные возможности, поэтому сайты в то время были скучные и однотипные. Дальше приводится пример оформления вебдокумента без использования CSS.

Синтаксис СSS

Селектор {

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

}

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

Оформление CSS

1й способ

Селектор {свойство1: значение1;свойство2: значение2;}

2й способ

Селектор

{

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

}

3й способ

Селектор {

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

}

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

Комментарии в CSS

/* Внешний вид*/ p { color: blue; } /* Стили для параграфа */

В CSS можно также указывать комментарии для комментирования того, свойства каких элементов будут описываться, или для комментирования самих стилей при редактировании документа.

Способы объявления сss

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

Inlineстили

<body style="background:#0f0; "> <h1 style="color: blue;textalign: center;"> Заголовок </h1> </body>

Для подключения CSS этим способом в HTML существует тег style, который можно указывать практически у любого HTMLтега. В значении атрибута style перечисляются в том же формате стили, свойств и их значений.

Cтили в разделе head

<head> <style type="text/css"> body { color^: blue; background^:#0f0; } h1 { textalign: center; } </style> </head>

Для того, чтобы подключить стили этим способом, существует HTML тег style. У него в атрибуте type указываем тип данных, в данном случае это text/css. Внутри этого тега мы уже прописываем стили, которые будут действовать для всей данной страницы.

Внешний CSS файл

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

Style.css

body { color: blue; background: #0f0; } h1 { textalign: center; }

А в нужном HTML файле этот файл подключаем.

Index.html

<head>

</head>

Для подключения CSS файла используется тег link, который помещается в раздел head нужного HTML файла. И для того, чтобы правильно подключить файл стилей, у тега link нужно указать несколько атрибутов. В атрибуте rel указывается значение stylesheet, т.е. лист стилей, это нужно для того, чтобы браузер понимал, что подключается файл стилей CSS. В атрибуте href указывается путь к CSS файлу, причем так же, как и в случае с гиперссылками, этот путь может быть как относительным, так и абсолютным. Указывается атрибут type со значением text/css.

Какой способ подключения стилей выбрать?

Плюс inlineстилей в том, что можно быстро прописать какой-нибудь простой стиль для элемента.

Например, какому-нибудь слову в тексте задать простой стиль, например, выделить красным цветом. Недостатки такого подхода в том, что для каждого тега необходимо прописывать стили, допустим, у нас несколько параграфов, и все они должны быть определенного стиля, и тогда каждому параграфу нужно прописывать этот стиль. И еще один существенный недостаток в том, что при таком подходе, стили сложно редактировать. Что делать, если нужно будет в проекте поменять размер шрифта во всех параграфах? При втором способе уже можно прописывать стили для нескольких элементов, только все стили будут применяться в пределах одного документа. В этом и состоит главный минус этого подхода. Получается, что если на сайте большое количество страниц, и у нас задача, поменять тот же цвет или размер шрифта всех параграфов, соответственно нужно открывать каждую страницу. Если подключить отдельный файл, то он будет действовать на все страницы, где мы подключим данный файл. И тогда, для того, чтобы изменить цвет или размер шрифта всех параграфов, нужно будет изменить его один раз в одном месте. И еще одно преимущество в том, что браузер кэширует файл стилей, т.е., другими словами, сохраняет его у себя в памяти, чтобы не обращаться при каждом запросе на сервер.

Селекторы в CSS

Селекторы тегов