Jenis-Jenis Nilai Atribut Style Kode HTML di Blog

 Jenis-Jenis Nilai Atribut Style Kode HTML di Blog 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 :

<div style="border: solid 1px red; background-color: #F5F5DC; padding: 10px; t-align: left; border-bottom: double 5px #0000FF;">Isi Konten</div>

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


Demikian Catatan Kecil tentang :
Terima kasih atas kunjungannya dan "Selamat Berkreasi Semoga Sukses"

Selanjutnya 
« Prev Post
 Sebelumnya
Next Post »

Catatan Terkait



Tidak ada komentar:

Posting Komentar

Silahkan tulis komentar / saran-sarang yang membangun di sini !

Jenis-Jenis Nilai Atribut Style Kode HTML di Blog