Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
CSS CSS- Cascading Style Sheets: Stil şablonları HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir Satır İçi Stiller Dahili Stil Dosyası Harici Stil Dosyası
2
CSS Satır İçi Stiller Tek bir etikete uygulanacağı zaman kullanılır.
Örnek : <p style="color: red; margin-left: 40px"> Bu CSS ile değişmiş bir paragraf. </p>
3
CSS Dahili Stiller Sadece bir HTML dökümanı içerisinde stil uygulanacaksa bu yöntem kullanılabilir. Örnek : <head> <style type="text/css"> body {background-color: yellow} p {margin-left: 40px} </style> </head>
4
CSS Harici Stiller Harici bir stil dosyası.css dosyası ile içerisinde değişiklik yaparak tüm sitenin görünümünü değiştirebilirsiniz. Her sayfa stil dosyasına <link> etiketi ile bağlanmalıdır. <link> etiketi <head>..</head> içerisinde tanımlanmalıdır.. Örnek : <head> <link rel="stylesheet" type="text/css“ href=“stildosyam.css"> </head>
5
CSS- Örnekler Link List Katman Font Metin İmleç Background Tablo
Scroll bar
6
CSS- Link Örnek 1: a:hover { background-color : #1E90FF; text-decoration :none;} Örnek 2: A { color:black; font-size:10pt; display : block; line-height:16px; text-align : center; background-color:#D4AEBB; border:outset 3px #DB7093; text-decoration:none;} A:HOVER { color:black; zoom : 92%; background-color : #F0DEE5; border :inset 3px #CC3366; text-decoration:none;}
7
CSS- List OL {list-style-type : lower-alpha;}
Örnekler: OL {list-style-type : lower-alpha;} OL {list-style-type : upper-roman;} UL {list-style-type : square;} UL {display : block;}
8
CSS- Font TD { font-family :Arial; } TD { font-size :12px;}
Örnekler: TD { font-family :Arial; } TD { font-size :12px;} TD {font-variant :small-caps; }
9
CSS- Text TD {text-align: right;} TD {text-transform: uppercase;}
Örnekler: TD {text-align: right;} TD {text-transform: uppercase;} TD {vertical-align :top;} TD {word-spacing: 40px;} div {direction : rtl;} div {text-align : center;} <marquee behavior="scroll" loop=-1 scrollamount=4 scrolldelay=50 >ODTU-SEM</marquee>
10
CSS- İmleç td {cursor :crosshair;} td {cursor :move;}
Örnekler: td {cursor :crosshair;} td {cursor :move;} td {cursor :wait;} td {cursor :help;}
11
CSS- tablo TD{border : 1px;} TD{border-width : 1px thin 4px thick; }
Örnekler: TD{border : 1px;} TD{border-width : 1px thin 4px thick; } TD{border : double;} TD{border : red;} TD{background : #1E90FF ;} TD { border-left-style : ridge; border-left-color : #DAA520; border-left-width : 3px; border-bottom-style : solid; border-bottom-color : #DAA520; border-bottom-width : 1px; background-color:yellow; letter-spacing:4px; text-align:center;}
12
CSS- scroll bar TEXTAREA { background-color: #D4AEBB;
Örnekler: TEXTAREA { background-color: #D4AEBB; scrollbar-shadow-color : Black; scrollbar-highlight-color :#F0DEE5; scrollbar-face-color : #D4AEBB; scrollbar-base-color : black; scrollbar-arrow-color : black;}
13
CSS- Text box Örnekler: style="BORDER-RIGHT: #ffba14 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ffba14 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 6pt; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffba14 1px solid; COLOR: #000080; PADDING-TOP: 1px; BORDER-BOTTOM: #ffba14 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #ffffff"
Benzer bir sunumlar
