••• 

 

CSS Dosyalarının Oluşturulması ve Kullanılması

Style kısmı, ya uygulanacağı sayfada <head></head> tagları arasında bir bölüm olarak yazılır, ya da ayrı bir metin dosyasına yazılarak dosya _.css uzantısıyla kaydedilir ve bu dosyaya link verilir. 1. Sayfada Biçimlendirme Bölümü olarak yazma: <HEAD> <styletype="text/css"> <!-- p { font-family:Verdana; font-size:20pt; font-style:italic; color:0000ff; } --> </style> </HEAD> 2. Ayrı CSS dosyası olarak (style.css) yazılmış dosyaya atıf: <HEAD> <link href="style.css" rel="stylesheet" type="text/css" > </HEAD> <BODY> <p>Buraya bir yazı yaz</p> </BODY> --------------------------------------------------------------------------------------------- BAŞLATAÇLAR VE ADRESLEME (body tagları arasındaki div tagı içerisine yerleştirilir) "this.filters.alpha.opacity='100' " "this.className='aaa' " "bolum.style.visibility ='hidden' " "this.style.background='#ccddcc' " "this.style.color='#FF0000' " onClick="this.className='aaa' " --------------------------------------------------------------------------------------------- CSS ETİKETLERİ 0. SAYFA body.say { margin-top: 0px; margin-left: 0px; margin-bottom: 0px; background-color:#dce6dc; background-image: url(aaa.gif); filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#004040', startColorstr='#008080', gradientType='1'); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000066; } uygulama: <body class="say"> ----------------------------------- 0. LİNKLER a:link { text-decoration:none;color:#87e7ff;} a:visited { text-decoration:none;color:#bf9e7c;} a:hover { text-decoration:none;color:#bdaeff;} a:active { text-decoration:none;color:#bdaeff;} a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #3366CC; text-decoration: underline; font-weight: bold; } a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666; text-decoration: underline; font-size: 12px; font-weight: bold; } a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold; color: #3366CC; text-decoration: underline; } a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #3366CC; font-weight: bold; } ------------------------------- 0.TABLO caption { padding: 0 0 .5em 0; text-align: left; font-size: 1.4em; font-weight: bold; text-transform: uppercase; color: #333; background: transparent; } table, tr, th, td { margin: 0; padding: 0; border-spacing: 0; border-collapse: collapse; } table { width: 650px; border-color: #600; border-width: 0 0 1px 1px; border-style: solid; border-spacing: 0; vertical horizontal15pt border: outset 10pt; border-collapse: collapse; separate; } table.aaa { width: 650px; border:0px solid red; border-collapse:collapse; separate border-spacing: 0; background-color: red; background:#EFF4FB url('images/teaser.gif') repeat-x; border-left:1px solid #686868; border-right:1px solid #686868; border-top: solid border-left:10px solid #600; border-right:0px solid #600; border-top:0px solid #600; border-bottom:10px solid #600; color: #333; font: 70% "Verdana" Helvetica, sans-serif; font-style:normal; font-variant:normal; font-weight:normal; line-height:145%; font-size:0.8em; font-family:Trebuchet MS, helvetica, arial, verdana } Uygulama: <p class="aaa"> tr { border-left:50px solid #888; border-right:200px solid #888; border-top:1px solid #000; border-bottom:0px solid #000; display:table-row; padding:0.5em; background:#fff; margin:2px 25px; width:300px; } td { border-color: #600; border-width: 1px 1px 0 0; border-style: solid; margin: 0; padding: 4px; background-color: #FFC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000066; } td { border: inset 5pt } td.special { border: inset 10pt } /* The top-left cell */ td, th {padding:5px;} h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-style: italic; color: #993333; } ------------------------------------- 0. BÖLÜM (ALAN) DIV { width:100px; height:100px; border: thin solid blue; } DIV.attributed-to { text-align: right; } DIV.center { text-align: center } SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px; } #alan { position:absolute; position:relative; left:663; top:239; width:240; height:345; border:0px solid #fff; margin-top:3; margin-bottom:3; padding:10px; background-color:#C8D2D2; background:url('[resim_art/001.jpg'); font-family:arial,helvetica,sans-serif; font-size:10pt; font-weight: bold; color:888888; } uygulama: <div id="alan"> .fon01 {font-family:Verdana,Arial,sans-serif; color:#223333; font-weight:700; text-decoration:none;} ---------------------------------- 0. PARAGRAF p { font-family:Verdana; font-size:20pt; font-style:italic; color:0000ff; } p.small {line-height: 90%} p.big {line-height: 200%} p.small {line-height: 10px} p.big {line-height: 30px} p.small {line-height: 0.5} p.big {line-height: 2} Uygulama: <p class="small"> ----------------------------------- 0. IFRAME { position:absolute; left:30px; top:317px; width:170px; height:260px; background-color:darkred border-width:0; border-color:#445599; border-style:solid; clip:rect(0,760,760,0); } ____________________________________________________________ 1. GÖLGE: DIV { width:200; height:100; border: thin solid blue; color:#FFaa00; filter:dropshadow(color=#000000, offx=3, offy=2); } 2. SARMA DIV { width:200; height:100; border: thin solid blue; color:#FFaa00; filter:glow (color=#000000, offx=3, offy=2); } 3. BULANIKLIK DIV { width:200; height:100; border: thin solid blue; color:#FFaa00; filter:blur(Strength=20); } 4. DALGA DIV { width:200; height:100; border: thin solid blue; color:#FFaa00; filter:wave(strength=3, freq=3, phase=0, lightstrength=50); } 5. ŞEFFAFLIK: div.aaa { width:200; height:100; border: thin solid blue; color:#FFaa00; filter:alpha(opacity=10); } 6. GİZLİLİK: .aaa { visibility:"visible" } .bbb { visibility:"hidden" } 7. DURUM DEĞİŞTİRME: DIV { width:200; height:100; border: thin solid blue; color:#FFaa00; filter:revealTrans(); } 8. ŞEKİL div.figure { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; } div.figure p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; } Uygulama: <div class="figure"> <p><img src="eiffel.jpg" width="136" height="200" alt="Eiffel tower"> <p>Scale model of the Eiffel tower in Parc Mini-France </div> 9. ŞEKLİN ÖLÇÜLENDİRİLMESİ div.figure { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; } div.figure p { text-align: center font-style: italic; font-size: smaller; text-indent: 0; } img.scaled { width: 100%; } Uygulama: <div class="figure"> <p><img class="scaled" src="st-tropez.jpg" alt="St. Tropez"> <p>Saint Tropez and its fort in the evening sun </div> 10. ÜST TARAFA BAŞLIK KONULMASI div.figure p { display: table-cell; width: 100%; } div.figure p + p { display: table-caption; caption-side: top; } 11. METİNDE SATIRLARIN ORTALANMASI P { text-align: center } H2 { text-align: center } 12. YAZI BLOKLARININ ORTALANMASI P.blocktext { margin-left: auto; margin-right: auto; width: 6em } Uygulama: <P class="blocktext">This rather... 13. RESİMLERİN ORTALANMASI IMG.displayed { display: block; margin-left: auto; margin-right: auto } Uygulama: <IMG class="displayed" src="..." alt="..."> 14. DÜŞEY ORTALAMA DIV.container { min-height: 10em; display: table-cell; vertical-align: middle } Uygulama: <DIV class="container"> <P>This small paragraph... </DIV> 15. GÖLGE DÜŞÜRME (CSS3) body {background: #9db} div.back {background: #576} div.section {background: #ffd} div.back {padding: 1.5em} div.section {margin: -3em 0 0 -3em} div.back {margin: 3em 0 3em 5em} div.section {border: thin solid #999; padding: 1.5em} Uygulama: <div class=back> <div class=section> <h2>Die Rose duftet - doch ob sie empfindet</h2> <address>Heinrich Heine (1797-1856)</address> <p>Die Rose duftet - doch ob sie empfindet<br> ... </div> </div> 16. YAZI GÖLGELEME (CSS3) h3 { text-shadow: red 0.2em 0.3em 0.2em } h3 {text-shadow: 0.1em 0.1em #333} h3.a {text-shadow: 0.1em 0.1em 0.05em #333} h3.b {text-shadow: 0.1em 0.1em 0.2em black} h3 {color: white} h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em} h3.a {text-shadow: -1px -1px white, 1px 1px #333} h3.b {text-shadow: 1px 1px white, -1px -1px #333} 17. YUVARLAK KENARLAR (CSS3) P { border: solid thick red; border-radius: 1em } 18. GÖLGELİ KUTULAR (CSS3) P { box-shadow: black 0.5em 0.5em 0.3em } 19. GÖRÜNTÜ VE KUTULARIN YERLEŞTİRİLMESİ (CSS3) blockquote { max-width: 620px; background: url(rs-right.png) right repeat-y } blockquote::before { display: block; line-height: 0; background: url(rs-topright.png) top right no-repeat; content: url(rs-topleft.png) } blockquote::after { display: block; line-height: 0; background: url(rs-bottomright.png) bottom right no-repeat; content: url(rs-bottomleft.png) } Uygulama: <blockquote> <p>Burada gölgelenmiş yeşil bir kutu görüyorsunuz </blockquote> 20. YERLEŞTİRME #overlay {position: absolute; top: 50px; left: 50px; height: 100px; width: 100px; border: thin solid red;} Uygulama: <DIV id="overlay">Here is a block of text that will cause this element to exceed its declared height of 100 pixels. </DIV> 21. KIRPMA P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); } 22. GÖRÜNÜRLÜK #container1 { position: absolute; top: 2in; left: 2in; width: 2in} #container2 { position: absolute; top: 2in; left: 2in; width: 2in; visibility: hidden; } Uygulama: <DIV id="container1"> <IMG alt="Al Capone" width="100" height="100" src="resim.jpg"> <P>Name: Al Capone</P> <P>Residence: Chicago</P> </DIV> <DIV id="container2"> <IMG alt="Lucky Luciano" width="100" height="100" src="resim.jpg"> <P>Name: Lucky Luciano</P> <P>Residence: New York</P> </DIV> 23. ARTALAN a.background-color H1 { background-color: #F00 } EM { color: red } EM { color: rgb(255,0,0) } b.background-image BODY { background-image: url(marble.gif) } P { background-image: none } c.background-repeat BODY { background: red url(pendant.gif); background-repeat: repeat-y; } d.background-attachment BODY { background: red url(pendant.gif); background-repeat: repeat-y; background-attachment: fixed; } e.background-position BODY { background: url(banner.jpeg) right top } /* 100% 0% */ BODY { background: url(banner.jpeg) top center } /* 50% 0% */ BODY { background: url(banner.jpeg) center } /* 50% 50% */ BODY { background: url(banner.jpeg) bottom } /* 50% 100% */ BODY { background-image: url(logo.png); background-attachment: fixed; background-position: 100% 100%; } f.background BODY { background: red } P { background: url(chess.png) gray 50% repeat fixed } 24. FONTLAR font-face { src: local(Palatino), local(Times New Roman), url(http://somewhere/free/font); font-family: serif; font-weight: bold, 100, 200, 300, 400, 500; font-style: normal; font-variant: normal; font-size: all } 25. YAZILAR DIV.center { text-align: center } A:link, A:visited, A:active { text-decoration: underline } H1 { text-shadow: 0.2em 0.2em } H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px; } BLOCKQUOTE { letter-spacing: 0.1em } BLOCKQUOTE { letter-spacing: 0 } BLOCKQUOTE { letter-spacing: 0cm } H1 { word-spacing: 1em } H1 { text-transform: uppercase } PRE { white-space: pre } P { white-space: normal } 26. FARE P { cursor : text url(mything.cur) } P { color: windowtext; background-color: window } ________________________________________________________________ BAŞARILI BAZI UYGULAMALAR ... body.say { margin-top: 0px; margin-left: 0px; background-color:#dce6dc; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12pt; color:#000080 } Uygulama: #fon { position:absolute; left:0px; top:0px; width:300px; height:1400px; } Uygulama:
.h1 { position:absolute; left:0px; top:0px; width:300px; height:130px; font-family: Monotype Corsiva, Liffey Script SF, Handscript SF, Ancestory SF; font-size:12pt; color:#ffffff } Uygulama:
#pen { position:absolute; left:230px; top:200px; width:600px; height:1000px; border:0px; } #kutu_kose { position:absolute; left:0px; top:0px; width:30px; height:30px; } #kutu { position:relative; marginleft:50px; margintop:0px; width:120px; height:30px; border:1px solid #008080; padding:0px; font-family:arial,helvetica,sans-serif; font-size:10pt; font-weight: bold; color:888888 } #cubuk { position:absolute; left:15px; top:150px; width:965px; height:33px; padding:0px; font-family:arial,helvetica,sans-serif; font-size:10pt; font-weight: bold; color:888888 } #alanweb { position:absolute; left:30px; top:300px; width:170px; height:565px; border:2px solid #A6B5AB; background-color:#006060; filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5); } #kutucuk { position:relative; margin-top:3px; margin-bottom:3px; width:140px; height:22px; padding:8px; background-color:#C8D2D2; font-family:arial,helvetica,sans-serif; font-size:10pt; font-weight: bold; color:888888; } KAYNAKLAR http://icant.co.uk/csstablegallery/ http://blog.sekopeko.com/Etiket/css-table-galeri http://www.tizag.com/cssT/ (CSS Tutorial)