CSS Öğreniyorum - CSS'de Kısaltmalar

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0L_XbaUv-2L_KZOQ3NJTp2Ncd1lmcgP1a1BIOhxKhsfTTbjxS6vV-5-Za-PjFJzwUOasMrm0DcUgyiXM9DAysniwxzA7zFCnReVhAZYczzL_of5KukGH1zSDdKIxr6fgLRElfczYGITY/s1600/css.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0L_XbaUv-2L_KZOQ3NJTp2Ncd1lmcgP1a1BIOhxKhsfTTbjxS6vV-5-Za-PjFJzwUOasMrm0DcUgyiXM9DAysniwxzA7zFCnReVhAZYczzL_of5KukGH1zSDdKIxr6fgLRElfczYGITY/s1600/css.png" width="320" /></a></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz.</div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><u><span style="color: #134f5c;"><br /></span></u></h2><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><u><span style="color: #134f5c;"><br /></span></u></h2><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><u><span style="color: #134f5c;"><br /></span></u></h2><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><u><span style="color: #134f5c;"><br /></span></u></h2><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><u><span style="color: #134f5c;">1. Font</span></u></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Normalde bir font tanımlarken 4 adet CSS kodu kullanılır: </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font-weight</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">bold</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font-family</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">verdana</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">sans-serif</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font-size</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">11px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">line-height</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">15px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Kısaltma olarak kullanlan kod ise tek satır: </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">bold</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">11px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/</span><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">15px</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">verdana</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">sans-serif</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><u><span style="color: #cc0000;">2. Background</span></u></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebilriz. </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-color</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nf" style="background-color: transparent; border: 0px; color: #a6e22e; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#000</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-image</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">url</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ard</span><span class="nc" style="background-color: transparent; border: 0px; color: #a6e22e; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.jpg</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">);</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-repeat</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">no-repeat</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-attachment</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">fixed</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-position</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">50px</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">50px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Kısaltırsak: </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{</span> <br /> <span class="m" style="background-color: transparent; border: 0px; color: #ae81ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#000</span> <span class="sx" style="background-color: transparent; border: 0px; color: #e6db74; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">url(ard.jpg)</span> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">no-repeat</span> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">fixed</span> <span class="m" style="background-color: transparent; border: 0px; color: #ae81ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">50px</span> <span class="m" style="background-color: transparent; border: 0px; color: #ae81ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">50px</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><br /></pre></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #783f04;"><u>3. Renkler(Hex-decimal)</u></span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color: #ff0000;</strong> kırmızı. Renkler 6 karakterle gösterilsede bir çok renk(web tabanlı) 3 karakterin tekrarlanması ile oluşturulur. Örneğin, kırmızı'nın hex-decimal kodunun kısaltırsak <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color: #f00;</strong>. Buradaki her karakter hex-decimal koddaki iki karaktere karşılık gelmektedir. Mesela, beyaz renk kullanacağınızda, <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color: white;</strong> veya <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color: #ffffff;</strong> kulanımı önermeyiz. Kısaltılmış olanı <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color: #fff;</strong> kullanmanız daha avantajlıdır.</div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><u><span style="color: #660000;">4. Border</span></u></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Kenarklık tanımlamalarında her özellik için bir tanımlama yapılır. örnek olarak bir elementin üst kenarına atama yapmak için: </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border-top-width</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border-top-style</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">dashed</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border-top-color</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nf" style="background-color: transparent; border: 0px; color: #a6e22e; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#f00</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Kısaltırsak: </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border-top</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2px</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">dashed</span> <span class="nf" style="background-color: transparent; border: 0px; color: #a6e22e; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#f00</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Bu özellikleri tüm kenarlara uygulmak için: </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">border</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2px</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">dashed</span> <span class="nf" style="background-color: transparent; border: 0px; color: #a6e22e; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">#f00</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #4c1130;"><u>5. Margin ve Padding'ler</u></span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Margin ve paddingler de normal tanımlama şöyledir:</div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin-top</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">10px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin-right</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">5px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin-bottom</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">20px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin-left</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">15px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">kıslatılmış hali: </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">10px</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">5px</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">20px</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">15px</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Burada öznitelikler sağdan başlayarak saat yönünde devam eder. Aşağıda çeşitli kısaltma yöntemleri birlikte verilmiştir:</div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">4 Değer:</strong> (<em style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin: 20px 15px 10px 5px;</em>) birinci - üst, ikinci - sağ, üçüncü - alt, dördüncü - sol.</div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">3 Değer:</strong> (<em style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin: 20px 15px 10px;</em>) birinci - üst, ikinci - sol ve sağ, üçüncü - alt. <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2 Değer:</strong>(<em style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin: 20px 15px;</em>) birinci - üst ve alt, ikinci - sol ve sağ. <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">1 Değer:</strong> (<em style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">margin: 10px;</em>) birinci - üst, sağ, alt ve sol</div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #0c343d;"><u>6. Listeler</u></span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Liste tanılmalrında da kısaltmalar mümkündür </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ul</span> <span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{</span> <br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">list-style-type</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">square</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">list-style-position</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">inside</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">list-style-image</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="sx" style="background-color: transparent; border: 0px; color: #e6db74; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">url(image.png)</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Kısaltırsak;</div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ul</span> <span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">li</span> <span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{</span> <br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">list-style</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">square</span> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">inside</span> <span class="sx" style="background-color: transparent; border: 0px; color: #e6db74; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">url(image.png)</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span> <span class="c" style="background-color: transparent; border: 0px; color: #75715e; font-style: italic; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/* burda özel bir durum vardır eğer resim yoksa yedek olarak square özelliği gösterilecektir. */</span><br /></pre></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #274e13;"><u>7. Sıfır '0' ın Kısaltma Olarak Kullanılması</u></span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Kısaltmalarda son olarak '0' ın kullanımına değineceğiz. Normalde bir elemente değer ataması yapılırken değerin yanına birimi de yazılır(örn: 3px, 0.2em vd.), Ancak sıfır '0' için bu zorunlu değilidir. </div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">padding</span><span class="nd" style="background-color: transparent; border: 0px; color: #a6e22e; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:0</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama yapılırken <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">0% </strong>olarak atama yapılmalıdır.</div><div class="rmzndgn">Benzer Aramalar: CSS Öğreniyorum, CSS'de Kısaltmalar, Kısaltmalar, Css 2.0, CSS Kodları,</div>

