Başlangıç Seviyesi

CSS KILAVUZU

Bir web sitesini benzersiz kılan, stilidir. Her web geliştiricisinin

sahip olması gereken bir beceri.
İçindekiler

Backgrounds 3

Border 4

Box Model 7

Font 9

Text 10

Column 12

Colors 13

Table 13

Speech 14

List & Markers 16

Animations 17

Transitions 18

UI 18

Pseudo-Class 20

Pseudo-Element 21

Absolute Measurement 21

Relative Measurement 21

Angles 22

Time 22

Frequency 22

Colors 23

Selector Types 23

Outline 25

1
3D / 2D Transform 25

Generated Content 26

Line Box 28

Hyperlink 31

Positioning 31

Ruby 32

Paged Media 32

2
Backgrounds
background
background-image

background-position

background-size

background-repeat

background-attachment

background-origin

background-clip

background-color

background-image
url

gradients

none

background-position
top left | top center | top right | center left | center center |
center right | bottom left | bottom center | bottom right

x-% y-%

x-pos y-pos

background-size
length

auto | cover | contain

background-repeat
repeat | repeat-x | repeat-y |

no-repeat

3
background-attachment
scroll | fixed | local

background-origin
border-box | padding-box | content-box

background-clip
border-box | padding-box | content-box

background-color
color

transparent

Border
border
border-width

border-style

border-color

border-width
thin | medium | thick | length

border-style
none | hidden | dotted |

dashed | solid | double |

groove | ridge | inset | outset

border-color
color

border-bottom
border-bottom-width

border-style

border-color

border-left
border-left-width

4
border-style

border-color

border-left-style
border-style

border-right-color
border-color

border-right-width
thin | medium | thick | length

border-top-width
thin | medium | thick | length

border-break
border-width

border-style

color

close

border-bottom-color
border-color

border-bottom-style
border-style

border-left-color
border-color

border-left-width
thin | medium | thick length

border-right-style
border-style

border-top
border-top-width

border-style

border-color

5
border-top-color
border-color

border-top-style
border-style

box-shadow
inset || [ length, length, length, length || <color> ]

none

border-collapse
collapse | separate

border-image
image

[ number / % border-width stretch | repeat | round ]

none

border-right
border-right-width

border-style

border-color

border-radius
border-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

border-top-left-radius

border-top-right-radius
length

border-bottom-right-radius
length

border-bottom-left-radius
length

6
Box Model
float
left | right | none

height
auto

length

max-height
none

length

max-width
none

length%

min-height
none

length

width
auto

length

margin
margin-top

margin-right

margin-bottom

margin-left

margin-bottom

7
auto

length

margin-left
auto

height

margin-right
auto

height

margin-top
auto

length

padding
padding-top

padding-right

padding-bottom

padding-left

padding-bottom
length

padding-left
length

padding-right
length

8
padding-top
length

display
none | inline | block | inline-block | flex | inline-flex | grid |
inline-grid | contents | list-item |run-in | compact | table |
inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | ruby | ruby-base | ruby-text |
ruby-base-group | ruby-text-group

overflow
visible | hidden | scroll |

auto | no-display | no-content

overflow-x

overflow-y

overflow-style
auto | marquee-line | marqueeblock

overflow-x
visible | hidden | scroll |

auto | no-display | no-content

visibility
visible | hidden | collapse

clear
left | right | both | none

Font
font
font-style

font-variant

font-weight

font-size/line-height

9
font-family

caption | icon | menu | messagebox | small-caption | status-bar

font-size-adjust
none | inherit

number

font-family
serif | sans-serif | Font Name

font-style
normal | italic | oblique | inherit

font-variant
normal | small-caps | inherit

font-size
xx-small | x-small | small | medium | large | x-large | xxlarge |
smaller | larger |

inherit

length

font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900 | inherit

Text
direction
ltr | rtl | inherit

hanging-punctuation
none | [ start | end | endedge ]

letter-spacing
normal

length

10
text-outline
none

color

length

unicode-bidi
normal | embed | bidi-override

white-space
normal | pre | nowrap | pre-wrap | pre-line

white-space-collapse
perserve | collapse | pre-servebreaks | discard

punctuation-trim
none | [ start | end | adjacent ]

text-align
start | end | left | right | center | justify

text-align-last
start | end | left | right | center | justify

text-decoration
none | underline | overline | line-thorugh | blink

text-shadow
none

