HTML, XHTML ve CSS CSS (Cascading Style Sheets) Box (Kutu

Transkript

Box (Kutu) Modeli
HTML ya da XML dosyaları iç içe geçmiş
elemanlardan oluşmaktadır.
Örneğin, <html> tagının içindeki <body>
tagındaki <p> elemanında <em> tagı
bulunabilir.
Önceki kısımda bu durum ağaç yapısında
gösterilmiştir.
Benzer şekilde durumu iç içe geçmiş
kutular olarak göstermekte mümkündür.
HTML, XHTML ve CSS
CSS (Cascading Style Sheets)
<ul>
<li>
<p>Text of the
first item in
the list has
<em>a few
emphasized
words</em>
in the
middle.</p>
<li>...
En dıştaki kutu <html> elemanıdır.
Son kutu vurgulanmış bir metindir.
DIV ve P gibi blok yapısındaki elemanlar
kendi kutuları içinde gösterilirler.
<em> ve <SPAN> gibi satır içi elemanlar
daha küçük kutulara bölünebilirler.
Her elemanının boyutu ve pozisyonu bir
önceki elemana göre hesaplanmaktadır.
1
Display Özelliği
Bu özellik bir elemanın blok, satır içi, liste elemanı veya
diğer bir tipte gösterilmesini sağlamaktadır.
İsim:display
Değer:inline | block | list-item | run-in | inline-block | marker |
table | inline-table | table-row-group | table-header-group
| table-footer-group | table-row | table-column-group |
table-column | table-cell | table-caption | none
İlk Değer:inline
Uygulandupu elemanlar:Tüm elemanlar
Kalıtım:Hayır
Yüzdelik:N/A
List-style-type Özelliği
Listelerde hangi tip madde işaretlerinin
kullanılacağını belirler. Bkz. Listtype.html
İsim:list-style-type
Değer:disc | circle | square | decimal | decimalleading-zero | lower-roman | upper-roman |
lower-alpha | lower-latin | upper-alpha | upperlatin | lower-greek | armenian | georgian | none
İlk Değer:disc
Uygulandığı elemanlar: list-item özelliğine sahip
elemanlar
Kalıtım: Evet
Yüzdelik: Ana elemanın font büyüklüğüne göre
2
List-style-position Özelliği
Madde iminin liste kutusunun içine mi
dışına mı yazılacağını belirler.
İsim:list-style-position
Değer:inside | outside
İlk Değer:outside
Uygulandığı elemanlar:list-item özelliği
bulunan elemanlar
Kalıtım:evet
Yüzdelik:N/A
List-style Özelliği
White Space Özelliği
ol { list-style: decimal }
ol ol { list-style: upper-alpha }
ol ol ol { list-style: upper-roman }
İsim:white-space
Değerler:normal | pre | nowrap | pre-wrap |
pre-line
Varsayılan:normal
Uygulandığı elemanlar: blok tipi elemanlar
Kalıtım: Evet
Yüzdelik:N/A
Bkz. White.html
Bkz. Liststyle.html
3
Kutuların İçindeki Boşluklar
Metin elemanların etrafında vereceğiniz
boşluklar kullanıcıya daha rahat okuma
imkanı sunmaktadır. CSS’den önce
HTML’de boşluk bırakmak 3 şekilde
yapılıyordu.
Elemanlarla: Örneğin <pre>, <p>, <br>
Resimlerle: Kimi zaman boşluk göstermek için
resimler kullanılabilmektedir.
Tablolarla: Bu yöntemin dezavantajı çok
karmaşık olmasıdır.
Blok Seviyesi Elemanlarında Boşluk
Blok seviyesinde
harfler arasındaki,
kelimeler arasındaki,
satır arasındaki
paragraflar arasındaki
aralıkları değiştirerek boşluklar ayarlanabilmektedir.
text-align Özelliği
text-align
text-indent
line-height
word-spacing
letter-spacing
vertical-align
Özellikleri bahsedilen boşlukların
ayarlanmasında kullanılmaktadır.
İsim:text-align
Değerler:left | right | center | justify | <string>
Varsayılan:UA-specific
Uygulandığı elemanlar: blok seviyesindeki
elemanlar
Kalıtım:Evet
Yüzdelik:N/A Bkz.textalign.html
4
text-indent Özelliği
Paragraf başlangıç boşluk miktarını
ayarlamaktadır.
İsim:text-indent
Değerler:<length> | <percentage>
Varsayılan:0
Uygulandığı elemanlar: Blok seviyesi
elemanlar
Kalıtım: Evet
Yüzdelik: Ana elemanın genişliğine göre
line-height Özelliği
Satır aralığının ayarlanmasında
kullanılmaktadır.
İsim:line-height
Değerler:<number> | <length> |
<percentage>
Varsayılan değer:UA-specific
Uygulandığı elemanlar: Tüm elemanlar
Kalıtım: Evet
Yüzdelik: Kendi font büyüklüğüne göre
Bkz. Lineheight1.html, lineheight2.html
5
word-spacing Özelliği
letter-spacing Özelliği
İsim:word-spacing
Değerler:normal | <length>
Varsayılan:normal
Uygulandığı eleman: Tüm elemanlar
Kalıtım:Evet
Yüzdelik:N/A
İsim:letter-spacing
Değerler:normal | <length>
Varsayılan:normal
Uygulandığı eleman:Tüm elemanlar
Kalıtım:Evet
Yüzdelik:N/A
blockquote { letter-spacing: 0.04in }
p { letter-spacing: 0.1em }
vertical-align Özelliği
İsim:vertical-align
Değerler:baseline | sub | super | top | text-top
| middle | bottom | text-bottom |
<percentage> | <length>
Varsayılan:baseline
Uygulandığı elemanlar: Satır içi tüm
elemanlar
Kalıtım: Hayır
Yüzdelik: Elemanın kendi yüksekliğine göre
6
cursor Özelliği
a) baseline b) sub c) super d)text-top
e) middle f)text-bottom
İsim:cursor
Değerler:[[<url> ,]* [ auto | crosshair | default |
pointer | move | e-resize | ne-resize | nw-resize |
n-resize | se-resize | sw-resize | s-resize | wresize | text | wait | help | progress]]
Varsayılan:Otomatik
Kalıtım:Evet
Yüzdelik:N/A
crosshair
ne-resize
Kutular Etrafındaki Boşluklar
default
text
Pointer
wait
move
help
e-resize
Blok seviyesindeki elemanların etrafındaki
boşlukların ayarlanması görsellik
açısından önemlidir.
Kutu dışında ayarlanabilecek üç boşluk
vardır:
margin
padding
border
7
Marginler ve margin Özellikleri
Margin, bir elemanı çevreleyen kutu ile diğer bir
elemanı çevreleyen kutu arasındaki boşluk
olarak tanımlanır.
İsim:margin-top, margin-right, margin-bottom,
margin-left
Değerler:<length> | <percentage> | auto
Varsayılan:0
Kalıtım: Hayır
Yüzdelik: İçinde bulunduğu bloğun genişliğine göre
Bkz. Margin.html
padding Özellikleri
İsim:padding-top, padding-right, paddingbottom, padding-left
Değerler:<length> | <percentage>
Varsayılan:0
Kalıtım: hayır
Yüzdelik:İçinde bulunduğu bloğun
genişliğine göre
body { padding: 2em }
body { padding: 1em 2em }
body { padding: 1em 2em 3em }
body { padding: 1em 3em 5em 7em }
8
border Özellikleri
border-color Özellikleri
İsim:border-top-color, border-right-color,
border-bottom-color, border-left-color
Değer:<color>
Varsayılan:elemanın renk değeri
Kalıtım:Hayır
Yüzdelik:N/A
border-style Özellikleri
body { border-color: red }
Tüm kenarlıklar kırmızı
body { border-color: red black }
Üst ve alt kenarlıklar kırmızı, sağ ve sol
siyah
body { border-color: red black yellow }
Üst kenarlık kırmızı, sağ ve sol siyah, alt sarı
body { border-color: red black yellow
green }
İsim:border-top-style, border-right-style,
border-bottom-style, border-left-style
Değer:<border-style>
Varsayılan:none
Kalıtım:no
Yüzdelik:N/A
9
body { border-style: dotted }
Tüm kenarlıklar dotted
body { border-style: dashed solid }
Alt ve üst kenarlıklar dashed, sağ ve sol
kenarlıklar solid
body { border-style: inset solid double }
Üst inset, sağ sol solid, alt double
body { border-style: ridge groove dashed
dotted }
border-width Özellikleri
İsim:border-top-width, border-right-width,
border-bottom-width, border-left-width
Değerler: thin | medium | thick | <length>
Varsayılan:medium
Kalıtım:Hayır
Yüzdelik:N/A
h1 { border-width: thick; font-size: 18pt }
p { border-width: thick; font-size: 12pt }
10
border Özellikleri
body { border-width: 2em }
Tüm kenarlıklar 2 em
body { border-width: 1em 2em } ,
Alt ve üst kenarlık 1 em, sağ ve sol 2 em
body { border-width: 1em 2em 3em }
body { border-width: 1em 3em 5em 7em }
Kenarlıkların tipini belirlemekte kullanılır.
İsim:border-top, border-right, border-bottom,
border-left, border
Değerler:<border-width> | | <border-style> | |
<border-color>
Varsayılan: Her bir kenarlık için farklı
Kalıtım:Hayır
Yüzdelik:N/A
Üst üste geçen marginler
Eğer arka arkaya gelen iki eleman var ve
margin değerleri aynı boşluk ile ilgili bilgi
veriyorsa büyük olan margin değeri
kullanılmaktadır.
Örneğin h1’den sonra p tagı gelsin. p’den
önce 12 pt’lik bir margin olsun, h1’den
sonra da 24 pt’lik bir margin olsun.
Tarayıcı sadece büyük olan margini
uygulayacak ve iki tag arasında 24 pt
buşluk bırakacaktır.
11
width Özelliği
height Özelliği
Elemanların genişliklerini ayarlamakta
kullanılır.
İsim:width
Varsayılan:auto
elemanlar
Kalıtım: Hayır
Yüzdelik:Ana elemanın yüksekliğine göre
Elemanların yüksekliklerini belirtmekte
kullanılır.
İsim:height
Değerler:<length> | auto
Varsayılan:auto
elemanlar
Kalıtım: Hayır
Yüzdelik:N/A
float Özelliği
İsim:float
Değer:left | right | none
Varsayılan:none
Kalıtım: Hayır
Yüzdelik:N/A
img.face
{ float: left; margin-left: 3px 3px 3px 0 }
img.face { float: right; margin-right: 3px 0 3px
3px }
12
Float özelliği ile birlikte çalışmaktadır.
İsim:clear
Değerler:none | left | right | both
Varsayılan:none
Uygulandığı elemanlar: Tüm elemanalr
Kalıtım:Hayır
Yüzdelik:N/A
img { float: left }
h2 { clear: both }
Bütün resimler sol tarafa kayacaktır. Ancak
h2’ler resimlerin yanında bulunamazlar.
img { float: right; clear: right; }
Tüm resimler sağa parent içinde sağa
kayacaktır. Ancak yan yana iki resim
bulunamayacaktır.
min-width, max-width, min-height,
max-height Özellikleri
Bir elemanının alabileceği maksimum ve
minimum genişlik ve yükseklik değerlerinin
girilmesinde kullanılmaktadırlar.
13
Float olmayan bir elemanın yatay
pozisyonu ve genişliği aşağıdaki özellikler
tarafından belirlenir.
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
Göreceli ve Mutlak Pozisyonlar
Bir HTML dosyasının yerleşimi yapılırken
normalde elemanların kutuları birbiri
arkasına veya altına margin, padding ve
width özelliklerinin belirttiği uzaklıklarda
yerleştirilirler.
Bazen float özelliği ile bir kutu bir yana
yaslanabilir.
Bu yöntemde, tüm çalışma alanı
dolduruluncaya kadar kutular yerleştirilir.
Göreceli
pozisyonlama,
her bir kutunun
pozisyonunu
diğer kutuları
etkilemeden
değiştirmeye
izin vermektedir.
14
position Özelliği
top, right, bottom, left Özellikleri
İsim:position
Değerler:static | relative | absolute | fixed
Varsayılan:static
Kalıtım:Hayır
Yüzdelik:N/A
İsim:top, right, bottom, left
Varsayılan:auto
Uygulandığı elemanlar: position özelliği
static olmayan elemanlar
Kalıtım: Hayır
Yüzdelik: İçinde bulunduğu bloğun genişliği
veya yüksekliğine göre
Göreceli Pozisyonlama
Bkz. Contain.html
Göreceli pozisyonlamada diğer
elemanların pozisyonlarına etki etmeden
eleman istenilen pozisyona getirilmektedir.
Genellikle scriptler tarafından animasyon
yapılmak için kullanılmaktadır
Bkz. Menurel.html
15
Sabit Pozisyonlama
Ekranda hep aynı yerde durması gereken
elemanlar var ise sabit pozisyonlama
kullanmak iyi olacaktır.
z-index Özelliği
Sayfayı üç boyutlu olarak düşünmek için
kullanılır.
İsim:z-index
Değerler:auto | <integer>
Varsayılan:auto
Uygulandığı elemanlar: Pozisyonu ayarlanmış
elemanlar
Kalıtım:Hayır
Yüzdelik:N/A
Bkz. Zindex.html
Mutlak Pozisyonlama
Kök elemana göre pozisyonlama
yapılmasıdır.
Bkz. Absolute.html
Renkler
Renkleri göstermek için
farklı yöntemler
kullanılabilir.
Yüzdelik olarak
0-255 arasında değerler
vererek
Hexadecimal sayılar
kullanarak
16
rgb(100%, 35.5%, 10%), kırmızıdan %100,
yeşilden %35.5 ve maviden %10
karıştırarak rengi hesaplamaktadır.
rgb(255, 91, 26) yukarıdaki değerlerin
karşılığıdır.
#FF5B1A ise benzer şekilde yukarıdaki
değerin hexadecimal eşdeğeridir.
A7 = 10 x 16 + 7 = 167
FF = 15 x 16 + 15 = 255
22 = 2 x 16 + 2 = 34
5B = 5 x 16 + 11 = 91
1A = 1 x 16 + 10 = 26
color Özelliği
İsim:color
Değer:<color>
Varsayılan: Tarayıcı spesifik
Kalıtım:Evet
Yüzdelik:N/A
em { color: red }
p { color: rgb(255, 0, 0) }
h1 { color: #f00 }
h1 { color: #ff000 }
17
Kenarlık Renginin Ayarlanması
background-color Özelliği
p { border: 5pt solid red }
p { border: 5pt solid; color: blue; }
İsim:background-color
Değerler:<color> | transparent
Varsayılan:transparent
Kalıtım: Hayır
Yüzdelik:N/A
Bkz. Backcolor.html
background-image Özelliği
Background-repeat Özelliği
İsim:background-image
Değer:[ <url> | none ]
Varsayılan: none
Kalıtım: Hayır
Yüzdelik:N/A
p { background-image: url(ball.gif);
background-color: #FFAA00; }
İsim:background-repeat
Değerler:repeat | repeat-x | repeat-y | norepeat
Varsayılan:repeat
Kalıtım: Hayır
Yüzdelik:N/A
18
background-position Özelliği
Üst üste Geçme ve Miras
<html>
<title>A sample document
</title>
<body>
<h1>The headline</h1>
<p>The text</p>
</body>
</html>
body { font-family: serif } (Tarayıcı sitili)
h1 { font-family: sans-serif } (Tasarımcı
sitili)
19
Üst üste geçmeden sonraki durum
Kalıtım mekanizması devreye girdiğinde
ise
Üst üste geçmede çakışma meydana
gelirse
<html>
<title>A sample document
</title>
<body>
<h1>The headline</h1>
<p>The text</p>
</body>
</html>
Kullanıcı sitil dosyası:
body { color: black; background: white }
Tasarımcı sitil dosyası:
body { color: white; background: black }
20
Ayrı ayrı baktığımızda
Tasarımcı kuralları, kullanıcı kurallarını
yenmektedir.
Kullanıcı sitilinin Uygulanması
Sonuç olarak
Kimi durumlarda kullanıcı sitillerinin
uygulanması gerekebilir.
body { color: black !important;
background: white !important }
21
Dışsal Sitil Dosyaları
Link elemanı ile bağlama
Tekrar kullanılabilirlik
Performans
Kullanıcı seçimi
sunması açısından dışsal sitil dosyaları
önemlidir.
<link rel="stylesheet" type="text/css"
href="mystyle">
Bkz. Link.html
Bkz. Inline.html
@import elemanı ile bağlanma
<style type="text/css">
@import
url("http://www.w3.org/StyleSheets/Core/St
eely");
</style>
@import "mystyle";
h1 { font-style: palatino, sans-serif }
p { color: blue; background: white }
</style>
22
@import "basics";
@import "list-styles";
@import "headings";
@import "smaller-headings" print;
</style>
23

HTML, XHTML ve CSS CSS (Cascading Style Sheets) Box (Kutu

Transkript

Benzer belgeler

Strain Gauge Esasına Dayalı üç Boyutlu Torna Dinamometresinin

acksd uye basvuru formu - ACKSD