• PL
  • EN

Podstawowe właściwości selektórów CSS.

Istnieje mnóstwo stron internetowych, na których możesz poznać wiele właściwości odnoszących się do tagów, klas i identyfikatorów. Można je podzielić ze względu na wiele kategorii - łatwo się w tym pogubić. Zaczynając swoją przygodę warto skupić się na początku na tych absolutnie podstawowych właściwościach.
Do takich można zaliczyć WYMIARY, KOLORY, CZCIONKA, MARGINESY, TŁA, OBRAMOWANIA...

Wymiary i jednostki

Aby zdefiniować szerokość lub wysokość dowolnego elemeentu na stronie interentowej musisz znać tylko dwie właściwości:
width - szerokość,
height - wysokość,

Dla przykładu można zdefiniować wysokość i szerokość akapitu:
p {               
width: 800px;
height: 300px;
}               


Bardzo istotne jest określenie jednostki szerokości oraz wysokości. Najczęściej używa się pikseli, jak w przykładzie powyżej, ale istnieją jeszcze inne
czasami bardziej praktyczne.

W internecie nie zaleca się używania cm lub mm, które używane są w życiu na codzień. Oprócz pikseli (px), jednym z najbardziej pratykczych jednostek jest procent.
p {               
width: 80%;
height: 100px;
}               

ustawienie szerokości procentowo sprawia, że niezależnie od wymiarów przegląradki, paragraf zawsze będzie zajmował 80% szerokości jej okna. W przykładzie powyżej wysokość jest ustawiona na poziomie 100px. Jeśli zajdzie taka potrzeba, zawsze można ustawić obie wartości na procent, wtedy wymiary paragrafu będą zmieniać się dynamicznie w zależności od wymiarów okna przeglądarki.

Kolory

color: - właściwość odnosi się do koloru czcionki. Może przyjmować takie wartości jak np.:
czerwony - color: red; ,
zielony - color: green;,
niebieski - color: blue;.

Kolor można też zapisać inaczej - stosując zapis szesnastkowy:
czerwony - color: #FF0000; ,
zielony - color: #00FF00;,
niebieski - color: #0000FF;.

Inną możliwość zapisywania kolorów podając wartości dla kolorów podstawowych RGB (czerwony, zielony, niebieski). Dla przykładu zapis koloru czerwonego będzie wyglądał tak: color: rgb(255,0,0);.
Kolor zielony będzie wyglądał tak: color: rgb(0,255,0);,
kolor niebieski będzie wyglądał tak: color: rgb(0,0,255);.

CIEKAWOSTKA!

Podczas zmiany kolorów istnieje też opcja dodania stopnia przezroczystości.
Półprzezroczysty kolor zielony będzie wyglądał tak: color: rgba(0,255,0,0.5);.
W nawiasie oprócz kodu dla podstawowych trzech kolorów, należy podać wartość przezroczystości - kanał alfa.
0 oznacza całkowitą przezroczystość, natomiast 1 nieprzezroczystość. By użyć częściowej przezroczystości należy użyć wartości pomiędzy 0 - 1 , np 0.5.

Czcionki

W celu zdefinowania wielkości czcionki, najczęściej używa się jednostek em lub px. Korzystanie z pixeli jest oczywiste i łatwo to zrozumieć. Jeśli chodzi o jednostkę em, jest trochę inaczej. Najłatwiej wyjaśnić zasadę działania przykładem.

Jeżeli w całym dokumencie HTML zostanie ustawiona okreslona wielkość czcionki np font-size: 10px; a w jednym z paragrafów zastosujemy wielkość równą 1em, oznacza to, że wielkość czcionki nie zmienia się i nadal wynosi 10px. Jeżeli w innym paragrafie tego samego dokumentu ustalimy wielkość czcionki na font-size: 1.2em;, oznacza to, że wielkość czcionki w tym miejscu będzie wynosiła 12px;, ponieważ 10px * 1.2 = 12px.

Bardzo podobna zasada dotyczy zapisu procentowego. Jeśli bazowa wielkość czcionki wynosi font-size: 10px;, to zapis font-size: 80%; w dalszej części dokumentu, oznaczać będzie wielkość wynoszącą 8px;


Marginesy

Margines najłatwiej pokazać na przykładzie znacznika <body>. Sytuacja jest bardzo podobna do kartki w edytorze tekstu. Tworząc dokument tekstowy nigdy nie zaczynamy od samej krawędzi. Zawsze zostawiamy odstęp od lewej i górnej krawędzi. Tak samo pisząc tekst nigdy nie docieramy z tekstem do prawej krawędzi. Tekst jest przenoszony do nowej linii zanim tekst dotknie prawej krawędzi kartki.
Aby ustalić jakie odstępy chcemy zastosować na swojej stronie internetowej, należy skorzystać z następującej właściwości:
body {                   
margin: 10px;
}            
 Taki zapis oznacza, że wszystkie cztery marginesy (górny, prawy, dolny i lewy) mają dokładnie 10px.

