css3 — Что значит * в CSS?
Stack Overflow на русскомLoading…
- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Справка Подробные ответы на любые возможные вопросы
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
- Войти Регистрация
-
текущее сообщество
- Stack Overflow на русском справка чат
[атрибут*=»значение»] | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, когда частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать конструкцию *=. Она определяет, что значение атрибута содержит указанный текст.
Синтаксис
[атрибут*=»значение»] { Описание правил стиля }
E[атрибут*=»значение»] { Описание правил стиля }
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов</title>
<style>
[href*="htmlbook"] {
background: yellow; /* Желтый цвет фона */
}
</style>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |
<a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |
<a href="http://webimg.ru">Графика для Веб</a></p>
</body>
</html>Результат данного примера показан на рис. 1. В примере показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Рис. 1. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Что означает » $ » в CSS?
Это переменные SASS (SCSS), которые хранят свойства цвета, чтобы их можно было использовать в дальнейшем. Кроме того, чтобы дать вам базовую концепцию, SASS-это препроцессор CSS, который позволяет вам размещать селекторы, использовать микшины, хранить значения переменных и т. д.
Вы можете увидеть его (scss), на который ссылаются в разделе codepen CSS: 
Взято из SASS docs (см. переменные):
Думайте о переменных как о способе хранения нужной вам информации повторное использование во всей вашей таблице стилей. Вы можете хранить такие вещи, как цвета, стеки шрифтов или любое значение CSS, которое вы хотите использовать повторно. Sass использует символ$, чтобы сделать что-то переменной. Вот вам пример:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Если вам интересно различие между SASS и SCSS, его основной синтаксис, ниже взятый из docs :
Существует два синтаксиса, доступных для Sass. Первый, известный как SCSS (Sassy CSS) и используемый во всей этой ссылке, является продолжением синтаксис CSS. Это означает, что каждая допустимая таблица стилей CSS является допустимой SCSS файл с тем же значением. Этот синтаксис расширен с помощью Sass особенности, описанные ниже. Файлы, использующие этот синтаксис, имеют .scss расширение.
Второй и более старый синтаксис, известный как синтаксис с отступами (или иногда просто “ Sass«), обеспечивает более лаконичный способ написания CSS. Оно использует отступ, а не скобки, чтобы указать вложенность селекторы и новые строки, а не точки с запятой для разделения свойств. Файлы, использующие этот синтаксис, имеют расширение .sass.
position | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
- absolute
- Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
- fixed
- По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
- relative
- Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
- static
- Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src="images/girl.jpg" alt="Девочка" />
</div>
</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства position
Объектная модель
[window.]document.getElementById(«elementID»).style.position
Браузеры
Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.
Где посмотреть список всех свойств CSS и их значения.
Прежде чем приступать к изучению технологии CSS, желательно разобраться, а какие вообще свойства мы с вами можем применять для элементов.
Где посмотреть список всех этих свойств?
Самая главная организация, которая занимается разработкой и совершенствованием стандартов CSS является организация W3C. Эта организация все свои наработки и правила того, как должен работать CSS описывает в специальном документе.
Ссылка на этот документ:
Главный нормативный документ по CSS от W3C
В этом документе описано о том, как работает CSS. Там приведены список всех свойств и значений CSS. Как работает то или иное свойство CSS.
Но, на самом деле, разобраться в этом документе для новичка может быть довольно сложно. Дело в том, что этот документ писался в основном для профессионалов, для тех людей, которые разрабатывают браузеры. По этому документу разработчики браузеров уже будут внедрять новые технологии. Это что-то вроде стандарта для таких специалистов.
Как же быть начинающим пользователям?
В настоящее время в сети Интернет уже опубликовано довольно много справочников CSS. На начальном этапе нам этих справочников может быть вполне достаточно.
Одним из таких справочников является справочник CSS:
Справочник CSS от сайта htmlbook.ru
В принципе, информации из этого справочника будет достаточно. Там все на русском языке. Вы можете все это дело изучить и посмотреть.
Если этот справочник вам чем-то не устроит, вы можете просто набрать в Яндекс или Google «справочник css» и найти что-нибудь подходящее для вас.
Чтобы посмотреть, что значит то или иное свойство, достаточно просто кликнуть по нему и увидеть:
какие браузеры поддерживают это свойство
Характеристики этого свойства
Ну, и самое главное, синтаксис и описание
Также мы можем увидеть там пример применения свойства CSS.
Таким образом, вы можете находить нужные свойства CSS, которые вы хотели бы применять для оформления своей веб-страницы и смотреть как их использовать на практике.