ÜNİTE ÜNİTE. WEB TASARIMININ TEMELLERİ Mehmet CANCAN İÇİNDEKİLER HEDEFLER CSS 3

(1)

ÜNİTE

7 CSS 3

WEB TASARIMININ TEMELLERİ

Mehmet CANCAN

İÇİ NDEKİLE R

• CSS Nedir?

• CSS Sözdizimi

• CSS Seçiciler, Sözde Sınıf Seçiciler ve Özellikler

• Animasyon Özellikleri

• Arka Plan ve Renk Özellikleri

• Kenarlık Özellikleri

• Boyut Özellikleri

• Yazı Tipi Özellikleri

• Liste Özellikleri

• Dış Kenar ve İç Kenar Boşluk Özellikleri

• Çok Sütunlu Düzen Özellikleri

• Tablo Özellikleri

• Metin ve İçerik Özellikleri

• Dönüştürme Özellikleri

• Geçiş Özellikleri

• Görsel Biçimlendirme Özellikleri

• CSS Animasyonlar

HEDE FL ER

• Bu üniteyi çalıştıktan sonra;

• Temel CSS bilgisi edinilebilecek,

• İnternet sayfalarına görsel özellikler kazandırabilecek,

• jQuery ve flash gibi teknolojiler ihtiyaç duymadan animasyon geliştirebileceksiniz.

ÜNİTE

1

(2)

CSS

Sözdizimi Seçiciler

Evrensel (*)

Basit (<a>)

Sınıf (.)

