Web Tasarımı Ünite -7

Haziran 10, 2024

Html Stil Şablonu (css)

İstanbul Üniversitesi Açık ve Uzaktan Eğitim Fakültesi (Auzef) Açık Öğretim Fakültesi Bölüm : Web Tasarımı ve Kodlama 1. Sınıf Web Tasarımı Bahar Dönemi Ünite 7 : Html Stil Şablonu (css)

Web Tasarımı – Ünite 7: Html Stil Şablonu (CSS)

Giriş

CSS (Cascading Style Sheets), HTML ile birlikte kullanılarak web sayfalarının stil ve düzenini belirleyen bir dildir. HTML, web sayfalarının yapısını oluştururken, CSS bu yapıyı biçimlendirir ve daha estetik ve kullanıcı dostu bir görsellik kazandırır. Bu makalede, CSS’nin temel kavramları, kullanımı ve web tasarımındaki önemi ele alınacaktır.

CSS Nedir?

CSS, web sayfalarının stil ve düzenini kontrol etmek için kullanılan bir stil dilidir. Renkler, yazı tipleri, boşluklar, kenarlıklar ve konumlandırma gibi görsel öğeler, CSS kullanılarak tanımlanır. Bu, web sayfalarının tutarlı ve profesyonel bir görünüme sahip olmasını sağlar.

CSS Seçicileri

CSS seçicileri, stil kurallarının hangi HTML öğelerine uygulanacağını belirler. İsim tabanlı seçiciler (örneğin, “table” seçicisi), sınıf tabanlı seçiciler (örneğin, “.tablo” seçicisi) ve ID tabanlı seçiciler (örneğin, “#tablo” seçicisi) gibi farklı türde seçiciler bulunmaktadır. Seçiciler, HTML öğelerinin stilini özelleştirmek için kullanılır.

İçsel, Gömülü ve Harici CSS

CSS kuralları, üç farklı yöntemle uygulanabilir: içsel, gömülü ve harici. İçsel CSS, doğrudan HTML öğeleri içinde stil tanımlarını içerir. Gömülü CSS, HTML belgesinin <head> etiketleri arasında <style> etiketi içinde tanımlanır. Harici CSS ise ayrı bir dosyada saklanır ve HTML belgesine <link> etiketi ile bağlanır. Harici CSS, stil kurallarının yeniden kullanılabilirliğini ve bakımını kolaylaştırır.

CSS Özellikleri ve Değerleri

CSS’de her bir stil kuralı, bir özellik ve bu özelliğin bir değerini içerir. Örneğin, “color: red;” kuralı, metin rengini kırmızı yapar. CSS özellikleri, metin biçimlendirme, kenarlıklar, arka planlar, kenar boşlukları ve yerleşim düzeni gibi çeşitli stil öğelerini kontrol eder.

CSS ile Renk ve Arka Plan Ayarları

CSS, web sayfalarının renk ve arka plan ayarlarını yapmayı kolaylaştırır. “color” özelliği metin rengini, “background-color” özelliği ise arka plan rengini belirler. Ayrıca, “background-image” özelliği ile arka plana görsel eklenebilir. Bu görselin konumu, tekrar etme durumu ve boyutu gibi özellikler de CSS ile kontrol edilebilir.

CSS ile Yerleşim Düzeni

CSS, web sayfalarının yerleşim düzenini kontrol etmek için çeşitli özellikler sunar. “margin” ve “padding” özellikleri, öğeler arasındaki boşlukları ayarlar. “display” ve “position” özellikleri, öğelerin sayfa üzerindeki konumunu belirler. Flexbox ve Grid Layout gibi modern CSS yerleşim teknikleri, karmaşık düzenlerin oluşturulmasını kolaylaştırır.

Responsive Tasarım ve CSS

CSS, responsive tasarımın temelini oluşturur. Medya sorguları (media queries) kullanarak, farklı ekran boyutlarına ve cihazlara uyumlu tasarımlar oluşturulabilir. Bu, kullanıcı deneyimini artırır ve web sayfalarının çeşitli cihazlarda tutarlı bir görünümde olmasını sağlar.

Sonuç

CSS, HTML ile birlikte kullanıldığında web sayfalarının görselliğini ve işlevselliğini büyük ölçüde artırır. CSS’nin doğru ve etkili kullanımı, profesyonel ve kullanıcı dostu web tasarımları oluşturmanın anahtarıdır. Web geliştiricilerinin CSS’yi iyi bir şekilde anlaması ve uygulaması, modern web tasarımında başarılı olmalarını sağlar.

Web Tasarımı – Ünite 7: Html Stil Şablonu (CSS)

1- HTML’de görsellik ayarlamaları için HTML’nin tamamlayıcı unsuru olarak kullanılan yapı aşağıdakilerden hangisidir?

A) Java
B) JS
C) CSS
D) Etiketler
E) UX

Cevap: C) CSS

Açıklama: CSS (Cascading Style Sheets), HTML ile birlikte kullanılarak web sayfalarının görsel stilini ayarlayan bir dilidir. CSS, sayfa düzenini, renklerini, yazı tiplerini ve diğer görsel öğeleri tanımlar.

2- HTML dosyası içerisinde CSS komutlarını tanımlamak üzere kullanılan etiket aşağıdakilerden hangisidir?

A) <body>
B) <head>
C) <script>
D) <style>
E) <css>

Cevap: D) <style>

Açıklama: HTML dosyasında CSS tanımlamaları yapmak için <style> etiketi kullanılır. Bu etiket, <head> etiketi içinde yer alır ve sayfanın stil bilgilerini içerir.

3- Seçici yapısı içerisinde aşağıdakilerden hangisi yer almaz?

A) seçici adı
B) biçimlendirme tanımı
C) parametre
D) değer
E) stil yapısı

Cevap: E) stil yapısı

Açıklama: CSS seçici yapısında seçici adı, biçimlendirme tanımı, parametre ve değer bulunur. “Stil yapısı” kavramı ise seçici yapısının bir parçası değildir.

4- “background: #FF0000 url(“dosya_Adi”) no-repeat center top;” şeklinde bir CSS kodu verilmiş olsun. Bu kod ile birlikte arka plan hakkında bazı biçimlendirmeler gerçekleştirilmektedir. Arka plana ait çeşitli özellikler için verilen parametre değerlerinden hangisi, arka plana yerleştirilecek görselin tüm sayfa dolana kadar tekrar etmeden, sayfada sadece bir kez yer almasını sağlar?

A) center
B) top
C) no-repeat center
D) center top
E) no-repeat

Cevap: E) no-repeat

Açıklama: “no-repeat” değeri, arka plana yerleştirilen görselin tekrar etmeden yalnızca bir kez görüntülenmesini sağlar. Diğer değerler ise görselin konumunu belirler.

5- table {background-color: red;} şeklinde bir seçici tanımladğımızı varsayalım. Aşağıdakilerden hangisi doğrudur?

A) Tablo içerisinde belirlenen bir satırın arka planını kırmızı yapar
B) Tüm tabloların arka plan rengini kırmızı yapar
C) Belirlenen bir tablonun arka plan rengini kırmızı yapar
D) Tüm tablolarda tek bir satırın arka planını kırmızı yapar
E) Seçici ilgili HTML öğesine atanmadığı sürece herhangi bir biçimlendirme yansımaz

Cevap: B) Tüm tabloların arka plan rengini kırmızı yapar

Açıklama: Bu CSS kuralı, sayfadaki tüm tabloların arka plan rengini kırmızı yapar. Seçici, “table” etiketini hedef alır ve arka plan rengini kırmızıya ayarlar.

6- Aşağıdakilerden hangisi isim tabanlı bir seçicidir?

A) #tablo {}
B) tablo {}
C) table {}
D) .tablo{}
E) hiçbiri

Cevap: C) table {}

Açıklama: “table” seçicisi, HTML’deki “table” etiketini hedef alır ve isim tabanlı bir seçicidir. Bu seçici, sayfadaki tüm “table” etiketlerine stil uygular.

7- a:hover { biçimlendirme tanımları} seçicisi ne işe yarar?

A) bağlantı adreslerinin biçimlendirmelerini değiştirir
B) bağlantı adresleri ziyaret edildiyse biçimlendirmelerini değiştirir
C) bağlantı adreslerinin üzerine gelince biçimlendirmelerini değiştirir
D) bağlantı adreslerinin başlangıç biçimlendirmelerini gerçekleştirir
E) bağlantılar iptal edilirse biçimlendirmelerini değiştirir

Cevap: C) bağlantı adreslerinin üzerine gelince biçimlendirmelerini değiştirir

Açıklama: “a:hover” seçicisi, fare ile bağlantıların üzerine gelindiğinde uygulanacak stil tanımlarını belirler. Bu, bağlantının üzerine gelindiğinde görünümünü değiştirmek için kullanılır.

8- “border-style” parametresi kenarlığın çizgi görünümünü biçimlendirmek için kullanılmaktadır. Aşağıdakilerden hangisi bu parametrenin alabileceği değerlerden değildir? I-dotted, II-dashed, III-crashed, IV-single, V-solid

A) I-II
B) I-III
C) IV-V
D) II-IV
E) III-IV

Cevap: E) III-IV

