CSS
HTML ve CSS ile Tablo Yapımı
<!DOCTYPE html> <html> <head> <title></title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"> <style type="text/css"> .arabatablo { border-collapse: collapse; font-family: 'PT Sans', sans-serif; width:100%; } .arabatablo td, .arabatablo th { border: 1px solid lavenderblush; padding: 8px 12px; } .arabatablo th { text-align: left; background-color:tomato; color:white; } .arabatablo tr:hover{ background-color: lavenderblush; } .arabatablo tr:nth-child(even){ background-color:floralwhite; } </style> </head> <body> <table class="arabatablo"> <tr> <th>Otomobil Markası</th> <th>Menşei</th> &l...
Placeholder Form Input Renk Değiştirme (Arkaplan Font Yazı)
HTML formlarında inputl kutularımızın arkaplan renklerini yazı renklerini ve fontlarını ::placeholder belirteci ile değiştirebiliriz. Ancak bunlar Microsoft tarayıcıları olan Edge ve Internet Explorer’da farklı çalışmaktadır. Bunlar da dahil olacak şekilde ihtiyacınız olan tüm kodları aşağıda sizlerle paylaştım. ::-webkit-input-placeholder { /* Edge */ color: white; background-color:tomato; font-family: 'Roboto', sans-serif; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: white; background-color:tomato; font-family: 'Roboto', sans-serif; } ::placeholder { color: white; background-color:tomato; font-family: 'Roboto', sans-serif; }
Beautiful Soup ile HTML Tagleri Alma
Beautiful Soup ile sadece bir kaç aşama ile html taglere ulaşabiliriz. Bu da bize büyük kolaylıklar sağlamaktadır.Sayfa analizi veya veri çekme gibi işlemlerde elimizi güçlendiren bu kodları daha önce anlattığım aşamalar ile birlikte göstermek istiyorum. import requests from bs4 import BeautifulSoup robotum={"User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36"} cagrigungor=requests.get("https://www.cagrigungor.com/",headers=robotum) sayfakaynagi=cagrigungor.content soup=BeautifulSoup(sayfakaynagi,"lxml") soup=BeautifulSoup(sayfakaynagi,"html.parser") print(soup.title) print(soup.h1)
Bootstrap Gerekli Mi ?
Bootstrap bir framework yapısıdır. CSS için twitter tarafından hazırlanmıştır. Bu önemsiz detayları geçip sorumuza cevap bulmaya çalışalım. Bootstrap web tasarımı yaparken html içerisinde kullanılan class yapılarıdır. CSS ile bunları hazırlamaya gerek yoktur. Kurumsal sitelerin dev firmaların bir çoğu bootstrap yapı kullanmaz. Çok kaliteli tasarımların bazı bootstrap kullanır ancak küçük bir kısmını oluşturur. Yani bu insanlar CSS kodları da yazmışlardır. Bootstrap mobil uyumlu sayfa tasarımında çok büyük kolaylıklar sağlar. Kusursuz bir responsive altyapısı vardır. Bootstrap kesinlikle zorunlu değildir. Ancak özellikle back-end çalışmak isteyenler için bulunmaz bir nimettir.
CSS Arkaplan Görseli Ekleme
Css le html elementleriniz arkasına görseller ekleyebilir. Eklediğiniz görselleri manipüle edebilirsiniz. Bunun için seçeceğiniz elementin arkaplan görseli kullanmaya uygun olması gerekmektedir. Kısaca background-image: url("resim adresi"); HTML <div class="cagri"> <h1>Hasan Çağrı Güngör></h1> </div> CSS .cagri { background-image: url("https://image.freepik.com/free-vector/futuristic-digital-cyber-technology-background_115579-430.jpg"); /* Kullanılacak Görsel */ background-color: tomato; /* Görsel Çalışmassa Arkaplan Rengi */ background-position: center; /* Görseli Ortala */ background-repeat: no-repeat; /* Resmi tekrarlama */ background-size: cover; /* resmi ekranı kaplayacak hale getir. */ }
CSS İçerisinde CSS Çağırma (Import)
Hazırladığımız bir CSS dosyası içerisinde dışarıdaki bir CSS kaynağından .css uzantılı bir dosya çağırabiliriz. Bunu özellikle CMS sistemlerde sık kullanıyoruz. Dikkat etmeniz gereken nokta html e css import etmiyoruz. Bir css dosyasına başka bir css ekliyoruz. Bu işlem için tek satırlık bir kod işimizi görecektir. Bir de alternatifi var ancak paylaşmak istemiyorum. Genelde burada yazdıklarımı okumadan o kodları kopyaladığınız için hata almanızı istemem. @import 'cagrigungor.css';
CSS Renkler
CSS ile html elementlerinin renklerini değiştirebilmemiz mümkündür. Ayrıca CSS ile aynı özelliği gösteren bütün elementlerin renklerini aynı şekilde ayarlayabiliriz. Bu da bize büyük kolaylık sağlamaktadır. CSS’de Yazı Rengi Değiştirme CSS’de yazı rengi değiştirmek için color etiketini kullanabiliriz. HTML’de kullanabildiğimiz tüm renkleri CSS de de kullanabiliriz. Örnek: p { color:tomato; } Yukarıda yazdığımız CSS kodlu ile web sayfasında bu css kodlarının çalıştığı her paragrafın rengi tomato rengi olacaktır. Önizleme: CSS kodları sayesinde web sayfamdaki her yazıya tek tek biçimlendirmek yerine tek bir kez biçimlendirerek istediğim gibi gösterebiliyorum. Bu hem zamandan kolaylık sağlarken hem de sayfamın hızı için de büyük önem taşıyor. CSS Arkaplan Rengi Değişt...
CSS Giriş
CSS HTML’in web tasarımında en büyük ortağıdır. HTML ve HTML5 üzerinde web tasarımlarında CSS HTML’e stillendirme açısından büyük kolaylıklar sağlamaktadır. CSS kodları html’den ayrı olarak yazılmakta ancak html içerisinde kendine ait bir alanda yazılabilmektedir. CSS kodları için HTML’de kullandığınız her editörü kullanabilirsiniz. Yeni nesil web sayfalarında CSS kullanmak bir zorunluluktur diyebiliriz. HTML içerisinde kullandığımız zaman css kodları html < head > tagleri arasında oluşturulmuş < style > tagleri arasına yazılmalıdır. Örnek: <html> <head> <style> h1 { color:red; font-size:28px; } </style> <head> <body> <body> <html> Yukarıdaki örnekte html kodları içerisinde < style > etiketleri arası...
HTML HEX PNG ve CSS ile Türk Lirası TL Sembolü
Türk lirası para birimi için bir çok formatta hazırlanmış kodlar bulunmaktadır. Belirli bir süredir uluslararası sisteme de girmiştir. Bu yazı içerisinde TL ayni türk lirasının başta png ve jpg versiyonları olmak üzere svg hex html css gibi bir çok tarzda çıktısını bulabilirsiniz. HTML ile Türk Lirası TL Sembolü HTML kodları arasına türk lirası sembolünü göstermek için özel hazırlanmış kod parçacığını kullanabiliriz. Bu kod tüm web sitelerinde tüm dünyada bir harf gibi görünebilecektir. HTML Türk Lirası: ₺ Örnek: <span style="font-size:124px;"> ₺ </span> Önizleme: ₺ CSS ile Türk Lirası Sembolü CSS ile de Türk lirası sembolü oluşturabiliriz. Bunun için kullanacağımız kod ise; \20BA span { content: "\20BA"; } HEX ile Türk Lirası Sembolü Hex kodlar...
HTML ‘de ID Kullanımı
HTML’de class ve id yapıları birbirlerine çok benzerler ancak id yapıları ancak bir kez kullanılabilirler yani tekildir. Ayrıca id niteliğini Javascript kodları için de kullanabiliriz. Class hakkında yazımızı okuyabilirsiniz. HTML de Class Yazma ve Kullanımı Örnek: <h1 id="anasayfabaslik">Ana Sayfa Başlığı</h1> Class yapılarını css kodlarında yazarken başına nokta koyuyorduk. id yapılarıda ise hashtag ekleriz. <style> #anasayfabaslik { background-color:tomato; padding-top:30px; } </style>
HTML’de Class Yazma ve Kullanımı
HTML içerisinde html elentlerine daha önce belirli stiller vermiştik. Bu sitiller ile ilgili yazımızı HTML İçerisine CSS Yazma ( Stiller ) okuyabilirsiniz. HTML elementleri içerisine style yazmak yerine aynı özelliği gösteren elementlere tek bir kere bu stilleri vermek için class yapısını kullanırız. Yani belirli elementleri sınıflandırırız. Bu yapı için class= ” ” ek niteliğini kullanırız. Örnek: <h1 class="yazi-baslik" > Yazıların Başlığı Burada</h1> Yukarıdaki gibi bir class yapısını kullanarak artık her başlık oluşturduğumuzda tekrar html içerisinde nitelik olarak style yazmamıza gerek olmayacak en başta tasarladığımı şekilde kullanabilceğiz. Bunları yapabilmek için CSS kodları yazabilmeyiz. CSS kodlarını ise html içerisinde bulunan < head > ……...
HTML ile CSS Yazma
HTML ile oluşturabildiğimiz kodların her geçen gün işlevleri artıyor. Ancak hala profesyonel ve modern görünümlü yeni nesil bir web sitesi yapabilmemiz için ek yazılımlara ihtiyaç duyuyoruz. HTML’in web sitesi yapımında en büyük iki ortağı; CSS Javascript Kodlarıdır. Bu dersimizde CSS kodlarını kullanmanın ilk adımı olan HTML içerisinde CSS kodları nasıl yazılır konusunu işleyeceğiz. HTML içerisinde style ek niteliğini kullanmayı öğrenmiştik. Tekrar etmek isteyenler için; HTML İçerisine CSS Yazma ( Stiller ) Şimdi ise html etiketlerinin içerisinde değilde < head > kodları arasında sadece CSS yazmak için özel bir alan oluşturacağız. CSS kodlarını html’de < style > ……………. < / style > kodları arasına yazmaktayız. Örnek: <!DOCTYPE...
- 1
- 2