Kimlik (#)

Sözde Sınıf Seçicileri

Link,hover,active,visited

Target, Focus,Checked

Disabled, Enabled, Read- only

Required, Valid, Invalid

First-child, Last-child, Only-child

Özellikler

Animasyon, Arka Plan ve Renk, Kenarlık, Boyut

Yazı Tipi, Liste, Dış Kenar ve İç Kenar Boşluk

Çok Sütunlu Düzen, Tablo, Metin ve İçerik,

Dönüştürme

Geçiş, Görsel Biçimlendirme

Animasyonlar

(3)

GİRİŞ

Sadece HTML kullanarak bir internet sayfası oluşturulabilir, fakat bu sıvası yapılmamış bir binaya benzer. CSS burada devreye girer verdiğimiz örnekte binanın sıvasını ve dış kaplamasını yaparak insanların yani kullanıcıların gözüne güzel görünmesini sağlar.

CSS; işlevselliği ve çok yönlülüğü artırmak için kullanılan bir stil verme dilidir.

CSS temel olarak HTML elementlerinin görüntüleri üzerinde değişiklik yapmak için kullanılır. Örneğin renkleri, kenarlık boyutlarını, gölgeleri, yüksekliği gibi

parametreleri değiştirmeyi sağlar. Belirli bir kurala göre yazılan stil dosyaları, zengin içerikli internet sayfalarının oluşturulmasına olanak tanır. Ayrıca Web sayfaları için etkileşimli görsel öğeler CSS ile tasarlanabilir.

CSS3 teknolojisi; CSS’de kullandığımız birçok özelliğin animasyonla yapılmasıdır. Örneğin kenarlık renginin bir değerden başka bir değere geçişini efekt ile gerçekleştirir. Bu yüzden CSS ile oluşturulan internet sayfalarındansa, CSS3 ile oluşturulan sayfaların albenisi daha fazladır.

CSS3 tek başına web geliştirme çözümü olmasa da birkaç nedenden dolayı daha büyük avantajlar sağlar. Bunları; özelleştirme, bant genişliği gereksinimleri, tutarlılık, cezbedici, görüntüleme, görünürlük ve uygun maliyet olarak

tanımlayabiliriz.

CSS3'ün yaygınlaşan kullanımı, Google Chrome, Firefox, Safari ve Internet Explorer gibi büyük tarayıcıları bu stil dilini benimsemeye ve benimsetmeye teşvik ediyor.

Bu ünitede de CSS sözdizimi, seçiciler, özellikler ve kullanımlarını anlatacağız. Bu bilgilerle bir internet sayfasında HTML elementlerine CSS ile biçimlendirme örnekleri ve CSS3 animasyon nasıl oluşturulur bunlara yer vereceğiz.

CSS NEDİR?

CSS, İngilizce Cascade Style Sheet kelimelerinin kısaltılmasıdır. Temel olarak, HTML elementlerini biçimlendirmek için kullanılır. Örneğin <h1> etiketinin

içerisine yazılmış olan metnin yazı tipi, boyutu, rengi gibi birçok biçimsel özellik CSS ile belirlenebilir. Kısacası CSS, bir internet sitesinin tasarımsal açıdan daha etkileyici görünmesini kolaylaştıran bir işaretleme dilidir. HTML büyük ölçüde metin içeriğini belirlerken, CSS görsel yapıyı, düzeni ve estetiği belirler.

CSS, sanılanın aksine eskilere dayanan bir işaretleme dilidir. İlk kez 1994 yılında, Cern şehrinde Tim Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Daha sonrasında W3C adını alan, çeşitli forum sitesi ve posta listelerinde yapılan birkaç farklı tarz sayfası dili taslağını da göz önünde bulundurarak, 1996 senesinde ilk CSS önerisi sunulmuştur. İnternetin gelişimiyle de 1998’de CSS’in 2. sürümü sunulmuştur. Günümüzde ise Css’in 3.sürümü kullanılmaktadır.

(4)

CSS SÖZDİZİMİ

Bir CSS stil sayfasında, bir dizi stil tanımının bir araya gelerek oluşturduğu tanımlardır. Her stil tanımının iki ana bileşeni vardır. Seçici ve deklarasyon

Seçici: CSS ile stil vermek istediğiniz öğeleri tanımlamak için kullanılır. Her biri kendi benzersiz sözdizimine sahip birçok farklı CSS seçici türü vardır. Bunlar, tarayıcıya CSS özellik değerlerinin hangi öğelere uygulanacağını bildirir.

Deklarasyon: Seçilen öğenin nasıl biçimlendirileceğini belirtir. Noktalı virgül ile ayrılmış, özellik ve değer çiftlerinden oluşur. Bu özellikler CSS özellikleridir, değer ise özelliklerin alabileceği değerlerdir.

Seçici {Özellik: Değer;}

Deklarasyon = {Özellik: Değer;}

p { font-size: 15px; color:#fa4b2a; background:#eee;}

CSS SEÇİCİLER, SÖZDE SINIF SEÇİCİLER VE ÖZELLİKLERİ

İnternet sayfasını oluşturan HTML kodları ile yazılmış bir sayfanın barındırdığı elementler CSS ile biçimlendirilebilir. Tarayıcılar tarafından yorumlanan CSS satırları ayrı ayrı işlenmektedir. Bu nedenle CSS içerisinde bir satırda yazılan yanlış tanımlama bir diğer satırın yorumlanmasını engellemez.

HTML elementlerini biçimlendirmek için kullanılan tanımlamalara

“seçiciler”, sınıf olmayan fakat sınıf gibi davranış gösteren seçicilere “sözde sınıf seçiciler” ve seçilen elemente dair stil tanımlamalarına “özellikler” adı verilir.

Seçiciler ve stil tanımlamaları birlikte kullanılır, bu kullanım CSS’in yapısını oluşturulur.

CSS Seçiciler

CSS'de seçicileri kullanmanın iki yolu vardır. Birincisi HTML ve CSS tek bir dokümandaysa, web sayfasının <head> bölümüne <stayle> etiketi arasına CSS seçicileri eklenmesi yeterlidir. Diğeri ise HTML ve CSS dosyaları ayrı belgelerde de tutulabilir. Bu durumda, index.html etiketli bir HTML belgesi ve style.css etiketli bir CSS dosyası olabilir. index.html dosyası, bu stillerin web sayfasını oluşturulabilmesi için CSS dosyasına başvuran bir kod satırı içermelidir. Bu metotlardan yaygın olarak kullanılanı <link> etiketi kullanılarak yapılan entegre işlemidir.

Bir CSS seçicisi tarafından hedeflenen öğe veya öğeler, "seçicinin konusu"

olarak adlandırılır. Öğe türü, sınıfı, kimlik adı, verilen özniteliği veya sözde durumuna göre bir konu seçilebilir.

Evrensel seçici

Yıldız işareti (*), CSS'de ki evrensel seçicidir. Varsayılan olarak, bir belgedeki tüm öğeleri seçer. Evrensel seçiciyi yalnızca o ad alanında ki öğelerle sınırlamak için tanımlı bir ad alanı kullanılabilir. Evrensel seçicinin sözdizimi şöyledir:* veya

*|* {stil özellikleri}, başlık|* {stil özellikleri}

Özellik adı ve değeri iki nokta üst üste (:) ile ayrılır noktalı virgül (;)

ile biter.

(5)

Evrensel seçici örneği şöyle olabilir (Resim 7.1.):

<!DOCTYPE html>

<head>

<title>Ünite 7</title>

<style>

*{ color: orange; } </style>

</head>

<body>

<p>Atatürk Üniversitesi Açıköğretim Fakültesi</p>

<span>Web Tasarımının Temelleri</span>

</body>

</html>

Resim 7.1. Evrensel Seçici Örneği

Basit (etiket) seçici

Bir basit seçici, belirli bir nesne adına sahip tüm HTML öğelerini seçer.

Örneğin, "a", tüm <a> öğelerini seçer ve bunlara CSS özellik değerlerini uygular.

“p” tüm <p> öğelerini seçer, “span” tüm <span> öğeleri gibi. Ayrıca, basit seçiciyi yalnızca o ad alanındaki öğelerle sınırlamak için tanımlı bir ad alanı kullanılabilir.

Basit seçicinin sözdizimi şöyledir: element {stil özellikleri}

Basit seçici örneği şöyle olabilir (Resim 7.2.):

<!DOCTYPE html>

<head>

<style>

span {background-color: orange;}

</style>

</head>

<body>

</body>

</html>

Resim 7.2 Basit Seçici Örneği

(6)

Sınıf (class) seçici

Bir sınıf seçici, belirli bir sınıf adına sahip tüm öğeleri seçer. Örneğin, .ana_baslik, “ana_baslik” sınıfına sahip tüm öğeleri seçer. Sınıf seçicinin sözdizimi şöyledir: .sınıf adı {stil özellikleri}

Sınıf seçici örneği şöyle olabilir (Resim 7.3.):

<!DOCTYPE html>

<head>

<style>

.ana_baslik{color: orange;}

</style>

</head>

<body>

<p class="ana_baslik">Atatürk Üniversitesi Açıköğretim Fakültesi</p>

</body>

</html>

Resim7.3 Sınıf Seçici Örneği

Kimlik (id) seçici

Bir kimlik seçici, bir öğeyi kimlik özniteliğine göre seçer. Örneğin #baslik,

“baslik“ kimliğine sahip öğeyi seçer. Bu seçicinin yalnızca seçicide verilen öğenin ID özniteliğiyle tam olarak eşleşmesi durumunda çalışır. Kimlik seçicinin sözdizimi şöyledir: #kimlik adı {stil özellikleri}

Kimlik seçici örneği şöyle olabilir (Resim 7.4.):

<!DOCTYPE html>

<head>

<style>

#baslik {color: orange; text-align:right}

</style>

</head>

<body>

<h3 id="baslik">Web Tasarımının Temelleri</h3>

</body>

</html>

Resim 7.4. Kimlik Seçici Örneği

(7)

Sözde Sınıf Seçiciler

CSS de sınıf olmayan fakat sınıf gibi davranış gösteren seçicilere CSS sözde sınıflar denir. Örneğin bağlantı etiketine tıkladığında veya üzerine gelindiğinde bazı özellikleri değiştirmesini sağlamak için kullanılan seçicilerdir. Sözde sınıf seçicisi sözdizimi şöyledir: Seçici:Sözde Sınıf Seçici {Özellik: Değer;}

Link

Daha önce tıklanmamış bağlantıların rengini tanımlamak için kullanılır. Diğer özelliklerini değiştirilebilir fakat yapılan etki tıklandıktan sonra da kalır ve renk değişir.

Hover

Seçilen bağlantı üzerine fare ile gelindiğinde CSS kodları çalışır, fare ile elementin üzerinden ayrıldığında kodlar çalışmaz.

Active

Seçilen bağlantı aktif olduğunda yani üzerine tıklanmış olduğu durumda iken stil kodları çalışır. Farenin sol tuşa basıldığında çalışır, sol tuşa basmak bırakıldığında ise stil kodları çalışmaz.

Visited

Seçilen bağlantı tıklandıktan sonraki rengini tanımlar. Bir bağlantıya

tıkladıktan sonra rengini değiştirmek için kullanılan seçicidir. Link, hover, active ve visited seçici örneği şöyle olabilir:

a:link {color: red;}

a:hover {color: blue;}

a:active {color: green;}

a:visited {color: mediumpurple;}

Target

CSS3 ile birlikte gelen sözde sınıf seçilerden biri olan target, doküman içi bağlantılara odaklanmamızı sağlar. Target ara seçici örneği şöyle olabilir:

:target {color: red;}

Focus

Belirtilen elementte odaklandığında tanımlanan biçimlendirme kodları çalışır, odaklanmayı bıraktığında biçimlendirme eski haline gelir.

Checked

Belirtilen elementte seçim yapıldığında biçimlendirme kodları çalışır, seçimi kaldırıldığında biçimlendirme eski haline gelir.

Disabled

Belirtilen element devre dışı bırakılmış olduğu durumda biçimlendirme yapmayı sağlar. HTML elementinin attribute değerlerinde “disabled” olmalıdır.

Genelde form’lar da kullanılır.

(8)

Enabled

Belirtilen element aktif olduğu durumda biçimlendirme yapmayı sağlar.

Devre dışı bırakılmamış elementleri seçmek için kullanılır. “input” element desabled özelliği yazıldığında enabled özelliği geçerlidir. Yani “input”

elementlerine “enabled” yazılmasına gerek yoktur.

Read-only

Sadece okunabilen elementlere biçimlendirme yapmayı sağlar. Html elementinin attribute değerlerinde “readonly” özelliği olmalı ve “value” değerine yazılan veri input’a atanır. Genelde input ve textarea da kullanılır. Sadece okunur, herhangi bir değişiklik yapılamaz. Disabled ara seçiciye benzer fakat disabled’daki gibi varsayılan background rengi yoktur.

Required

HTML formlarda girişin zorunlu olduğunda durumlarda biçimlendirme yapmayı sağlar. Örneğin esinav.ataaof.edu.tr adresinde TC Kimlik No ve Şifre girilmesi zorunludur. Bu gibi durumlarda biçimlendirme yapmak için kullanılan seçicidir. (Resim 7.5.):

Resim 7.5. Required Örneği

Valid

HTML formlarda geçerli bir giriş yapıldığında biçimlendirme yapmayı sağlar.

Eğer geçerli olmayan bir giriş yapılırsa biçimlendirme eski haline döner.

Invalid

HTML formlarda geçerli bir giriş yapılmadığında biçimlendirme yapmayı sağlar. Eğer geçerli bir giriş yapılırsa biçimlendirme eski haline döner. Focus, checjed, disabled, enabled, read-only, required, valid ve invalid seçici örneği şöyle olabilir:

input:focus {background-color: green;}

input:checked {background-color: green;}

input:disabled {background-color: gray;}

input:enabled {background-color: gray;}

input:read-only {background-color: gray;}

input:required {background-color: red;}

input[type="email"]:valid{ background: green; } input[type="email"]:invalid{ background: red; }

(9)

First-child

Belirtilen element baz alınarak, üst elementine bitişik ilk çocuk (child) elemente biçimlendirme yapmayı sağlar. Belirtilen element ilk bitişik çocuk element değilse biçimlendirme yapmaz.

Last-child

Belirtilen element baz alınarak, üst elementine bitişik son çocuk (child) elemente biçimlendirme yapmayı sağlar. Yani üst elementin kapanış etiketine bitişik olmalı. Belirtilen element son bitişik çocuk element değilse biçimlendirme yapmaz.

Only-child

Belirtilen element baz alınarak, üst elementine göre bitişik tek çocuk (child) elemente biçimlendirme yapmayı sağlar. Yani belirtilen element span ise, tek element span olmalı. Last-child, first-child ve only-child ara seçici örneği şöyle olabilir:

p:first-child{ background-color: yellow; } p:last-child{ background-color: purple; } p:only-child{ background-color: green; }

Nth-child

Belirtilen element baz alınarak, üst elementine göre kardeş elementlerin ilk elementinden başlayarak sıra numaralarına göre biçimlendirme yapmayı sağlar.

Kardeş elementlerin türüne bakılmaksızın sıra numarasına göre seçim yapılır.

Farklı kullanım şekilleri mevcuttur. En çok kullanımlarından “nth-child(odd)”

tek numara sırası olan kardeş elementleri seçmek için ve “nth-child(even)” ise çift numara sırası olan kardeş elementleri seçmek için kullanılır. Nth-child ara seçici örneği şöyle olabilir:

li:nth-child(odd){ background-color: #f3f3f3; } li:nth-child(even){ color: #ddd; }

li:nth-child(2n+1){background-color:#cd2118;}

li:nth-child(3n+1){color:black;}

Animasyon Özellikleri

jQuery veya Flash kullanmadan animasyon oluşturmak için kullanılır.

Animasyonu bir süreç olarak kabul ederek, anahtar kare(keyframe) geçişin başlangıç ve bitişi arasındaki durumları tanımlamak için olanak sağlar.

Anahtar kare(keyframe) tanımlaması ardından animasyon özelliklerini tanıma işlemi yapılır. Bu özellik tanımları Tablo 7.1’de verilmiştir. CSS tanımlarına benzer bir yapısı vardır.

(10)

Tablo 7.1. Animasyon Özellikleri

Özellik Açıklama

@keyframes

Animasyon sırasında çeşitli noktalarda animasyon özellikleri için değerleri belirtir.

animation-name

Seçilen öğeye uygulanması gereken

@keyframes tanımlı animasyonların adını belirtir.

animation-duration

Animasyonun bir döngüsünü tamamlamak için animasyonun kaç saniye veya milisaniye süreceğini belirtir.

animation-timing-function

Animasyonun her bir döngü süresi boyunca nasıl ilerleyeceğini, yani hareket hızı işlevlerini belirtir.

animation-delay

Animasyon başlamadan önce bir gecikme belirtir.

animation-iteration-count

Durdurmadan önce bir animasyon döngüsünün kaç kez oynatılması gerektiğini belirtir.

animation-direction

Animasyonun alternatif döngülerde tersten oynatılıp oynatılmayacağını belirtir.

animation-fill-mode

Bir CSS animasyonunun, yürütülmeden önce ve sonra hedefine stilleri nasıl uygulayacağını belirtir.

animation-play-state

Animasyonun çalıştığını veya duraklatıldığını belirtir.

(11)

Animasyon ataması örneği şöyle olabilir (Resim 7.6.):

<!DOCTYPE html>

<head>

<style>

.animasyon_kutusu { margin: 50px;

width:150px;

height:150px;

background: url("aofcan.png") no-repeat;

position: relative;

left: 0;

animation-name: sallanma_animasyonu;

animation-duration: 2s;

}

@keyframes sallanma_animasyonu { 12.5% {left: -50px;}

25% {left: 50px;}

37.5% {left: -25px;}

50% {left: 25px;}

62.5% {left: -10px;}

75% {left: 10px;}

} </style>

</head>

<body>

</body>

</html>

Resim 7.6. Animasyon Örneği

Arka Plan ve Renk Özellikleri

Arka plan, herhangi bir elementin arka planını kontrol etmesine olanak tanır. Bu bir steno özelliğidir. Renk özellikleri ise CSS içerisinde elemente ait renk tanımlaması rengin ingilizce adı veya sayısal değeri yazılarak yapılabilir. Bu özellik tanımları Tablo 7.2’de verilmiştir.

Tablo 7.2. Arka Plan ve Renk Özellikleri

background

Tek bir tanımla çeşitli arka plan özelliklerini atanır.

background- attachment

Arka plan görüntüsünün sayfada sabitlenip sabitlenmediğini veya kaydırılıp

kaydırılmayacağını belirler.

Steno; birden fazla background özelliğini

bir arada yazmayı sağlar.

(12)

background-clip

Bir arka plan görüntüsünün veya rengini, bir öğenin dolgusu veya içeriğinin ne kadar ötesine uzanacağını kontrol etmeyi sağlar.

background-color

Bir öğenin arka plan rengini tanımlar.

background-image

Bir öğenin arka plan görüntüsünü tanımlar.

background-origin

Arka plan görüntülerinin konumlandırma alanını belirtir.

background-position

Bir öğenin istenilen konuma yerleşmesini sağlar. Bu özellik yalnızca blok düzeyindeki öğelere uygulanabilir.

background-repeat

Arka plan görüntüsünün döşenip

döşenmeyeceğini/nasıl döşeneceğini belirtir.

background-size

Arka plan görüntülerinin boyutunu belirtir.

color

Bir öğenin metninin rengini ayarlar.

opacity

Bir öğenin saydamlığını ayarlar.

Arka plan ve renk atama örneği şöyle olabilir (Resim 7.7.):

<!DOCTYPE html>

<head>

<style>

.arka_plan {

width: 400px; height: 200px; color:red;

background: url("ataaof.jpg") no-repeat center, url("aofcan.png") no-repeat 50% 50%, lightblue;

background-size: auto;

} </style>

</head>

<body>

<div class="arka_plan">Atatürk Üniversitesi</div>

</body>

</html>

Resim 7.7. Arka Plan ve Renk Örneği

Kenarlık Özellikleri

Herhangi bir elementin kenarlığının dört tarafının genişliğini, stilini, ovalliğini ve rengini tanımlamak için olanak sağlar. Bu bir steno özelliğidir, yani

(13)

birden fazla border özelliğini bir arada yazmayı sağlar. Bu özellik tanımları Tablo 7.3’de verilmiştir.

Tablo 7.3. Kenarlık Özellikleri

border

Bir öğenin kenarlığının dört tarafının genişliğini, stilini ve rengini ayarlar.

border-bottom

Bir öğenin alt kenarlığının genişliğini, stilini ve rengini ayarlar.

border-color

Bir öğenin dört kenarındaki kenarlığın rengini ayarlar.

border-image

Kenarlık stilleri yerine bir görüntünün nasıl kullanılacağını ayarlar.

border-image-outset

Kenarlık görüntü alanının sınır kutusunun ötesine uzanma miktarını ayarlar.

border-image-repeat

Görüntü kenarlığının tekrarlanması, yuvarlanması veya uzatılması gerektiğini ayarlar.

border-image-slice

Görüntü kenarlığının içe doğru ofsetlerini ayarlar.

border-image-source

Kenarlık olarak kullanılacak görüntünün konumunu ayarlar.

border-left

Bir öğenin sol kenarlığının genişliğini, stilini ve rengini ayarlar.

border-radius

Bir öğenin kenarlık köşelerinin ovalliğini ayarlar.

border-right

Bir öğenin sağ kenarlığının genişliğini, stilini ve rengini ayarlar.

border-style

Bir öğenin dört kenarındaki kenarlığın stilini ayarlar.

border-top

Bir öğenin üst kenarlığının genişliğini, stilini ve rengini ayarlar.

border-width

Bir öğenin dört kenarındaki kenarlığın genişliğini ayarlar.

(14)

Kenarlık ataması örneği şöyle olabilir (Resim 7.8.):

<!DOCTYPE html>

<head>

<style>

.kenarlik {

width: 300px; height: 150px;

border: 15px solid transparent;

border-image: url("atauni.png") 30 30 round;

position: relative;

float: left;

margin-right: 10px;

}

.ovallik {

padding: 15px; margin-bottom: 20px;

background: #f08080; border: 2px solid #cd2118;

border-radius: 10px 20px 30px 40px;

float: left;

} </style>

</head>

<body>

<div class="kenarlik">Görsel Kenarlık</div>

<div class="ovallik">Oval Kenarlık</div>

</body>

</html>

Resim 7.8. Kenarlık Örneği

Boyut Özellikleri

CSS boyut özellikleri bir elemanın yüksekliğini ve genişliğini kontrol etmek için kullanılır. Alacağı değer piksel, punto, yüzde gibi bir ölçü değeri olacaktır. Bu özellik tanımları Tablo 7.4’de verilmiştir.

Tablo 7.4. Boyut Özellikleri Özellik Açıklama

height

Bir öğenin yüksekliğini ayarlar.

max-height

Bir öğenin maksimum yüksekliğini ayarlar.

max-width

Bir öğenin maksimum genişliğini ayarlar.

min-height

Bir öğenin minimum yüksekliğini ayarlar.

min-width

Bir öğenin minimum genişliğini ayarlar.

width

Bir öğenin genişliğini ayarlar.

(15)

Boyut ataması örneği şöyle olabilir:

<!DOCTYPE html>

<head>

<style>

div {

width:330px; max-width:300;

height: 200px; max-height: 100px;

background: #f0e68c;

} </style>

</head>

<body>

<div>Atatürk Üniversitesi</div>

</body>

</html>

Yazı Tipi Özellikleri

Belirli bir yazı tipi adı veya genel bir yazı tipi listesi gibi birden fazla yazı tipi ataması yapılabilir. Bunun yanı sıra normal, italik, eğik (eğimli), kalınlığını ve boyutunu ayarlamak için kullanılır. Bu özellik tanımları Tablo 7.5’de verilmiştir.

Tablo 7.5. Yazı Tipi Özellikleri

font

Tek bir bildirimde çeşitli yazı tipi özelliklerini tanımlar.

font-family

Öğe için bir yazı tipi listesi tanımlar.

font-size

Metnin yazı tipi boyutunu tanımlar.

font-size-adjust

Yazı tipi geri dönüşü gerçekleştiğinde metnin okunabilirliğini korur.

font-stretch

Bir yazı tipinden normal, yoğun veya genişletilmiş bir yüz seçer.

font-style

Metnin yazı tipi stilini tanımlar.

font-variant

Yazı tipi varyantını tanımlar.

font-weight

Metnin yazı tipi kalınlığını tanımlar.

Boşluk içeren herhangi bir yazı tipi adı, tek veya

çift tırnak ile alıntılanmalıdır.

(16)

Yazı tipi ataması örneği şöyle olabilir (Resim 7.9.):

<!DOCTYPE html>

<head>

<style>

h1 {

font: bold 35px "Ubuntu", Times, serif;

color: gold;

} h2 {

font: bold 30px "Arial", Times, serif;

color: purple;

} </style>

</head>

<body>

<h1>Atatürk Üniversitesi</h1>

<h2>Açıköğretim Fakültesi</h2>

</body>

</html>

Resim 7.9. Yazı Tipi Örneği

Liste Özellikleri

Liste etiketinin başındaki işaretleri değiştirmek, kaldırmak, belirtilen görseli eklemek ve pozisyonunu belirlemek için kullanılır. Bu özellik tanımları Tablo 7.6’de verilmiştir.

Tablo 7.6. Liste Özellikleri

list-style

Bir liste ve liste öğeleri için görüntüleme stilini tanımlar.

list-style-image

Liste öğesi işaretçisi olarak kullanılacak görseli tanımlar.

list-style-position

Liste öğesi işaretçisinin konumunu tanımlar.

list-style-type

Bir liste öğesi için işaretçi stilini tanımlar.

(17)

Liste ataması örneği şöyle olabilir (Resim 7.10.):

<!DOCTYPE html>

<head>

<style>

ul {

list-style: inside url("favicon.ico");

} </style>

</head>

<body>

<ul>

<li>Atatürk</li>

<li>Üniversitesi</li>

<li>Açıköğretim</li>

<li>Fakültesi</li>

</ul>

</body>

</html>

Resim 7.10. Liste Örneği

Dış Kenar ve İç Kenar Boşluk Özellikleri

Dış kenar boşluk, öğenin çevresi ile ona komşu olan diğer öğeye belirtilen ölçü kadar dışardan boşluk ayarlamak için kenar boşluk, öğenin içeriği ile öğenin tüm kenarlarına ya da tanımlanan kenar/kenarlar belirtilen ölçü kadar boşluk bırakmak için kullanılır. Bu özellik tanımları Tablo 7.7’de verilmiştir.

Tablo 7.7. Dış Kenar ve İç Kenar Boşluk Özellikleri

margin

Öğenin dört tarafındaki kenar boşluğunu ayarlar.

margin-bottom

Öğenin alt kenar boşluğunu ayarlar.

margin-left

Öğenin sol kenar boşluğunu ayarlar.

margin-right

Öğenin sağ kenar boşluğunu ayarlar.

margin-top

Öğenin üst kenar boşluğunu ayarlar.

padding

Öğenin dört tarafındaki dolguyu ayarlar.

padding-bottom

Öğenin alt tarafına dolguyu ayarlar.

padding-left

Öğenin sol tarafındaki dolguyu ayarlar.

padding-right

Öğenin sağ tarafındaki dolguyu ayarlar

padding-top

Öğenin üst tarafındaki dolguyu ayarlar.

Dış kenar negatif değer alabilir fakat iç kenar negatif değer alamaz.

(18)

Dış kenar boşluk ataması örneği şöyle olabilir (Resim 7.11.):

<!DOCTYPE html>

<head>

<style>

p {

margin: 50px 10px;

padding: 30px 10px;

background-color: #379cd2;

width: 300px;

} </style>

</head>

<body>

<ul>

</ul>

</body>

</html>

Resim 7.11. Dış Kenar ve İç Kenar Örneği

Çok Sütunlu Düzen Özellikleri

Yalnızca birkaç CSS kuralıyla, internet sayfalarının esnekliğine sahip, baskıdan ilham alan bir düzen biçimidir. Tarayıcının ekran boyutu küçüldükçe tasarımı bozmamak adına sütunun genişliğini azaltarak içerisinde bulunan içeriği aşağıya doğru uzatır. Bu özellik tanımları Tablo 7.8’da verilmiştir.

Tablo 7.8. Çok Sütunlu Düzen Özellikleri

column-count

Çok sütunlu bir öğedeki sütun sayısını belirtir.

column-fill

Sütunların nasıl doldurulacağını belirtir.

column-gap

Çok sütunlu bir öğedeki sütunlar arasındaki boşluğu belirtir.

column-rule

Çok sütunlu bir öğede her sütun arasına çizilecek düz bir çizgiyi veya "kural"ı belirtir.

column-span

Çok sütunlu bir düzende bir öğenin kaç sütuna yayılacağını belirtir.

column-width

Çok sütunlu bir öğedeki sütunların en uygun

(19)

columns

column-width ve column-count özellikler için bir steno özelliğidir.

Çok sütunlu düzen ataması örneği şöyle olabilir (Resim 7.12.):

<!DOCTYPE html>

<head>

<style>

p { columns: 100px 3; } </style>

</head>

<body>

<p>

...

</p>

</body>

</html>

Resim 7.12. Çok Sütunlu Düzen Örneği

Tablo Özellikleri

Tablolar verilerin belirli bir tertip ve düzen içerisinde gösterilmesini sağlayan HTML nesnelerinden biridir. Hücrelerin birbirinden görsel olarak ayrılmasını sağlar, kullanıcılara okunması kolay görsellik sunar. Bu özellik tanımları Tablo 7.9’de verilmiştir.

Tablo 7.9. Tablo Özellikleri

border-collapse

Tablo hücre sınırlarının bağlı mı yoksa ayrılmış mı olduğunu ayarlar.

border-spacing

Bitişik tablo hücrelerinin sınırları arasındaki boşluğu ayarlar.

caption-side

Tablo başlığının konumunu ayarlar.

empty-cells

Boş tablo hücrelerinin kenarlıklarını ve arka planlarını gösterir veya gizler.

table-layout

Bir tablo düzeni algoritması belirtir.

(20)

Tablo ataması örneği şöyle olabilir (Resim7.13.):

<!DOCTYPE html>

<head>

<style>

table, tr, th, td{

width: 250px; border-collapse: collapse;

border: 1px solid #000000; caption-side: top;

table-layout: auto;

} </style>

</head>

<body>

<caption>Ünite 7</caption>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Resim 7.13. Tablo Örneği

Metin ve İçerik Özellikleri

CSS dilinde metin üzerinde düzenleme işlemleri (metnin konumunu, harfler ve kelimeler arası boşluk, büyük harf, küçük harf vb.) yapmak için, içerik

özelliklerinde ise seçilen html öğelerinden önce veya sonrasında bir url, resim, içerik, tırnak işareti gibi elemanlar eklemek için kullanılır. Bu özellik tanımları Tablo 7.10’de verilmiştir.

Tablo 7.10. Metin ve İçerik Özellikleri

direction

Metin yönünü/yazma yönünü tanımlar.

tab-size

Tab karakterinin genişliğini belirler.

text-align

İçeriği yatay hizalamasını ayarlar.

text-decoration

İçeriğin altına, üstüne veya üzerine çizgi çekmeyi belirtir.

(21)

text-indent

Metnin ilk satırını girintisini belirtir.

text-overflow

Blok kapsayıcılarını aştığında metin içeriğinin nasıl görüntüleneceğini belirtir.

text-shadow

Bir öğenin metin içeriğine bir veya daha fazla gölge uygular.

text-transform

Metnin büyük/küçük harf durumunu dönüştürür.

line-height

Metin satırları arasındaki yüksekliği ayarlar.

vertical-align

Bir öğenin geçerli metin taban çizgisine göre dikey konumunu ayarlar.

letter-spacing

Harfler arasındaki fazladan boşluğu ayarlar.

word-spacing

Sözcükler arasındaki boşluğu ayarlar.

white-space

Elemanın içindeki beyaz boşluğun nasıl işlendiğini belirtir.

word-break

Sözcüklerin içindeki satırların nasıl kesileceğini belirtir.

word-wrap

İçerik, kapsayıcısının sınırlarını aştığında sözcüklerin kesilip kesilmeyeceğini belirtir.

content

Oluşturulan içeriği ekler.

quotes

Gömülü alıntılar için tırnak işaretlerini ayarlar.

counter-reset

Bir veya daha fazla sayaç oluşturur veya sıfırlar.

counter-increment

Bir veya daha fazla sayaç değerini artırır.

Metin ve içerik ataması örneği şöyle olabilir (Resim 7.14.):

<!DOCTYPE html>

<head>

<style>

p{

direction: rtl;

unicode-bidi: bidi-override;

tab-size: 12;

text-transform: capitalize;

}

q{quotes: '[' ']' '"' '"';}

q:before {content: open-quote;}

q:after {content: close-quote;}

</style>

</head>

<body>

<p>Atatürk Üniversitesi Açıköğretim Fakaltesi</p>

<q>

Atatürk Üniversitesi<q>Açıköğretim</q> Fakültesi </q>

</body>

</html>

(22)

Resim 7.14. Metin ve İçerik Örneği

Dönüştürme Özellikleri

HTML elemanlarını 2 boyutlu ya da 3 boyutlu olarak döndürmek, boyutlandırmak, eğmek gibi eylemleri gerçekleştirmek için kullanılır. Bu özellik tanımları Tablo 7.11’de verilmiştir.

Tablo 7.11. Dönüştürme Özellikleri

backface-visibility

Dönüştürülen bir öğenin "arka" tarafının

kullanıcıya dönükken görünür olup olmayacağını belirtir.

perspective

Nesnenin tüm alt öğelerinin görüntülendiği perspektifi tanımlar.

perspective-origin

Perspektif özelliği için orijini (3B uzay için kaybolma noktası) tanımlar.

transform

Bir öğeye 2B veya 3B dönüştürme uygular.

transform-origin

Bir öğe için dönüşümün kökenini tanımlar.

transform-style

3B alanda iç içe öğelerin nasıl oluşturulacağını belirtir.

(23)

Dönüştürme ataması örneği şöyle olabilir (Resim7.15):

<!DOCTYPE html>

<head>

<style>

.kutu {

margin: 50px;

perspective: 100px;

display: inline-block;

}

.kutu:hover .kart { transform: rotateY(180deg); } .kart, .on, .arka { width: 150px; height: 150px; } .kart {

position: relative;

transition: 0.5s all;

transform-style: preserve-3d;

}

.on, .arka { position: absolute; backface-visibility:

hidden; }

.on { z-index: 1; transform: rotateY(0deg); } .arka {z-index: 2; transform: rotateY(180deg); } </style>

</head>

<body>

</div>

</body>

</html>

Resim 7.15. Dönüştürme Örneği

Geçiş Özellikleri

CSS geçişleri, öğeyi Flash veya JavaScript kullanmadan kademeli olarak bir stilden diğer bir stile değiştirmek için kullanılır. Bu özellik tanımları Tablo 7.12’de verilmiştir.

(24)

Tablo 7.12. Geçiş Özellikleri

transition

Bir elemanın iki durumu arasındaki geçişi tanımlar.

transition-delay

Geçiş efektinin ne zaman başlayacağını belirtir.

transition-duration

Bir geçiş efektinin tamamlanması için geçmesi gereken saniye veya milisaniye sayısını belirtir.

transition-property

Geçiş efektinin uygulanması gereken CSS özelliklerinin adlarını belirtir.

transition-timing-function

Geçiş efektinin hız eğrisini belirtir.

Geçiş ataması örneği şöyle olabilir (Resim 7.16.):

<!DOCTYPE html>

<head>

<style>

.kutu{ margin: 20px 10px; } a {

font-size: 16px; font-weight: bold;

padding: 10px 20px; background: #fd7c2a;

border: 3px solid #dc5801; color: #ffffff;

text-decoration: none;

transition: background 1s, border .5s, color .8s;

}

a:hover {

background: #3cc16e;

border-color: #257644;

color: #000000;

} </style>

</head>

<body>

<a href="https://www.ataaof.edu.tr" >Açıköğretim Fakültesi</a>

</div>

</body>

</html>

Resim 7.16. Geçiş Örneği

Görsel Biçimlendirme Özellikleri

Öğelerin görüntülenmesini, konumunu, katmanını ve yeniden boyutlama gibi işlemleri yapmak için kullanılır. Bu özellik tanımları Tablo 7.13’da verilmiştir.

(25)

Tablo 7.13. Görsel Biçimlendirme Özellikleri Özellik Açıklama

display

Bir öğenin ekranda nasıl görüntüleneceğini belirtir.

position

Bir öğenin nasıl konumlandırılacağını belirtir.

top

Konumlandırılmış öğenin üst kenarının konumunu belirtir.

right

Konumlandırılmış öğenin sağ kenarının konumunu belirtir.

bottom

Konumlandırılmış öğenin alt kenarının konumunu belirtir.

left

Konumlandırılmış öğenin sol kenarının konumunu belirtir.

float

Bir kutunun normal akışın dışına çıkıp çıkmayacağını belirtir.

clear

Float özelliğinin etkisinden çıkmak için kullanılır.

z-index

Konumlandırılmış öğeler için bir katmanlama veya yığınlama sırası belirtir.

overflow

Öğenin kutusundan taşan içeriğin işlenmesini belirtir.

overflow-x

Öğenin içerik alanının genişliğini aştığında içeriğin nasıl yönetileceğini belirtir.

overflow-y

Öğenin içerik alanının yüksekliğini aştığında içeriğin nasıl yönetileceğini belirtir.

resize

Bir öğenin kullanıcı tarafından yeniden boyutlandırılabilir olup olmadığını belirtir.

clip

Kırpma bölgesini tanımlar.

visibility

Bir öğenin görünür olup olmadığını belirtir.

cursor

İmleç türünü belirtin.

box-shadow

Öğe kutusuna bir veya daha fazla alt gölge uygular.

box-sizing

Varsayılan CSS kutusu modelini değiştirir.

(26)

Görsel biçimlendirme ataması örneği şöyle olabilir (Resim 7.17):

<!DOCTYPE html>

<head>

<style>

.kutu{

width: 250px;

height: 50px;

top: 10px;

left: 10px;

position:relative;

background: #f3d0d0;

border: 1px solid #e56969;

box-shadow: 2px 2px 4px 2px #643636;

padding: 30px;

} </style>

</head>

<body>

<div class="kutu">Açıköğretim Fakültesi</div>

</body>

</html>

Resim 7.17. Görsel Biçimlendirme Örneği

CSS ANİMASYONLAR

CSS animasyonu, bir öğenin bir veya daha fazla stil özelliğindeki bir değişikliği canlandırmaya ve ayrıca animasyonun çeşitli yönlerini kontrol etmeye olanak tanıyan bir CSS özelliğidir. CSS animasyonları ek kod (örn. JavaScript) veya medya (örn. GIF'ler) gerektirmez her şey HTML ve CSS ile yapılır.

CSS animasyonları, sayfaya daha fazla yük getirmeden dinamik, ilgi çekici içerik eklemek isteyen internet sayfaları için kullanılır. Fazladan komut dosyaları gerektirmediklerinden, CSS animasyonlarının sayfaları yavaşlatmayı da

önleyecektir.

Bir CSS animasyonu yapmak için üç şeye ihtiyaç vardır: canlandırılacak bir HTML öğesi, animasyonu bu öğeye bağlayan bir CSS kuralı ve animasyonun başındaki ve sonundaki stilleri tanımlayan bir ana kare(@keyframe) grubu.

Animasyonunuzu daha fazla özelleştirmek için hız ve gecikme gibi özelliklerde de eklenebilir. CSS animasyon örneği şöyle olabilir (Resim 7.18.):

(27)

<!DOCTYPE html>

<head>

<style>

div {

animation-name: animasyon;

animation-duration: 2s;

animation-direction: alternate;

animation-iteration-count: infinite;

animation-timing-function: linear;

border-radius: 10px; position: absolute;

left: 0; right: 0; margin-left: auto; margin-right: auto;

}

@keyframes animasyon { from {

background-color: #ff7a59;

width: 300px;top: 10px;

} to {

background-color: #33475b;

width: 50px;top: 100px;

} } </style>

</head>

<body>

</body>

</html>

Resim 7.18. Animasyon Örneği

Bireysel Etkinlik • Basit seçicilerle yazı fontunu, rengini ve boyutunu

değiştiriniz.

• Liste özelliklerini kullanarak liste renklerini farklılaştırınız.

• Animasyon özelliğini kullanarak bir görseri hareket ettiriniz.

(28)

Özet

•CSS, İngilizce Cascade Style Sheet kelimelerinin kısaltılmasıdır. Temel olarak, HTML elementlerini biçimlendirmek için kullanılır. Örneğin <h1> etiketinin içerisine yazmış olan metnin yaz tipi, boyutu, rengi gibi birçok biçimsel özellik CSS ile belirlenebilir. Kısacası CSS, bir internet sitesinin tasarımsal açıdan daha etkileyici görünmesini kolaylaştıran bir işaretleme dilidir. HTML büyük ölçüde metin içeriğini belirlerken, CSS görsel yapıyı, düzeni ve estetiği belirler.

•CSS, sanılanın aksine eskilere dayanan bir işaretleme dilidir. İlk kez 1994 yılında, Cern şehrinde Tim Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Daha sonrasında W3C adını alan, çeşitli forum sitesi ve posta listelerinde yapılan birkaç farklı tarz sayfası dili taslağını da göz önünde bulundurarak, 1996 senesinde ilk CSS önerisi sunulmuştur. İnternetin gelişimiyle de 1998’de CSS’in 2. sürümü sunulmuştur. Günümüzde ise Css’in 3.sürümü kullanılmaktadır.

• Bir CSS stil sayfasında, bir dizi stil tanımının bir araya gelerek oluşturduğu tanımlardır. Her stil tanımının iki ana bileşeni vardır. Seçici ve deklarasyon

•İnternet sayfasını oluşturan HTML kodları ile yazılmış bir sayfanın barındırdığı elementler CSS ile biçimlendirilebilir. Tarayıcılar tarafından yorumlanan CSS satırları ayrı ayrı işlenmektedir. Bu nedenle CSS içerisinde bir satırda yazılan yanlış tanımlama bir diğer satırın yorumlanmasını engellemez.

•HTML elementlerini biçimlendirmek için kullanılan tanımlamalara

“seçiciler”, sınıf olmayan fakat sınıf gibi davranış gösteren seçicilere “sözde sınıf seçiciler” ve seçilen elemente dair stil tanımlamalarına “özellikler” adı verilir. Seçiciler ve stil tanımlamaları birlikte kullanılır, bu kullanım CSS’in yapısını oluşturulur.

•CSS'de seçicileri kullanmanın iki yolu vardır. Birincisi HTML ve CSS'niz tek bir dokümandaysa, web sayfasının <head> bölümüne <stayle> etiketi arasına CSS seçicileri eklenmesi yeterlidir. Diğeri ise HTML ve CSS dosyaları ayrı belgelerde de tutulabilir. Bu durumda, index.html etiketli bir HTML belgesi ve style.css etiketli bir CSS dosyası olabilir. index.html dosyası, bu stillerin web sayfasını oluşturulabilmesi için CSS dosyasına başvuran bir kod satırı içermelidir. Bu metotlardan yaygın olarak kullanılanı <link> etiketi kullanılarak yapılan entegre işlemidir.

•Bir CSS seçicisi tarafından hedeflenen öğe veya öğeler, "seçicinin konusu"

olarak adlandırılır. Öğe türü, sınıfı, kimlik adı, verilen özniteliği veya sözde durumuna göre bir konu seçilebilir.

•Yıldız işareti (*), CSS'deki evrensel seçicidir. Varsayılan olarak, bir belgedeki tüm öğeleri seçer. Evrensel seçiciyi yalnızca o ad alanındaki öğelerle sınırlamak için tanımlı bir ad alanı kullanılabilir.

•Bir basit seçici, belirli bir nesne adına sahip tüm HTML öğelerini seçer.

•Bir sınıf seçici, belirli bir sınıf adına sahip tüm öğeleri seçer.

•Bir kimlik seçici, bir öğeyi kimlik özniteliğine göre seçer. Bu seçicinin yalnızca seçicide verilen öğenin ID özniteliğiyle tam olarak eşleşmesi durumunda çalışır.

•CSS de sınıf olmayan fakat sınıf gibi davranış gösteren seçicilere css sözde sınıflar denir. Örneğin bağlantı etiketine tıkladığımızda veya üzerine

geldiğimizde bazı özellikleri değiştirmesini sağlamak için kullanılan seçicilere css de sözde sınıflar denir.

•jQuery veya flash kullanmadan animasyon oluşturmak için kullanılır.

Animasyonu bir süreç olarak kabul ederek, anahtar kare(keyframe) geçişin başlangıç ve bitişi arasındaki durumları tanımlamak için olanak sağlar.

(29)

Özet (devamı)

•Arka plan, herhangi bir elementin arka planını kontrol etmesine olanak tanır.

Bu bir steno özelliğidir, yani birden fazla background özelliğini bir arada yazmayı sağlar. Renk özellikleri ise CSS içerisinde elemente ait renk tanımlaması rengin İngilizce adı veya sayısal değeri yazılarak yapılabilir.

•Herhangi bir elementin kenarlığının dört tarafının genişliğini, stilini, ovalliğini ve rengini tanımlamak için olanak sağlar. Bu bir steno özelliğidir, yani birden fazla border özelliğini bir arada yazmayı sağlar.

•CSS boyut özelliklerini bir elemanın yüksekliğini ve genişliğini kontrol etmek için kullanılır. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır.

•Belirli bir yazı tipi adı veya genel bir yazı tipi listesi birden fazla yazı tipi ataması yapılabilir. Bunun yanı sıra normal, italik veya eğik (eğimli) olabilmesi, kalınlığını ve boyutunu ayarlamak için kullanılır.

•Liste etiketinin başındaki işaretleri değiştirmek, kaldırmak, belirtilen görselle eklemek ve pozisyonunu belirlemek için kullanılır.

•Dış kenar boşluk, öğenin çevresi ile ona komşu olan diğer öğeye belirtilen ölçü kadar dışardan boşluk ayarlamak için, iç kenar boşluk öğenin içeriği ile öğenin tüm kenarlarına ya da tanımlanan kenar/kenarlar belirtilen ölçü kadar boşluk bırakmak için kullanılır.

•Yalnızca birkaç CSS kuralıyla, internet sayfalarının esnekliğine sahip, baskıdan ilham alan bir düzen biçimidir. Sayfa küçüldükçe, sütunlar içeriğin doğal olarak akmasına izin verecek şekilde otomatik olarak ayarlamak ve dengelemek için kullanılır.

•Tablolar daha anlaşılır olmasını sağlamak için kullanılan özelliklerden biridir.

Hücrelerin birbirinden görsel olarak ayrılmasını sağlar, kullanıcılara okunması kolay görsellik sunar.

•CSS dilinde metin üzerinde düzenleme işlemleri (metnin konumunu, harfler ve kelimeler arası boşluk, büyük harf, küçük harf vb.) yapmak için, içerik özelliklerinde ise seçilen html öğelerinden önce veya sonrasında bir url, resim, içerik, tırnak işareti gibi elemanlar eklemek için kullanılır.

•HTML elemanlarını 2 boyutlu ya da 3 boyutlu olarak döndürmek, boyutlandırmak, eğmek gibi eylemleri gerçekleştirmek için kullanılır.

•CSS geçişleri, öğeyi flash veya JavaScript kullanmadan kademeli olarak bir stilden diğerine değiştirmek için kullanılır.

•Öğelerin görüntülenmesini, konumunu, katmanını ve yeniden boyutlama gibi işlemleri yapmak için kullanılır.

•CSS animasyonu, bir öğenin bir veya daha fazla stil özelliğindeki bir değişikliği canlandırmaya ve ayrıca animasyonun çeşitli yönlerini kontrol etmeye olanak tanıyan bir CSS özelliğidir. CSS animasyonları ek kod (örn. JavaScript) veya medya (örn. GIF'ler) gerektirmez her şey HTML ve CSS ile yapılır.

(30)

DEĞERLENDİRME SORULARI

1. Aşağıdakilerden hangisinde CSS sözdizimi doğru verilmiştir?

a) #baslik{ color:red; } b) color;red:

c) color:yellow;

d) .icerik(color:red;) e) İçerik(color:red);

2. Aşağıdakilerden hangisi basit CSS seçicisidir?

a) #baslik{}

b) #baslik .altbaslik {}

