1 / 13

CSS

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ı. CSS. Satır İçi Stiller Tek bir etikete uygulanacağı zaman kullanılır. Örnek :

ria-phelps
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 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; font-size:10pt; zoom : 92%; display : block; line-height:16px; text-align : center; background-color : #F0DEE5; border :inset 3px #CC3366; text-decoration:none;} Örnek 1: a:hover {background-color : #1E90FF;text-decoration :none;}

  7. CSS- List Örnekler: OL {list-style-type : lower-alpha;} OL {list-style-type : upper-roman;} UL {list-style-type : square;} UL {display : block;}

  8. CSS- Font Örnekler: TD { font-family :Arial; } TD { font-size :12px;} TD {font-variant :small-caps; }

  9. CSS- Text Ö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ç Örnekler: td {cursor :crosshair;} td {cursor :move;} td {cursor :wait;} td {cursor :help;}

  11. CSS- tablo Ö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 Ö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"

More Related