Интернет-программирование |
МИЭТ, 2017 |
Лекция 4.
CSS
ИП. История CSS |
МИЭТ, 2017 |
CSS (Cascading Style Sheets — каскадные таблицы стилей) Язык описания внешнего вида документа.
Концепция CSS предложена в 1994 г.
Изобретатель CSS. Хокон Виум Ли. Норвегия
ИП. История CSS |
МИЭТ, 2017 |
Начало 1990-х. Все браузеры немного (или много) по разному показывают HTML.
Идея — разработать описание внешнего вида элементов HTML, не влияющее на DOM документа т.е. не нарушающее логическую структуру документа.
Возможности привязать правило описания к HTML элементам:
По названию тега: p, h1, div
По значению определенных атрибутов: id, name, class
По порядку элемента, относительно другого по иерархии или по порядку
Версия |
Год |
CSS 1 |
1996 |
CSS 2 |
1998 |
CSS 2.1 |
Весна 2011 |
CSS 3 |
Лето 2011 |
CSS4 |
? |
Возможности
Оформление шрифтов и текста, цвета, выравнивание, свойства ширины и высоты, селекторы
Блочная верстка, типы устройств, расширенные селекторы, указатели, динамическое содержимое
Чистка ошибок и неточностей
Градиенты, тени, скругления, анимация, трансформация, переменные
Движение в сторону симбиоза языка программирования и графического редактора
ИП. Формат записи инструкций CSS. |
МИЭТ, 2017 |
Способ привязки стиля к элементу задается с помощью селектора, а собственно сами стили с помощью пар: имя свойства (ключ) — значение свойства
Примеры селекторов
* { font-size:12px; } — текст во всех (*) элементах страницы выводить размером 12px
img[title*="MIET"]:nth-of-type(3n) — выбрать каждую третью картику, тег alt которой содержит 'MIET'
ИП. Селекторы CSS. |
|
МИЭТ, 2017 |
|
Простые (однозначные) селекторы |
|
|
|
Селектор |
Действие на элементы |
Пример |
|
* |
Для всех на странице |
css |
* { font-size:12px; } |
тег |
Для указанного тега |
html <h1>МИЭТ</h1> |
|
|
|
css |
h1 { font-size:12px; } |
id |
Для указанного идентификатора |
html <h1 id='Main'>МИЭТ</h1> |
|
|
|
css |
#Main { font-size:14px; } |
class |
Для указанного класса |
html <h1 class='Main'>МИЭТ</h1> |
|
|
|
css |
.Main { font-size:14px; } |
Комбинирование селекторов
модификатор |
Действие на элементы |
Пример |
||
S1 |
S2 |
Для всех S2 |
внутри S1 |
article p { … } |
S1 |
> S2 |
Для всех S2 |
«дочерних» S1 |
article > p { … } |
S1 |
~ S2 |
Для всех S2 |
«сестринских» S1 |
article ~ p { … } |
S1 |
+ S2 |
Для «первой сестры» S1 |
article + p { … } |
|
Группировка селекторов
S1, S2, S3, … SN { … } /* Будет применяться для S1 и S2 и … */
ИП. Комбинирование селекторов |
МИЭТ, 2017 |
p { background-color: #dbdbdb; } |
/* ко всем параграфам */ |
article p { background-color:#ff0000; } |
/* ко всем параграфам внутри article */ |
article > p { background-color:#0000ff; } |
/* ко всем p дочерним относительно article */ |
article ~ p { background-color:#00ff00; } |
/* ко всем p идущим сразу за article */ |
article + p { background-color:#CC3300; } |
/* к первому p идущему сразу за article */ |
<article>
<p> Текст 1
<section> <p>Текст 1.1</p>
</section>
</p>
<p> Текст 2
<section></section> <p>Текст 2.1</p>
</p>
</article> <p>Текст 3</p> <p>Текст 4</p> <section>
<p>Текст 5</p> </section> <div></div> <p>Текст 6</p>
ИП. Селекторы c атрибутами |
МИЭТ, 2017 |
Селекторы могут расширяться атрибутами по формату [атрибут] или селектор[атрибут]
атрибут |
Действие на все элементы |
Пример значений v |
[a] |
имеющих атрибут a |
title='Test' |
[a='v'] |
с атрибутом a равным v |
title='МИЭТ' |
[a~='v'] |
с атрибутом a включающим слово v |
title='ВУЗ МИЭТ ТУ' |
[a*='v'] |
с атрибутом a включающим символы v |
title='ВУЗМИЭТТУ' |
[a^='v'] |
с атрибутом a начинающимся с v |
title='МИЭТ ВУЗ' |
[a$='v'] |
с атрибутом a оканчивающимся на v |
title='ВУЗ МИЭТ' |
[a|='v'] |
с атрибутом a включающим символы v с дефисами |
title='ВУЗ-МИЭТ-ТУ' |
Примеры применения селекторов с атрибутами |
|
|
[title~="MIET"] — для каждого параграфа документа имеющего в title слово МИЭТ
article > p[title~="MIET"] — для каждого дочернего параграфа статьи имеющего в title слово МИЭТ
ИП. Комбинирование селекторов |
МИЭТ, 2017 |
<p title="Любое">любое значение атрибута title</p> <p title="Москва МИЭТ ТУ">содержит слово МИЭТ</p> <p title="МИЭТ">точное совпадение с МИЭТ</p>
<p title="МИЭТТУ">начинается с МИЭТ</p>
<p title="МИЭТ ВУЗ">заканчивается на ВУЗ</p> <p title="ВУЗ-МИЭТ-ТУ">содержит -ВУЗ-</p>
<p title="ТУВУЗМИЭТ">содержит символы ВУЗ</p>
[title] { background: #dbdbdb; } [title~='МИЭТ'] { background:#0000ff; } [title^='МИЭТ'] { background:#CC3300; } [title='МИЭТ'] { background:#ff0000; } [title*="ВУЗ"] { background: #55eeff; } [title|='ВУЗ'] { background:#00ff00; } [title$="ВУЗ"] { background: #ffee33; }
/* любое значение атрибута title */ /* содержит слово МИЭТ */ /* начинается с МИЭТ */ /* точное совпадение */
/* содержит символы ВУЗ */ /* содержит -ВУЗ- */ /* заканчивается на ВУЗ */
ИП. Селекторы псевдоклассов |
МИЭТ, 2017 |
Псевдоклассы позволяют привязать стиль оформления к событию на элементе
Псевдокласс
a:link
a:visited
:hover
:focus
:active
:valid | :invalid
:enabled | :disabled
:in-rande | :out-of-range 
:checked
:target 
:lang(x)
:not(S)
Действие на все элементы |
Пример |
не посещенный URL в ссылке |
a:link { … } |
посещенный URL в ссылке |
a:visited { … } |
курсор над элементом |
div#Main:hover { … } |
фокус на элементе (input, select, textarea) |
input.Search:focus { … } |
пока на элементе «нажатый» курсор |
p:active { … } |
верное / не верное значение в поле |
textarea:valid { … } |
доступное / не доступное поле (элемент) |
textarea:enabled { … } |
значение в поле в диапазоне или вне его |
input:in-range { … } |
поле выбрано |
radio[name='Ok']:checked { … } |
применяется к якорю переданному в url |
h2:target { … } |
для текста на языке, указанным кодом x |
p:lang(ru) |
для эл. не содержащих селектор S |
input:not([type="submit"]) |
ИП. Примеры применения селекторов псевдоклассов |
МИЭТ, 2017 |
<style>
textarea:focus { border: #000000 4px solid; }
textarea:invalid { border: #FF6600 2px solid; } </style>
<textarea required placeholder="Введите текст ..."> </textarea>
…
<textarea></textarea>
<style>
article:target { border: #FF6600 2px solid; }
</style> |
http://bitrixtest.ru/index.php#a2 |
|
|
… |
|
<article id="a1">Первая статья</article> |
|
<article id="a2">Вторая статья</article> |
|