Hazırlayan: MEHMET ÖZBAYRAM 22430070049
Ayırma: CSS, HTML veya diğer markup dillerinden ayrı bir dildir. Web sayfalarının görünümünü ve düzenini düzenlemek için kullanılır ve HTML veya diğer markup dillerinde kullanılan yapısal öğeleri stil ile ayrıştırır.
Kaskad: "Cascading" terimi, CSS'nin stil kurallarının öncelik sırasına göre uygulanmasını ifade eder. Birden fazla stil kuralları aynı öğeye uygulandığında, kaskad, hangi stil kurallarının öncelikli olduğunu belirler ve ona göre görünümü belirler.
ÖRNEĞİN:
/*style.css dosyası */
body {
background-color: #FOFOFO ;
}
h1 {
color: blue ;
}
Modülerlik: CSS, stil kurallarının modüler olarak yazılmasını sağlar. Stil kuralları ayrı dosyalarda veya aynı dosya içinde farklı stiller olarak organize edilebilir, böylece bakım ve yönetim kolaylaşır.
Selektörler: CSS, HTML veya diğer markup dillerindeki öğelere nasıl stil uygulanacağını belirlemek için selektörler kullanır. Öğe adı, sınıf, ID, özellikleri, üst soy ve alt soy gibi farklı selektör türleri bulunur.
ÖRNEGİN :
/* element seçici */
h1 {
color: blue;
}
/* sınıf seçici */
.my-class {
font-size: 16px;
}
/* ID seçici */
#my-id {
text-align: center;
}
/* alt soy seçici */
ul li {
list-style-type: circle;
}
Stil Kuralları: CSS, stil kuralları kullanarak web sayfalarının görünümünü belirler. Stil kuralları, belirli bir selektör tarafından hedeflenen öğelerin stil özelliklerini ve değerlerini içerir.
Kutu Modeli: CSS, web sayfalarındaki öğelerin kutu modelini (margin, border, padding, content) kontrol etmek için kullanılır. Bu sayede öğelerin pozisyonu, boyutu ve kenarlık gibi özelliklerini düzenlemek mümkün olur.
ÖRNEGİN :
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
Geçişler ve Animasyonlar: CSS, geçişler ve animasyonlar gibi hareketli efektler eklemek için kullanılabilir. Bu sayede web sayfalarına etkileyici ve etkileşimli bir kullanıcı deneyimi eklemek mümkün olur.
Medya Sorguları: CSS, medya sorguları kullanarak farklı cihazlara ve ekran boyutlarına özel stil kuralları belirlemek için kullanılabilir. Bu sayede duyarlı (responsive) web tasarımı yapmak mümkün olur.
ÖRNEGİN :
/* desktop ekranları için stil */
.box {
background-color: red;
}
/* mobil ekranlar için stil */
@media only screen and (max-width: 480px) {
.box {
background-color: blue;
Tarayıcı Desteği: CSS, modern web tarayıcıları tarafından geniş bir şekilde desteklenmektedir. Ancak bazı özellikler eski tarayıcılarda veya bazı cihazlarda tam olarak desteklenmeyebilir ve uyumluluk konusunda dikkat gerektirebilir.
Bu özellikler, CSS'nin web sayfalarını düzenlemek için güçlü bir araç olduğunu gösterir. CSS, web tasarımı ve geliştirme sürecinde önemli bir rol oynar ve web sitelerinin daha güzel, kullanıcı dostu ve erişilebilir olmasına yardımcı olur.
}}
Ö