Laboratorium z CSS

Układ strony

Proszę tak przygotować układ tej strony żeby element <article>miał szerokość 600 px i żeby był ustawiony pośrodku strony

Styl elementów tekstowych

Pierwszy wiersz każdego akapitu w tej sekcji powinien mieć wcięcie o szerokości 20px, podobnie do stylu, jaki stosujemy w dokumentach papierowych.

W poniższych dwóch akapitach wprowadzono pewną zmianę w tekscie i, aby ją wyróżnić, tekst usunięty umieszczono w tagu <del>, a wstawiony w tagu <ins>.

Wprowadź takie style, żeby w akapicie o klasie .pokazuj-zmiany zmiany były widoczne: elementy wstawione w kolorze niebieskim, z podkreśleniem, a elementy usunięte w kolorze czerwonym, przekreślone. W pozostałych paragrafach usunięcia powinny być ukryte, a elementy wstawione nie powinny niczym różnić się od normalnego tekstu.

Suspendisse risus ante, elementum sit amet est nec, semper pretium neque. Nullam nec nulla mauris.Nunc gravida est quam, non commodo libero vehicula vitae. Aliquam id nulla at metus sagittis tincidunt. Vestibulum ante ipsum primis in faucibusfaucibum orci luctus et ultrices posuere cubilia Curae; Sed magna enim, lobortis eu est sit amet, molestie dignissim nisi. Proin nec quam eget leo accumsan elementum eu vitae augue. Sed ut placerat nisi. Nunc eget imperdiet diam. Praesent lobortis dui felis, nec commodo massa commodo estet. Nam arcu risus, euismod sed luctus non, sodales id ligula. Donec et ante orci.

Suspendisse risus ante, elementum sit amet est nec, semper pretium neque. Nullam nec nulla mauris.Nunc gravida est quam, non commodo libero vehicula vitae. Aliquam id nulla at metus sagittis tincidunt. Vestibulum ante ipsum primis in faucibusfaucibum orci luctus et ultrices posuere cubilia Curae; Sed magna enim, lobortis eu est sit amet, molestie dignissim nisi. Proin nec quam eget leo accumsan elementum eu vitae augue. Sed ut placerat nisi. Nunc eget imperdiet diam. Praesent lobortis dui felis, nec commodo massa commodo estet. Nam arcu risus, euismod sed luctus non, sodales id ligula. Donec et ante orci.

Stylowanie list

W poniższej liście numerowanej proszę użyć liczb rzymskich na pierwszym poziomie oraz małych liter alfabetu na drugim poziomie. Lista nienumerowana wewnątrz tego konspektu powinna mieć punktory w formie kwadratów.

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Ut gravida lectus vulputate sem egestas tempor.
3. Ut gravida lectus:
   1. Phasellus varius tellus efficitur arcu accumsan, eget tempor nisl placerat.
   2. In interdum nulla malesuada, venenatis erat eu, molestie felis.
      • Nulla pretium turpis at lorem maximus, ut elementum metus bibendum.
      • Phasellus in purus ac turpis varius eleifend ac in lorem.
      • Nunc sed elit blandit, sagittis orci eu, volutpat ligula.
      • Morbi ullamcorper sapien dignissim, vulputate nulla eget, hendrerit neque.
   3. Aliquam vel nisi ut ipsum pharetra mattis vitae in erat.
   4. Nullam non libero vestibulum, vestibulum augue quis, ultrices diam.
   5. Donec quis neque in diam porta sagittis.
4. Nulla pretium turpis at lorem maximus, ut elementum metus bibendum.
5. Phasellus in purus ac turpis varius eleifend ac in lorem.
6. Nunc sed elit blandit, sagittis orci eu, volutpat ligula.
7. Morbi ullamcorper sapien dignissim, vulputate nulla eget, hendrerit neque.
8. Etiam ultricies dolor eget dui fermentum, a accumsan nulla fringilla.
9. Suspendisse maximus nibh facilisis sem sollicitudin, et congue risus volutpat.
10. Quisque eu nunc congue lacus tempor accumsan ut vitae urna.

Poniższą tabelę sformatować wg. wytycznych: co drugi wiersz z danymi ma tło szare, kolumny są równej szerokości, tekst w pierwszej kolumnie jest wyrównany do prawej

Obramowanie tabeli przełącz w taki tryb, żeby krawędzie sąsiadujących komórek stykały się ze sobą. Następnie pozostaw wyłącznie poziome krawędzie tych komórek, które znajdują się w nagłówku lub stopce tabeli. Pionowe krawędzie komórek nie powinny być widoczne. Komórki znajdujące się wewnątrz ciała tabeli nie powinny mieć obramowań. Podobnie, tabela jako całość nie powinna mieć obramowania.

Model pudełka

Porównaj modele układu pudełka box-sizing: border-box i content-box. Domyślnym modelem pudełka w przeglądarkach jest model content-box.

• Elementowi o klasie przyklad-content-box oraz wszystkim jego potomkom ustaw model pudełka content-box.
• Elementom o klasie box nadaj szerokość 600px, oraz ustaw właściwość outline na 1px dotted gray. Outline to obrys elementu, który w przeciwieństwie do krawędzi, nie wpływa na jego wymiary. Może być stosowany niezależnie od krawędzi i używa się go m.in. do wyróżnienia np. aktywnego elementu input. Dziś użyjemy go do wizualizacji wymiarów elementu, ponieważ ustawienie krawędzi wpłynęłoby na te wymiary.
• Dla wszystkich potomków elementów box ustaw margines 0;
• Ustaw następujące właściwości elementów odpowiednio do klas:

  a

  wysokość: 50px

  szerokość: 100%

  dopełnienie: 20px

  krawędź: 10px solid green

  b

  float: left

  wysokość: 50px

  szerokość: 50%

  dopełnienie: 20px

  krawędź: 5px solid yellow

  c

  przy pomocy właściwości clear zapewnij, że treść elemetów o klasie c nie zawinie się obok B3

  wysokość: 50px

  szerokość: 300px

  dopełnienie: 20px

  krawędź: 5px solid blue

  d, e, f

  ułóż elementy obok siebie

  wysokość: odpowiednio 60, 40 i 20px

  szerokość: taką, wszystkie trzy elementy zmieściły się obok siebie i dokładnie wypełniły szerokość rodzica

  dopełnienie: odpowiednio 5, 10 i 20 px

  krawędź: dowolna

  f z pseudo-elementem after

  zawartość pusta

  właściwość clear: left