color

length

word-break
normal | keep-all | loose | break-strict | break-all

word-wrap
normal

nowrap

text-emphasis
none | [ [ accent | dot | circle | disc | [ before | after ]?]

11
text-indent
length

text-justify
auto | inter-word | interideograph | inter-cluster | distribute |
kashida | tibetan

text-transform
none | capitalize | uppercase | lowercase

text-wrap
normal | unresrricted | none | suppress

word-spacing
normal

length

Column
column-count
auto

number

column-fill
auto | balance

column-gap
normal

length

column-rule
column-rule-width

column-rule-style

column-rule-color

column-rule-style

12
border-style

columns
column-width

column-count

column-rule-width
thin | medium | thick

length

column-span
1 | all

column-width
auto

length

Colors
color
inherit

color

opacity
inherit

number

Table
border-collapse
collapse | separate

empty-cells
show | hide

border-spacing
length length

table-layout

13
auto | fixed

caption-side
top | bottom | left | right

Speech
cue
cue-before

cue-after

cue-before
url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit
]

number

mark
mark-before

mark-after

mark-before
string

mark-after
string

voice-pitch-range
x-low | low | medium | high | xhigh | inherit

number

voice-stress
strong | moderate | none | reduced | inherit

voice-volume
silent | x-soft | soft | medium | loud | x-loud | inherit

number

14
cue-after
url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit
]

number

pause
pause-before

pause-after

pause-before
none | x-weak | weak | medium | strong | x-strong | inherit

time

phonemes
string

voice-duration
time

voice-family
inherit | [ <specific-voice, age, generic-voice, number> ]

voice-rate
x-slow | slow | medium | fast | x-fast | inherit

voice-pitch
x-low | low | medium | high | xhigh | inherit

number

caption-side
top | bottom | left | right

rest
rest-before

rest-after

rest-before

15
none | x-weak | weak | medium | strong | x-strong | inherit

time

rest-after
none | x-weak | weak | medium | strong | x-strong | inherit

time

speak
none | normal | spell-out | digits | literal-punctuation |
no-punctuation | inherit-number

List & Markers

list-style
list-style-type

list-style-position

list-style-image

list-style-image
none

url

list-style-type
none | asterisks | box | check | circle | diamond | disc | hyphen |
square | decimal | decimalleading-zero | lower-roman | upper-roman |
lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin |
hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana |
hiragana-iroha | katakana-iroha | footnotes

marker-offset
auto

length

16
Animations
animations
animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-name
none | IDENT

animation-duration
time

animation-timing-function
ease | linear | ease-in | easeout | ease-in-out | cubic-Bezier
(number, number, number, number)

animation-delay
time

animation-iteration-count
inherit

number

animation-direction
normal | alternate

animation-play-state
running | paused

rotation
angle

rotation-point

position (paired value off-set)

17
Transitions
transitions
transitions-property

transitions-duration

transitions-timing-function

transitions-delay

transitions-delay
time

transitions-duration
time

transitions-property
none | all

transition-timing-function
ease | linear | ease-in | ease-out | ease-in-out | cubicBezier(
number, number, number, number)

UI
appearance
normal | inherit | [icon | window | desktop | work-space | document |
tooltip | dialog | button | push-button | hyperlink | radio-button |
checkbox | menu-item | tab | menu | menubar | pull-down-menu |
pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree
| range | field | combo-box | signature | password]

cursor
auto | crosshair | default | pointer | move | e-resize | neresize |
nw-resize | n-resize | se-resize | sw-resize | swresize | s-resize |
w-resize | text | wait | help

url

icon
auto | inherit

url

18
nav-index
auto | inherit

number

