Меню
Наши новости
Учебник 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 (401)
Март 2018 (701)
Февраль 2018 (639)
Январь 2018 (666)
Декабрь 2017 (745)
Ноябрь 2017 (725)
Наш опрос



16-03-2016, 18:55
Классы - «CSS»
Рейтинг:
Категория: Учебник CSS

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

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class="Имя класса" (пример 8.1).

Пример 8.1. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   P { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   P.cite { /* Абзац с классом cite */
    color: navy; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
     Они отличаются высокой световой отдачей, продолжительным сроком службы, 
     малой яркостью светящейся поверхности, близким к естественному спектральным 
     составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p class="cite">Для исключения засветки экрана дисплея световыми потоками 
     оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

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

 


Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.

Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.

.Имя класса { свойство1: значение; свойство2: значение; ... }

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8.2. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   .gost {
    color: green; /* Цвет текста */
    font-weight: bold; /* Жирное начертание */
   }
   .term {
    border-bottom: 1px dashed red; /* Подчеркивание под текстом */
   }
  </style>
 </head> 
 <body>
   <p>Согласно <span class="gost">ГОСТ 12.1.003-83 ССБТ &quot;Шум. Общие 
      требования безопасности&quot;</span>, шумовой характеристикой рабочих 
      мест при постоянном шуме являются уровни звуковых давлений в децибелах 
      в октавных полосах. Совокупность таких уровней называется 
      <b class="term">предельным спектром</b>, номер которого численно равен 
      уровню звукового давления в октавной полосе со среднегеометрической 
      частотой 1000&nbsp;Гц.
   </p>
 </body>
</html>

Результат применения классов к тегам <span> и <b> показан на рис. 8.2.

 


Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Камни</title>
  <style>
   table.jewel {
    width: 100%; /* Ширина таблицы */
    border: 1px solid #666; /* Рамка вокруг таблицы */
   }
   th {
    background: #009383; /* Цвет фона */
    color: #fff; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   tr.odd {
    background: #ebd3d7; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table class="jewel">
   <tr>
    <th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
   </tr>
   <tr class="odd">
    <td>Алмаз</td><td>Белый</td><td>10</td>
   </tr>
   <tr>
    <td>Рубин</td><td>Красный</td><td>9</td>
   </tr>
   <tr class="odd">
    <td>Аметист</td><td>Голубой</td><td>7</td>
   </tr>
   <tr>
    <td>Изумруд</td><td>Зеленый</td><td>8</td>
   </tr>
   <tr class="odd">
    <td>Сапфир</td><td>Голубой</td><td>9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

 


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

Одновременное использование разных классов

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

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Облако тегов</title>
  <style type="text/css">
   .level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   A.tag { 
    color: #468be1; /* Цвет ссылок */ 
   }
  </style>
 </head> 
 <body>
  <div> 
   <a href="/term/2" class="tag level6">Paint.NET</a> 
   <a href="/term/69" class="tag level6">Photoshop</a> 
   <a href="/term/3" class="tag level5">цвет</a> 
   <a href="/term/95" class="tag level5">фон</a> 
   <a href="/term/11" class="tag level4">палитра</a> 
   <a href="/term/43" class="tag level3">слои</a> 
   <a href="/term/97" class="tag level2">свет</a> 
   <a href="/term/44" class="tag level2">панели</a> 
   <a href="/term/16" class="tag level1">линия</a> 
   <a href="/term/33" class="tag level1">прямоугольник</a> 
   <a href="/term/14" class="tag level1">пиксел</a> 
   <a href="/term/27" class="tag level1">градиент</a> 
  </div>
 </body>
</html>

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

 


Рис. 8.4. Облако тегов

В стилях также допускается использовать запись вида .layer1.layer2, где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2.

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

1. Какое имя класса написано правильно?

  1. 2layer1
  2. 1layer
  3. Яndex
  4. pink-floyd
  5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

<p class="c1">Коэффициент использования излучаемого светильниками <span class="c2 c3">потока</span>, на расчетной плоскости.</p>

При использовании следующего стиля?

BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }

  1. Зелёный.
  2. Синий.
  3. Жёлтый.
  4. Оранжевый.
  5. Чёрный.

3. Как задать стиль у тега <div class="iddqd">DOOM</div>?

  1. div[iddqd] { color: red; }
  2. div.iddqd { color: red; }
  3. iddqd.div { color: red; }
  4. div#iddqd { color: red; }
  5. div=iddqd { color: red; }

4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

 s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }

  1. s1
  2. s2
  3. s3
  4. s2 s4
  5. s5

Ответы

1. pink-floyd

2. Чёрный.

3. div.iddqd { color: red; }

4. s2 s4


Теги: CSS Классы

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

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




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

Ракета «Союз-5» может получить новый метановый двигатель - «Новости сети»

Вице-премьер РФ Дмитрий Рогозин в рамках посещения производственной площадки Конструкторского бюро химавтоматики (КБХА) в Воронеже рассказал о планах в отношении ракеты-носителя «Союз-5».
Сегодня, 12:00

Осуществлён запуск ракеты «Протон-М» со спутником в интересах Минобороны РФ - «Новости сети»

В четверг, 19 апреля 2018 года, с космодрома Байконур в Казахстане стартовала ракета-носитель «Протон-М» со спутником в интересах Министерства обороны Российской Федерации (Минобороны России).
Сегодня, 12:00

Новому смартфону iPhone с 6,1" экраном приписывают поддержку двух SIM-карт - «Новости сети»

Аналитик KGI Securities Мин-Чи Куо (Ming-Chi Kuo), известный довольно точными прогнозами касательно устройств Apple, распространил информацию о том, что в текущем году свет могут увидеть сразу два
Сегодня, 12:00

Facebook займётся разработкой собственных процессоров - «Новости сети»

Социальная сеть Facebook набирает команду специалистов для разработки собственных микрочипов. Об этом сообщает Bloomberg, ссылаясь на информацию, полученную от осведомлённых лиц, а также на перечень
Сегодня, 12:00

Первый видеообзор смартфона Bluboo S3 с батареей на 8500 мА·ч - «Новости сети»

Вместе со стартом 18 апреля глобальных продаж смартфона Bluboo S3 с батареей на 8500 мА·ч компания опубликовала на своём официальном канале в YouTube его первый обзор, в котором представлены более
Сегодня, 12:00

Встроенный криптопроцессор Rambus защитит от уязвимостей типа Meltdown и Spectre - «Новости сети»

Компания Rambus отреагировала на злобу дня и представила универсальное встраиваемое решение для защиты процессоров от уязвимостей типа Meltdown и Spectre. Решение Rambus CryptoManager Root of Trust —
Сегодня, 12:00

Путь от смартфона до стакана: компания Pentatonic наладила производство посуды из дисплеев - «Новости сети»

Проблема утилизации отработавших свой срок электронных комплектующих, в том числе и переработка компонентов устаревших смартфонов, движется к своему апогею — экологической катастрофе глобального
Сегодня, 12:00

Память Ballistix Tactical Tracer RGB DDR4 для игровых ПК поступила в продажу - «Новости сети»

Бренд Ballistix, принадлежащий Micron, объявил о доступности модулей и комплектов оперативной памяти Tactical Tracer RGB DDR4, рассчитанных на использование в составе игровых настольных компьютеров.
Сегодня, 12:00

BenQ EX3203R: изогнутый монитор с поддержкой FreeSync 2 - «Новости сети»

Компания BenQ анонсировала изогнутый монитор EX3203R, выполненный на основе матрицы VA размером 31,5 дюйма по диагонали. Панель обладает разрешением 2560 ? 1440 пикселей (QHD). Яркость составляет
Вчера, 20:01

Автомобили Toyota начнут общаться с объектами дорожной инфраструктуры - «Новости сети»

Компания Toyota рассказала о планах по внедрению передовых технологий связи для подключённых автомобилей (Connected Car), в том числе марки Lexus. Речь идёт о платформе V2X. Она обеспечит обмен
Вчера, 20:01

Компактная система MSI Vortex W25 оснащена ускорителем NVIDIA Quadro - «Новости сети»

Компания MSI анонсировала компактную рабочую станцию Vortex W25, о подготовке которой сообщалось в январе нынешнего года. Устройство оснащено процессором Intel Core i7 восьмого поколения,
Вчера, 20:01

Schneider Electric анонсировала новые универсальные ИБП Easy Smart-UPS On-Line серии SRV - «Новости сети»

Компания Schneider Electric расширила ассортимент выпускаемых продуктов благодаря новым универсальным ИБП Easy Smart-UPS On-Line серии SRV, в которую входит пять устройств средней ценовой категории:
Блокировка Telegram — Суровый веб #162  - «Видео уроки - CSS»
Сегодня, 15:00

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

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

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

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

HTML Сниппеты #4. Адаптивная верстка вертикального таймлайна - «Видео уроки - CSS»

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

Что такое Taxonomy. Функция register_taxonomy() - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Что такое Custom Post Type. Функция register_post_type()  - «Видео уроки - CSS»
17-04-2018, 04:00

Что такое Custom Post Type. Функция register_post_type() - «Видео уроки - CSS»

Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не
Складной iPhone, Playstation 5, Mozilla, Visual Studio Code, DotNext 2018  - «Видео уроки - CSS»
14-04-2018, 12:00

Складной iPhone, Playstation 5, Mozilla, Visual Studio Code, DotNext 2018 - «Видео уроки - CSS»

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

Хитрости ECMAScript 6 для настоящих самцов — Суровый веб #161 - «Видео уроки - CSS»

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

Установка WP на localhost. Стартовая тема. Иерархия файлов. - «Видео уроки - CSS»

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

Начать делать то, что раньше не делал - «Видео уроки - CSS»

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

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

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

20 коммерческих факторов ранжирования, которые выведут ваш сайт в топ - «Видео уроки - CSS»

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

Динамический веб-сайт. Создание мини-проекта. Часть 2 - «Видео уроки - 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 016
Комментариев: 1
23-03-2016, 19:23
inherit
Рейтинг:
Категория: Справочник CSS
Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено....
Просмотров: 2 022
Комментариев: 3
23-03-2016, 19:17
Медиа-запросы
Рейтинг:
Категория: Справочник CSS
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных...
Просмотров: 1 950
Комментариев: 3
23-03-2016, 19:14
Угол
Рейтинг:
Категория: Справочник CSS
Задаёт угол наклона. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки....
Просмотров: 1 785
Комментариев: 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 059
Комментариев: 2
23-03-2016, 19:07
Адрес
Рейтинг:
Категория: Справочник CSS
Адреса применяются для указания пути к файлу, например, для установки фоновой картинки на странице. Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла. При этом адрес можно задавать в необязательных одинарных или двойных кавычках....
Просмотров: 2 120
Комментариев: 2
23-03-2016, 19:06
Размер
Рейтинг:
Категория: Справочник CSS
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера....
Просмотров: 1 803
Комментариев: 3
23-03-2016, 19:05
Проценты
Рейтинг:
Категория: Справочник CSS
Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна....
Просмотров: 1 965
Комментариев: 1
23-03-2016, 19:04
Числа
Рейтинг:
Категория: Справочник CSS
Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5)....
Просмотров: 1 859
Комментариев: 3
23-03-2016, 19:03
Строки
Рейтинг:
Категория: Справочник CSS
Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой слэш....
Просмотров: 1 753
Комментариев: 3
23-03-2016, 18:51
calc()
Рейтинг:
Категория: Справочник CSS
Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно...
Просмотров: 2 055
Комментариев: 3
23-03-2016, 18:50
Функция attr()
Рейтинг:
Категория: Справочник CSS
Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета....
Просмотров: 2 759
Комментариев: 3