Konular

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.

CSS türleri üç tanedir: Yerel CSS, Genel CSS ve Harici CSS

1.Yerel Stil Şablonu

Yerel stil şablonları HTML belgesinin body bölümüne yazılırlar. Sadece bir kereliğine, yazıldıkları yerde etkili olurlar.

<html>
<head>
<title>Yerel CSS</title>

</head>
<body>
<h1>Sezen</h1>
<h1 style="color:teal ;font-size:15">Sezen</h1>

</body>
</html>

CSS stillerinin nesneyi etkileme yolları ve sırası, , ., , class CSS de neyi ifade eder.

2.Genel Stil Şablonu

Yerel Stil şablonlarının aksine genel şablonlar, HTML belgesinin head bölümüne yazılırlar ve belgenin tümünü etkilerler.

<head>
<title>Genel CSS</title>

<style type="text/css">
<!--
h1 {color:teal; font-size:15}
-->

</style>
</head>
<body>
<h1>Sezen</h1>
<h1>Sezen</h1>
<h1>Sezen</h1>
</body>
</html>

 

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.

3.Harici Stil Şablonları

CSS 'in sizi büyük bir yükten, yani her sayfa için ayrı ayrı kod yazmaktan kurtaran türü harici stil şablonlarıdır. Bu teknikte önce bir stil dosyası oluşturulur, sonra bu stilin kullanılacağı sayfaların başında çağırılır. Aşağıdaki örneğe bakarak bu tekniği daha iyi anlayabilirsiniz.

Bu kodları stil1.css adıyla kaydedin

h1 {font-size:15; color:teal}
h2 {font-size:25; color:silver}
h3 {font-size:35; color:red}


Sonra bu HTML kodlarını yazıp stil1.css ile aynı dizine kaydedin.

<html>
<head>
<title>Harici CSS </title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv= Content-Type>
<link rel="stylesheet" type="text/css" href="stil1.css">
</head>
<body>
<h1>
Sezen</h2>
<h2>
Sezen</h2>
<h3>
Sezen</h2>
</body>
</html>

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.

 

# ,( .), *, Class Css De Neyi İfade Eder.

# Id Selectors(Id Seçicileri)

Sınıf seçicileri head bölümünde tanımlanırlar. Seçicinin keyfi isminin başına Sharp(#) işareti konur, ve takip eden köşeli parantezlerin arasına stil özellikleri yazılır.

<html>
<head>
<title>Id secicileri</title>

<style type="text/css">
<!--
#idSecici
{
background:teal;
color:white;
font-weight:bold;
font-family:arial;
}
-->

</style>
</head>
<body>
<div id=idSecici>Sezen</div>
</body>
</html>

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.

( .)  Class Selectors(Sınıf Seçicileri)

Orneğin bir <h1> etikti tanımladınız, fakat sayfanın bazı yerlerinde bu etiketin 'color' parametresinin değeri 'red' olsun, fakat geri kalanlar aynı kalsın istiyorsunuz. Bunu sınıf seçicileriyle yapabilirsiniz.

<html>
<head>
<title>Sinif secicileri</title>

<style type="text/css">
<!--
h1 {
background:teal;
color:white;
font-weight:bold;
font-family:arial;
}
h1.kirmizi{color:red}
-->

</style>
</head>
<body>
<h1>Sezen</h1>
<h1 class="kirmizi">Sezen</h1>
</body>
</html>


Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.

 

Yorumunuzu Ekleyin

CSS ile Web Sayfası Oluşturma

CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.

70,793 Okunma 3 Yorum 11/07/2007 16:49:40 31/05/2014 16:50:32

Css İle Hizalama İşlemleri

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.

55,892 Okunma Henüz yorum yapılmamış 10/07/2007 19:48:11 29/12/2013 15:02:02

CSS Konumlandırma (Position)

CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.

26,239 Okunma Henüz yorum yapılmamış 09/07/2007 18:20:40 29/12/2013 14:47:24

CSS ile Content Menü Yapımı

İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı

26,112 Okunma Henüz yorum yapılmamış 27/01/2010 04:22:34

CSS’i Web Sayfalarına Eklemek

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value)

24,947 Okunma 1 Yorum 12/07/2007 18:42:48

CSS Seçicileri

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

23,478 Okunma Henüz yorum yapılmamış 05/09/2007 23:01:25

Internet Explorer Koşullu İşlemleri

Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.

22,610 Okunma Henüz yorum yapılmamış 17/02/2010 01:08:14

CSS ile yazıcı çıktı işlemleri

Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır

21,738 Okunma Henüz yorum yapılmamış 11/07/2007 00:05:06

CSS te kullanılan 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 boyutlarını en aza indirmiş oluruz

19,774 Okunma Henüz yorum yapılmamış 11/07/2007 00:16:08

Pseudo-sınıfları ve Pseudo-elementleri

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi. )

19,082 Okunma Henüz yorum yapılmamış 12/07/2007 19:42:06

(X)HTML Döküman Hiyerarşisini Anlamak

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

19,034 Okunma Henüz yorum yapılmamış 09/07/2007 00:11:42

Şerit Halindeki Resimden Bölümler Almak

Sitelerin yüklenme hızını arttıran ve template yapısına uygun olmasını sağlayan CSS özelliği hakkında bir makale

18,874 Okunma 1 Yorum 22/02/2008 09:18:59

CSS Classları Hakkında

Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale

18,748 Okunma Henüz yorum yapılmamış 05/09/2007 01:49:34

Özellik Seçicileri(Attribute Selectors)

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri

18,243 Okunma Henüz yorum yapılmamış 09/07/2007 14:20:52

Yükleniyor...