Курс HTML 5 и CSS 3 от «Специалист» ведет Борисов И. (1.2 — 2016)

Каскадные таблицы стилей: основные свойства.

Язык HTML изначально задавал структуру и описывал ее представление. И раньше представление задавалось через атрибуты. По ходу развития технологий метод атрибутов стал непригодным и появилась отдельная технология CSS. Сравнивая со строительством HTML это каркас, а CSS отделка.

 

CSS это набор свойств:

 

color: red; // декларация

backroung: // свойство

yellow; // значение

 

color: red; background: yellow; // правило

 

Точку с запятой в конце можно не ставить после последней декларации, но рекомендуется ставить их всегда.

 

Когда браузер читает наш документ он строит дерево, когда парсер (обработчик кода) видит набор правил к этому дереву он применяет их соответственно принадлежности.

 

Свойство color задает цвет текста

Свойство background задает цвет фона

 

Вопрос, цвет текста или фона чего? Того элемента к которому мы применим это правило.

Всего есть три способа применения css на странице.

Первый из них – inline. Пример:

<p style=“color:red;”>

Какой-то абзац.

</p>

Он применяется прямо в тексте страницы html.

У данного способа есть 2 недостатка:

Прописывать надо внутри документа html, неудобно для модификаций.

Неудобно тем, что прописывать надо каждый раз каждому элементу.

 

Второй способ – embeding. Прописывается в блоке head.

<head>

<style>

p{

color: red;

background: yellow;

}

</style>

</head>

В данном способе мы указываем селектор элемента p и указываем свойства. Таким образом, все p на странице приобретают указанные свойства.

 

В языке CSS, как и везде есть комментарии и они не такие как в HTML. Задаются они следующим образом:

/* Комментарий */

 

Минус у этого способа один, все описание распространяется только на одну страницу, поэтому есть еще один способ.

 

Третий способ – linking. Мы создаем новый файл с синтаксисом css. Сохраняем его куда-нибудь, например, в корень сайта, называем как угодно, например style.css.

Чтобы применить этот файл к какой-либо странице в блоке head пишем:

<head>

<link rel=”stylesheet” href=”style.css” /><!— атрибут rel говорит браузеру, какой тип документа линкуется к странице (таблица стилей) —>

</head>

 

В основном используется третий способ, при необходимости применительно к одному документу можно прописать через embeding. Способ inline используется реже.

 

Что будет если мы применим одни и те же свойства с разными значениями к элементу, разными способами, какой из них применится? В чем каскадность таблиц стилей?

 

Во первых, свойство которое логически ниже, перекроет свойства которые логически выше. Т.е. одно и то же свойство с разными значениями отработает, начиная с 1 и заканчивая 3. Например

 

/* Способ 3 */

div{color: red;}

 

<!— Способ 2 —>

<style>

div{color: green;}

</style>

 

<!— Способ 1 —>

<div style=”color: blue;”></div>

 

У элемента div цвет текста будет синим, если заданы все.

 

Многие свойства наследуются от родителей которые сверху, например цвет текста.

 

Единицы измерения css:

 

Относительные:

px

%

em

ex

 

Абсолютные:

cm

mm

in (2.54 cm)

pt (1/72 in)

pc (12 pt)

 

Единицы измерения всегда требуется указывать, кроме тех случаев, когда указывается 0.

 

Цвета:

 

По названию:

red

greed

 

В шестнадцатеричном формате:

#FF33CC

#F3C

 

В формате RGB

rgb (0, 240, 125)

rgb (0%, 80%, 20%)

 

Существует не только селектор тега, но и множество других селекторов. Мы можем объединять элементы в классы. Чтобы объединить элементы в классы, мы задаем у нужного элемента атрибут class и любое имя, которое нам нравится.

 

<p class=”green”>Какой-то параграф</p>

 

Теперь мы можем использовать этот класс в качестве селектора в css

 

.green{

color: green;

}

 

Кроме того мы можем комбинировать селекторы, например, уточним, что свойство нужно применить не просто к классу, а к элементу с классом, следующим образом:

 

p.green{

color: green;

}

 