Aby ustalić różne wartości dla wszystkich czterech marginesów, można zastosowac następujące rozwiązanie:
body {                                 
margin: 10px 15px 20px 30px;
}                          
 Taki zapis należy odczytywać w następujący sposób:
górny margines: 10px, prawy margines: 15px, dolny margines: 20px, lewy margines: 30px.
W wielkim skrócie, zapisujemy wartości zgodnie z ruchem wskazówek zegara, zaczynając od marginesu górnego.


CIEKAWOSTKA!

Jeśli chcesz, nie musisz definiować wszystkich czterech marginesów, jeśli część z nich ma być taka sama. Oto kilka przykładów innego wykorzystania określania wielkości marginesów:

body {
margin: 10px 50px 35px;
}
 górny margines ma 10px
prawy i lewy margines mają 50px
dolny margines ma 10px.

Jeszcze inaczej sytuacja wygląda kiedy podajemy tylko dwie wartości:

body {
margin: 10px 50px;
}
 górny i dolny margines mają 10px
prawy i lewy margines mają 50px

 Margines ustawiony na auto, powoduje, że obiekt będzie wyśrodkowany:

div {
width: 550px;
margin: auto;
}
 pudełko będzie miało szerokość 550px i wyświetli się na środku strony www.

Obramowania

Obramowanie może dotyczyć wielu elementów na stronie internetowej. Nie tylko obiekty aktywne jak linki, ikony czy obrazy. Może ono dotyczyć również całej strony www. Obramowanie ma 3 istotne wartości:
div {                   
border: 2px solid blue;
}                     
 Pierwsza z nich to szerokość linii obramowania. W przykładzie powyżej ma wartość 2px. Następną wartością jest styl linii. W przykładzie wyżej to linia ciągła. Ostatnią wartością jest niebieski kolor obramowania.
Warto pamiętać, że obramowanie podlega taim samym zasadom co margines.


CIEKAWOSTKA!

Decydując się na obramowanie warto znać style jakie można zastosować: dotted, dashed, solid, double, groove, ridge, inset, outset .

Właściwości niebzbędne do ustawienia pojedynczych linii z osobna wyglądają następująco:
.pasek {
border-top: 2px;
border-right: 2px;
border-bottom: 2px;
border-left: 2px;
}

Nie musisz ustawiać wszystkich wartości jeśli nie chcesz. Możesz skorzystać tylko z wybranych właściwości lub tylko z jednej:
.pasek {
border-width: 1px;
border-style: solid;
border-color: red;
}

Jak ustawić tło?

Aby sformatować tło można nie tylko zmienić jego kolor. Istnieje możliwość ustawienia obrazu w tle, który będzie zachowywał się na wiele róznych sposobów:
div {                   
background-color: lightblue; ;
background-image: url("images/wallpaper.png");
}                     
 Drugi z powyższych przykładów używany jest w sytuacji gdy obraz zlokalizowany jest w folderze podrzędnym. Może zdarzyć się, że ścieżka dostępu do pliku graficznego jest inna. Obraz pojawi się wyłącznie wtedy, kiedy ścieżka do obrazu będzie prawidłowa. Nie zapomnij o rozszerzeniu pliku graficzengo!

Istnieje możliwość powielania tego samego obrazka w poziomie lub pionie. Parametr x odpowiada za powtarzanie w poziomie, a y w pionie.

body {                   
background-image: url("obrazek.gif");
background-repeat: repeat-x; background-repeat: repeat-y;
}                     

Bardzo ciekawą opcją jest możliwość ustawienia przewijalnego obrazu w tle.

