Harmonogram kursów

Zaawansowane tutoriale CSS

• CSS Dodatkowa książka
• Wprowadzenie do CSS
• Podstawowa gramatyka CSS
• Zaawansowana gramatyka CSS
• Zależne selektory CSS
• Selektory id CSS
• Selektory klas CSS
• Tworzenie CSS
• Tło CSS
• Tekst CSS
• Czcionki CSS
• Listy CSS

Model ramki CSS

• Podsumowanie modelu okien CSS
• Wewnętrzne marginesy CSS
• Krawędzie CSS
• Wewnętrzne marginesy CSS
• Scalanie marginesów zewnętrznych CSS

CSS umieszczanie

• Podsumowanie pozycjonowania CSS
• Pozycjonowanie względne CSS
• Pozycjonowanie absolutne CSS
• Przesunięcia CSS

Wybieraki CSS

• Selektory elementów CSS
• Grupowanie selektorów CSS
• Szczegółowe omówienie selektorów klas CSS
• Szczegółowe omówienie selektorów id CSS
• Szczegółowe omówienie selektorów atrybutów CSS
• Selektory potomka CSS
• Selektory potomka CSS
• Selektory brata CSS

Wybieralne kursy

Polecane kursy:

• Skarbiec CodeW3C.com

Atrybut umieszczania CSS (Positioning) pozwala na umieszczanie elementów.

CSS umieszczanie i float

CSS oferuje niektóre atrybuty umieszczania i float, które pozwalają tworzyć układy kolumnowe, łączyć części układu, a także realizować zadania, które od lat były realizowane za pomocą wielu tabel.

Podstawowa idea umieszczania jest bardzo prosta, pozwala zdefiniować pozycję ramki elementu w stosunku do jego normalnej pozycji, lub w stosunku do rodzica, innego elementu, nawet samego okna przeglądarki. Oczywiście, ta funkcja jest bardzo potężna i zaskakująca. Warto zauważyć, że agent użytkownika lepiej obsługuje umieszczanie w CSS2 niż inne aspekty, co nie powinno dziwić.

Z drugiej strony, CSS1 po raz pierwszy wprowadził浮动, który opiera się na funkcji dodanej przez Netscape we wczesnych etapach rozwoju sieci Web. Float nie jest całkowicie umieszczany, ale oczywiście nie jest również normalnym układem strumieniowym. Omówimy znaczenie float w następnych rozdziałach.

Everything is a box

Elements such as div, h1, or p are often called block-level elements. This means that these elements are displayed asA block of contenti.e., 'block box.' Conversely, elements such as span and strong are called 'inline elements' because their content is displayed in a line, i.e., 'inline box'.

You can use Display attributeChange the type of the generated box. This means that by setting the display attribute to block, inline elements (such as <a> elements) can behave like block-level elements. You can also set display to none to make the generated element have no box. In this way, the box and all its content will not be displayed and will not occupy space in the document.

But in one case, even without explicit definition, a block-level element is created. This situation occurs when some text is added to the beginning of a block-level element (such as a div). Even if these texts are not defined as paragraphs, they will be treated as paragraphs:

<div>
some text
<p>Some more text.</p>
</div>

In this case, this box is called an anonymous block box because it is not associated with a specially defined element.

The text lines of block-level elements also have a similar situation. Suppose there is a paragraph containing three lines of text. Each line of text forms an anonymous box. Styles cannot be directly applied to anonymous blocks or line boxes because there is no place to apply styles (note that line boxes and inline boxes are two different concepts). However, this helps to understand that everything seen on the screen forms some kind of box.

CSS positioning mechanism

CSS has three basic positioning mechanisms: normal flow, floating, and absolute positioning.

Unless specified otherwise, all boxes are positioned in the normal flow. That is, the position of elements in the normal flow is determined by the position of the elements in (X)HTML.

Block-level boxes are arranged one after another from top to bottom, and the vertical distance between boxes is calculated from the vertical outer margins of the boxes.

Inline boxes are horizontally arranged in a line. Horizontal inner margins, borders, and outer margins can be used to adjust their spacing. However, vertical inner margins, borders, and outer margins do not affect the height of the inline box. The horizontal box formed by a line is calledLine box (Line Box)The height of the line box is always sufficient to contain all the inline boxes it contains. However, setting the line height can increase the height of this box.

In the following chapters, we will explain in detail relative positioning, absolute positioning, and floating for you.

Atrybut position CSS

By using Position attributeWe can choose 4 different types of positioning, which will affect the way the element frame is generated.

The meaning of the position attribute value:

static

Element frame is generated normally. Block-level elements generate a rectangular frame as part of the document flow, while inline elements create one or more line boxes, placed within their parent element.

relative

Ramka elementu przesuwa się o pewną odległość. Element zachowuje kształt przed umieszczeniem, a przestrzeń, jaką zajmował, pozostaje niezmieniona.

absolute

Ramka elementu jest całkowicie usunięta z przepływu dokumentu i umieszczana względem bloku zawartości. Blok zawartości może być innym elementem w dokumencie lub początkowym blokiem zawartości. Przestrzeń, jaką element zajmował w normalnym przepływie dokumentu, jest zamknięta, jakby element nigdy nie istniał. Po umieszczeniu elementu tworzy blokowy ramkę, niezależnie od typu ramki, który tworzyłby w normalnym przepływie.

fixed

Zachowanie ramki elementu jest podobne do ustawienia position na absolute, chociaż jej blok zawartości to sama okno.

Wskazówka:Umieszczanie względne jest traktowane jako część modelu umieszczania normalnego, ponieważ pozycja elementu względem jego pozycji w normalnym strumieniu.

Atrybuty pozycjonowania CSS

Atrybuty pozycjonowania CSS pozwalają na pozycjonowanie elementów.

Narzędzia

Podręcznik referencyjny CSS

Przykłady CSS

Testy CSS

Kursy CSS

Linki sponsorowane