Inne działy

 

 

CSS – Wymiar (Dimension)

 

 Możemy zobaczyć krawędź, która otacza każdy element tzn. wypełnienie, które znajduję się wewnątrz każdego elementu i margines. W tym kursie będziemy się uczyć, jak możemy zmienić wymiary elementu.

Istnieją następujące właściwości, które pozwalają kontrolować wymiary elementu.

  • Właściwość height jest używana do ustawiania wysokości elementu.
  • Właściwość width jest używana do ustawienia szerokości elementu.
  • Właściwość line-height jest używana do ustawiania wysokości wiersza tekstu.
  • Właściwość max-height jest używana do ustawiania maksymalnej wysokości elementu.
  • Właściwość min-height jest używana do ustawiania minimalnej wysokości elementu.
  • Właściwość max-width jest używana do ustawiania maksymalnej szerokości elementu.
  • Właściwość min-width jest używana do ustawiania minimalnej szerokość elementu.

 

Właściwość height i width:

Height (wysokość) i width (szerokość) właściwości pozwalają ustawić wysokość i szerokość elementu. Mogą przyjmować wartości liczbowe, procentowe lub słowo kluczowe.

Oto przykład:

 

<p style="width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;">
Ten akapit jest szeroki na 400 pikseli i wysoki na 100 pikseli 
</p>

 Poniżej wynik działania kodu:

Ten akapit jest szeroki na 400 pikseli i wysoki na 100 pikseli

 

Właściwość line-height:

Właściwość line-height (wysokość wiersza) pozwala zwiększyć odstęp między wierszami tekstu. Wartość właściwości line-height może być liczbą lub wartością procentową.

Oto przykład:

<p style="width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;line-height:30px;">
Ten akapit ma 400 pikseli szerokości i 100 pikseli wysokości i wysokość wiersza
30 pikseli. Ten akapit ma 400 pikseli szerokości i 100 pikseli wysokości
i wysokość wiersza 30 pikseli. </p>

 Poniżej wynik działania kodu:

Ten akapit ma 400 pikseli szerokości i 100 pikseli wysokości i wysokość wiersza 30 pikseli. Ten akapit ma 400 pikseli szerokości i 100 pikseli wysokości i wysokość wiersza 30 pikseli.

 

Właściwość max-height:

Właściwość max-height pozwala określić maksymalną wysokość elementu. Wartość właściwości max-height może być typu liczbowego, lub mieć wartość procentową.

Uwaga: Ta właściwość nie działa w IE 6 lub Netscape 7.

Oto przykład:

<p style="width:400px; max-height:10px;border:1px solid red;
             padding:5px; margin:10px;">
Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px
Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px 
Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px
Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px 
</p>
<img alt="logo" src="/images/w3css.jpg" width="95" height="84" />

  Poniżej wynik działania kodu:

Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px Ten akapit ma 400px szerokości, a maksymalna wysokość to 10px

logo

 

Właściwość min-height:

Właściwość min-height pozwala określić minimalną wysokość elementu. Wartość właściwości min-height może być typu liczbowego, lub mieć wartość procentową.

Uwaga: Ta właściwość nie działa w IE 6 lub Netscape 7.

Oto przykład:

<p style="width:400px; min-height:200px;border:1px solid red;
             padding:5px; margin:10px;">
Ten akapit ma 400px szerokości i wysokości min to 200px
Ten akapit ma 400px szerokości i wysokości min to 200px
Ten akapit ma 400px szerokości i wysokości min to 200px
Ten akapit ma 400px szerokości i wysokości min to 200px
</p>
<img alt="logo" src="/images/w3css.jpg" width="95" height="84" />

 Poniżej wynik działania kodu:

Ten akapit ma 400px szerokości i wysokości min to 200px Ten akapit ma 400px szerokości i wysokości min to 200px Ten akapit ma 400px szerokości i wysokości min to 200px Ten akapit ma 400px szerokości i wysokości min to 200px

logo

 

Właściwość max-width:

Właściwość max-width pozwala określić szerokość elementu. Wartość właściwości max-width może być typu liczbowego, lub mieć wartość procentową.

Uwaga: Ta właściwość nie działa w IE 6 lub Netscape 7.

Oto przykład:

<p style="max-width:100px; height:200px;border:1px solid red;
             padding:5px; margin:10px;">
Ten paragraph ma 200px wysokości i max wysokość 100px
Ten paragraph ma 200px wysokości i max wysokość 100px
Ten paragraph ma 200px wysokości i max wysokość 100px

</p>
<img alt="logo" src="/images/w3css.jpg" width="95" height="84" />

 Poniżej wynik działania kodu:

Ten paragraph ma 200px wysokości i max wysokość 100px Ten paragraph ma 200px wysokości i max wysokość 100px Ten paragraph ma 200px wysokości i max wysokość 100px

logo

 

Właściwość min-width

Właściwość min-width pozwala określić minimalną szerokość elementów. Wartość właściwość min-width może być typu liczbowego, lub mieć wartość procentową.

Uwaga: Ta właściwość nie działa w IE 6 lub Netscape 7.

Oto przykład:

<p style="min-width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;">
Ten akapit ma 100px wysokości i min szerokość 400px
Ten akapit ma 100px wysokości i min szerokość 400px
Ten akapit ma 100px wysokości i min szerokość 400px
Ten akapit ma 100px wysokości i min szerokość 400px
Ten akapit ma 100px wysokości i min szerokość 400px
</p>
<img alt="logo" src="/images/w3css.jpg" width="95" height="84" />

 

Ten akapit ma 100px wysokości i min szerokość 400px Ten akapit ma 100px wysokości i min szerokość 400px Ten akapit ma 100px wysokości i min szerokość 400px Ten akapit ma 100px wysokości i min szerokość 400px Ten akapit ma 100px wysokości i min szerokość 400px

logo

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.