[MÜZİK OYUN] 

Doug LLOYD: O zaman bir daha ele alalım Video bir daha dil hakkında konuşmak için. Biz CSS bahsedeceğiz bu sefer. Için kısa Yani CSS, Basamaklı Stil Şablonu, Kullandığımız başka dildir web siteleri oluşturarak zaman. Böyle düşün. HTML, biz düzenlemek için kullanabileceğiniz ne varsa Bizim sayfaya koymak istediğiniz içerik, CSS genellikle kullanımı aracı olduğunu Bizim web siteleri nasıl bakmak özelleştirmek için, ve nasıl bir kullanıcı deneyimi gerçekten Web sitemizde ile etkileşim vardır. 

HTML benzer, CSS bir programlama dili. Bu mantığı yoktur. Bu değişkenleri yok. O her türlü yok C yaptığı benzer şeyler akış. Bu bir stil dil. Ve kendi sözdizimi güzel Basit ve sadece açıklar nasıl unsurları bizim sayfa belirli HTML var elemanlar modifiye edilmelidir. Bu amaçla, değil varsa Henüz, HTML bizim video izledim veya bilmediğiniz HTML genellikle, seni Şuna bir göz atmak isteyebilirsiniz CSS ilk, çünkü bu tartışma bağlı olacak bazı HTML bilgisi. 

Yani burada gerçekten Basit CSS stil. Asla ettik bile önce CSS ile programlanmış, Eğer anlamaya Ben eminim Bu stil tam olarak ne. O ne yapar? Eh, bizim web vücuda uygulanan vücut etiketleri arasında sayfa, her şeyi Bizim HTML ve setleri mavi o sayfanın arka plan rengi. Evet, bu çok basit bir stil var. Aslında çok insan var samimi bir dil, CSS. Yani, daha önce hiç kullanmadım bile muhtemelen o ne yaptığını tahmin edebilir. Aslında, eğer biz bir sayfa, yüklenen Bu stil, her nasılsa gömülü Bizim sayfanın arka plan rengi olur mavi ve standart beyaz olmamak. 

Peki nasıl stil yaratırım? Peki ilk, biz var Bir seçici tanımlamak. Son örnekte, Bu seçici vücut oldu. Sonra açık var kaşlı ayraç ve biz konum tanımlamaya başlamak için gidiyoruz Bu seçici için stil. Kaşlı ayraçlar arasına, biz Sadece anahtar değer çiftleri bir listesi var. Bir önceki değer çifti oldu arka plan rengi mavi noktalı virgül, ama biz bunlardan daha yapabilirdi. Birden şeyler uygulayarak olabilir bu etiketi, o seçici vücuda. Bunların her biri bir ile ayrılır noktalı virgül, ve biz bunların her biri çağrı Bir deklarasyon, bir CSS beyanı. Hepimizin styling biz ile işiniz bittiğinde söz konusu etiketi uygulamak istediğiniz, biz sadece bir kapanış kıvırcık var stil bitirmek için brace, ve biz stil tanımlayan bitti söz konusu seçici için. 

Bazı yaygın CSS özellikleri nelerdir? Eh, belki koymak istiyorum şey etrafında bir sınır. Diyebilirsiniz Yani, sınır, Bu anahtar olurdu ve sonra değerleri olacaktır, Ne tarz, renk ve genişliği Eğer bunu istiyorum. Yani stil katı olabilir çizgi, kesikli çizgi, bir kesik çizgi, dalgalı bir çizgi olacak bir sırt hattı. Belki bunu istiyorum mavi veya siyah veya yeşil olabilir. Belki de olmak istiyorum 1 ya da 2 ya da 10 piksel genişliğinde. Siz bu şeylerin hepsini belirtebilirsiniz. Belki arka plan ayarlamak istediğiniz Belirli bir şekilde sayfanın rengi. Biz zaten ayarı gördüm Vücudun arka plan mavi olmak. 

