Most used CSS properties

ipivanov No Comments CSS 46

В този пост ще ви запозная с основните CSS характеристики. Тъй като ще се постарая да обхвана възможно най – голям брой ще представя името на характеристиката и един пример за всяка, без подробно описание.

Text and Fonts

font

Възможни стойности: Пример:

Възможни стойности:

 

[комбинация от font-style, font-variant, font-weight, font-size, line-height и font-family]

Пример:

p {font: italic bold 1.5em/2 arial, Helvetica, sans-serif;}

font-family

Възможни стойности: Пример:
inherit,
[font name],
[няколко font names разделени със запетая]
h1{font-family: "Times New Roman", Times, serif;}

font-size

Възможни стойности: Пример:
inherit,
[percentage],
[length],
larger,
smaller,
xx-small,
x-small,
small,
medium (default),
large,
x-large,
xx-large
body {
 font-family: arial, Helvetica, sans-serif;
 font-size: 80%;
 }
 h1 { font-size: 1.5em; }

font-weight

Възможни стойности: Пример:
inherit,
normal,
bolder,
bold,
lighter,
100,
200,
300,
400,
500,
600,
700,
800,
900
h1 { font-weight: bold; }

font-style

Възможни стойности: Пример:
inherit,
normal,
italic,
oblique
.text { font-style: italic; }

font-variant

Възможни стойности: Пример:
inherit,
normal (default),
small-caps
h1 { font-variant: small-caps; }

line-height

Възможни стойности: Пример:
[число],
[проценти],
[дължина],
inherit,
normal
p { line-height: 1.5 }

letter-spacing

Възможни стойности: Пример:
[дължина],
inherit,
normal (default)
#header { letter-spacing: 1em; }

word-spacing

Възможни стойности: Пример:
[дължина],
inherit,
normal (default)
p { word-spacing: 2em; }

text-align

Възможни стойности: Пример:
inherit,
left,
right,
center,
justify
p { text-align: justify; }

text-decoration

Възможни стойности: Пример:
inherit,
none,
underline,
overline,
line-through,
blink
a:hover { text-decoration: none; }

text-indent

Възможни стойности: Пример:
[percentage],
[length],
inherit
p { text-indent: 1em; }

text-transform

Възможни стойности: Пример:
inherit,
capitalize,
uppercase,
lowercase,
none (default)
h1 { text-transform: uppercase; }

vertical-align

Възможни стойности: Пример:
[length],
[percentage],
inherit,
baseline (default),
sub,
super,
top,
text-top,
middle,
bottom,
text-bottom
h2 em {
 font-size: 0.5em;
 vertical-align: text-top;
 }

white-space

Възможни стойности: Пример:
inherit,
normal,
pre,
nowrap,
pre-wrap,
pre-line
pre { white-space: normal; }
 #pow { white-space: pre; }

Colours and Backgrounds

color

Възможни стойности: Пример:
inherit,
[color]
p { color: red; }
 #squirrel { color: #ff6600; }

background-color

Възможни стойности: Пример:
inherit,
transparent (default),
[color]
#dooberry { background-color: red; }

background

Възможни стойности: Пример:
комбинации от:
background-color,
background-image,
background-repeat,
background-attachment и background-position.
div { background: red url(images/poobah.gif) no-repeat top left;}

background-image

Възможни стойности: Пример:
inherit,
none (default),
[URI]
div#container { background-image: url(someimage.jpg); }

background-repeat

Възможни стойности: Пример:
inherit
repeat (default),
repeat-x,
repeat-y,
no-repeat
#header { background-repeat: repeat-x; }

background-position

Възможни стойности: Пример:
top,
right,
bottom,
left,
center,
[combination],
[percentage],
[length]
.main { background-position: bottom right; }

background-attachment

Възможни стойности: Пример:
inherit
scroll (default),
fixed
body { background-attachment: fixed; }

The Box Model – dimensions, padding, margin and borders

padding, padding-top, padding-right, padding-bottom, padding-left

Възможни стойности: Пример:
[percentage]
[length] – (“0” is default)
inherit
padding:
td { padding: 10em 2em; }

border, border-top, border-right, border-bottom, border-left

Възможни стойности: Пример:
[комбинация от border-width, border-style, border-color]
.some-class { border-top: 1px solid black; }
.another-class { border: 1em dotted #fc0; }

border-style, border-top-style, border-right-style, border-bottom-style, border-left-style

Възможни стойности: Пример:
none – no border.
dotted,
dashed,
solid,
double,
groove,
ridge,
inset,
outset,
hidden,
border-style
div.main { border-right-style: solid; }
div.inner { border-style: dotted dashed; }

border-color, border-top-color, border-right-color, border-bottom-color, border-left-color

Възможни стойности: Пример:
[color],
transparent,
border-color
.first-table { border-right-color: red; }
 #second-table { border-color: #cc3421; }
 table { border-color: #fc0 blue #cf0; }

border-width, border-top-width, border-right-width, border-bottom-width, border-left-width

Възможни стойности: Пример:
[length],
thin,
medium,
thick,
border-width
div { border-left-width: 2px; }
 table { border-width: 1px 4px 1px 100px; }

outline

Възможни стойности: Пример:
[комбинира outline-color, outline-style and outline-width]
.special-container { outline: 3px solid red; }

outline-style

Възможни стойности: Пример:
none,
dotted,
dashed,
solid,
double,
groove,
ridge,
inset,
outset,
hidden
.vodka { outline-style: solid; }

outline-color

Възможни стойности: Пример:
[color],
invert
.beer { outline-color: yellow; }

outline-width

Възможни стойности: Пример:
[length],
thin,
medium,
thick
header { outline-width: 0.5em; }

margin, margin-top, margin-right, margin-bottom, margin-left

Възможни стойности: Пример:
[percentage],
[length],
inherit,
auto
#first-item { margin-top: 3em; }
 #second-item { margin: 1em 100px; }
 #third-item { margin: 1em 3em 10px 0.5em; }

width

Възможни стойности: Пример:
[percentage],
[length],
inherit,
auto
header { width: 212px; }

height

Възможни стойности: Пример:
[percentage],
[length],
inherit,
auto (default)
#sun {
 padding: 1em;
 height: 3em;
 }

min-width

Възможни стойности: Пример:
[percentage],
[length],
inherit,
none
#stone { min-width: 300px; }

max-width

Възможни стойности: Пример:
[percentage],
[length],
inherit,
none
#jBeam { max-width: 780px; }

min-height

Възможни стойности: Пример:
[percentage],
[length],
inherit,
none
#beng { min-height: 5em; }

max-height

Възможни стойности: Пример:
[percentage],
[length],
inherit,
none
#google { max-height: 300px; }

Positioning and Display

position

Възможни стойности: Пример:
inherit,
static (default),
relative,
absolute,
fixed
div {
 position: relative;
 left: 1em;
 top: 1em;
 }

top

Възможни стойности: Пример:
[percentage],
[length],
inherit,
auto (default)
#forsale {
 position: absolute;
 top: 25%;
 }