Если случится такое, что мы указываем одно и то же значение элементу, но разными способами, например, через селектор класса, или селектор элемента, или комбинированный селектор, то в таком случае работает таблица приоритетов, чтобы определить какое именно значение отработает на элементе.

Например, селектор класса выше по приоритету, чем селектор тега.

 

Классы хороши для группировки определенных элементов, но если нам нужен уникальный элемент, тогда у нас есть атрибут id с любым именем, которое нам нравится.

 

<p id=”x”>Параграф</p>

 

#x{

color:red;

}

 

Селектор id еще выше, чем селектор класса.

 

Контекстные селекторы, пример:

div em{

}

 

Применить свойства к элементу em, который является потомком div на любом уровне вложенности

<div>

<p>

<em></em>

</p>

</div>

 

Или более точная последовательность:

div p em{

}

 

Т.е. комбинации зависят от контекста вашего кода.

 

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

 

div > em{

}

Применяем свойства для em, но только для того, который строго является ребенком div.

 

Такие контекстные и дочерние селекторы позволяют очень гибко воздействовать на различные элементы кода HTML.

 

Еще у нас есть псевдоклассы и псевдоэлементы, внешне они не отличается по написанию.

 

Псевдоклассы для ссылок:

a:link{} /* текст ссылки */

a:visited{} /* текст посещенной ссылки */

 

Псевлоклассы для навеления курсора

a:hover{} /* эффект при наведении на ссылку */

 

Группировка селекторов. Чтобы задать одни и те же свойства разным селекторам можно их сгруппировать:

a:hover, h1:hover{} /* hover может применяться не только к ссылкам, в отличии от псевдоклассов для ссылок */

 

Псевдоэлементы:

:first-letter{} /* первый символ */

:first-line{} /* первая строка */

 

:first-child{} /*первый ребенок своего родителя*/

Например:

p:first-child{}

<div>

<p>Параграф 1</p> <!— Применится сюда —>

<p>Параграф 2</p>

</div>

 

:last-child{} /*последний ребенок своего родителя*/

 

Свойства шрифтов

font-family: Arial, Geneva, sans-serif;

семейство шрифта

тип шрифта

 

По умолчанию браузер берет шрифты из операционной системы.

 

font-size: 12px;

величина (можно %) с указанием единицы измерения

xx-small, x-small, small, medium, large, x-large, xx-large

smaller, larger

 

font-weight: bold;

normal, Bold

 

font-style: italic;

normal, Italic

 

font-variant: small-caps;

normal, Small-Caps

 

font: bold 12px Arial; /* Общее правило для шрифтов, порядок строгий */

style variant weight size family /* Выделенное жирным обязательно, остальное нет */

 

Свойства текста

text-align: left;

left, right, center, justify

 

text-decoration: overline underline;

none, overline, (и) underline, (и) line-through

 

text-indent: 20px; /* Сдвиг первой строки слева на право (красная строка) */

величина

 

text-transform: capitalize;

none, capitalize, uppercase, lowercase

 

letter-spacing: 20px; /* Расстояние между буквами */

normal, величина

 

word-spacing: 20px; /* Расстояние между словами */

normal, величина

 

vertical-align: sub;

sub, super

 

line-height: 140%; /* Расстояние между строками (интерлиньяж) */

normal, величина

 

Свойства цвета и фона

 

color: red;

цвет в допустимом формате

 

background-color: yellow;

цвет в любом формате, transparent

 

background-image: url(“picture.gif”);

none, URL

 

background-position: top left;

величина

top, bottom, left, right, center

 

background-repeat: repeat;

repeat, repeat-x, repeat-y, no-repeat

 

background-attachment: fixed;

fixed, scroll

 

background: yellow url(“img.gif”) repeat-x;

color image repeat attachment position

 

Итого:

Выяснили назначение CSS

Уяснили специфику CSS: каскадирование, наследование, группировка

Узнали основные селекторы CSS

Узнали свойства шрифтов, текста, цвета и фона

 

 

Изображения в HTML

Есть три формата которые поддерживает браузер:

gif, jpg, png.

Формат png это разработка W3C, поэтому он наиболее подходящий и используется чаще других.