Sonra bir anahtar kelime kullanabilirsiniz, yani CSS bazı renkleri vardır bu, bunun içine, yeşil, mavi inşa siyah, bildiğimiz çok basit renkler. Ama aynı zamanda herhangi belirtebilirsiniz İstediğiniz onaltılık renk. Renkleri tespit edilebilir Geri Çağırma Üç altıgen sayılar kümesi tarafından 0 ile 255, RG ve b için kırmızı, yeşil ve mavi bileşen. Ve böylece biz belirtebilirsiniz Biz istediğiniz herhangi bir renk, Bunun yerine mavi veya yeşil veya siyah kullanarak, sterlin kullanarak ve hex sonra altı basamaklı, ve bizi verecekti Altı haneli rengi. Yani arka plan rengi var. 

Biz de ön planda olması genellikle renk, sayfanızın metin olacak. Ve benzer şekilde bunu yapabilir anahtar kelime ve ya altı haneli hex ile. Yani herhangi bir renk belirtebilirsiniz sen sayfanızın metin için istediğiniz Belirli bir karşı arka plan rengini, yukarılardan. Sen de değişir ve başa çıkabilirim yazı tipi ve yol metniyle sayfasında oluşturulur. 

Yani yazı boyutunu değiştirebilirsiniz. Sen böyle ekstra anahtar kelimeler kullanabilirsiniz Ekstra küçük ya da küçük xx, ya da orta, Büyük ve böyle devam eder. Sen sabit noktalar kullanabilirsiniz, 10 nokta, 12 nokta, vb. Sen, yüzdelik,% 80,% 20 kullanabilirsiniz Nerede% 100 varsayılan font Genellikle gidiyor boyutu 11 ya da 12 sayı gibi bir şey. Yoksa bile onu temel alabilirsiniz En son yazı boyutu. Sadece bir şeyler yazdı ve siz biliyorsanız daha küçük olması için ne istiyorsun olduğunu ama sen bilmiyorsun tam olarak ne boyutta size Olması, iyi, sadece söyleyebiliriz istiyorum font boyutu küçüktür. Ve bu, kapalı temel olacak sadece yukarı yukarıdaki, bu yazı tipi boyutu var. Ve küçük veya büyük olsun. Yani farklı bir sürü var yolları yazı tipi boyutunu belirlemek için. 

Ayrıca ne belirtebilirsiniz İstediğiniz yazı ailesi. Belirli bir varsa isim, bir yolu var CSS-- Biz bu konuda konuşmak için gitmiyoruz burada-- çok özel bir yazı tipi tanımlamak için ve sayfanıza içine gömün. Ayrıca genel adları kullanabilirsiniz. Web güvenli yazı bir çok şey var O CSS önceden tanımlanmıştır. Ve Microsoft kullanıcı iseniz Son 20 yılda ofis, muhtemelen aşina Bu web güvenli yazı bir sürü Zaten, Times New Roman, Arial, Yeni, Gürcistan, Tahoma, Verdana kurye ve benzeri. Bunlar tüm web güvenli yazı tipleri kabul edilir. Ve aslında, bölüm nedeni olmaya geldim her sayfada web-- yapmak için kullanılacak olan Bu varsayılan erişim yazı batmıştı Çeşitli serifs ve tüm bu Biz içine almazsınız yazı şeyler, ancak bu genellikle CSS erişilebilir, Bunu yapmazsanız bile Aksi takdirde fontları tanımlar. Son olarak, metin hizalayabilirsiniz, o varlık yerine, varsayılan olarak, hizalanmış sola, sen-ebil sağa hizalayın, ya bunu merkezli hizalamak veya olabilir her iki kenar boşluklarını vurmak böylece haklı. O yüzden kullanabileceğiniz tüm seçenekler Metin neye benzediğini değiştirmek için, ve sayfanızda nasıl görüntülenen. 