right

Възможни стойности: Пример:
[percentage],
[length],
inherit,
auto (default)
#plane {
 position: relative;
 right: 2em;
 }

bottom

Възможни стойности: Пример:
[percentage],
[length],
inherit,
auto (default)
#justaveit {
 position: absolute;
 bottom: 2em;
 }

left

Възможни стойности: Пример:
[percentage],
[length],
inherit,
auto (default)
#sold {
 position: absolute;
 left: 150px;
 }

clip

Възможни стойности: Пример:
inherit,
auto (default) – no clipping.,
rect([top] [right] [bottom] [left])
#seal {
 position: absolute;
 clip: rect(10px 50px 30px 10px);
 }

overflow

Възможни стойности: Пример:
inherit,
visible (default),
hidden,
scroll,
auto
#content {
 width: 500px;
 overflow: hidden;
 }

z-index

Възможни стойности: Пример:
inherit,
auto (default),
[number]
div { position: absolute; }
 #kidkoala { z-index: 2 }
 #mrscruff { z-index: 1 }

float

Възможни стойности: Пример:
inherit
left,
right,
none (default)
#boondoggle {
 width: 20em;
 float: left;
 }

clear

Възможни стойности: Пример:
inherit,
none (default),
left,
right,
both
#cat { float: left; }
 #fish { clear: left; }

display

Възможни стойности: Пример:
none – no display at all.
inline,
block,
inline-block,
run-in,
list-item,
table,
inline-table,
table-row-group,
table-header-group,
table-footer-group,
table-row,
table-column-group,
table-column,
table-cell,
table-caption
.container { display: block; }
 .container-inner { display: none; }
 .container-right { display: table; }

visibility

Възможни стойности: Пример:
inherit,
visible (default),
hidden,
collapse
p { visibility: hidden; }

Lists

list-style

Възможни стойности: Пример:
[комбинация от list-style-type, list-style-position and list-style-image]
ul { list-style: square inside; }

list-style-type

Възможни стойности: Пример:
inherit,
none – no list marker.,
disc – solid circle.
circle – empty circle.,
square – solid square.,
decimal – 1, 2, 3, 4 etc.,
decimal-leading-zero – 01, 02, 03 … 10, 11 etc. Not supported by IE.,
lower-roman – i, ii, iii, iv etc.,
upper-roman – I, II, III, IV etc.,
lower-greek – Greek characters. Not supported by IE.,
lower-latin – a, b, c, d etc. Not supported by IE.,
upper-latin – A, B, C, D etc. Not supported by IE.,
armenian,
georgian
ul { list-style-type: square; }

list-style-image

Възможни стойности: Пример:
[URI],
inherit,
none (default)
li { list-style-image: url(images/myface.jpg); }

list-style-image

Възможни стойности: Пример:
[URI],
inherit,
none (default)
li { list-style-image: url(images/myface.jpg); }

list-style-position

Възможни стойности: Пример:
inherit,
inside,
outside (default)
li { list-style-position: inside; }

Tables

table-layout

Възможни стойности: Пример:
inherit,
auto (default),
fixed
table {
 width: 600px;
 table-layout: fixed;
 }

border-collapse

Възможни стойности: Пример:
inherit,
collapse,
separate (default)
table { border-collapse: collapse; }
 td { border: 1px solid #ccc; }

border-spacing

Възможни стойности: Пример:
[length]
table {
 border-collapse: separate;
 border-spacing: 0.25em 0.5em;
 }
 td { border: 1px solid #ccc; }

empty-cells

Възможни стойности: Пример:
inherit,
show (default),
hide
table { empty-cells: hide; }

caption-side

Възможни стойности: Пример:
top (default),
right,
bottom,
left
caption { caption-side: right; }

Misc

cursor

Възможни стойности: Пример:
inherit
auto (default)
crosshair,
default,
help,
move,
n-resize,
ne-resize,
e-resize,
se-resize,
s-resize,
sw-resize,
w-resize,
nw-resize,
text,
pointer,
progress,
wait,
[URI]
acronym { cursor: help; }

direction

Възможни стойности: Пример:
inherit
ltr (default) – left to right.
rtl – right to left.
p { direction: rtl; }

unicode-bidi

Възможни стойности: Пример:
inherit
normal (default),
embed,
bidi-override
.hebrew {
 direction: rtl;
 unicode-bidi: bidi-override;
 }

Leave a Reply Text

Leave a Reply