Меню
Наши новости
Учебник 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

Наши новости
Календарь
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
Популярные статьи
Архив новостей
Октябрь 2017 (370)
Сентябрь 2017 (602)
Август 2017 (599)
Июль 2017 (375)
Июнь 2017 (678)
Май 2017 (512)
Наш опрос



17-03-2016, 18:13
Псевдоэлементы - «CSS»
Рейтинг:

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


Синтаксис использования псевдоэлементов следующий.


Селектор:Псевдоэлемент { Описание правил стиля }


Вначале следует имя селектора, затем пишется двоеточие, после которого идёт
имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору,
если требуется установить сразу несколько псевдоэлементов для одного селектора,
правила стиля должны добавляться к ним по отдельности, как показано ниже.


.foo:first-letter { color: red }

.foo:first-line {font-style: italic}


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


Далее перечислены все псевдоэлементы, их описание и свойства.


:after


Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент
работает совместно со стилевым свойством content,
которое определяет содержимое для вставки. В примере 16.1 показано использование
псевдоэлемента :after для добавления текста в конец
абзаца.


Пример 16.1. Применение :after


HTML5CSS 2.1IE 7IE 8+CrOpSaFx


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P.new:after {
content: " - Новьё!"; /* Добавляем после текста абзаца */
}
</style>
</head>
<body>
<p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>
</body>
</html>


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



Рис. 16.1. Добавление текста к абзацу с помощью :after


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


Псевдоэлементы :after и :before,
а также стилевое свойство content не поддерживаются
браузером Internet Explorer до седьмой версии включительно.


:before


По своему действию :before аналогичен псевдоэлементу :after, но вставляет контент до содержимого элемента. В примере 16.2
показано добавление маркеров своего типа к элементам списка посредством скрытия
стандартных маркеров и применения псевдоэлемента :before.


Пример 16.2. Использование :before