nav-up
auto | inherit <id> [current | root | <target-name>

nav-right
auto | inherit <id> [current | root | <target-name>

nav-down
auto | inherit <id> [current | root | <target-name>

nav-left
auto | inherit <id> [current |

root | <target-name>

resize
none | both | horizontal |

vertical | inherit

19
Sözde Sınıf

:active aktif bir eleman

:focus öğenin odağı varken bir öğe

:hover fareyle üzerine geldiğinizde bir öğe

:link ziyaret edilmemiş bir bağlantı

:disabled eleman devre dışıyken bir eleman

:enabled öğe etkinken bir öğe

:checked kontrol edilen bir eleman

:selection şu anda kullanıcı tarafından seçilen veya vurgulanan bir öğe

:lang yazarın belirtilen bir öğede kullanmak için bir dil belirlemesine izin verir

:nth-child(n) n'inci kardeş olan bir element

:nth-last-child(n) son kardeşten sayılan n'inci kardeş olan bir öğe

:first-child ilk kardeş olan bir element

:last-child son kardeş olan bir element

:only-child tek çocuk olan bir element

:nth-of-type(n) türünün n'inci kardeşi olan bir öğe

:nth-last-of-type(n) son kardeşten itibaren türünün n'inci kardeşi olan bir öğe

:last-of-type türünün son kardeşi olan bir öğe

:first-of-type türünün ilk kardeşi olan bir öğe

:only-of-type türünün tek çocuğu olan bir öğe

:empty çocuğu olmayan bir element

:root belge içindeki kök öğe

:not(x) 'x' argümanıyla temsil edilmeyen bir öğe

:target bir UR'deki bir hedef tarafından belirtilen bir hedef öğe

20
Sözde Öğe

::first-letter Metnin ilk harfine özel stil ekler

::first-line Metnin ilk satırına özel stil ekler

::before Bir öğenin içeriğinden önce bir miktar içerik ekler

::after Inserts some content after the content of an element

Mutlak Ölçüm

% yüzde

cm santimetre

in inç

mm milimetre

pc pika (1p = 12 puan)

pt nokta (1pt = 1/72 inç)

px piksel (1 piksel = 1/96 inç)

Bağıl Ölçüm

ch oluşturmak için kullanılan yazı tipi boyutu için yazı tipinde bulunan "0" glifinin genişliği

em 1em = geçerli öğenin geçerli yazı tipi boyutu

ex elemanın yazı tipinin x yüksekliği

gd "layout-grid" tarafından tanımlanan ızgara

rem kök elemanın yazı tipi boyutu

21
vh görüş alanının yüksekliği

vw görünüm alanının genişliği

vm görünüm alanının yüksekliği veya genişliği, hangisi daha küçükse

Açılar

deg derece

grad grads

rad radians

turn turns

Zaman

ms milisaniye

s saniye

Sıklık

Hz hertz

kHz kilo-hertz

22
Renkler

color name red, blue, green, dark green

rgb(x,y,z) red = rgb(255,0,0)

rgb(x%,y%,z%) red = rgb(100%,0,0)

rgba(x,y,z,alpha) red = rgba(255,0,0,0)

#rrggbb red = #ff0000 (or shorthand - #f00)

hsl(hue, saturation, red = hsl (0, 100%, 50%)

lightness)

flavor Kullanıcı aracısının kullanıcı arabirimini özelleştirmek için bir

vurgu rengi (genellikle kullanıcı tarafından seçilir).

currentColor "currentColor" anahtar kelimesinin bilgisayar değeri, "color"

özelliğinin hesaplanan değeridir.

Seçici Tipleri

İsim Bilgi Misal

Universal herhangi bir eleman * { font: 10px Arial; }

Type Bu türden herhangi bir öğe h1 { text-decoration:

underline; }

Grouping Farklı türlerde birden çok h1, h2, h3 { font-family:

öğe Verdana; }

Class Bu türün tüm örneklerini .sampleClass {

etkilemek istemediğinizde farklı text-decoration:
türlerde birden çok öğe underline; }

Id Bu türün tüm örneklerini #sampleID {

etkilemek istemediğinizde tek text-decoration:
bir öğe türü underline; }

Descendant (Belge ağacında) başka bir #gallery h1 {

öğenin altında olan bir öğe - text-decoration:
kaç seviye olursa olsun underline; }

23
 aşağıda

Child Doğrudan başka bir öğenin #title > p { font-weight:

altında (belge ağacında) bold; }
bulunan bir öğe

Adjacent Sibling Aynı üst öğeyi ve öğeleri h1 + p { font-style:

paylaşan tüm öğeler aynı sıralı italic; }
sıradadır.

General Sibling Aynı ana öğeyi ve öğeleri h1 ~ p { font-style:

paylaşan tüm öğeler aynı italic; }
sıradadır (mutlaka acil olması
gerekmez)

Attribute Listelenen öznitelikle eşleşen bir E[selected] - att whatever

öğe the value E[att="val"] -
att with a specific value
E[rel~="next"] - att with
a value is a whitespace
separated list
*[lang|="en"] - att value
either being exactly "val"
or beginning with "val"
immediately followed by
"-" E[att^="val"] - att
value that begins with the
prefix "val"

24
Anahat
outline
outline-color

outline-style

outline-width
outline-offset
inherit

length

outline-style
none | dotted | dashed | solid | double | groove | ridge | inset |
outset

outline-width
thin | medium | thick

length

3D / 2D Dönüşüm
backface-visibility
visible | hidden

perspective
none

number

perspective-origin
[ [ percentage> | <length> | left | center | right ] [ <percentage> |
<length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center
| right ] || [ top | center | bottom ] ] <length> ]