Açıklama: “border-style” parametresi “dotted”, “dashed” ve “solid” gibi değerler alabilir. Ancak “crashed” ve “single” değerleri bu parametre için geçerli değildir.

9- Metnin tam üzerine bir çizginin eklemek üzere kullanılan parametre değeri hangisidir?

A) “text-decoration-line”
B) “overline”
C) “underline”
D) “line-through”
E) “weight”

Cevap: D) “line-through”

Açıklama: “line-through” değeri, metnin tam üzerine bir çizgi ekler ve bu parametre “text-decoration” ile birlikte kullanılır.

10- ——— parametresi ile birlikte kenarlık ve iç kenar dolgusunun belirlenen genişlik ve yükseklik içerisinde kalması sağlanır. Boşluğa aşağıdakilerden hangisi gelmelidir?

A) “box-sizing”
B) “box-frame”
C) “box-line”
D) “box-padding”
E) “box-width”

Cevap: A) “box-sizing”

Açıklama: “box-sizing” parametresi, bir elemanın genişlik ve yüksekliğinin hesaplanma şeklini kontrol eder. “border-box” değeri, kenarlık ve iç kenar dolgusu dahil olmak üzere toplam genişlik ve yüksekliğin belirlenen boyutlar içinde kalmasını sağlar.

Web Tasarım ve Kodlama

Html Stil Şablonu (css)

Auzef Web Tasarımı ve Kodlama 1. Sınıf Bahar Dönemi Ünite Soruları ve Deneme Sınavları, 2024 Sınav Soruları

Web Tasarımı Ünite -7

#1. HTML dosyası içerisinde CSS komutlarını tanımlamak üzere kullanılan etiket aşağıdakilerden hangisidir?

#2. Metnin tam üzerine bir çizginin eklemek üzere kullanılan parametre değeri hangisidir?

#3. ——— parametresi ile birlikte kenarlık ve iç kenar dolgusunun belirlenen genişlik ve yükseklik içerisinde kalması sağlanır. Boşluğa aşağıdakilerden hangisi gelmelidir?

#4. HTML’de görsellik ayarlamaları için HTML’nin tamamlayıcı unsuru olarak kullanılan yapı aşağıdakilerden hangisidir?

#6. “border-style” parametresi kenarlığın çizgi görünümünü biçimlendirmek için kullanılmaktadır. Aşağıdakilerden hangisi bu parametrenin alabileceği değerlerden değildir? I-dotted, II-dashed, III-crashed, IV-single, V-solid

#7. table {background-color: red;} şeklinde bir seçici tanımladğımızı varsayalım. Aşağıdakilerden hangisi doğrudur?

#8. Aşağıdakilerden hangisi isim tabanlı bir seçicidir?

#9. a:hover { biçimlendirme tanımları} seçicisi ne işe yarar?

#10. Seçici yapısı içerisinde aşağıdakilerden hangisi yer almaz?

SONUÇ

Html Stil Şablonu (css)

Web Tasarımı – Ünite 7: Html Stil Şablonu (CSS)

Giriş

CSS Nedir?

CSS Seçicileri

İçsel, Gömülü ve Harici CSS

CSS Özellikleri ve Değerleri

CSS ile Renk ve Arka Plan Ayarları

CSS ile Yerleşim Düzeni

Responsive Tasarım ve CSS

Sonuç

Web Tasarımı – Ünite 7: Html Stil Şablonu (CSS)

1- HTML’de görsellik ayarlamaları için HTML’nin tamamlayıcı unsuru olarak kullanılan yapı aşağıdakilerden hangisidir?

2- HTML dosyası içerisinde CSS komutlarını tanımlamak üzere kullanılan etiket aşağıdakilerden hangisidir?

3- Seçici yapısı içerisinde aşağıdakilerden hangisi yer almaz?

5- table {background-color: red;} şeklinde bir seçici tanımladğımızı varsayalım. Aşağıdakilerden hangisi doğrudur?

6- Aşağıdakilerden hangisi isim tabanlı bir seçicidir?

7- a:hover { biçimlendirme tanımları} seçicisi ne işe yarar?

8- “border-style” parametresi kenarlığın çizgi görünümünü biçimlendirmek için kullanılmaktadır. Aşağıdakilerden hangisi bu parametrenin alabileceği değerlerden değildir? I-dotted, II-dashed, III-crashed, IV-single, V-solid

9- Metnin tam üzerine bir çizginin eklemek üzere kullanılan parametre değeri hangisidir?

10- ——— parametresi ile birlikte kenarlık ve iç kenar dolgusunun belirlenen genişlik ve yükseklik içerisinde kalması sağlanır. Boşluğa aşağıdakilerden hangisi gelmelidir?

Editor