WD 005 – CSS İleri Seviye – Muhammet Esat BÜYÜKBULUT

Table of Contents

Fonts

font-family: fontu belirler. Birden fazla font tipi yazılabilir. Eğer ilk yazılan font ailesi cihazda bulunamadıysa sonrakine geçer.
font-weight: fontun kalınlığını belirler.
font-style: fontun stili
font-size: fontun boyutu
font-variant: normal veya small-caps

font-family: "Times New Roman", Times, serif;

font-weight: normal;
font-weight: bold;
font-weight: 900;
  
font-style: normal;
font-style: italic;
font-style: oblique;

font-size: 15px;
font-size: large;
font-size: 150%;

line-height: normal;
line-height: 1.6;

font-variant: small-caps;

Google Fonts

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

<!--https://www.w3schools.com/css/css_font_google.asp -->

Units

İki tiptir:

Absolute(mutlak) : Duruma göre değişmeyen her zaman aynı kalan ölçü birimleridir. 1 metre dünyanın her yerinde her zaman 1 metredir.
Relative(göreceli) : Bir referansa göre belirlenen ölçü birimidir. Referans değişince ölçü birimi de değişir.

Unit	Description
cm	centimetersTry it
mm	millimetersTry it
in	inches (1in = 96px = 2.54cm)Try it
px *	pixels (1px = 1/96th of 1in)Try it
pt	points (1pt = 1/72 of 1in)Try it
pc	picas (1pc = 12 pt)

https://www.w3schools.com/cssref/css_units.php

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)
ex	Relative to the x-height of the current font (rarely used)
ch	Relative to the width of the “0” (zero)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport*
vh	Relative to 1% of the height of the viewport*
vmin	Relative to 1% of viewport’s* smaller dimension
vmax	Relative to 1% of viewport’s* larger dimension
%	Relative to the parent element

https://www.w3schools.com/cssref/css_units.php

Icons

https://www.w3schools.com/css/css_icons.asp

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Pseudo Class

Çeşitli eventların gerçekleşmesi durumunda çalışır.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Pseudo-elements

Pseudo class gibidir.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Nth Child Selector

pseudo class’tır. Bir parent’ın altındaki kaçıncı çocuğun etkileneceğini belirler. for loop gibi aslında
an+b formülüyle n = [0,1,2,…], b = 0 (default value), a = user defined

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

div#test p:first-child {text-decoration: underline;}
div#test p:last-child {color: red;}

ayrıca first-child ve last-child ile ilk ve son elementlerin stilini belirliyebiliriz.

Overflow

Content, içinde bulunduğu container’dan büyükse overflow gerçekleşebilir. Örneğin çok uzun bir yazı boyutları mutlak olan bir div içine sığmayıp taşabilir. Bu durumu overflow özelliğiyle düzeltebiliriz:

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: auto;
}

visible – Default. The overflow is not clipped. The content renders outside the element’s box
hidden – The overflow is clipped, and the rest of the content will be invisible
scroll – The overflow is clipped, and a scrollbar is added to see the rest of the content
auto – Similar to scroll, but it adds scrollbars only when necessary

Position

Static – this is the default value, all elements are in order as they appear in the document.
Relative – the element is positioned relative to its normal position.
Absolute – the element is positioned absolutely to its first positioned parent.
Fixed – the element is positioned related to the browser window.
Sticky – the element is positioned based on the user’s scroll position.

https://kolosek.com/css-position-relative-vs-position-absolute/#:~:text=Relative%20%2D%20the%20element%20is%20positioned,related%20to%20the%20browser%20window.

div{
  position: absolute;
  top: 40px; left: 40px;
}

Float

Resim yanında yazı vb şeyler yapmak için kullanılabilir. Eskiden çok kullanılan zahmetli bir tool’du ama artık flexbox var.

img {
  float: left;
}

p.clear {
  clear: left;
}

float: left; -> Resmi sola getirir. Resimden sonra gelecek yazılar ve diğer şeyler, resmin sağından devam eder
clear: left; -> Bu durumu kaldırır.

WD 005 – CSS İleri Seviye