Sizin seçiciler yok etiketleri yalnızca olmak zorunda. Biz daha önce bir vücut etiketi gördüm seçici ve etiket seçici sadece böyle gözüküyor. Size daha sonra bir etiket adı ve Bu etiket için bir stil tanımlayabilirsiniz. Ama aynı zamanda bir şeyler yapabiliriz bir kimlik seçici denir. Bir ID seçici oldukça benzer görünüyor. Ama şimdi ben kullanıyorum değilim fark Bir HTML etiketi, I, bu durumda, kullanıyorum #unique, veya benzersiz karma. Eğer gelen hatırlayacak olursak bizim HTML video, konuştuk etiketler nitelikleri olabilir nasıl. 

Ve bir nitelik olduğunu geçerlidir hemen hemen tüm HTML etiketleri, ama biz bu konuda konuşmadık, Kimlik etiketi denilen şeydir. Yani bu özel CSS olur Sadece sahip HTML etiketi için geçerlidir çok özel bir kimlik, adlandırılmış ettik. Eğer bir yerde var ise kodunuzu bir yere HTML dosyası, bir etiket ve sana Bu etikete bir nitelik olarak belirtin Kimlik, bu eşsiz eşittir Özellikle stil Burada tek arasında geçerli olacak eşsiz kimliği ile bu etiket. 

Ayrıca bir şey yapabilirsiniz Bir sınıf seçici denir. Sahip olmanın yanı sıra yüzden ID de yapabilirsiniz, nitelikleri HTML etiketleri için bir sınıf özniteliğini ekleyin. Ve bir class özniteliği kullandığınızda, birden fazla etiket tatbik edilebilir. Yani bazı şeyleri varsa o Belki söylemek benzer istiyorsanız, açık etiket vesaire, vesaire, vesaire, vesaire, sınıf öğrencilerini eşittir. Sonra bu belirli stil geçerli olacak kimin sınıfı her etikete öğrencileridir. Bu durumda, set olur Sarı arka plan rengi, ve biz, opacity istiyorum hangi Konuşmamız vermedi etiket olduğunu ama ne kadar şeffaf ilgilenir şey, bu durumda% 70 vardır. 

Için iki seçenek var yazma stil. Onları yazabilirsiniz doğrudan HTML içine stil yerleştirerek stil etiketleri arasında. Ve bu tarz etiketler içinde gitmek Web sayfasının baş etiketleri. Belki de daha çok tercih edilen bir yol yapmak ayrı bir .css dosyası yazmak için, ve sonra içine bağlamak senin Bağlantı etiketlerini kullanarak belge. Bağlantı etiketleri, yine vardır köprüler farklı, Bizim video bir HTML hatırlayacak olursak. Ve bağlantı etiketleri nasılsınız biz ayrı dosyalarda çekin. Bu tür eşdeğer gibi web programlama için #include. 

Öyleyse table.HTML bir göz atalım. Eğer gelen hatırlayacak olursak bizim HTML Video, ben gösterdi çok örneği Basit çarpma hoş görünüyordu tablo çirkin ve belki orada bir yol ile daha iyi yapmak için CSS, aslında görünmesi için Bir çarpma gibi daha masa falan bu sadece birbirine yapışmış değil hiçbir gerçek bölümü ile satırlar ve sütunlar arasında. Yani sından izin CS50 IDE ve bir göz atın CSS, tür, çimdik nasıl ne daha önce başladı, ve çok daha iyi bir şey yapmak. 