c) div{}

d) .icerik{}

e) .icerik:hover{}

3. Aşağıdakilerden hangisi CSS seçiciler arasında yer almaz?

a) Evrensel seçici b) Mutlak seçici c) Basit seçici d) Sınıf seçici e) Kimlik seçici

4. Sınıf olmayan fakat sınıf gibi davranış gösteren seçicilere ……….. denir.

Yukardaki cümlede boş bırakılan yere aşağıdakilerden hangisi gelmelidir?

a) Sınıf seçicileri b) Kimlik seçiciler c) Evrensel seçiciler d) Basit seçiciler e) Sözde sınıflar

5. Aşağıdaki CSS özelliklerinden hangisi birden fazla özelliğin kısaltılarak kullanımını temsil eder?

a) font-size b) margin c) border-color d) background-image e) margin-left

(31)

6. Harici bir CSS stil dosyasını sayfaya etmek için hangi HTML etiketi kullanılır?

a) script b) bady c) head d) link e) div

7. CSS özelliklerinden çok sütunlu düzen özelliği olan column-gap’ın açıklaması aşağıdaki seçeneklerin hangisinde verilmiştir?

a) Sütunların nasıl doldurulacağını belirtir.

b) Çok sütunlu bir öğedeki sütunlar arasındaki boşluğu belirtir.

