CSS Стили
  • !important
  • ::-ms-browse
  • ::-ms-check
  • ::-ms-clear
  • ::-ms-expand
  • ::-ms-fill
  • ::-ms-reveal
  • ::-ms-value
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::placeholder
  • ::selection
  • :active
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :root
  • :target
  • :valid
  • :visited
  • @charset
  • @font-face
  • @document
  • @import
  • @keyframes
  • @media
  • @page
  • @viewport
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • 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-width
  • border-radius
  • border-right
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • border-top-right-radius
  • box-shadow
  • box-sizing
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
    • Alpha
    • BasicImage
    • Blur
    • Chroma
    • DropShadow
    • Emboss
    • Engrave
    • Glow
    • Gradient
    • ICMFilter
    • Light
    • MaskFilter
    • Matrix
    • MotionBlur
    • Shadow
    • Wave
  • flex-basis
  • flex-direction
  • float
  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • hyphens
  • image-rendering
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-height
  • min-width
  • object-fit
  • opacity
  • orient
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index

Создание CSS стилей

Каскадные таблицы стилей (CSS) не не призваны заменить обычный HTML-код, а, напротив, являются дополнением к уже существующим элементам HTML. Ознакомившись с основами CSS, вы сразу заметите, насколько этот механизм понятен и удобен в использовании.

Свойство CSS связывается с соответствующим HTML-элементом и указывает браузеру как именно следует воспроизводить объект на экране.

CSS и браузеры

В состав оператора, или правила стиля CSS, входят следующие компоненты:

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

Пример HTML-кода, включающего несколько простых правил CSS и результат обработки этого кода показаны ниже:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Пример использования стилей CSS</title>

   <style>
      p {color: green;} 
      em {color: red;}
      body {font-size: xx-large;}
   </style>

</head>

<body>
Для данного абзаца задан размер xx-large.
<p>
   Этот текст отображается символами зеленого цвета 
   того же размера, что и в предыдущем абзаце.
</p>
<p>
   Данный абзац выглядит как и предыдущий, но текст 
   между тегом em, <em>показывается красным</em>.
</p>
</body>
</html>
Простой пример использования CSS
Простой пример использования CSS

Включение CSS-выражений в состав Web-страницы

Существует несколько способов включения стилевых свойств CSS в состав Web-документа.

  • Разместить их в заголовке страницы.
  • Добавить их в тело Web-страницы (подключить к определенному элементу).
  • Расположить в отдельном документе.

Существуют четыре HTML-тега и три HTML-атрибута, которые могут использоваться для включения CSS-данных на Web-страницу. Это теги <style>, <span>, <div> и <link> и атрибуты style, class и id. Теги используются для модификации Web-документа, его части, либо отдельного HTML-элемента. Атрибуты могут быть присоединены к любому существующему элементу и влияют на формируемое им изображение.

Для связывания CSS-выражений с HTML-элементами используется специальный тег, которому ставится в соответствие CSS-выражение (селектор). Описание помещается в фигурные скобки и отделяется от селектора одним или несколькими пробелами (см. пример выше).

Правила написания CSS стилей

Для лучшего усваивания правил написания CSS свойств проиллюстрирум их на изображении:

Правила написания CSS стилей
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru