Mdn руководство по css

This CSS Reference shows the basic syntax of a CSS rule; lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, units, and selectors, all together in alphabetical order, as well as just the selectors by type and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any CSS3 property and concept standardized, or already stabilized. Also included is a brief DOM-CSS / CSSOM reference.

Note that CSS rule-definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM, the rule-management system, is object-based.

See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz; and WebKit CSS Extensions for WebKit-specific properties. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

Basic rule syntax

Be warned that any syntax error in a rule definition will invalidate the entire rule.

Style rules

selectorlist { property: value; [more property:value; pairs] }
...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
See selector, pseudo-element, pseudo-class lists below.

Examples

strong { color: red;}                                
div.menu-bar li:hover > ul { display: block; }

More about examples: #1, #2

@rules

As these have so many different structure-formats, see At-rule for syntax of the specific at-rule you want.

Keyword index

A

  • :active
  • additive-symbols (@counter-style)
  • ::after (:after)
  • align-content
  • align-items
  • align-self
  • all
  • <an-plus-b>
  • <angle>
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • @annotation
  • annotation()
  • attr()

B

  • ::backdrop
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • <basic-shape>
  • ::before (:before)
  • <blend-mode>
  • block-size
  • blur()
  • border
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • 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-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-inline-end
  • border-inline-end-color
  • border-inline-end-style
  • border-inline-end-width
  • border-inline-start
  • border-inline-start-color
  • border-inline-start-style
  • border-inline-start-width
  • 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
  • @bottom-center
  • @bottom-left
  • @bottom-left-corner
  • @bottom-right
  • @bottom-right-corner
  • box-decoration-break
  • box-shadow
  • box-sizing
  • break-after
  • break-before
  • break-inside
  • brightness()

C

  • calc()
  • caption-side
  • caret-color
  • ch
  • @character-variant
  • character-variant()
  • @charset
  • :checked
  • circle()
  • clear
  • clip
  • clip-path
  • cm
  • <color>
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • contrast()
  • <counter>
  • counter-increment
  • counter-reset
  • @counter-style
  • cross-fade()
  • cubic-bezier()
  • ::cue
  • cursor
  • <custom-ident>

D

  • :default
  • deg
  • :dir
  • direction
  • :disabled
  • display
  • dpcm
  • dpi
  • dppx
  • drop-shadow()

E

  • element()
  • ellipse()
  • em
  • :empty
  • empty-cells
  • :enabled
  • ex

F

  • fallback (@counter-style)
  • filter
  • :first
  • :first-child
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
  • :first-of-type
  • fit-content()
  • <flex>
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • :focus
  • font
  • @font-face
  • font-family
  • font-family (@font-face)
  • font-feature-settings
  • font-feature-settings (@font-face)
  • @font-feature-values
  • font-kerning
  • font-language-override
  • font-size
  • font-size-adjust
  • font-stretch
  • font-stretch (@font-face)
  • font-style
  • font-style (@font-face)
  • font-synthesis
  • font-variant
  • font-variant (@font-face)
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-weight
  • font-weight (@font-face)
  • format()
  • format() (@font-face)
  • fr
  • frames()
  • <frequency>
  • :fullscreen

G

  • grad
  • <gradient>
  • grayscale()
  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-gap
  • grid-row
  • grid-row-end
  • grid-row-gap
  • grid-row-start
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

H

  • height
  • height (@viewport)
  • @historical-forms
  • :hover
  • hsl()
  • hsla()
  • hue-rotate()
  • hyphens
  • hz

I

  • <ident>
  • <image>
  • image()
  • image-orientation
  • image-rendering
  • image-resolution
  • image-set()
  • ime-mode
  • @import
  • in
  • :in-range
  • :indeterminate
  • inherit
  • initial
  • inline-size
  • inset()
  • <integer>
  • :invalid
  • invert()
  • isolation

J

  • justify-content

K

  • @keyframes
  • khz

L

  • :lang
  • :last-child
  • :last-of-type
  • leader()
  • :left
  • left
  • @left-bottom
  • @left-middle
  • @left-top
  • <length>
  • letter-spacing
  • line-break
  • line-height
  • linear-gradient()
  • :link
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • local()

M

  • margin
  • margin-block-end
  • margin-block-start
  • margin-bottom
  • margin-inline-end
  • margin-inline-start
  • margin-left
  • margin-right
  • margin-top
  • mask
  • mask-clip
  • mask-composite
  • mask-image
  • mask-mode
  • mask-origin
  • mask-position
  • mask-repeat
  • mask-size
  • mask-type
  • matrix()
  • matrix3d()
  • max-height
  • max-height (@viewport)
  • max-width
  • max-width (@viewport)
  • max-zoom (@viewport)
  • @media
  • min-block-size
  • min-height
  • min-height (@viewport)
  • min-inline-size
  • min-width
  • min-width (@viewport)
  • min-zoom (@viewport)
  • minmax()
  • mix-blend-mode
  • mm
  • ms

N

  • @namespace
  • negative (@counter-style)
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-last-of-type
  • :nth-of-type
  • <number>

O

  • object-fit
  • object-position
  • offset-block-end
  • offset-block-start
  • offset-inline-end
  • offset-inline-start
  • :only-child
  • :only-of-type
  • opacity
  • opacity()
  • :optional
  • order
  • orientation (@viewport)
  • @ornaments
  • ornaments()
  • orphans
  • :out-of-range
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-wrap
  • overflow-x
  • overflow-y

P

  • pad (@counter-style)
  • padding
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • @page
  • page-break-after
  • page-break-before
  • page-break-inside
  • pc
  • <percentage>
  • perspective
  • perspective()
  • perspective-origin
  • pointer-events
  • polygon()
  • <position>
  • position
  • prefix (@counter-style)
  • pt
  • px

Q

  • q
  • quotes

R

  • rad
  • radial-gradient()
  • range (@counter-style)
  • <ratio>
  • :read-only
  • :read-write
  • rect()
  • rem
  • repeat()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • :required
  • resize
  • <resolution>
  • revert
  • rgb()
  • rgba()
  • :right
  • right
  • @right-bottom
  • @right-middle
  • @right-top
  • :root
  • rotate()
  • rotate3d()
  • rotateX()
  • rotateY()
  • rotateZ()
  • ruby-align
  • ruby-merge
  • ruby-position

S

  • s
  • saturate()
  • scale()
  • scale3d()
  • scaleX()
  • scaleY()
  • scaleZ()
  • :scope
  • scroll-behavior
  • scroll-snap-coordinate
  • scroll-snap-destination
  • scroll-snap-type
  • ::selection
  • sepia()
  • <shape>
  • shape-image-threshold
  • shape-margin
  • shape-outside
  • skew()
  • skewX()
  • skewY()
  • speak-as (@counter-style)
  • src (@font-face)
  • steps()
  • <string>
  • @styleset
  • styleset()
  • @stylistic
  • stylistic()
  • suffix (@counter-style)
  • @supports
  • @swash
  • swash()
  • symbols (@counter-style)
  • symbols()
  • system (@counter-style)

T

  • tab-size
  • table-layout
  • :target
  • target-counter()
  • target-counters()
  • target-text()
  • text-align
  • text-align-last
  • text-combine-upright
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-indent
  • text-justify
  • text-orientation
  • text-overflow
  • text-rendering
  • text-shadow
  • text-transform
  • text-underline-position
  • <time>
  • <timing-function>
  • top
  • @top-center
  • @top-left
  • @top-left-corner
  • @top-right
  • @top-right-corner
  • touch-action
  • transform
  • transform-box
  • <transform-function>
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • translate()
  • translate3d()
  • translateX()
  • translateY()
  • translateZ()
  • turn

U

  • unicode-bidi
  • unicode-range (@font-face)
  • :unresolved
  • unset
  • <url>
  • url()
  • user-zoom (@viewport)

V

  • :valid
  • var()
  • vertical-align
  • vh
  • @viewport
  • visibility
  • :visited
  • vmax
  • vmin
  • vw

W

  • white-space
  • widows
  • width
  • width (@viewport)
  • will-change
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode

Z

  • z-index
  • zoom (@viewport)

Others

  • --*

Selectors

  • Basic Selectors
    • Type selectors elementname
    • Class selectors .classname
    • ID selectors #idname
    • Universal selectors * ns|* *|*
    • Attribute selectors [attr=value]
  • Combinators (more info)
    • Adjacent sibling selectors A + B
    • General sibling selectors A ~ B
    • Child selectors A > B
    • Descendant selectors A B
  • Pseudo-elements (more info)
    • ::after
    • ::before
    • ::first-letter
    • ::first-line
    • ::selection
    • ::backdrop
    • ::placeholder
    • ::marker
    • ::spelling-error
    • ::grammar-error
  • Standard pseudo-classes (more info)
    • :active
    • :any
    • :checked
    • :default
    • :dir()
    • :disabled
    • :empty
    • :enabled
    • :first
    • :first-child
    • :first-of-type
    • :fullscreen
    • :focus
    • :hover
    • :indeterminate
    • :in-range
    • :invalid
    • :lang()
    • :last-child
    • :last-of-type
    • :left
    • :link
    • :not()
    • :nth-child()
    • :nth-last-child()
    • :nth-last-of-type()
    • :nth-of-type()
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :right
    • :root
    • :scope
    • :target
    • :valid
    • :visited

A complete list of selectors in the Selectors Level 3 specification.

CSS3 Tutorials

These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:

  • Using CSS media queries
  • Using CSS counters
  • Using CSS gradients
  • Using CSS transforms
  • Using CSS animations
  • Using CSS transitions
  • Using CSS multiple backgrounds
  • Using CSS flexible boxes
  • Using CSS multi-column layouts

Concepts

  • CSS syntax
  • At-rule
  • Comments
  • Specificity
  • Initial value
  • Inheritance
  • Specified value
  • Computed value
  • Used value
  • Actual value
  • Resolved value
  • Box model
  • Replaced element
  • Value definition syntax
  • Shorthand properties
  • Mastering margin collapsing
  • Visual formatting model
  • Layout mode

DOM-CSS / CSSOM

Major object types:

  • document.styleSheets
  • styleSheets[i].cssRules
  • cssRules[i].cssText (selector & style)
  • cssRules[i].selectorText
  • elem.style
  • elem.style.cssText (just style)
  • elem.className
  • elem.classList

Important methods:

  • CSSStyleSheet.insertRule
  • CSSStyleSheet.deleteRule

Document Tags and Contributors

 Contributors to this page:
mfluehr,
xfq,
Tigt,
teoli,
Igornorlin,
Sebastianz,
antorajees,
athagoras,
Jeremie,
pcat,
BychekRU,
avd-apps,
xiaolong,
amitabha197,
chrisdavidmills,
ziyunfei,
Jonathan_Watt,
phil_nist,
loptop,
jswisher,
HUBOGART,
Sheppy,
elkhote,
ethertank,
hade,
FredB,
jogo.obb,
bpartridge81,
deepak7275,
lmorchard,
tregagnon,
fscholz,
takahashi_yuki,
Manuel_Strehl,
McGurk,
sjltaylor,
inma_610,
BijuGC,
Jürgen Jeka,
jwalker,
Crash,
Brettz9,
Miken32,
Moacir Bispo,
TigerSoldier,
Nathymig,
Mgjbot,
Saurabhmathur,
Waldo,
Pastelgrim,
Michael2402,
Federico,
DBaron,
George3,
Nickolay,
Ptak82,
Dria

 Last updated by:
mfluehr,
Jul 29, 2017, 3:56:08 AM

Источник

На чтение 2 мин. Просмотров 17 Опубликовано 08.12.2022

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

Содержание

  1. Совсем новичок в CSS
  2. Знакомство с основами
  3. Практика и последовательность
  4. Основная дорожная карта CSS
  5. Хорошие ссылки
  6. Хорошие каналы Youtube, за которыми стоит следить
  7. Заключение

Совсем новичок в CSS

Если вы совсем новичок в CSS, я рекомендую вам одного из лучших учителей на youtube — Net ninja, он легко и непринужденно научит вас многим концепциям CSS, таким как основы, позиционирование, отзывчивый дизайн и т.д. Проверьте его.
Если вы предпочитаете читать, поищите freecodecamp.org или mdn в Google.

Знакомство с основами

После того как вы ознакомились с основами CSS, вам нужно будет применить эти знания и создать полезные вещи. Есть замечательный сайт https://frontendmentor.io, на котором можно найти задачи по дизайну, которые вы можете попробовать решить самостоятельно и получить обратную связь от сообщества, когда вы их отправляете. Если вы застряли в создании этих задач, посмотрите эти каналы youtube.

  • Tech Upfront
  • Tsbsankara

Практика и последовательность

Даже если вы можете создать одну или две задачи, нельзя останавливаться, нужно продолжать практиковаться и практиковаться, и именно поэтому я настоятельно рекомендую заглянуть на сайт frontendmentor.io. На Frontendmentor есть задания от уровня новичка до уровня Гуру, поэтому развивайте свои навыки с помощью заданий для новичков и постепенно переходите к заданиям для юниоров, затем к заданиям среднего уровня, затем к заданиям для продвинутых и, наконец, к заданиям для Гуру.

Основная дорожная карта CSS

  1. Первые шаги CSS (что такое css, зачем его использовать и т.д.)
  2. Строительные блоки CSS
    • Селекторы CSS
    • Модель коробки
    • Фоны и границы
    • переполняющий контент
    • значения и единицы
    • изображения, медиа и формы
    • Стилизация таблиц
  3. CSS-макеты
    • Flexbox
    • CSS Grid
    • Позиционирование
    • Репонсивный дизайн и медиа-запросы
  4. Стилизация текста
    • Основы стилизации текста и шрифтов
    • стилизация списков
    • Шрифты Google
    • Отзывчивая типографика (типографика — это модное слово для шрифта).

Хорошие ссылки

  1. MDN
  2. css-tricks
  3. freecodecamp
  4. internetingishard

Хорошие каналы Youtube, за которыми стоит следить

  1. The Net Ninja
  2. tsbsankara
  3. Tech upfront
  4. Кевин Пауэлл
  5. Флорин Поп

Заключение

CSS требует практики и преданности, просто продолжайте создавать сайты, и рано или поздно вы станете профессионалом в CSS и узнаете некоторые важные концепции CSS. Не забудьте проверить список ссылок выше, спасибо за чтение, увидимся в следующий раз ✌🏽✌🏽.

Источник

Рассказываем о языке, благодаря которому интернет стал красивым. 

Основы CSS

Аббревиатура CSS расшифровывается как Cascading Style Sheets, что в переводе означает «каскадные таблицы стилей». Это язык разметки, используемый для визуального оформления веб-сайтов. 

Объекты, расположенные на странице, размещаются с помощью HTML. А вот CSS отвечает за то, как эти объекты выглядят. Их размер, цвет, фоновое изображение, степень прозрачности, расположение относительно других элементов, поведение при наведении курсора, визуальное изменение кнопок при нажатии и т.п. 

Вот сайт, сделанный с помощью одного лишь HTML:

Сайт, созданный без использования CSS

А вот как выглядит та же страница после добавления CSS-разметки и оформления блоков с помощью каскадных таблиц стилей:

Сайт, оформленный с помощью CSS

Практически любые «внешние проявления» сайта создаются с помощью CSS. Это стиль ваших страниц. 

Синтаксис разметки

Язык CSS быстро стал стандартом в веб-разработке, потому что он позволяет быстро изменить визуальное оформление сайта, не прибегая к использованию более сложных языков программирования. 

Пример CSS-кода

Достаточно ознакомиться с простейшими правилами CSS, и можно легко собрать вполне симпатичный сайт со всем необходимым контентом. «Простота» обеспечивается за счет понятного синтаксиса. 

Синтаксис CSS в отдельном файле в соответствующем формате (.css) выглядит так:

селектор {
  свойство: значение;
}

  • Селектор – это ссылка на элемент в HTML, над которым будет вестись работа (оформление).

  • Свойство – определенная характеристика элемента, которую нужно изменить. Например, размер или цвет. 

  • Значение – цифровое или текстовое обозначение для выбранного свойства. 

Попробуем поменять цвет текста в блоке section на красный:

section {
  color: red;
}

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

Медиазапросы и тег <style> 

Выше был продемонстрирован базовый синтаксис, но он может быть куда более замысловатым. Например, для создания стилей под различные разрешения экранов используются запросы @media. Они выглядят так:

@media (max-width: 768px) {
  section: {
    color: red;
  }
}

Такой код изменит цвет текста на красный в разделе section только для экранов с разрешением меньше 768 пикселей.

А еще CSS-разметку можно использовать прямо в HTML-файлах для тестирования стилей и внесения мелких изменений.

<html>
  <body>
    <section style= "color: red;"></section>
  </body>
</html

С другими примерами оформления CSS можно ознакомиться в официальном руководстве MDN.

Что еще может CSS

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

Например, с помощью CSS можно задать параметры для SVG-изображения:

svg {
  width: 120px;
  height: 68px; 
  fill: green;
}

Пример замены цвета изображения с помощью CSS

Или создать блоки div любых размеров с SVG-изображением в качестве фона:

.block {
  width: 220px;
  height: 192px;
  background-image: url("../path-to-image/image.svg");
}

Или же вовсе добавить в блок информацию, которой изначально нет в HTML-документе:

.block:after {
  content: "kakoy-to-text ";
}

Пример добавления контента с помощью CSS

Также можно добавлять контент или CSS-разметку на новые объекты, созданные вне HTML. Для этого в CSS есть псевдоселекторы :after и :before (они позволяют разместить новые элементы до или после выбранного объекта).

И даже это мелочи. С помощью CSS можно рисовать, создавать объекты любых форм, анимировать их и т.п.

Рисунок, созданный с помощью CSS

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Препроцессоры и другие варианты реализации CSS

По умолчанию стили прописываются в текстовом файле, но это не единственный вариант. Базовый CSS не обладает преимуществами сложных языков программирования, переменными или вложением свойств. 

Поэтому разработчики создали препроцессоры наподобие LESS. Это механизм на базе JavaScript, позволяющий внедрить в работу со стилями синтаксис и некоторые примитивные функции из JavaScript. Если вам кажется, что у CSS недостаточно функциональности, то следует ознакомиться с препроцессорами.

Пример использования переменных в LESS

Также CSS часто реализуется внутри фреймворков. Например, технология react-styled-components перенасыщает всю функциональность каскадных стилей напрямую в код на базе React. То есть можно в одном файле прописывать стили, структуру приложения и его логику. 

Правда, такой стиль взаимодействия со стилями противоречит первоначальной идее CSS. 

О концепции деления контента и его оформления

Сама идея разделить контент и его оформление на две части появилась в связи с необходимостью создавать сайты более сложных форматов – с уникальными стилевыми решениями, красивыми шрифтами, анимациями, произвольным порядком блоков и кучей других деталей, вынуждающих верстальщиков искать новые пути взаимодействия с HTML-документами. 

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

Правда, даже CSS может заметно увеличить размеры HTML и сделать его трудночитаемым, если применять каскадные таблицы прямо в основном документе. Поэтому за правило взято оформление CSS-разметки в отдельном файле, который затем подключается к условному index.html, а тот уже подтягивает нужные стили. 

Окна с HTML и CSS-кодом

Т.е. файлы HTML и CSS живут раздельно.

Основные принципы построения макетов с помощью CSS

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

Принципы работы flex

Для расположения элементов на «полотне» сайта используются две основные методики:

  1. Flex – позволяет автоматически распределить объекты в блоке за счет создания блоков-оберток со свойством flex. 

  2. Grid – позволяет отказаться от оберток и размещать объекты по сетке.

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

Как изучить и начать использовать CSS?

Каскадные таблицы стилей – на удивление интуитивная вещь. Даже новички успешно справляют с самостоятельным изучением разметки без обращения за помощью к профессиональным разработчикам и дизайнерам. Достаточно обращаться в Google за описанием свойств стилей и запоминать их. 

Но есть загвоздки. В частности, они касаются методик создания макетов. С ходу понять их тяжело, поэтому нужно хорошее руководство. 

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

Где и как редактировать разметку?

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

Пример работы с CSS в VS Code

Лучше использовать специализированные редакторы и IDE. Они автоматически дополнят код, подскажут свойства и их значения, сообщат об обнаруженных ошибках, упростят выбор цветов и так далее. Рекомендую использовать редактор VS Code (своего рода стандарт). Он бесплатный и функциональный. Но есть и другие варианты.

Чтобы внесенные в CSS-файл изменения возымели эффект над HTML-документом, первый нужно подключить ко второму. Для этого в head-тег HTML-файла нужно добавить ссылку в формате:

<link rel="stylesheet" href="style.css">

Вместо заключения

На этом все. Как видите, CSS – это мощный инструмент для оформления сайтов, без которого невозможно сделать красивую страницу (даже если использовать какие-либо фреймворки типа React). 

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

Источник

Use this CSS reference to browse an alphabetical index of all the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules. You can also browse a list of all the CSS selectors organized by type and a list of key CSS concepts. Also included is a brief DOM-CSS / CSSOM reference.

Basic rule syntax

Style rule syntax

style-rule ::=
    selectors-list {
      properties-list
    }

… where :

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::= 
    [property : value] [; properties-list]

See selector, pseudo-class, pseudo-element lists below. The syntax for each specified value depends on the data type defined for each specified property.

Style rule examples

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

For a beginner-level introduction to the syntax of CSS selectors, please see this tutorial. Be aware that any CSS syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

At-rule syntax

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

Keyword index

Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names.

—

  • -webkit-line-clamp

A

  • :active
  • additive-symbols (@counter-style)
  • ::after (:after)
  • align-content
  • align-items
  • align-self
  • all
  • <an-plus-b>
  • <angle>
  • <angle-percentage>
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • @annotation
  • annotation()
  • attr()

B

  • ::backdrop
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • <basic-shape>
  • ::before (:before)
  • <blend-mode>
  • block-size
  • blur()
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-inline
  • border-inline-color
  • border-inline-end
  • border-inline-end-color
  • border-inline-end-style
  • border-inline-end-width
  • border-inline-start
  • border-inline-start-color
  • border-inline-start-style
  • border-inline-start-width
  • border-inline-style
  • border-inline-width
  • 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-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • @bottom-center
  • box-decoration-break
  • box-shadow
  • box-sizing
  • break-after
  • break-before
  • break-inside
  • brightness()

C

  • calc()
  • caption-side
  • caret-color
  • ch
  • @character-variant
  • character-variant()
  • @charset
  • :checked
  • circle()
  • clamp()
  • clear
  • clip
  • clip-path
  • cm
  • <color>
  • color
  • color-adjust
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • conic-gradient()
  • content
  • contrast()
  • <counter>
  • counter-increment
  • counter-reset
  • counter-set
  • @counter-style
  • counters()
  • cross-fade()
  • cubic-bezier()
  • ::cue
  • cursor
  • <custom-ident>

D

  • :default
  • deg
  • <dimension>
  • :dir
  • direction
  • :disabled
  • display
  • <display-box>
  • <display-inside>
  • <display-internal>
  • <display-legacy>
  • <display-listitem>
  • <display-outside>
  • dpcm
  • dpi
  • dppx
  • drop-shadow()

E

  • element()
  • ellipse()
  • em
  • :empty
  • empty-cells
  • :enabled
  • env()
  • ex

F

  • fallback (@counter-style)
  • filter
  • <filter-function>
  • :first
  • :first-child
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
  • :first-of-type
  • fit-content()
  • <flex>
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • :focus
  • font
  • @font-face
  • font-family
  • font-family (@font-face)
  • font-feature-settings
  • font-feature-settings (@font-face)
  • @font-feature-values
  • font-kerning
  • font-language-override
  • font-optical-sizing
  • font-size
  • font-size-adjust
  • font-stretch
  • font-stretch (@font-face)
  • font-style
  • font-style (@font-face)
  • font-synthesis
  • font-variant
  • font-variant (@font-face)
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-variation-settings (@font-face)
  • font-weight
  • font-weight (@font-face)
  • format()
  • fr
  • <frequency>
  • <frequency-percentage>
  • :fullscreen

G

  • gap
  • grad
  • <gradient>
  • grayscale()
  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-start
  • grid-row
  • grid-row-end
  • grid-row-start
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

H

  • Hz
  • hanging-punctuation
  • height
  • height (@viewport)
  • @historical-forms
  • :hover
  • hsl()
  • hsla()
  • hue-rotate()
  • hyphens

I

  • <ident>
  • <image>
  • image()
  • image-orientation
  • image-rendering
  • image-set()
  • @import
  • in
  • :in-range
  • :indeterminate
  • inherit
  • initial
  • inline-size
  • inset
  • inset()
  • inset-block
  • inset-block-end
  • inset-block-start
  • inset-inline
  • inset-inline-end
  • inset-inline-start
  • <integer>
  • :invalid
  • invert()
  • isolation

J

  • justify-content
  • justify-items
  • justify-self

K

  • kHz
  • @keyframes

L

  • :lang
  • :last-child
  • :last-of-type
  • leader()
  • :left
  • left
  • @left-bottom
  • <length>
  • <length-percentage>
  • letter-spacing
  • line-break
  • line-height
  • linear-gradient()
  • :link
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • local()

M

  • margin
  • margin-block
  • margin-block-end
  • margin-block-start
  • margin-bottom
  • margin-inline
  • margin-inline-end
  • margin-inline-start
  • margin-left
  • margin-right
  • margin-top
  • ::marker
  • mask
  • mask-clip
  • mask-composite
  • mask-image
  • mask-mode
  • mask-origin
  • mask-position
  • mask-repeat
  • mask-size
  • mask-type
  • matrix()
  • matrix3d()
  • max()
  • max-height
  • max-height (@viewport)
  • max-width
  • max-width (@viewport)
  • max-zoom (@viewport)
  • @media
  • min()
  • min-block-size
  • min-height
  • min-height (@viewport)
  • min-inline-size
  • min-width
  • min-width (@viewport)
  • min-zoom (@viewport)
  • minmax()
  • mix-blend-mode
  • mm
  • ms

N

  • @namespace
  • negative (@counter-style)
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-last-of-type
  • :nth-of-type
  • <number>

O

  • object-fit
  • object-position
  • :only-child
  • :only-of-type
  • opacity
  • opacity()
  • :optional
  • order
  • orientation (@viewport)
  • @ornaments
  • ornaments()
  • orphans
  • :out-of-range
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-wrap
  • overflow-x
  • overflow-y

P

  • pad (@counter-style)
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • @page
  • page-break-after
  • page-break-before
  • page-break-inside
  • pc
  • <percentage>
  • perspective
  • perspective()
  • perspective-origin
  • place-content
  • place-items
  • place-self
  • ::placeholder
  • pointer-events
  • polygon()
  • <position>
  • position
  • prefix (@counter-style)
  • pt
  • px

Q

  • Q
  • quotes

R

  • rad
  • radial-gradient()
  • range (@counter-style)
  • <ratio>
  • :read-only
  • :read-write
  • rect()
  • rem
  • repeat()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • :required
  • resize
  • <resolution>
  • revert
  • rgb()
  • rgba()
  • :right
  • right
  • @right-bottom
  • :root
  • rotate
  • rotate()
  • rotate3d()
  • rotateX()
  • rotateY()
  • rotateZ()
  • row-gap

S

  • s
  • saturate()
  • scale
  • scale()
  • scale3d()
  • scaleX()
  • scaleY()
  • scaleZ()
  • :scope
  • scroll-behavior
  • scroll-margin
  • scroll-margin-block
  • scroll-margin-block-end
  • scroll-margin-block-start
  • scroll-margin-bottom
  • scroll-margin-inline
  • scroll-margin-inline-end
  • scroll-margin-inline-start
  • scroll-margin-left
  • scroll-margin-right
  • scroll-margin-top
  • scroll-padding
  • scroll-padding-block
  • scroll-padding-block-end
  • scroll-padding-block-start
  • scroll-padding-bottom
  • scroll-padding-inline
  • scroll-padding-inline-end
  • scroll-padding-inline-start
  • scroll-padding-left
  • scroll-padding-right
  • scroll-padding-top
  • scroll-snap-align
  • scroll-snap-stop
  • scroll-snap-type
  • scrollbar-color
  • scrollbar-width
  • ::selection
  • selector()
  • sepia()
  • <shape>
  • shape-image-threshold
  • shape-margin
  • shape-outside
  • skew()
  • skewX()
  • skewY()
  • ::slotted
  • speak-as (@counter-style)
  • src (@font-face)
  • steps()
  • <string>
  • @styleset
  • styleset()
  • @stylistic
  • stylistic()
  • suffix (@counter-style)
  • @supports
  • @swash
  • swash()
  • symbols (@counter-style)
  • symbols()
  • system (@counter-style)

T

  • tab-size
  • table-layout
  • :target
  • target-counter()
  • target-counters()
  • target-text()
  • text-align
  • text-align-last
  • text-combine-upright
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-indent
  • text-justify
  • text-orientation
  • text-overflow
  • text-rendering
  • text-shadow
  • text-transform
  • text-underline-position
  • <time>
  • <time-percentage>
  • <timing-function>
  • top
  • @top-center
  • touch-action
  • transform
  • transform-box
  • <transform-function>
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • translate
  • translate()
  • translate3d()
  • translateX()
  • translateY()
  • translateZ()
  • turn

U

  • unicode-bidi
  • unicode-range (@font-face)
  • unset
  • <url>
  • url()
  • user-zoom (@viewport)

V

  • :valid
  • var()
  • vertical-align
  • vh
  • @viewport
  • visibility
  • :visited
  • vmax
  • vmin
  • vw

W

  • white-space
  • widows
  • width
  • width (@viewport)
  • will-change
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode

X

  • x

Z

  • z-index
  • zoom (@viewport)

Others

  • --*

Selectors

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

Simple selectors

Simple selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

  • Type selector elementname
  • Class selector .classname
  • ID selector #idname
  • Universal selector *, ns|*, *|*, |*
  • Attribute selectors [attr=value]

Combinators

Combinators are selectors that establish a relationship between two or more simple selectors, such as «A is a child of B» or «A is adjacent to B.»

Comma combinator A, B
Specifies that both A and B elements are selected. This is a grouping method to select several matching elements.
Adjacent sibling combinator A + B
Specifies that the elements selected by both A and B have the same parent and that the element selected by B immediately follows the element selected by A horizontally.
General sibling combinator A ~ B
Specifies that the elements selected by both A and B share the same parent and that the element selected by A comes before—but not necessarily immediately before—the element selected by B.
Child combinator A > B
Specifies that the element selected by B is the direct child of the element selected by A.
Descendant combinator A B
Specifies that the element selected by B is a descendant of the element selected by A, but is not necessarily a direct child.
Column combinator A || B
Specifies that the element selected by B is located within the table column specified by A. Elements which span multiple columns are considered to be a member of all of those columns.

Pseudo-classes

  • :active
  • :any-link 
  • :blank 
  • :checked
  • :current 
  • :default
  • :defined
  • :dir() 
  • :disabled
  • :drop 
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen 
  • :future 
  • :focus
  • :focus-visible 
  • :focus-within
  • :has() 
  • :host
  • :host()
  • :host-context() 
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is() 
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link 
  • :not()
  • :nth-child()
  • :nth-col() 
  • :nth-last-child()
  • :nth-last-col() 
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past 
  • :placeholder-shown 
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within 
  • :user-invalid 
  • :valid
  • :visited
  • :where() 

Pseudo-elements

  • ::after (:after)
  • ::backdrop 
  • ::before (:before)
  • ::cue (:cue)
  • ::cue-region()
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
  • ::grammar-error 
  • ::marker 
  • ::part() 
  • ::placeholder 
  • ::selection
  • ::slotted()
  • ::spelling-error 

See also: A complete list of selectors in the Selectors Level 3 specification.

Concepts

Syntax and semantics

  • CSS syntax
  • At-rules
  • Cascade
  • Comments
  • Descriptor
  • Inheritance
  • Shorthand properties
  • Specificity
  • Value definition syntax
  • CSS unit and value types

Values

  • Actual value
  • Computed value
  • Initial value
  • Resolved value
  • Specified value
  • Used value

Layout

  • Block formatting context
  • Box model
  • Containing block
  • Layout mode
  • Margin collapsing
  • Replaced elements
  • Stacking context
  • Visual formatting model

DOM-CSS / CSSOM

Major object types

  • DocumentOrShadowRoot.styleSheets
  • styleSheets[i].cssRules
  • cssRules[i].cssText (selector & style)
  • cssRules[i].selectorText
  • HTMLElement.style
  • HTMLElement.style.cssText (just style)
  • Element.className
  • Element.classList

Important methods

  • CSSStyleSheet.insertRule()
  • CSSStyleSheet.deleteRule()

See also

  • Mozilla CSS extensions (prefixed with -moz-)
  • WebKit CSS extensions (mostly prefixed with -webkit-)
  • Microsoft CSS extensions (prefixed with -ms-)

Document Tags and Contributors

Contributors to this page:

ramiy,

JonathanPool,

verdy_p,

Sheppy,

estelle,

SphinxKnight,

mdnwebdocs-bot,

Sebastianz,

Amarildo,

alattalatta,

JonHypersomniac,

ExE-Boss,

TrisTOON,

chrisdavidmills,

Malvoz,

yutzuch,

mfluehr,

jswisher,

Flinstone87,

Zectbumo,

leoo,

dublebuble,

xfq,

Tigt,

teoli,

Igornorlin,

antorajees,

athagoras,

Jeremie,

pcat,

BychekRU,

avd-apps,

xiaolong,

amitabha197,

ziyunfei,

Jonathan_Watt,

phil_nist,

loptop,

HUBOGART,

elkhote,

ethertank,

hade,

FredB,

jogo.obb,

bpartridge81,

deepak7275,

lmorchard,

tregagnon,

fscholz,

takahashi_yuki,

Manuel_Strehl,

McGurk,

sjltaylor,

inma_610,

BijuGC,

Jürgen Jeka,

jwalker,

Crash,

Brettz9,

miken32,

Moacir Bispo,

TigerSoldier,

Nathymig,

Mgjbot,

Saurabhmathur,

Waldo,

Pastelgrim,

Michael2402,

Federico,

DBaron,

George3,

Nickolay,

Ptak82,

Dria

Last updated by:
ramiy,
Sep 28, 2019, 6:32:00 AM

Источник

Понравилась статья? Поделить с друзьями:
  • Бетагистин 8мг инструкция по применению цена отзывы
  • Орнидазол 250 мг инструкция по применению цена
  • Ответственность за фиктивное руководство
  • Бисептол жидкий инструкция по применению взрослым
  • Мед препарат карсил инструкция по применению взрослым