Inne działy

 

 

Układy CSS

 

Ma nadzieję, że są bardzo wygodne tabele HTML i są skuteczne w projektowaniu układów stron przy użyciu tabel HTML. Ale wiesz, że CSS także posiada wiele formantów dla pozycjonowania elementów w dokumencie. Ponieważ CSS jest przyszłością, dlatego warto się nauczyć i używać CSS zamiast tabel dla celów układu strony?

Na liście poniżej klika plusów i minusów obu technologii:

  • Większość przeglądarek obsługuje tabele, a wsparcie CSS jest powoli przyjęte.
  • Tabele są bardziej wyrozumiałe, gdy okno przeglądarki zmienia rozmiar - jego zawartość i zawijania są dostosowywane do zmian z tym związanych. Pozycjonowanie wydaje się być dokładnie i dość sztywne.
  • Tabele są znacznie łatwiejsze do nauczenia się i manipulowania niż reguły CSS.
  • Ale wszystkie te argumenty mogą być odwrócone:
  • CSS jest kluczowy dla przyszłości dokumentów sieci Web będzie obsługiwany przez większość przeglądarek to teraz pomaga zagwarantować zgodność przyszłych standardów.
  • CSS jest bardziej dokładne niż tabele, dzięki czemu dokument należy traktować zgodnie z przeznaczeniem, niezależnie od okna przeglądarki.
  • Utrzymanie ścieżki od zagnieżdżonych tabel może być prawdziwym problemem. Reguły CSS wydają się być dobrze zorganizowane, które łatwo czytać i łatwo zmienić.

Wreszcie, chciałbym zaproponować, aby użyć dowolnej technologii, którą umiesz najlepiej wykorzystać i która prezentuje swoje dokumenty w najlepszy sposób.

CSS zapewnia również właściwość table-layout, aby tabele ładowały się znacznie szybciej.Oto przykład:

 

<table style="table-layout:fixed;width:600px;">
  <tr height="30">
    <td width="150">CSS table layout cell 1</td>
    <td width="200">CSS table layout cell 2</td>
    <td width="250">CSS table layout cell 3</td>
  </tr>
</table>

 

 Można zauważyć korzyści bardziej na dużych tabelach. Powód, który sprawia, że tabele ładują się szybciej, ponieważ w tradycyjnym HTML, przeglądarka musiała obliczyć każdą komórkę, zanim ostatecznie renderowała tabelę. Po ustawieniu układu tabeli algorytm ustala jednak tylko układ na pierwszym rzędzie przed renderowaniem całej tabeli. Oznacza to, że tabele muszą mieć stałe szerokości kolumn i wysokości wierszy.

 

Przykładowy układ kolumn:

Oto kroki, aby utworzyć prosty układ kolumn za pomocą CSS:

Ustaw marginesy i dopełnienia w dokumencie w następujący sposób:

 

<style tyle="text/css">
<!--
body {
    margin:9px 9px 0 9px;
    padding:0;
    background:#FFF;
}
-->
</style>

 

 Teraz zdefiniujemy kolumnę z żółtym kolorem i później zastosujemy tę regułę do <div>:

<style tyle="text/css">
<!--
#level0 {
     background:#FC0;
}
-->
</style>

 

 Do połowy tego punktu, mamy dokument z żółtym tłem, więc pozwólmy teraz określić inny podział wewnątrz level0:

<style tyle="text/css">
<!--
#level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;
}
-->
</style>

 

 Teraz będziemy zagnieżdżać więcej podziałów wewnątrz level1 i będziemy zmieniać tylko kolor tła:

<style tyle="text/css">
<!--
#level2 {
    background:#FFF3AC;
}
-->
</style>

 

 Wreszcie możemy użyć tej samej techniki, poziomu level3 do podziału wewnątrz level2, aby uzyskać układ wizualny w kolumnie po prawej stronie:

<style tyle="text/css">
<!--
#level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;
}
#main {
    background:#CCC;
}
-->
</style>

 

 Kompletny kod źródłowy:

<style tyle="text/css">
<!--
body {
    margin:9px 9px 0 9px;
    padding:0;
    background:#FFF;}
  #level0 {
    background:#FC0;}
  #level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;}
  #level2 {
    background:#FFF3AC;}
  #level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;}
  #main {
    background:#CCC;}
-->
</style>
<body>
  <div id="level0">
    <div id="level1">
      <div id="level2">
        <div id="level3">
          <div id="main">
            Ostateczna zawartość idzie tutaj...
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

 Podobnie można dodać górny pasek nawigacyjny lub reklamy w pasku w górnej części strony.

 

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.