HTML5CSS 2.1IE 7IE 8+CrOpSaFx 4


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
UL {
padding-left: 0; /* Убираем отступ слева */
list-style-type: none; /* Прячем маркеры списка */
}
LI:before {
content: "20aa "; /* Добавляем перед элементом списка символ в юникоде */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>
</body>
</html>

Результат примера показан ниже (рис. 16.2).



Рис. 16.2. Изменение вида маркеров с помощью :before


В данном примере псевдоэлемент :before устанавливается
для селектора LI, определяющего элементы списка. Добавление
желаемых символов происходит путём задания значения свойства content.
Обратите внимание, что в качестве аргумента не обязательно выступает текст,
могут применяться также символы юникода.


И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору thumb или input ничего не выведет.


:first-letter


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


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

Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает
с базовой линией основного текста.


Рассмотрим пример создания выступающего инициала. Для этого требуется добавить
к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и
поменять цвет текста (пример 16.3).


Пример 16.3. Использование :first-letter


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
font-size: 90%; /* Размер шрифта */
color: black; /* Черный цвет текста */
}
P:first-letter {
font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 200%; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Луч фонарика высветил старые скрипучие ступени, по которым не далее
как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь
и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
завесу из мрака и пыли. </p>
<p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
не было, и лишь на полу валялась порванная туфля Паши.</p>
</body>
</html>

Результат примера показан ниже (рис. 16.3).



Рис. 16.3. Создание выступающего инициала


В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца
текста.


:first-line


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


К псевдоэлементу :first-line могут
применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся
к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.


В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.


Пример 16.4. Выделение первой строки текста


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P:first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<p>Интересно, а существует ли способ действительно практичного применения
свойства first-line? Нет, не такого, чтобы можно было бы показать, что это
возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от
скрытых перспектив, после чего остается только сказать себе, что вот это вот, это
самое сделать по-другому, также изящно и эффектно просто невозможно.</p>
</body>
</html>

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



Рис. 16.4. Результат применения псевдоэлемента :first-line


В данном примере первая строка выделяется красным цветом и курсивным начертанием.
Обратите внимание, что при изменении ширины окна браузера, стиль первой строки
остается постоянным, независимо от числа входящих в нее слов.



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


1. Какой псевдоэлемент позволяет добавить текст в начало предложения?



  1. :after

  2. :before

  3. :first-line

  4. :first-text

  5. :first-letter


2. Что делает следующий стиль?


OL LI:first-letter {

color: red;

}



  1. Изменяет цвет первой буквы элемента маркированного списка.

  2. Изменяет цвет первой буквы элемента нумерованного списка.

  3. Изменяет цвет первой строки в маркированном списке.

  4. Изменяет цвет первой строки в нумерованном списке.

  5. Изменяет цвет текста всего списка.


3. Какой селектор написан с ошибкой?



  1. p.new:before

  2. abbr:first-line

  3. p.new.back:after

  4. div:before:first-letter

  5. a:hover:before



Ответы


1. :before


2. Изменяет цвет первой буквы элемента нумерованного списка.


3. div:before:first-letter

Самоучитель CSSВсе для веб-дизайнера - CSS

Теги: CSS Псевдоэлементы

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

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



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

Новые функции для защиты пользователей Google - «Интернет»

Представители корпорации Google сообщили о запуске новых функций, нацеленных на обеспечение максимально возможной защиты пользователей.
Вчера, 05:02

Новый е-ридер Amazon Kindle Oasis помог E Ink поднять выручку - «Новости сети»

Сайт DigiTimes со ссылкой на местное издание Commercial Times сообщил, что тайваньская компания E Ink Holdings в сентябре значительно нарастила месячную выручку. За сентябрь E Ink выручила 1,691 млрд
Вчера, 05:02

Garmin Speak: голосовой помощник Amazon Alexa и навигация в любом автомобиле - «Новости сети»

Компания Garmin представила весьма любопытный автомобильный аксессуар под названием Speak: устройство уже доступно для предварительного заказа. Гаджет, заключённый в корпус цилиндрической формы,
Вчера, 05:02

В Москве откроется виртуальный зоопарк - «Новости сети»

На Манежной площади напротив Исторического музея откроется интерактивный павильон Московского зоопарка. Об этом сообщает Официальный портал Мэра и Правительства Москвы. Информация размещенная на
Вчера, 05:01

В «Сколково» появится опытная зона 5G - «Новости сети»

Компании «Ростелеком», Nokia и Фонд «Сколково» заключили соглашение о формировании опытной зоны мобильной связи пятого поколения (5G). Сети 5G обеспечат принципиально новые возможности. Пиковая
Вчера, 05:01

В Google Pixel 2 встроен отдельный чип для работы с фото в режиме HDR+ - «Новости сети»

Google рассказала о возможности смартфона Pixel 2, о которой не заявляла ранее: Pixel Visual Core, своей первой системе на кристалле для потребительских продуктов. Её предназначение — обработка
Вчера, 05:01

Razer повысила производительность ноутбука Blade Stealth - «Новости сети»

Компания Razer объявила о выпуске новой модификации портативного компьютера Blade Stealth, созданного специально для любителей игр. Ноутбук полагается на аппаратную платформу Intel Kaby Lake R.
Вчера, 05:01

Лидеры рынка смартфонов интересуются российскими технологиями распознавания лиц - «Новости сети»

СМИ стало известно о тестировании российских технологий распознавания лиц ведущими производителями смартфонов, в том числе Samsung. Как сообщает РБК со ссылкой на своих информаторов, ряд
Вчера, 05:01

Razer Core v2: внешний бокс с подсветкой Razer Chroma для видеокарты - «Новости сети»

Компания Razer представила внешний бокс Core v2, предназначенный для установки полноразмерного дискретного видеоадаптера. Устройство выполнено в чёрном корпусе и снабжено двухзонной подсветкой Razer
Вчера, 05:01

Gigabyte выпустит видеокарту GeForce GTX 1070 Ti Gaming - «Новости сети»

В ближайших планах компании Gigabyte значится анонс видеокарты GeForce GTX 1070 Ti Gaming на базе новой модификации графического ядра NVIDIA GP104 с 2432 потоковыми процессорами. Как следует из
Вчера, 05:01

Project Wing опробует доставку дронами в Австралии лекарств и буррито - «Новости сети»

Компания Project Wing, входящая в холдинг Alphabet, объявила о планах провести тестирование своей технологии доставки дронами в Австралии совместно с дисконтной аптечной сетью Chemist Warehouse и
Вчера, 05:01

Новые ноутбуки Toshiba Dynabook T предназначены для работы с 3D-контентом - «Новости сети»

Всё более популярным становится 3D-контент, но несколько иной, нежели в случае с 3D-телевизорами и мониторами. Это панорамные фотографии и видео, благо устройств для съёмки таких роликов и получения
Сегодня, 15:00

Советы HR - #6 - Что делать после собеседования - «Видео уроки - CSS»

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

Как попасть в большую IT компанию? Жизнь в Selectel. Советы от HR - «Видео уроки - CSS»

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

Советы HR - #5 - Смотрим страху в глаза! Или как вести себя на личной встрече с работодателем - «Видео уроки - CSS»

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

Советы HR - #4 - Предупрежден значит вооружен. Как подготовиться к интервью с работодателем - «Видео уроки - CSS»

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

Советы HR - #3 - Ад социопата, или советы по поведению на телефонном интервью! - «Видео уроки - CSS»

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

заходите на стрим! - «Видео уроки - CSS»

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

Обратная сторона uWebDesign — Беседы на диване #06 - «Видео уроки - CSS»

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

Советы HR - #2 - Где размещать резюме и искать работу мечты - «Видео уроки - CSS»

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

КАК УЧИТЬ АНГЛИЙСКИЙ #1 - «Видео уроки - CSS»

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

КАК УЧИТЬ АНГЛИЙСКИЙ #2 - «Видео уроки - CSS»

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

LOFTSTORY #2 — ОЛЬГА БОЛОТОВА - «Видео уроки - CSS»

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

Нужны ли люди, не умеющие писать JavaScript? — Суровый веб #141 - «Видео уроки - CSS»

[thumb]http://hs-design.ru/uploads/posts/2017-10/nuzhny-li-lyudi-ne-umeyuschie-pisat-javascript-surovyy-veb-141-video-uroki-css_1.jpeg[/thumb] Вся информация размещенная на сайте предназначена
 !      
 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 применяется для установки исходного значения свойства. Может пригодиться в нескольких случаях, к примеру, восстановить значения свойств, заданных браузером по умолчанию или задать начальное значение свойства, измененное в результате наследования. Ключевое...
Просмотров: 1 620
Комментариев: 1
23-03-2016, 19:23
inherit
Рейтинг:
Категория: Справочник CSS
Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено....
Просмотров: 1 620
Комментариев: 3
23-03-2016, 19:17
Медиа-запросы
Рейтинг:
Категория: Справочник CSS
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных...
Просмотров: 1 532
Комментариев: 3
23-03-2016, 19:14
Угол
Рейтинг:
Категория: Справочник CSS
Задаёт угол наклона. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки....
Просмотров: 1 409
Комментариев: 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 заменены латинскими буквами....
Просмотров: 1 586
Комментариев: 2
23-03-2016, 19:07
Адрес
Рейтинг:
Категория: Справочник CSS
Адреса применяются для указания пути к файлу, например, для установки фоновой картинки на странице. Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла. При этом адрес можно задавать в необязательных одинарных или двойных кавычках....
Просмотров: 1 759
Комментариев: 2
23-03-2016, 19:06
Размер
Рейтинг:
Категория: Справочник CSS
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера....
Просмотров: 1 406
Комментариев: 3
23-03-2016, 19:05
Проценты
Рейтинг:
Категория: Справочник CSS
Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна....
Просмотров: 1 530
Комментариев: 1
23-03-2016, 19:04
Числа
Рейтинг:
Категория: Справочник CSS
Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5)....
Просмотров: 1 438
Комментариев: 3
23-03-2016, 19:03
Строки
Рейтинг:
Категория: Справочник CSS
Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой слэш....
Просмотров: 1 425
Комментариев: 3
23-03-2016, 18:51
calc()
Рейтинг:
Категория: Справочник CSS
Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно...
Просмотров: 1 505
Комментариев: 3
23-03-2016, 18:50
Функция attr()
Рейтинг:
Категория: Справочник CSS
Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета....
Просмотров: 1 934
Комментариев: 3