Dalam beberapa Tag HTML, ada salah satu atribut yang dapat digunakan untuk mengatur gaya sebuah postingan ataupun sebuah template blog. Atribut tersebut adalah atribut style. Dalam atribut Style kita bisa memberikan sebuah perintah baik untuk warna teks, warna background, posisi teks dan masih banyak lagi. Atribut Style memiliki beberapa nilai atribut yang dapat digunakan untuk membuat atau memodifikasi sebuah blog maupun untuk membuat sebuah postingan.
Pada catatan sebelumnya tentang Cara Penulisan Kode HTML di Blog telah dicatat Penulisan Kode Dasar Atribut, seperti berikut :
<namatag_pembuka nama atribut="nilai atribut">Isi Konten</namatag_penutup>
Dalam atribut style ada sedikit perbedaan dengan atribut lainnya dalam menuliskan kode HTML-nya. Berikut kode dasar dalam penulisan atribut style :
<namatag_pembuka nama atribut="property: nilai atribut">Isi Konten</namatag_penutup>
Di sini kita akan menggunakan atribut Style dan akan menggabungkan beberapa property dan nilai atributnya, sebagai contoh berikut :
Catatan :
- Untuk Tag yang dapat digunakan dengan atribut style bisa dilihat pada tabel Jenis-jenis Tag dan Atribut HTML
- property adalah property CSS
Untuk menggabungkan property ditandai atau dipisahkan dengan tanda titik koma (;) - Value atau nilai atribut adalah nilai dari property CSS
Nilai atribut dapat digabungkan dan ditandai atau dipisahkan dengan spasi - nilai atribut dapat dimodifikasi atau ditambahkan dengan nilai atribut lainnya.
Sebagai contoh pada nilai atribut border: dalam tabel dibawah, nilai atribut tercatat solid, double dan sebagainya. Di sini kita bisa menambahkan nilai atribut tersebut, misalnya : solid (model border) 1px (ketebalan border) dan #FF4500 (kode warna border)
Adapun nilai atribut dan isi nilai atribut dari Atribut Style, sebagai berikut :
Property | Value / Nilai Atribut | Keterangan |
---|---|---|
alignment-adjust: | ||
after-edge | ||
alphabetic | ||
auto | ||
baseline | ||
before-edge | ||
central | ||
hanging | ||
ideographic | ||
mathematical | ||
middle | ||
text-after-edge | ||
text-before-edge | ||
alignment-baseline: | ||
after-edge | ||
alphabetic | ||
auto | ||
baseline | ||
before-edge | ||
central | ||
hanging | ||
ideographic | ||
mathematical | ||
middle | ||
text-after-edge | ||
text-before-edge | ||
use-script | ||
animation: | ||
animation-delay: | ||
animation-direction: | ||
alternate | ||
normal | ||
animation-duration: | ||
animation-iteration-count: | ||
animation-name: | ||
animation-play-state: | ||
paused | ||
running | ||
animation-timing-function: | ||
cubic-bezier(<number> | ||
ease | ||
ease-in | ||
ease-in-out | ||
ease-out | ||
linear | ||
appearance: | ||
button | ||
checkbox | ||
checkbox-group | ||
field | ||
hyperlink | ||
list-menu | ||
normal | ||
password | ||
pop-up-menu | ||
push-button | ||
radio-group | ||
azimuth: | ||
behind | ||
center | ||
center-left | ||
center-right | ||
deg | ||
far-left | ||
far-right | ||
grad | ||
inherit | ||
left | ||
left-side | ||
leftwards | ||
rad | ||
right | ||
right-side | ||
rightwards | ||
background: | ||
bottom | ||
center | ||
color | ||
fixed | ||
left | ||
length | ||
none | ||
no-repeat | ||
percentage | ||
repeat | ||
repeat-x | ||
repeat-y | ||
right | ||
scroll | ||
top | ||
transparent | ||
url('') | ||
background-attachment: | ||
color | ||
fixed | ||
inherit | ||
scroll | ||
background-clip: | ||
background-color: | ||
color | ||
inherit | ||
transparent | ||
background-image: | ||
inherit | ||
none | ||
url('') | ||
background-origin: | ||
background-position: | ||
bottom | ||
center | ||
inherit | ||
left | ||
length | ||
percentage | ||
right | ||
top | ||
background-repeat: | ||
inherit | ||
no-repeat | ||
repeat | ||
repeat-x | ||
repeat-y | ||
background-size: | ||
auto | ||
baseline-shift: | ||
<length> | ||
<percentage> | ||
baseline | ||
sub | ||
super | ||
binding: | ||
bookmark-label: | ||
bookmark-level: | ||
bookmark-target: | ||
attr() | ||
url() | ||
border: | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
thick | ||
thin | ||
border-bottom: | ||
border-top-color | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
thick | ||
thin | ||
border-bottom-color: | ||
color | ||
inherit | ||
transparent | ||
border-bottom-style: | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
border-bottom-width: | ||
inherit | ||
medium | ||
thick | ||
thin | ||
border-collapse: | ||
collapse | ||
inherit | ||
separate | ||
border-color: | ||
color | ||
inherit | ||
transparent | ||
border-left: | ||
border-top-color | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
thick | ||
thin | ||
border-left-color: | ||
color | ||
inherit | ||
transparent | ||
border-left-style: | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
border-left-width: | ||
inherit | ||
medium | ||
thick | ||
thin | ||
border-right: | ||
border-top-color | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
thick | ||
thin | ||
border-right-color: | ||
color | ||
inherit | ||
transparent | ||
border-right-style: | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
border-right-width: | ||
inherit | ||
medium | ||
thick | ||
thin | ||
border-spacing: | ||
inherit | ||
length | ||
border-style: | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
border-top: | ||
border-top-color | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
thick | ||
thin | ||
border-top-color: | ||
color | ||
inherit | ||
transparent | ||
border-top-style: | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
medium | ||
none | ||
outset | ||
ridge | ||
solid | ||
border-top-width: | ||
inherit | ||
medium | ||
thick | ||
thin | ||
border-width: | ||
inherit | ||
medium | ||
thick | ||
thin | ||
bottom: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
border-spacing: | ||
length | ||
box-align: | ||
baseline | ||
center | ||
end | ||
start | ||
stretch | ||
box-decoration-break: | ||
clone | ||
slice | ||
box-direction: | ||
inherit | ||
normal | ||
reverse | ||
box-flex: | ||
box-lines: | ||
miltiple | ||
single | ||
box-ordinal-group: | ||
box-orient: | ||
block-axis | ||
inherit | ||
inline-axis | ||
vertical | ||
horizontal | ||
box-pack: | ||
center | ||
end | ||
justify | ||
start | ||
box-sizing: | ||
border-box | ||
content-box | ||
inherit | ||
caption-side: | ||
bottom | ||
inherit | ||
top | ||
clear: | ||
both | ||
inherit | ||
left | ||
none | ||
right | ||
clip: | ||
<shape> | ||
auto | ||
inherit | ||
color: | ||
color | ||
inherit | ||
color-profile: | ||
<name> | ||
<uri> | ||
auto | ||
inherit | ||
srgb | ||
column-count: | ||
column-gap: | ||
column-rule: | ||
column-rule-color: | ||
column-rule-style: | ||
column-rule-width: | ||
columns: | ||
column-span: | ||
column-width: | ||
content: | ||
<counter> | ||
attr(x) | ||
close-quote | ||
inherit | ||
no-close-quote | ||
none | ||
no-open-quote | ||
normal | ||
open-quote | ||
url('') | ||
counter-increment: | ||
identifier | ||
inherit | ||
integer | ||
none | ||
counter-reset: | ||
identifier | ||
inherit | ||
integer | ||
none | ||
crop: | ||
auto | ||
inset-rect() | ||
rect() | ||
cue: | ||
'cue-after' | ||
'cue-before' | ||
inherit | ||
cue-after: | ||
inherit | ||
none | ||
url('') | ||
cue-before: | ||
inherit | ||
none | ||
url('') | ||
cursor: | ||
auto | ||
crosshair | ||
default | ||
e-resize | ||
help | ||
inherit | ||
move | ||
ne-resize | ||
n-resize | ||
nw-resize | ||
pointer | ||
se-resize | ||
s-resize | ||
sw-resize | ||
text | ||
url('') | ||
wait | ||
w-resize | ||
direction: | ||
inherit | ||
ltr | ||
rtl | ||
display: | ||
block | ||
inherit | ||
inline | ||
inline-block | ||
inline-table | ||
list-item | ||
none | ||
run-in | ||
table | ||
table-caption | ||
table-cell | ||
table-column | ||
table-column-group | ||
table-footer-group | ||
table-header-group | ||
table-row | ||
table-row-group | ||
dominant-baseline: | ||
alphabetic | ||
auto | ||
central | ||
hanging | ||
inline | ||
ideographic | ||
mathematical | ||
middle | ||
no-change | ||
reset-size | ||
text-after-edge | ||
text-before-edge | ||
use-script | ||
drop-initial-after-adjust: | ||
after-edge | ||
alphabetic | ||
central | ||
ideographic | ||
mathematical | ||
middle | ||
text-after-edge | ||
drop-initial-after-align: | ||
drop-initial-before-adjust: | ||
before-edge | ||
central | ||
hanging | ||
mathematical | ||
middle | ||
text-before-edge | ||
drop-initial-before-align: | ||
caps-height | ||
drop-initial-size: | ||
drop-initial-value: | ||
initial | ||
elevation: | ||
above | ||
below | ||
deg | ||
grad | ||
higher | ||
inherit | ||
level | ||
lower | ||
rad | ||
empty-cells: | ||
hide | ||
inherit | ||
show | ||
fit: | ||
fill | ||
hidden | ||
meet | ||
slice | ||
fit-position: | ||
float: | ||
inherit | ||
left | ||
none | ||
right | ||
float-offset: | ||
font: | ||
caption | ||
'font-family' | ||
'font-size' | ||
'font-style' | ||
'font-variant' | ||
'font-weight' | ||
icon | ||
inherit | ||
'line-height' | ||
menu | ||
message-box | ||
small-caption | ||
status-bar | ||
font-family: | ||
cursive | ||
fantasy | ||
'font-name' | ||
inherit | ||
monospace | ||
sans-serif | ||
serif | ||
font-size: | ||
inherit | ||
large | ||
larger | ||
length | ||
medium | ||
percentage | ||
small | ||
smaller | ||
x-large | ||
x-small | ||
xx-large | ||
xx-small | ||
font-size-adjust: | ||
inherit | ||
none | ||
font-stretch: | ||
condensed | ||
expanded | ||
extra-condensed | ||
extra-expanded | ||
inherit | ||
narrower | ||
normal | ||
semi-condensed | ||
semi-expanded | ||
ultra-condensed | ||
ultra-expanded | ||
wider | ||
font-style: | ||
inherit | ||
italic | ||
normal | ||
oblique | ||
font-variant: | ||
inherit | ||
normal | ||
small-caps | ||
font-weight: | ||
100 | ||
200 | ||
300 | ||
400 | ||
500 | ||
600 | ||
700 | ||
800 | ||
900 | ||
bold | ||
bolder | ||
inherit | ||
lighter | ||
normal | ||
grid-columns: | ||
grid-rows: | ||
hanging-punctuation: | ||
auto | ||
height: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
hyphenate-after: | ||
hyphenate-before: | ||
auto | ||
hyphenate-character: | ||
auto | ||
hyphenate-lines: | ||
no-limit | ||
hyphenate-resource: | ||
none | ||
hyphens: | ||
auto | ||
manual | ||
none | ||
icon: | ||
auto | ||
inherit | ||
url() | ||
image-orientation: | ||
auto | ||
image-resolution: | ||
auto | ||
dpi | ||
normal | ||
inline-box-align: | ||
initial | ||
integer | ||
last | ||
left: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
letter-spacing: | ||
inherit | ||
length | ||
normal | ||
line-height: | ||
inherit | ||
length | ||
normal | ||
number0-100 | ||
percentage | ||
line-stacking: | ||
line-stacking-ruby: | ||
exclude-ruby | ||
include-ruby | ||
line-stacking-shift: | ||
consider-shifts | ||
disregard-shifts | ||
line-stacking-strategy: | ||
block-line-height | ||
grid-height | ||
inline-line-height | ||
max-height | ||
list-style: | ||
inherit | ||
'list-style-image' | ||
'list-style-position' | ||
'list-style-type' | ||
list-style-image: | ||
inherit | ||
none | ||
url('') | ||
list-style-position: | ||
inherit | ||
inside | ||
outside | ||
list-style-type: | ||
armenian | ||
circle | ||
decimal | ||
decimal-leading-zero | ||
disc | ||
georgian | ||
inherit | ||
lower-alpha | ||
lower-greek | ||
lower-latin | ||
lower-roman | ||
none | ||
square | ||
upper-alpha | ||
upper-latin | ||
upper-roman | ||
list-style-type: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
margin-bottom: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
margin-left: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
margin-right: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
margin-top: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
mark: | ||
mark-after: | ||
mark-before: | ||
marks: | ||
crop | ||
cross | ||
none | ||
marquee-direction: | ||
forward | ||
reverse | ||
marquee-play-count: | ||
infinite | ||
integer | ||
marquee-speed: | ||
fast | ||
normal | ||
slow | ||
marquee-style: | ||
alternate | ||
scroll | ||
slide | ||
max-height: | ||
inherit | ||
length | ||
none | ||
percentage | ||
max-width: | ||
inherit | ||
length | ||
none | ||
percentage | ||
min-height: | ||
inherit | ||
length | ||
percentage | ||
min-width: | ||
inherit | ||
length | ||
percentage | ||
move-to: | ||
here | ||
identifier | ||
normal | ||
nav-down: | ||
auto | ||
id | ||
target-name | ||
nav-left: | ||
auto | ||
id | ||
target-name | ||
nav-right: | ||
auto | ||
id | ||
target-name | ||
nav-up: | ||
auto | ||
id | ||
target-name | ||
opacity: | ||
alphavalue | ||
inherit | ||
orphans: | ||
inherit | ||
integer | ||
outline: | ||
inherit | ||
'outline-color' | ||
'outline-style' | ||
'outline-width' | ||
outline-color: | ||
color | ||
inherit | ||
invert | ||
outline-style: | ||
dashed | ||
dotted | ||
double | ||
groove | ||
hidden | ||
inherit | ||
inset | ||
none | ||
outse | ||
ridge | ||
solid | ||
outline-width: | ||
inherit | ||
medium | ||
thick | ||
thin | ||
overflow: | ||
auto | ||
hidden | ||
inherit | ||
no-content | ||
no-display | ||
scroll | ||
visible | ||
overflow-style: | ||
auto | ||
marquee-block | ||
marquee-line | ||
overflow-x: | ||
auto | ||
hidden | ||
no-content | ||
no-display | ||
scroll | ||
visible | ||
overflow-y: | ||
auto | ||
hidden | ||
no-content | ||
no-display | ||
scroll | ||
visible | ||
padding: | ||
inherit | ||
length | ||
percentage | ||
padding-bottom: | ||
inherit | ||
length | ||
percentage | ||
padding-left: | ||
inherit | ||
length | ||
percentage | ||
padding-right: | ||
inherit | ||
length | ||
percentage | ||
padding-top: | ||
inherit | ||
length | ||
percentage | ||
page: | ||
page-break-after: | ||
always | ||
auto | ||
avoid | ||
inherit | ||
left | ||
right | ||
page-break-before: | ||
always | ||
auto | ||
avoid | ||
inherit | ||
left | ||
right | ||
page-break-inside: | ||
auto | ||
avoid | ||
inherit | ||
page-policy: | ||
first | ||
last | ||
start | ||
pause: | ||
1ms | ||
1s | ||
inherit | ||
percentage | ||
pause-after: | ||
1ms | ||
1s | ||
inherit | ||
percentage | ||
pause-before: | ||
1ms | ||
1s | ||
inherit | ||
percentage | ||
phonemes: | ||
pitch: | ||
1hz | ||
1khz | ||
high | ||
inherit | ||
low | ||
medium | ||
x-high | ||
x-low | ||
pitch: | ||
inherit | ||
number0-100 | ||
play-during: | ||
auto | ||
inherit | ||
mix | ||
none | ||
repeat | ||
url('') | ||
position: | ||
absolute | ||
fixed | ||
inherit | ||
relative | ||
static | ||
presentation-level: | ||
increment | ||
integer | ||
same | ||
punctuation-trim: | ||
adjacent | ||
end | ||
none | ||
start | ||
quotes: | ||
'' | ||
inherit | ||
none | ||
rendering-intent: | ||
absolute-colorimetric | ||
auto | ||
inherit | ||
perceptual | ||
relative-colorimetric | ||
saturation | ||
resize: | ||
both | ||
horizontal | ||
inherit | ||
none | ||
vertical | ||
rest: | ||
rest-after: | ||
inherit | ||
medium | ||
none | ||
strong | ||
time | ||
weak | ||
x-strong | ||
x-weak | ||
rest-before: | ||
inherit | ||
medium | ||
none | ||
strong | ||
time | ||
weak | ||
x-strong | ||
x-weak | ||
size: | ||
auto | ||
landscape | ||
portrait | ||
speak: | ||
inherit | ||
none | ||
normal | ||
spell-out | ||
speak-header: | ||
always | ||
inherit | ||
once | ||
speak-numeral: | ||
continuous | ||
digits | ||
inherit | ||
speak-punctuation: | ||
code | ||
inherit | ||
none | ||
speech-rate: | ||
fast | ||
faster | ||
inherit | ||
medium | ||
number0-100 | ||
slow | ||
slower | ||
x-fast | ||
x-slow | ||
stress: | ||
inherit | ||
number0-100 | ||
string-set: | ||
target: | ||
target-name: | ||
current | ||
modal | ||
new | ||
parent | ||
root | ||
string | ||
target-new: | ||
none | ||
tab | ||
window | ||
target-position: | ||
above | ||
back | ||
behind | ||
front | ||
text-align: | ||
center | ||
inherit | ||
justify | ||
left | ||
right | ||
text-align-last: | ||
center | ||
end | ||
justify | ||
left | ||
right | ||
start | ||
text-decoration: | ||
blink | ||
inherit | ||
line-through | ||
none | ||
overline | ||
underline | ||
text-emphasis: | ||
accent | ||
after | ||
before | ||
circle | ||
disc | ||
dot | ||
none | ||
text-height: | ||
auto | ||
font-size | ||
max-size | ||
text-size | ||
text-indent: | ||
inherit | ||
length | ||
percentage | ||
text-justify: | ||
auto | ||
distribute | ||
inter-cluster | ||
inter-ideograph | ||
inter-word | ||
kashida | ||
tibetan | ||
text-justify: | ||
color | ||
length | ||
none | ||
text-replace: | ||
text-shadow: | ||
text-transform: | ||
capitalize | ||
inherit | ||
lowercase | ||
none | ||
uppercase | ||
text-wrap: | ||
none | ||
normal | ||
suppress | ||
unrestricted | ||
top: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
transition: | ||
transition-delay: | ||
time | ||
transition-duration: | ||
time | ||
transition-property: | ||
all | ||
none | ||
transition-timing-function: | ||
cubic-bezier | ||
ease | ||
ease-in | ||
ease-in-out | ||
ease-out | ||
linear | ||
unicode-bidi: | ||
bidi-override | ||
embed | ||
inherit | ||
normal | ||
vertical-align: | ||
baseline | ||
bottom | ||
inherit | ||
length | ||
middle | ||
percentage | ||
sub | ||
super | ||
text-bottom | ||
text-top | ||
top | ||
visibility: | ||
collapse | ||
hidden | ||
inherit | ||
visible | ||
voice-balance: | ||
center | ||
inherit | ||
left | ||
leftwards | ||
number | ||
right | ||
rightwards | ||
voice-duration: | ||
time | ||
voice-family: | ||
child | ||
female | ||
inherit | ||
male | ||
'specific-voice' | ||
voice-pitch: | ||
high | ||
inherit | ||
low | ||
medium | ||
number | ||
percentage | ||
x-high | ||
x-low | ||
voice-pitch-range: | ||
high | ||
inherit | ||
low | ||
medium | ||
number | ||
percentage | ||
x-high | ||
x-low | ||
voice-rate: | ||
fast | ||
inherit | ||
medium | ||
percentage | ||
slow | ||
x-fast | ||
x-slow | ||
voice-stress: | ||
inherit | ||
moderate | ||
none | ||
reduced | ||
strong | ||
voice-volume: | ||
inherit | ||
loud | ||
medium | ||
number | ||
percentage | ||
silent | ||
soft | ||
x-loud | ||
x-soft | ||
volume: | ||
inherit | ||
loud | ||
medium | ||
number0-100 | ||
percentage | ||
silent | ||
soft | ||
x-loud | ||
x-soft | ||
white-space: | ||
inherit | ||
normal | ||
nowrap | ||
pre | ||
pre-line | ||
pre-wrap | ||
white-space-collapse: | ||
collapse | ||
discard | ||
preserve | ||
preserve-breaks | ||
widows: | ||
inherit | ||
integer | ||
width: | ||
auto | ||
inherit | ||
length | ||
percentage | ||
word-break: | ||
break-all | ||
break-strict | ||
keep-all | ||
loose | ||
normal | ||
word-spacing: | ||
inherit | ||
length | ||
normal | ||
word-wrap: | ||
break-word | ||
normal |
Tidak ada komentar:
Posting Komentar
Silahkan tulis komentar / saran-sarang yang membangun di sini !