Bu yüzden CS50 IDE konum Şimdi, yabancı ise, Bu yukarı çekin edeceğiz masa HTML sayfası olduğunu. Table.HTML temelde Sadece içeriğini tanımlar Bir multiple-- bir olması gerekiyordu Dört dört çarpım tablosu. Oldukça basit değil. Ve biz o-cekti düşünürdüm Oldukça iyi organize bakmak. Ama aslında, biz bu sayfayı önizleme yaparken, Biz bu tür çirkin, doğru olduğunu görüyoruz? Açıkçası biz burada satır ve sütun var. Orada ayrılık çeşit. Ama anlamlı bir ayrılık değil. Biz aslında almıyorum konum Burada çok fazla bilgi. Ve arasında hiçbir ayrım yoktur cinsinden satır ve sütun yatay veya dikey kurallar. Biz muhtemelen bu yapabilirdiniz daha biraz bak. Öyleyse deneyelim. Yani buraya bu sekmeyi kapatmak için gidiyorum. Ve ben, benim table.HTML kapatmak için gidiyorum ve burada başka bir sürümü var table2.HTML denir. Bunu açmak gerekir. Sayfanın organıdır hemen hemen aynı, ama ben değiştim bir üstünde biraz. Ve ben burada yukarı olacak. Ben, bu defa edin Gömülü stil etiketlerini kullanarak. Ben bir stil etiketi açtım ve şimdi ben sadece içinde bir CSS stil tanımlama Bunun. Ben, masa diyor bir stil var. Bu benim Etiket seçici var. Ben nokta veya hash kullanarak değilim, Hangi ben ben yapıyor olacak bir kimliği veya sınıf seçici kullanarak oldu. Ben bir etiket seçici burada-- tablo var. Bu tarz gidiyor her tablo etiketi için geçerlidir. Görünüşe göre bir tane koymak istiyorum Geniş piksel, katı mavi sınır, Benim tablo içinde. Böyle muhtemelen olur sesler Doğru, durum yardımcı? Biz gidiyoruz işler çok daha iyi görünüyorsun. Yani bu iyi. Üslup, ben sadece ettik Burada benim stil gömülü. Kesinlikle bir var bunu yapmak için kabul edilebilir bir yol. Şimdi bu neye benzediğini görelim. Yani buraya geri dönün ve edeceğiz Benim table2.HTML önizleme olacak olacak. Eh, yani ne istediğini çok değil ama biz istedi tam olarak ne olduğunu. Biz bu tarz olduğunu söyledi bizim masaya uygulamak için gidiyoruz. Masamıza artık bir pikseli Çevresinde geniş, katı mavi sınır. Biz aslında almıyorum konum Tablo hücreleri de. Biz sadece masada alıyoruz. Yani CSS çalıştı. Bu uygulanan bir bizim masaya stil. Ama oldukça yapmadım Ne biz yapmak istedim. Biz yapmak nasıl alabilirim Ne biz bunu yapmak ister misin? 

Peki, bir daha bir göz atalım table3.HTML bu sürümü. Yani sadece bu sekmeleri kapatmak için gidiyorum. Ben buraya geri gitmek için gidiyorum benim ağaç dosya ve table3.HTML açmak. Yine, güzel bakmak için gidiyor Burada başında benzer. Ama haber bu kez, yerine kullanma Orada gömülü bir stil, Ben bağlantısını gidiyorum Bağlantı etiketi kullanarak stil. Yani görünüşte bir bağlama ediyorum tables.CSS denilen stil, ve bu iyi eşittir stil, sadece iyi means-- Bu dosya göreli nedir nedir Ben değilim, bir stil olduğunu doing-- değilim Benim sayfa için kullanıyor. Ben gerçekten ne görmek istiyorsanız Yani Ben burada CSS ile yapıyorum Bunu açık gitmek gerekir table.CSS de dosya. Yani biz buraya geri gidersiniz Yine bizim dosya ağacına. Table.CSS var. Biz bunu açık pop edeceğiz. Şimdi CSS biraz görüyorsunuz. Görünüşe göre, bir çift var şeyler oluyor burada. Ben görünüşte beş koymak istiyorum Geniş piksel, katı kırmızı ötesi, Benim masa etrafında. Biz zaten gidiyor biliyor Sadece çevre gitmek. Biz table2.HTML içinde olduğunu gördüm. Her satırda, ben görünüşte belirtmek istiyorum Bu satır yüksekliği 50 piksel yüksek. Yani her satır için, hatırlıyorum Bu, tr etiketi ne var Ben 50 piksel yüksek yapıyorum. 