<img src=”” alt=”” /> <!—указываем путь для картинки и альтернативный текст —>

Есть еще несколько необязательных атрибутов, width, height, но все-таки их лучше указывать в соответствии с нужным нам размером, тогда верстка будет более правильной.

 

Картинка может быть использована в качестве ссылки:

<a href=””><img src=”” alt=”” width=”100” height=”50” /></a>

 

Итого:

Познакомились с основными форматами изображений в www

Научились использовать изображения на странице

Научились использовать изображения в качестве ссылки

 

Списки

Маркированный неупорядоченный список

<ul>

<li>Текст 1</li>

<li>Текст 2</li>

<li>Текст 3</li>

<li>Текст 4</li>

</ul>

 

Упорядоченный список

<ol>

<li>Текст 1</li>

<li>Текст 2</li>

<li>Текст 3</li>

<li>Текст 4</li>

</ol>

 

Стили для списков

ul{

List-style-type: disc;

/* circle, square, none */

}

 

ol{

List-style-type: decimal;

/*

lower-alpha, upper-alpha

lower-roman, upper-roman, none

*/

}

 

Список определений:

 

<dl>

<dt>Термин</dt>

<dd>Описание</dd>

</dl>

 

Для список ul есть еще дополнительные стили:

ul{

List-style-position: inside;

/* inside, outside */

List-style-image: url(“ball.gif”);

}

 

Таблицы

<table>

<tr>

<td>Ячейка 1 в строке 1</td>

<td>Ячейка 2 в строке 1</td>

</tr>

<tr>

<td>Ячейка 3 в строке 2</td>

<td>Ячейка 4 в строке 2</td>

</tr>

</table>

 

Для наглядности при создании таблицы лучше задать ей рамки:

table{

Border: 3px solid green;

}

td{

Border: 1px solid red;

}

 

Просто для примера мы можем задать таблице ширину:

width: 50%; /* тогда таблица будет всегда иметь размер 50% от ее родителя */

 

У таблицы есть отдельный интересный элемент th, который применяется для заглавных ячеек.

 

<table>

<tr>

<th>Текст этой ячейки будет выделен полужирным и размещен по центру</th>

</tr>

</table>

 

Можем задать таблице внутренние отступы в ячейках:

td, th{

padding: 5px;

}

 

А можем задать внешние отступы свойством:

border-spacing: 5px;

 

А если мы хотим схлопнуть внешние отступы, есть отдельное свойство:

border-collapse: collapse; /* separate для обычного отображения */

 

Что-бы убрать отображение пустой ячейки используем свойство:

empty-cells: hide; /* show */

 

Однако если мы уберем отображение ячейки, сама таблица не изменит своей структуры, т.е. останется пустое место, а полные ячейки останутся на своих местах, а если мы хотим объединить какие-то ячейки?

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

 

У нас есть атрибут colspan=”” для ячейки, для объединения по горизонтали:

<td colspan=”2”></td>

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

 

Атрибут rowspan=”” для объединения по вертикали.

<td rowspan=””></td>

Для его использования также удаляется ячейка, но уже в другой строке, т.е. в другом элементе tr.

 

Заголовок в таблице задается первым элементом в таблице:

<caption>Моя таблица</caption>

 

Стили для caption:

caption{

caption-side: top; /* bottom */

}

 

На самом деле у каждой таблицы есть еще несколько блоков, которые являются необязательными, но их удобно использовать для группировки:

<table>

<thead></thead> /* шапка таблицы, только один, идем первым */

<tfoot></tfoot> /* подвал таблицы, идет либо после table, либо после caption, либо после thead */

<tbody></tbody> /* тело таблицы */

</table>

 

Именно в таком порядке они задаются. При этом блок tfoot всегда будет отображаться в конце таблицы, как и предполагается по смыслу.

 

Для браузера IE есть интересный момент, если вывести длинную таблицу на несколько страниц на печать, то в этом браузере каждая страница будет иметь вверху блок thead, а внизу tfoor, блок tbody будет соответствовать своей странице.

 

Итого:

Узнали, что таблицы используется для табличных данных

Познакомились с основными элементами для создания таблиц и их CSS свойствами.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *