Меню
Наши новости
Учебник CSS

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

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


  B
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
-----------------
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
---------------
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
---------------
 C
caption-side
clear
clip
color
---------------
column-count
column-gap
column-rule
column-width
---------------
columns
content
counter-increment

---------------
counter-reset
cursor

---------------
 D
direction
display
---------------
 E
empty-cells

---------------
 H
height

---------------
 Q
quotes

---------------
 F
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight

---------------
 L
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type

---------------
 M
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width

---------------
 O
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
---------------
 P
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position

---------------
 W
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode

---------------
 T
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow

---------------
text-shadow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
---------------
 R
resize
right
---------------
 U
unicode-bidi

---------------
 V
vertical-align
visibility
---------------
 Z
z-index

---------------

Interner Explorer

-ms-interpolation-mode

-ms-radial-gradient
background-position-x
background-position-y

---------------
filter

hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color

scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox

-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera

-o-linear-gradient
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome

-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила

@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации

A
#id
.class
.class1.class2
*
A   B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы

:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы

::after (:after)
::before (:before)
::first-letter
::first-line
::selection

---------------
Функции

attr()
calc()
---------------
Значения свойств

Строки
Числа
Проценты
Размер
Адрес

Цвет
Угол
Медиа-запросы
inherit
initial

Наши новости

Календарь
«    Апрель 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30 
Архив новостей
Апрель 2018 (545)
Март 2018 (701)
Февраль 2018 (639)
Январь 2018 (666)
Декабрь 2017 (745)
Ноябрь 2017 (725)
Наш опрос



Наши новости
17-03-2016, 18:05
Соседние селекторы - «CSS»
Рейтинг:

Соседними называются элементы веб-страницы, когда они следуют непосредственно
друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.


<p>Lorem ipsum <b>dolor</b> sit amet.</p>


В этом примере тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера.
Соответственно <p> выступает в качестве родителя <b>.


<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>


Здесь теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены
внутри контейнера <p>, никак не влияет на их
отношение.


<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i>
adipiscing <tt>elit</tt>.</p>


Соседними здесь являются теги <b> и <i>,
а также <i> и <tt>.
При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.


Для управления стилем соседних элементов используется символ плюса (+), который
устанавливается между двумя селекторами. Общий синтаксис следующий.


Селектор 1 + Селектор 2 { Описание правил стиля }


Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2,
но только в том случае, если он является соседним для Селектора 1 и следует
сразу после него.


В примере 11.1 показана структура взаимодействия тегов между собой.


Пример 11.1. Использование соседних селекторов


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   B + I {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
   <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
 </body>
</html>

Результат примера показан на рис. 11.1.


 



Рис. 11.1. Выделение текста цветом при помощи соседних селекторов


В данном примере происходит изменение цвета текста для содержимого контейнера <i>, когда он располагается сразу после контейнера <b>. В первом абзаце такая ситуация реализована,
поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором
абзаце, хотя и присутствует тег <i>, но по соседству
никакого тега <b> нет, так что стиль к этому
контейнеру не применяется.


Разберем более практичный пример. Часто возникает необходимость в текст статьи
включать различные сноски и примечания. Обычно для этой цели создают новый стилевой
класс и применяют его к абзацу, таким способом можно легко изменить вид текста.
Но мы пойдем другим путём и воспользуемся соседними селекторами. Для выделения
замечаний создадим новый класс, назовём его sic,
и станем применять его к тегу <h2>. Первый абзац
после такого заголовка выделяется цветом фона и отступом (пример 11.2).
Вид остальных абзацев останется неизменным.


Пример 11.2. Изменение стиля абзаца


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изменение стиля абзаца</title>
  <style>
   H2.sic {
    font-size: 140%; /* Размер шрифта */
    color: maroon; /* Цвет текста */
    font-weight: normal; /* Нормальное начертание текста */
    margin-left: 30px; /* Отступ слева */
    margin-bottom: 0px; /* Отступ снизу */
   }
   H2.sic + P {
   background: #ddd; /* Цвет фона */
   margin-left: 30px; /* Отступ слева */
   margin-top: 0.5em; /* Отступ сверху */
   padding: 7px; /* Поля вокруг текста */
  }
  </style>
 </head>
 <body>
  <h1>Методы ловли льва в пустыне</h1>
  <h2>Метод последовательного перебора</h2>
  <p>Пусть лев имеет габаритные размеры L x W x H, где L - длина льва 
  от кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. 
  После чего пустыню разбиваем на ряд элементарных прямоугольников, размер 
  которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться 
  не строго на заданном участке, а одновременно на двух из них, клетку для 
  ловли следует делать повышенной площади, а именно 2L x 2W. Благодаря 
  этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина 
  льва или, что хуже, только его хвост.</p>
  <h2 class="sic">Важное замечание</h2>
  <p>Для упрощения расчетов хвост в качестве погрешности измерения можно 
  отбросить и не принимать во внимание.</p>
  <p>Далее последовательно накрываем каждый из размеченных прямоугольников 
  пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в 
  клетке, процедура поимки считается завершенной.</p>
 </body>
</html>

Результат данного примера показан на рис. 11.2.


 



Рис. 11.2. Изменение вида абзаца за счёт использования соседних селекторов


В данном примере текст отформатирован с применением абзацев (тег <p>),
но запись H2.sic + P устанавливает стиль
только для первого абзаца идущего после тега <h2>,
у которого добавлен класс с именем sic.


Соседние селекторы удобно использовать для тех тегов, к которым автоматически
добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например,
если подряд идут теги <h1> и <h2>,
то расстояние между ними легко регулировать как раз с помощью соседних селекторов.
Аналогично дело обстоит и для идущих подряд тегов <h2> и <p>, а также в других подобных случаях. В примере 11.3 таким манером изменяется величина отступов между указанными тегами.


Пример 11.3. Отступы между заголовками и текстом


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   H1 + H2 {
    margin-top: -10px; /* Смещаем заголовок 2 вверх */
   }
   H2 + P {
    margin-top: -1em; /* Смещаем первый абзац вверх к заголовку */
   }
  </style>
 </head>
 <body>
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
  <p>Абзац!</p>
 </body>
</html>

Поскольку при использовании соседних селекторов стиль применяется только ко
второму элементу, то размер отступов уменьшается за счёт включения отрицательного
значения у свойства margin-top. При этом текст поднимается
вверх, ближе к предыдущему элементу.



Вопросы для проверки


1. Какие теги в данном коде являются соседними?


<p><b>Формула серной кислоты:</b><i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i></p>



  1. <P> и <I>

  2. <B> и <I>

  3. <I> и <SUB>

  4. <SUB> и <SMALL>

  5. <I> и <SMALL>


2. Имеется следующий код HTML:


<p><b>Великая теорема Ферма</b></p>

<p><i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup>

= Z <sup><small>n</small></sup></i></p>

<p>где n - целое число > 2</p>


Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?



  1. «X»

  2. «Y»

  3. «Z»

  4. Вторая «n»

  5. Вторая и третья «n».



Ответы


1. <B> и <I>


2. Вторая и третья «n».


Теги: CSS Соседние селекторы

Просмотров: 2 069
Комментариев: 2:   17-03-2016, 18:05
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Другие новости по теме:
Еще новости по теме:




  • Новости мира Интернет
  • Афоризмы
  • Видео уроки
  • Справочник CSS
Сегодня, 12:00

BMW iX3: электрический кроссовер с запасом хода более 400 км - «Новости сети»

Концерн BMW Group в рамках Международного автосалона в Пекине представил концептуальный кроссовер iX3 с полностью электрической силовой установкой. В новинке используется пятое поколение платформы
Сегодня, 12:00

Новый низкопрофильный ускоритель MSI GeForce GT 1030 имеет пассивное охлаждение - «Новости сети»

Компания MSI анонсировала графический ускоритель GeForce GT 1030 2GHD4 LP OC, подходящий для использования в компактных бесшумных компьютерах и домашних мультимедийных центрах. Новинка полагается
Сегодня, 12:00

Casio уйдёт с рынка компактных фотокамер - «Новости сети»

Компания Casio намерена покинуть рынок компактных цифровых фотоаппаратов, о чём сообщает японский ресурс Nikkei. Casio была основана в апреле 1946 года инженером-технологом Тадао Касио. В 2002 году
Сегодня, 12:00

Nokia X6 может стать первым смартфоном HMD Global с вырезом на дисплее - «Новости сети»

HMD Global готовится анонсировать свой первый смартфон, оснащённый вырезом на дисплее. Новинка — модель среднего уровня Nokia X6 — будет представлена уже в эту пятницу. Сам производитель не раскрывал
Сегодня, 12:00

Развитие Интернета вещей приведёт к нехватке 200-мм производственных мощностей - «Новости сети»

Значительная часть предприятий по выпуску полупроводников всё ещё использует пластины диаметром 200 мм. Компания Samsung, например, для обеспечения контрактного производства выделила подразделению
Сегодня, 12:00

Xiaomi впервые стала лидером по интернет-продажам смартфонов в России - «Новости сети»

Xiaomi впервые опередила Apple по продажам смартфонов в российских интернет-магазинах и заняла первое место. Apple опустилась на вторую позицию, следом расположилась Samsung Electronics. Как пишет
Сегодня, 12:00

Dell представила мобильные рабочие станции Precision нового поколения - «Новости сети»

Компания Dell анонсировала новые ноутбуки Precision на аппаратной платформе Intel Coffee Lake-H: устройства позиционируются в качестве мобильных рабочих станций. Открывает семейство модель
Сегодня, 12:00

Новые моноблоки Dell OptiPlex оснащены выдвигающейся веб-камерой - «Новости сети»

Компания Dell представила настольные компьютеры «всё в одном» OptiPlex нового поколения, рассчитанные прежде всего на бизнес-пользователей. Дебютировали модели OptiPlex 7460 и OptiPlex 7760,
Сегодня, 12:00

Клавиатура Xiaomi Yuemi Mechanical Keyboard Pro имеет компактное исполнение - «Новости сети»

Компания Xiaomi выпустила компьютерную клавиатуру Yuemi Mechanical Keyboard Pro, заказать которую можно уже сейчас по ориентировочной цене 90–100 долларов США. Новинка относится к механическому
Сегодня, 12:00

В сервисе Ford GoBike появились электрические велосипеды - «Новости сети»

В сервисе байк-шеринга Ford GoBike, оказывающем услуги аренды велосипедов на территории Сан-Франциско, появились электрические байки. Информация размещенная на сайте - «hs-design.ru» Начиная со
Сегодня, 12:00

Dell OptiPlex 5060 Micro: неттоп с процессором Intel Coffee Lake - «Новости сети»

В мае компания Dell начнёт продажи нового компьютера небольшого форм-фактора — модели OptiPlex 5060 Micro на аппаратной платформе Intel Coffee Lake. Устройство заключено в корпус с габаритами 182 ?
Мастерство — Обзорный ролик с Digitale-2018  - «Видео уроки - CSS»
Сегодня, 20:00

Мастерство — Обзорный ролик с Digitale-2018 - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Вебинар "Переворот экрана и сохранение состояния"  - «Видео уроки - CSS»
Сегодня, 20:00

Вебинар "Переворот экрана и сохранение состояния" - «Видео уроки - CSS»

... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Сколько на самом деле зарабатывают программисты?  - «Видео уроки - CSS»
Вчера, 15:00

Сколько на самом деле зарабатывают программисты? - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Что такое Custom Template и как создать свой персональный шаблон для страницы?  - «Видео уроки - CSS»
Вчера, 01:00

Что такое Custom Template и как создать свой персональный шаблон для страницы? - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Как создать свой Widget для WordPress?  - «Видео уроки - CSS»
24-04-2018, 00:00

Как создать свой Widget для WordPress? - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Новый Директ. Обзор новинок Яндекса на апрель 2018 г.  - «Видео уроки - CSS»
24-04-2018, 00:00

Новый Директ. Обзор новинок Яндекса на апрель 2018 г. - «Видео уроки - CSS»

... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Верстка в прямом эфире # 2 | Интернет магазин Aware #6 | 2018  - «Видео уроки - CSS»
21-04-2018, 22:00

Верстка в прямом эфире # 2 | Интернет магазин Aware #6 | 2018 - «Видео уроки - CSS»

... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
ИНДИЯ #4 Гоа/Анджуна/Бунгало/Дома на деревьях/Транс музыка/День Победы/Индуизм/Водопад/Дудхсагар  - «Видео уроки - CSS»
21-04-2018, 10:00

ИНДИЯ #4 Гоа/Анджуна/Бунгало/Дома на деревьях/Транс музыка/День Победы/Индуизм/Водопад/Дудхсагар - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Роскомнадзор vs Telegram, ИИ от Google, Новый Gmail  - «Видео уроки - CSS»
21-04-2018, 10:00

Роскомнадзор vs Telegram, ИИ от Google, Новый Gmail - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Виджеты и Сайдбары в WordPress. Создаем свой сайдбар.  - «Видео уроки - CSS»
20-04-2018, 06:00

Виджеты и Сайдбары в WordPress. Создаем свой сайдбар. - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Блокировка Telegram — Суровый веб #162  - «Видео уроки - CSS»
19-04-2018, 15:00

Блокировка Telegram — Суровый веб #162 - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Как работать программистом в Германии?  - «Видео уроки - CSS»
18-04-2018, 23:00

Как работать программистом в Германии? - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
 !      
 B


border-left-color border-top
 C column-count columns

counter-reset

 D  E

 H

 Q

 F
 

 L
 
 

 M

 O
 P
 

 W
 
 
 

 T

text-shadow
 R  U

 V  Z


Вендорные свойства
Эти свойства работают только в определённых браузерах.
Префикс -moz- для Firefox, -ms- для Internet Explorer, -webkit- для Chrome и Safari, -o- для Opera.

 Firefox    Opera  Safari и Chrome
-moz-border-bottom-colors
 
 
 

-moz-orient
 
 

-o-linear-gradient
 
 
 
 
 

-webkit-linear-gradient



 @-правила      

@font-face @media  


 Селекторы и их комбинации      
A
 
A   B
 
 
[attr]
 
[attr~='value']
 
 
 

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

:enabled

:hover :not
 

:only-child

:read-only :target

 
Если вы вдруг случайно заметили, что одна из ссылок ведет не на ту страницу будьте так любезны сообщить нам - Обратная связь ....
Спасибо огромное..

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

23-03-2016, 19:24
initial
Рейтинг:
Категория: Справочник CSS
Значение initial применяется для установки исходного значения свойства. Может пригодиться в нескольких случаях, к примеру, восстановить значения свойств, заданных браузером по умолчанию или задать начальное значение свойства, измененное в результате наследования. Ключевое...
Просмотров: 2 024
Комментариев: 1
23-03-2016, 19:23
inherit
Рейтинг:
Категория: Справочник CSS
Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено....
Просмотров: 2 025
Комментариев: 3
23-03-2016, 19:17
Медиа-запросы
Рейтинг:
Категория: Справочник CSS
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных...
Просмотров: 1 952
Комментариев: 3
23-03-2016, 19:14
Угол
Рейтинг:
Категория: Справочник CSS
Задаёт угол наклона. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки....
Просмотров: 1 788
Комментариев: 0
23-03-2016, 19:09
Цвет
Рейтинг:
Категория: Справочник CSS
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами....
Просмотров: 2 064
Комментариев: 2
23-03-2016, 19:07
Адрес
Рейтинг:
Категория: Справочник CSS
Адреса применяются для указания пути к файлу, например, для установки фоновой картинки на странице. Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла. При этом адрес можно задавать в необязательных одинарных или двойных кавычках....
Просмотров: 2 126
Комментариев: 2
23-03-2016, 19:06
Размер
Рейтинг:
Категория: Справочник CSS
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера....
Просмотров: 1 807
Комментариев: 3
23-03-2016, 19:05
Проценты
Рейтинг:
Категория: Справочник CSS
Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна....
Просмотров: 1 968
Комментариев: 1
23-03-2016, 19:04
Числа
Рейтинг:
Категория: Справочник CSS
Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5)....
Просмотров: 1 866
Комментариев: 3
23-03-2016, 19:03
Строки
Рейтинг:
Категория: Справочник CSS
Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой слэш....
Просмотров: 1 789
Комментариев: 3
23-03-2016, 18:51
calc()
Рейтинг:
Категория: Справочник CSS
Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно...
Просмотров: 2 060
Комментариев: 3
23-03-2016, 18:50
Функция attr()
Рейтинг:
Категория: Справочник CSS
Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета....
Просмотров: 2 764
Комментариев: 3