body {                   
background-image: url("obrazek.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}                     

 Opcja no-repeat sprawia, że obraz pojawia się tylko raz, natomiast background-attachment: fixed; sprawia, że obraz pozostaje w tym samym miejscu nawet podczas scrollowania strony internetowej.


Basic properties of CSS selectors.

There are lots of websites where you can learn about many properties related to tags, classes, and identifiers. They can be divided into many categories - it's easy to get confused. When starting your adventure, it is worth focusing on these absolutely basic properties..
These include DIMENSIONS , COLORS , FONTS , MARGINES , BACKGROUNDS , BORDERS...

Dimensions and units

To define the width or height of any element on a web page, you only need to know two properties:
width and height.

For example, you can define the height and width of a paragraph:
p {               
width: 800px;
height: 300px;
}               


It is very important to define the unit of width and height. Pixels are most often used, as in the example above, but there are others that are sometimes more practical.

On the Internet, it is not recommended to use cm or mm , which are used in everyday life. Besides pixels ( px ), one of the most practical units is the percentage.
p {               
width: 80%;
height: 100px;
}               

setting the width as a percentage means that, regardless of the browser dimensions, a paragraph will always occupy 80% of the width of its window. In the example above, the height is set to 100px.If necessary, you can always set both values to percent, then the paragraph dimensions will change dynamically depending on the dimensions of the browser window.

The colors

color: - this property relates to the font color. It can take values such as, for example.:
red - color: red; ,
green - color: green;,
blue - color: blue;.

Color can also be written differently - using hexadecimal notation:
red - color: #FF0000; ,
green - color: #00FF00;,
blue - color: #0000FF;.

Another possibility to save colors by providing values for RGB primary colors (red, green, blue). For example, red color it will look like this: color: rgb(255,0,0);.
The green color will look like this: color: rgb(0,255,0);,
The blue color will look like this: color: rgb(0,0,255);.

REMEMBER!

When changing colors, there is also an option to add a degree of transparency.
Half-transparent green will look like this: color: rgba(0,255,0,0.5);.
In parentheses, apart from the code for the basic three colors, the transparency value should be given - the alpha channel.
0 is completely transparent and 1 is opaque. To use partial transparency, use a value between 0 - 1, for example 0.5.

Fonts

In order to define the size, the most common units are em or px. The use of pixels is obvious and easy understand it. When it comes to the em unit, it's a bit different. It is easiest to explain the principle of operation with an example.

If a specific font size is set in the entire HTML document, for example font-size: 10px; and in one of the paragraphs we will use a size equal to 1em, it means that the font size does not change and is still 10px. If in another paragraph of the same document we set the font size to font-size: 1.2em; , it means that the font size here will be 12px; , because 10px * 1.2 = 12px.

A very similar rule applies to the percentage notation. If the base font size is font-size: 10px;, then font-size: 80%; later in the document will mean 8px;


Margins

The easiest way to show the margin is on the example of the <body> tag. The situation is very similar to a card in a word processor. When creating a text document, we never start from the edge. We always leave a space from the left and top edges. Similarly, when writing a text, we never reach the right edge with the text. The text is moved to a new line before the text touches the right edge of the page.
To determine what spacing you want to use on your website, use the following property:
body {                   
margin: 10px;
}            
 This means that all four margins (top, right, bottom, and left) are exactly 10px.

If you want to set different values for all four margins, you can use the following solution:
body {                                 
margin: 10px 15px 20px 30px;
}                          
 Such code should be understood as follows:
top margin: 10px, right margin: 15px, bottom margin: 20px, left margin: 30px.
Briefly, we write the values clockwise, starting with the top margin.


REMEMBER!

If you want, you don't need to define all four margins if some of them are the same. Here are some examples of other uses determining the size of the margins:

body {
margin: 10px 50px 35px;
}
 the top margin is 10px
right and left margins are 50px
the bottom margin is 10px.

The situation is even different when we give only two values:

body {
margin: 10px 50px;
}
 top and bottom margins are 10px
right and left margins are 50px

 When set to auto, the object will be centered:

div {
width: 550px;
margin: auto;
}
 the box will be 550px wide and displayed in the center of the web page.

Borders

A border can apply to many elements on a web page. Not only active objects such as links, icons or images. It may also apply to the entire website. The border has 3 important values:
div {                   
border: 2px solid blue;
}                     
 The first is the width of the border line. In the example above it is 2px. The next value is the line style. In the example above is a solid line . The last value is the blue color of the border.
It's worth remembering that the border follows the same rules as the margin.


REMEMBER!

When deciding on a border, it is worth knowing the styles that can be used: dotted, dashed, solid, double, groove, ridge, inset, outset .

The properties necessary to set up single lines are as follows:
.section {
border-top: 2px;
border-right: 2px;
border-bottom: 2px;
border-left: 2px;
}

You don't have to set all the values if you don't want to. You can only use some of the properties or just one:
.section {
border-width: 1px;
border-style: solid;
border-color: red;
}

How to set a background image?

To format the background in addition to the color You can set a background image. This image can behave in many different ways:
div {                   
background-color: lightblue; ;
background-image: url("images/wallpaper.png");
}                     
 We use the second example when the image is located in a child folder. Note that the path to the file may be different. The image will only appear if the path to the image is correct. Don't forget about the graficzengo file extension!

You can duplicate the same image horizontally or vertically. Parametr The x parameter is for repeating horizontally and y vertically.
body {                   
background-image: url("image.gif");
background-repeat: repeat-x; background-repeat: repeat-y;
}                     

A very interesting option is the ability to set a scrollable background image.

body {                   
background-image: url("image.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
                     
The no-repeat option causes the image to appear only once, while the background-attachment: fixed; keeps the picture in there the same place even when scrolling the website.