Son olarak, ben bu yorum var. Ve bu CSS yorum yapmak nasıl. Bu blok ele geçirmek için çok benzer Yorumlar sözdizimi çizgi yıldızı. İstediğiniz tüm metin. Hiçbir çizgi çizgi CSS olsa var. Kısa inline yorumlar için elimizde Burada bu özel biçimi kullanmak için. Ben yapıyorum gibi görünüyor Benim td etiketleri şeyler çok. Td etiketleri veya masa hatırla gerçekten sadece vardır veriler, içinde sütunlar Bizim satırlar ve görünüşte Verilerin her bir parça için benim tabloda, ben istiyorum arka plan rengini ayarlamak için siyah, renk, beyaz olmak renk ön plan rengi olduğunu. Yani bu olacak Benim sayfanın metin. Büyük yazı tipi, 22 istiyor yazı gelin ve ben istiyorum o, yazı tipi ailesi Gürcistan olmak. Yani gitmiyorum varsayılan yazı tipini var. Ben Gürcistan, belirtmek için gidiyorum hangi Bu web güvenli yazı biridir Daha önce gördüğüm. Ben metin hizalanmış olmak istiyorum merkezi bir kutunun ortasına, Ben bırakılmak istemiyoruz hizalanmış veya sağa hizalanmış. Ve benim sütun genişliği istiyorum Geniş yanı sıra 50 piksel olmak. En az bir göz atalım Bu neye benzediğini, Bu belki de bir gelişme olup olmadığını görmek. Yani table3.HTML, gitmek için gidiyorum hangi hatırlama, bir bağlantı olarak table.CSS içerir ve biz önizleme edeceğiz. Bu doğru, çok daha iyi değil mi? Bu aslında bir bakmaya başlıyor daha çarpım tablosu gibi çok. O kırmızı sınır var Benim masa etrafında ama şimdi Ben de o belirttiğiniz Her satır, 50 piksel genişliğinde ya da tall-- bahane 50 piksel var Benim, her sütun 50 piksel genişliğinde. Her bir sütunda veriler ve sadece veri siyah bir arka plan vardır. Böylece neden bu var beyaz çizgiler vardır. Uzay çünkü bu hücrelerin tümü arasında, o bir sınır değil ve kendisi, bu sadece Ben sadece doldurma ediyorum Hücreler, aslında bu Tablonun sınırlarını, yapar Görünüşe göre, tüm boyunca onu var mıydı Sadece ince beyaz çizgiler oldu. Şimdi görünür konum. Şimdi ekranda kapalı pop. Ve böylece bu çok basit Ben uyguladığınız stil, ve şimdi benim tablo daha çok benziyor dört, dört tarafından çarpım tablosu, yerine sadece karışık karışıklık, bir her şeyi açıkça satırlar ve sütunlar olduğunu ama süper iyi organize. Biz gerçekten sadece yüzeyi çizilmeye ediyoruz Burada CSS ile neler yapabileceğini. Neyse CSS belgeleri oldukça basittir. Siz birkaç kullanacağız onun Oldukça sık, bağlıyor. Konuştuğumuz olanlar Daha önce bu video. Senin o birkaç vardır muhtemelen tüm kullanmaz. Ve bu da, sorun değil. Ama bir var ki, biliyorum Orada belgelerin çok. Bu yüzden her şeyi kapsayacak etmedi bile, kesinlikle kendi sol değiliz. Ama CSS gerçekten eğlenceli ile deneme. Ve ben şiddetle teşvik ediyorum web sayfaları ile oynamak için, ve bunları nasıl yapabiliriz bakın bakmak ve kullanıcı geliştirmek hissediyorum sayfanızı ziyaret deneyim. Ben Doug Lloyd değilim. Bu CS50 olduğunu.