CSS, son on yılda web sayfalarının gördüğü en önemli değişikliktir ve stil ile içeriğin ayrılmasının önünü açmıştır. Modern bir şekilde, XHTML, semantik İşaretlemenin Ne Olduğunu ve İnternetin Sonsuza Kadar Nasıl Değişeceğini Semantik Olarak Tanımlamaktadır [Teknoloji Açıklaması] Semantik İşaretlemenin Ne Olduğu ve İnterneti Her Zaman Nasıl Değiştireceği [Teknoloji Açıklaması] yapısını - web sayfasının anlamı ve içeriği CSS sunumu ile ilgilenirken. Birçoğumuz biraz HTML yazmakta rahat olsa da, CSS'nin bir tür kara büyü olduğunu düşünüyoruz. Bunu, 5 adımda CSS büyücüsü olmak için değiştirmeyi umuyorum..

Bu makale, henüz CSS ile çok az deneyime sahip kullanıcıları hedeflemektedir, ancak umarım herkes için bir şeyler vardır..

(1) Dilbilgisi

Herhangi bir dil gibi, CSS'nin de belli bir gramer bilgisi vardır ve biraz görünebilir “bilgisayar programı” ilk başta, ama bu gerçekten sadece bir şeyler listesi. Bütün CSS'ler şöyle yazılmıştır:

SEÇİCİ EMLAK: DEĞER; MÜLK DEĞERİ; MÜLK DEĞERİ;

Bildiğiniz gibi, CSS web sayfasındaki seçilen bir öğeye stil uygulayarak çalışır. Örneğin, tüm bağlantılarınızın nasıl gösterileceğini biçimlendirmek için, “bir” seçici olarak. Tecrübe ile öğreneceğiniz çeşitli özellikler ve değerler, ancak bazıları kolaydır - COLOR, BORDER, FONT-BOYUT, YÜKSEKLİK gibi şeyler, değerleri kırmızı, 14pt,% 150, 1000px olabilen bazı olası özelliklerdir - gerçekten kolay. Tüm bağlantıları kırmızı renklendirme ile ilgili nasıl gideceğimizi görelim:

a color: red;

Virgüllerle aynı anda birden fazla öğe türü yapmak için aynı CSS bloğunu kullanabilirsiniz:

a, h2, h3 renk: kırmızı;

Bu, yalnızca tüm bağlantıları değil, aynı zamanda tüm h2 ve h3 başlıklarını aynı kırmızı renkte yapar. Dikkat edin, hepsi farklı boyutlarda olabilir, çünkü bu özel kod bloğu SADECE renk değiştirir.

(2) Sınıf ve Kimlik seçicileri

Bazen TÜM unsurları aynı şekilde stilize etmek istemezsiniz - ve bu durumlarda kullanabilirsiniz. SINIF veya İD. Genel bir kural olarak, kimlik bir kereye mahsus elemanlar için kullanılır ve en yaygın olarak büyük içerik blokları veya tek özel düğmeler tanımlamak için kullanılır..

Örneğin, sayfanızın HEADER, CONTENT ve FOOTER blokları için büyük bir DIV olabilir - bu sayede kimlikleri ID olarak tanımlamak akıllıca bir hareket olacaktır. Öte yandan, sınıflar sayfa boyunca stil öğelerinin tekrarlanması muhtemel olduğunda kullanılır. Belki de 2px düz kırmızı kenarlıklı köşeleri yuvarlatılmış bir demet öğenin olmasını istersiniz - aynı satır içi stili milyonlarca kez yazmak yerine, bunun için bir sınıf tanımlar ve bunun yerine sınıfı bu öğelere eklersiniz. Peki bu kimlikleri ve sınıfları nasıl tanımlarsın??

 
SIDEBAR
Bu, tarayıcınızın alt kısmında yeni bir pencere açacaktır. Sol tarafta, güzel biçimlendirilmiş ve daraltılabilen XHTML görünümü bulunmaktadır. Herhangi bir öğenin üzerine gelinirse, sayfadaki o öğeyi vurgulayacak ve etrafındaki CSS kutu modelini gösterecektir (ileriki bir dersteki kutu modeli hakkında daha fazla konuşacağız). Buradaki kilit nokta, herhangi bir öğeyi seçip sağ tarafta hangi CSS'nin üzerinde etkili olduğunu görebilmeniz ve seçicilerin buna neden olduğu şeyleri parçalayabilmenizdir. Satır içi eklenen her şey, altında gösterilir. “element.style” başlığı. Şimdi bu sayfada deneyin. Sağda listelenen CSS’nin çoğu zaman merkezi bir çizgiyle çarpıldığına dikkat edin - bu, bu eleman üzerinde çalışan başka bir seçicinin önceliğe sahip olduğu ve çarpıştığını geçersiz kıldığı anlamına gelir.
Bugün için bu kadar önemli, ancak bazı temel başlangıç ​​noktaları kaçırdığımı düşünüyorsanız veya CSS ile ilgili herhangi bir özel sorunuz veya probleminiz varsa, sitemizdeki teknik destek bölümünden isteyin. Bir dahaki sefere, temel renk ve beden değişikliklerinin ötesinde CSS bilginizi geliştirmek istiyorum.