c) Çok sütunlu bir öğedeki sütunların en uygun genişliğini belirtir.

d) Çok sütunlu bir öğedeki sütun sayısını belirtir.

e) Çok sütunlu bir düzende bir öğenin kaç sütuna yayılacağını belirtir.

8. Gölgelendirme, harfler ve kelimeler arası boşluk, büyük harf, küçük harf gibi biçimlendirmeyi CSS’nin hangi özelliği ile yapılır?

a) Liste özelliği b) Yazı tipi özelliği c) Metin ve içerik özelliği d) Tablo özelliği

e) Dönüştürme özelliği

9. Aşağıdakilerden hangisi CSS’nin dönüştürme özelliğidir?

a) caption-side b) transition

c) animation-direction d) column-rule

e) perspective

10. Aşağıdakilerin hangisinde CSS ile animasyon oluşturmak için gerekli adımlar doğru tanımlanmıştır?

a) HTML – PHP – @keyframes b) HTML – @keyframes c) PHP – @keyframes

d) HTML – CSS – @keyframes e) HTML

Cevap Anahtarı 1.a, 2.c, 3.b, 4.e, 5.b, 6.d, 7.b, 8.c, 9.e, 10.d

(32)

YARARLANILAN KAYNAKLAR

Anne B., Zak R. Murach's (2018) HTML5 and CSS3 Erdinç F. (2020) Html5 & Css3

Weyl E, Lazaris L.,Goldstein A. (2011) HTML5 & CSS3 For The Real World