CSS Öğreniyorum - CSS'de Kısaltmalar

CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutl...

Devamı »

CSS Öğreniyorum - CSS Birimleri

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpm9MdsdOWlmi6gzsXhdq4MBmvdcHiRdkqqNA2UZ4NMhEmL9jyNte_bmaZSxiO8O2Yf-bKcAlfYEiMK9iMbyyxrSvVhwKfPJjhLM2n8RMSM4l98ga-NjE2vbzA8ytAsBlFGLjn_6Y59k/s1600/css.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpm9MdsdOWlmi6gzsXhdq4MBmvdcHiRdkqqNA2UZ4NMhEmL9jyNte_bmaZSxiO8O2Yf-bKcAlfYEiMK9iMbyyxrSvVhwKfPJjhLM2n8RMSM4l98ga-NjE2vbzA8ytAsBlFGLjn_6Y59k/s1600/css.png" width="200" /></a></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: x-small;">Birimler genelde mesafe ve renkleri tanımlamak için kullanılır.</span><span style="font-size: x-small;">Birimleri dört gruba ayırabiliriz.</span><span style="font-size: x-small;"> </span><strong style="background-color: transparent; border: 0px; font-size: small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">uzunluk</strong><span style="font-size: x-small;"> </span><span style="font-size: x-small;">birimleri,</span><span style="font-size: x-small;"> </span><strong style="background-color: transparent; border: 0px; font-size: small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">yüzde</strong><span style="font-size: x-small;"> </span><span style="font-size: x-small;">birimleri,</span><span style="font-size: x-small;"> </span><strong style="background-color: transparent; border: 0px; font-size: small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">renk</strong><span style="font-size: x-small;"> </span><span style="font-size: x-small;">birimleri ve </span><strong style="background-color: transparent; border: 0px; font-size: small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">URL</strong><span style="font-size: x-small;"> </span><span style="font-size: x-small;">birimleri</span></div><h2 style="background-color: white; border: 0px; color: #000305; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"></h2><h2 style="background-color: white; border: 0px; color: #000305; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"></h2><div><br /><br /><br /><br /></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #660000;"><br /></span></h2><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #660000;">Uzunluk Birimleri</span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">CSS'de tanımlanan 8 uzunluk birimi vardır. Bunların üç tanesi göreceli(relative) uzunluklar ve kalan beş tanesi kesin(absolute) uzunluklardır.</div><h3 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 1.529em; font-weight: 400; line-height: 1.1; margin: 0.8em 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #38761d;">Göreceli Uzunluklar</span></h3><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Bu birimler diğer uzunluk birimlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve çıktısının alındığı durumlarda bu uzunluk birimlerini kullanmamız bize avantaj sağlayacaktır.</div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b><span style="font-size: large;">em:</span></b></span><span style="font-size: 19px;"> Ana elementin font boyunun (font-size) değerine göre hesaplanarak bulunur. Yani body elemanında varsayılan yazı tipi büyüklüğünüze (font-size) bağlı büyüme-küçülme gösteren ölçülerdir. em varsayılan font büyüklüğünde ve font ailesinde (font-family) yer alan "M" harfinin genişliğini baz almasıdır.</span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">ex:</span></strong><span style="font-size: 19px;"> Elementin "x" harfinin yüksekliğidir. Atanmış olan fontun küçük "x" değeri yüksekliğidir.</span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">px:</span></strong><span style="font-size: 19px;"> piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Burdaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.</span></div><h3 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 1.529em; font-weight: 400; line-height: 1.1; margin: 0.8em 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #990000;">Kesin Uzunluklar</span></h3><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Bu uzunluklar gerçek hayatta kullanılan birimlerdir.</div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">in:</span></strong><span style="font-size: 19px;"> inç. 1 inch=2,54 cm'dir. Örn: line-height:0.5in</span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">cm:</span></strong><span style="font-size: 19px;"> Santimetre. Bizim gerçek hayatta kullandığımız santimetere değeridir. Örnek: margin:2cm</span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">mm:</span></strong><span style="font-size: 19px;"> Milimetre. Bizim gerçek hayatta kullandığımız milimetere değeridir. Örnek: letter-spacing:1mm</span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">pt:</span></strong><span style="font-size: 19px;"> Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt</span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">pc:</span></strong><span style="font-size: 19px;"> Pika. Bir inçin altıda birine eşit olan bir baskı ölçü birimi. Bir pika 12 noktaya bölünür. Örnek: font-size:2pc</span></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #990000;">Yüzde Birimleri</span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir.</div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"> <span class="c" style="background-color: transparent; border: 0px; color: #75715e; font-style: italic; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/* elementin font-size değerinin %150 si dir */</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">h4</span> <span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{</span> <br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">line-height</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="m" style="background-color: transparent; border: 0px; color: #ae81ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">150</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">%</span> <br /><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><br /><span class="c" style="background-color: transparent; border: 0px; color: #75715e; font-style: italic; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/* satır genişliğinin 10% nu */</span><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">p</span> <span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{</span> <br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">text-indent</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="m" style="background-color: transparent; border: 0px; color: #ae81ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">10</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">%</span> <br /><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span><br /></pre></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #990000;">Renk Birimleri</span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">CSS'de renk değerleri isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlamasıda dört çeşittir.</div><h3 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 1.529em; font-weight: 400; line-height: 1.1; margin: 0.8em 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #0c343d;">Renk İsimleri</span></h3><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Renklerin ingilizce isimleri kullanılarak tanımlama yapılabilir.</div><div class="codehilite" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; color: white; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">p</span> <span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{</span><br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="nb" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">black</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span> <br /><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span> <span class="c" style="background-color: transparent; border: 0px; color: #75715e; font-style: italic; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/* renk tanımı siyah olarak yapılıyor*/</span><br /><br /><span class="nt" style="background-color: transparent; border: 0px; color: #f92672; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">h1</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{</span> <br /> <span class="k" style="background-color: transparent; border: 0px; color: #66d9ef; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">background-color</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:</span> <span class="nb" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">red</span><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">;</span><br /><span class="p" style="background-color: transparent; border: 0px; color: #f8f8f2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">}</span> <span class="c" style="background-color: transparent; border: 0px; color: #75715e; font-style: italic; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/* h1 başlığının ardalanı kırmızı tanımlanıyor */</span><br /></pre></div><h3 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 1.529em; font-weight: 400; line-height: 1.1; margin: 0.8em 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #cc0000;">RGB Renk Değerleri</span></h3><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">CSS'de renk tanımlamak için kullanılan asıl yöntem budur. RGB tanımlamanında dört çeşidi vardır.</div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">#RRGGBB :</span></strong><span style="font-size: 19px;"> Burada, </span><strong style="background-color: transparent; border: 0px; font-size: 19px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">RR</strong><span style="font-size: 19px;">, </span><strong style="background-color: transparent; border: 0px; font-size: 19px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">GG</strong><span style="font-size: 19px;">, ve </span><strong style="background-color: transparent; border: 0px; font-size: 19px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">BB,</strong><span style="font-size: 19px;">sırasıylakırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)</span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">#RGB:</span></strong><span style="font-size: 19px;"> Yukardaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup değerleri birleştirilir. Örnek: color:f00; (kırmızı)</span></div><div color:="color:" rgb="" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">rgb(R,G,B):</span><span style="font-size: 19px;"> </span></strong><span style="font-size: 19px;">Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek h1</span></div><div color:="color:" rgb="" style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">rgb(R%,G%,B%):</span><span style="font-size: 19px;"> </span></strong><span style="font-size: 19px;">Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1</span></div><h2 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 2em; font-weight: 400; line-height: 1.1; margin: 0px 0px 0.2em; outline: 0px; padding: 0.3em 0px 0px; vertical-align: baseline;"><span style="color: #cc0000;">URL Değerleri</span></h2><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">URL tanımlaması için aşağıdaki gib bir tanımlama yapılır.</div><div class="codehilite" style="background-color: white; border: 0px; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin: 0px 0px 12px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="background-color: #333333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; outline: 0px; overflow: auto; padding: 10px; vertical-align: baseline;"><span style="color: #3d85c6;"><span class="nt" style="background-color: transparent; border: 0px; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">url</span><span class="o" style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">(/</span><span class="nt" style="background-color: transparent; border: 0px; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">images</span><span class="o" style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">/</span><span class="nt" style="background-color: transparent; border: 0px; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">kucuk</span></span><span class="nc" style="background-color: transparent; border: 0px; color: #a6e22e; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.gif</span><span class="o" style="background-color: transparent; border: 0px; color: #f92672; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">)</span><span style="color: white;"><br /></span></pre></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Burada tırnaksız ve tek tırnaklı kullanımları da standarda uygundur.</div><div style="background-color: white; border: 0px; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: Cuprum, arial, serif; font-size: 1.529em; line-height: 1.1;"><span style="color: #274e13;">Açı Değerleri :</span></span></div><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">deg</strong>(derece), <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">grad</strong>(gradyen) ve <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">rad</strong>(radyan) Örnek: -90deg, 100grad ve 1.57rad</div><h3 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 1.529em; font-weight: 400; line-height: 1.1; margin: 0.8em 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #274e13;">Zaman Değerleri:</span></h3><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">milisaniye (<strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ms</strong>) ve saniye (<strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">s</strong>) Örnek : 100ms ve 0.1s</div><h3 style="background-color: white; border: 0px; font-family: Cuprum, arial, serif; font-size: 1.529em; font-weight: 400; line-height: 1.1; margin: 0.8em 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #073763;">Frekans Değerleri:</span></h3><div style="background-color: white; border: 0px; color: #000305; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 19px; line-height: 27px; margin-bottom: 1.143em; outline: 0px; padding: 0px; vertical-align: baseline;">Herz(<strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Hz</strong>) ve MegaHerz(<strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">mHz</strong>) Örnek: 10mHz</div><div class="rmzndgn">Benzer Aramalar: CSS Birimleri, CSS, CSS 2.0, Renkler, Css Kodları,</div>

CSS Öğreniyorum - CSS Birimleri

Birimler genelde mesafe ve renkleri tanımlamak için kullanılır. Birimleri dört gruba ayırabiliriz.   uzunluk   birimleri,   yüzde   birimler...

Devamı »