transform
none | matrix | matrix3d | translate3d | tranlateX | translateY |
translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate |
rotate3d | rotateX | rotateY | rotateZ | skewX | skewY | skew |
perspective

25
transform-origin
[ [ [ <percentage> | <length> | left | center | right ] [ <percentage>
| <length> | top | center | bottom ]? ] <length> ] | [ [ [ left |
center | right ] || [ top | center | bottom ] ] <length> ]

transform-style
flat | preserve-3d

Oluşturulan İçerik
bookmark-label
content
attr

string

bookmark-level
none

integer

bookmark-target
self
url

attr

border-length
self
url

attr

content
normal | none | inhibit

url

counter-reset
none

identifier number

crop

26
auto

shape

display
normal | none | list-item

float-offset
length length

hyphenate-after
auto

integer

counter-increment
none

identifier number

hyphenate-lines
no-limit

integer

hyphenate-resource
none

url

hyphens
none | manual | auto

image-resolution
normal | auto

dpi

hyphenate-before
auto

integer

hyphenate-character
auto

string

27
marks
[crop || cross ] | none

move-to
normal | here

identifier

page-policy
start | first | last

quotes
none

string string string string

string-set
identifier

content-list

text-replace
none

[<string> <string>]+

Line Box
alignment-adjust
auto | baseline | before-edge | text-before-edge | middle | central |
after-edge | textafter-edge | ideographic | alphabetic | hanging |
mathematical

length

alignment-baseline
baseline | ise-script | beforeedge | text-before-edge | afteredge |
text-after-edge | central | middle | ideographic | alphabetic |
hanging | mathematical

baseline-shift
baseline | sub | super

28
length

dominant-baseline
auto | use-script | no-change | reset-size | alphabetic | hanging |
ideographic | mathematical | central | middle | text-after-edge |
text-beforeedge

drop-initial-after-align
alignment-baseline

drop-initial-after-align
central | middle | after-edge | text-after-edge | ideographic |
alphabetic | mathematical

drop-initial-before-align
caps-height

alignment-baseline

drop-initial-before-adjust
before-edge | text-before-edge | central | middle | hanging |
mathematical

length

drop-initial-value
initial

integer

drop-initial-size
auto

integer

line

inline-box-align
initial | last

29
integer

line-height
normal

number

length

line-stacking
line-stacking-strategy

line-stacking-ruby

line-stacking-shift

line-stacking-strategy
inline-line-height | block-lineheight | max-height | gridheight

line-stacking-ruby
exclude-ruby | include-ruby

line-stacking-shift
consider-shifts | disregardshifts

line-stacking
line-stacking-strategy

line-stacking-ruby

line-stacking-shift

text-height
auto | font-size | text-size |

max-size

vertical-align
Baseline | sub | super | top | text-top | middle | bottom |
text-bottom

length

30
Köprü
target
target-name

target-new

target-position

target-name
current | root | parent | new |

modal

string

target-new
window | tab | none

target-position
above | behind | front | back

Konumlandırma
bottom
auto
%

length

right
auto
%

length

clip
shape

auto

top
auto

31
%

length

left
auto

length

z-index
auto

Number

position
static | relative | absolute | fixed

Ruby
ruby-align
auto | start | left | center | end | right | distribute-letter |
distribute-space | line-edge

ruby-overhang
auto | start | end | none

ruby-position
before | after | right | inline

ruby-span
attr(x) | none

Sayfalı Medya
fit
fill | hidden | meet | slice

fit-position
[top | center | bottom] || [left | center | right]

length

32
%

orphans
integer

image-orientation
auto

angle

page
auto

identifier

page-break-after
auto | always | avoid | left | right

page-break-before
auto | always | avoid | left | right

page-break-inside
auto | avoid

size
auto | landscape | portrait

length

windows
integer

33