Внешний CSS. Базовые CSS-селекторы

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

1) атрибут style

Ранее мы познакомились с атрибутом(свойством тега) style. Поскольку CSS стараются отделить от HTML, такой вариант безусловно не является хорошим. Но некоторые задачи, включая JavaScript невозможно решить, неиспользуя данный тег

<div style="width:200px;height:100px;background-color:red">
</div>

2) тег < style >

Этот способ можно рассматривать как некий промежуточный вариант между встроенными стилями через аттрибут style и внешним CSS. Код ниже применит красный цвет ко всем ссылкам в документе. То есть, для того, чтобы применить CSS к тегу нужно написать его имя, открыть фигурные скобки и перечислить CSS-свойства. Мы рассмотрим способы задания оформления в последующих разделах. Если используется данный способ, то тег style прописывают внутри тега head

<style>
a {
    color:red; /*сделаем все ссылки красными*/
}
</style>

3) внешний CSS-файл

Для данного способа создадим css-файл style.css . Мы можем назвать его как угодно, например theme.css или main.css, но как правило, когда файл один у него именно такое название.

Добавим туда следующий код:

div {
    width:200px;
    height:200px;
    background:orange;
}

Данный код окрасит все div'ы внутри нашего html-файла в оранжевый цвет.

В < head > нашего html файла пишем

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

Пример html-файла index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="block">
    </div>
</body>
</html>

Если мы хотели обратиться к нашему div'у по классу, мы бы поменяли style.css на

.block {
    width:200px;
    height:200px;
    background:orange;
}

То есть перед названием класса ставится точка. Об этом подробнее ниже.

4) @import

Конструкция @import позволяет подключать одни css-файлы к другим

Например, у нас есть некий файл violet.css

.strange_block {
    width:100px;
    height:100px;
    background:violet;
}

И мы хотим подключить его к нашему style.css . Тогда мы можем сделать это вот так

@import url('violet.css');

.block {
    width:200px;
    height:200px;
    background:orange;
}

Конструкция @import будет работать только внутри CSS-файла. Если мы теперь подключим наш style.css к index.html, то у нас окрасятся блоки как с классом block, так и с классом strange_block

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="block">
    </div>
    <div class="strange_block">
    </div>
</body>
</html>

Приоритетность применения CSS

  1. Св-ва в атрибуте style
  2. Св-ва тега style
  3. Внешний CSS
  4. Св-ва html-элемента

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

Самыми низкоприоритетными являются свойства html-элемента. Это и понятно, если бы это было не так, мы бы не могли модифицировать элемент.

Базовые CSS-селекторы

Слово селектор обычно всех ставит в тупик. Но всё не так сложно. Слово "селектор" идет от слова select - выбирать. По сути селектор - это конструкция, которая выбирает из html-документа определенные элементы и применяет к ним оформление. Например селектор .block выберет все элементы с классом block.

1. Свойства применяемые к тегу

index.html

<span>Наш текст</span>

style.css

span {
    color:black;
}

То есть текст во всех span'ах станет черным

2. Применение свойств к классу

Есть у нас есть два div'a с классом red_block . Для того, чтобы применить к нему css-стили нам понадобится селектор .red_block

index.html

<div class="red_block">
</div>
<div class="red_block">
</div>

style.css

.red_block {
    width:200px;
    height:200px;
    background-color:red;
}

Обратите внимание, что мы можем применять класс к разным элементам страницы

3. Применение свойств к id

В данном случае у нас элемент с id footer. Для работы с ним нам понадобится селектор #footer, то есть для работы с id нужно добавлять #

index.html

<div id="footer">
</div>

style.css

#footer {
    width:100%;
    height:200px;
    background-color:orange;
}

Обратите внимание, что на странице не должно быть двух элементов с одинаковым id!

Использование Emmet для быстрой генерации html

Плагин Emmet к Sublime позволяет очень серьезно экономить время на генерации html.

Например конструкция div.block после нажатия tab превращается в

<div class="block">
</div>

Подробнее про плагин Emmet и его возможности

Блок занимающий весь экран

Для создание блока, занимающего весь экран нам понадобится файл style.css со следующим наполнением.

html,body {
    height:100%;
}

body {
    margin:0;
}

.wrapper {
    width:100%;
    height:100%;
    background-color:grey;
}

И файл index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="wrapper">
    </div>
</body>
</html>

Теперь давайте разберемся для чего нужны отдельные строчки

body {
    margin:0;
}

margin:0 у body убирает белые отступы по краям экрана

html,body {
    height:100%
}

Если мы сделаем у блока высоту height:100%, то иногда(но довольно часто) такой блок может получить высоту 0. Это вызвано тем, что высота у тегов html и body часто проставляется как auto. А auto у тега html означает, что его высота берется по контенту, то есть 0. В итоге height:100% у блока берет 100% от нуля.

Выходом из этой ситуации является то, что мы выставляем у тега html height:100% . При этом html получает высоту экрана. Далее body берет 100% от нее. Тоже самое делает блок с классом .wrapper

Полезное чтиво:

  1. Слова, часто используемые в CSS-классах https://github.com/yoksel/common-words

Практика:

  1. Создаем два класса - для красных квадратов и для желтых. Создаем три красных квадрата, два желтых
  2. Сайт - сайдбар и контент. Через внешний CSS сайдбар, контент
  3. Создаем сайт по шаблону. Все колонки резиновые, сайт занимает 100% по ширине. хедер и три колонки
  4. Сайт - хедер, футер, два резиновых сайдбара по краям. хедер, два сайдбара, контент
  5. Создание трехстраничного сайта, с хедером, футером, навигационным меню, фоном
  6. Сгенерировать шахматную доску 7*7 клеточек с помощью Emmet

results matching ""

    No results matching ""