doccss zawijania
download 
Reklamacja Transkrypt
css zawijania
HTML
<html>
<head>
</head> <body>
</html>
</body>
1
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="HTML - ćwiczenia">
<meta name="Keywords" content="html, ćwiczenia, tagi, znaczniki">
<title>Elementy blokowe</title>
<link rel="Stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
2
Elementy blokowe
• Element blokowy to taki, który zajmuje całą
linię na stronie, tzn. nie pozostawia miejsca
innym elementom html, ani blokowym, ani
liniowym.
3
Nagłówki
• Nagłówki (heading), zwane śródtytułami lub tytułami,
są podstawowymi elementami dzielącymi dokument
na logiczne części (jak nagłówki w gazecie).
W języku HTML jest sześć poziomów tytułów, które można
stosować hierarchicznie.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
</h1>
</h2>
</h3>
</h4>
</h5>
</h6>
4
Nagłówki
5
Akapit
<p> </p>
• Akapit
jest
podstawowym
elementem
zawierającym tekst w dokumentach HTML i służy
do wydzielania fragmentów zawierających jakąś
zwartą myśl. • Formatowanie akapitu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
nibh augu suscipit a, scelerisque sed, lacinia in, mi. Cras vel
lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra
nulla ac diam.
6
Border <!--css-->
css
border: 2px dashed
#ff0000;
7
Pozioma linia
• <hr>
8
Blok preformatowany
<pre> </pre>
• Blok preformatowany jest blokiem tekstu,
w którym uwzględniane są białe znaki znajdujące
się w kodzie źródłowym, np. dodatkowe spacje,
punkty tabulacji, znaki końca akapitu itd., które
są pomijane w innych poleceniach, np.
w akapicie.
9
Blok cytowanego tekstu
<blockquote> </blockquote>
• Blok cytowanego tekstu używa się przy
powoływaniu się na jakieś źródło. Cytat jest
wyświetlany z wcięciem i z automatycznie
nadanym cudzysłowem
10
Listy wypunktowane
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
11
Listy wypunktowane
<ul>
<li>element 1</li>
<li>element 2
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</li>
<li>element 3</li>
</ul>
12
Listy wypunktowane <!--css-->
.lista{
list-style-type: typ;
}
disc - wypełnione kółko
circle - puste w środku kółko
square - wypełniony kwadrat
13
Listy numerowane
<ol>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
14
Listy numerowane
<ol>
<li>element 1</li>
<li>element 2
<ol>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
</li>
<li>element 3</li>
</ol>
15
Listy numerowane <!--css-->
.lista{
list-style-type: typ;
}
upper-roman - duże rzymskie
lower-roman - małe rzymskie
decimal - liczby arabskie
upper-alpha - duże litery
lower-alpha - małe litery
16
Listy - zagnieżdżanie
<ol>
<li>element 1</li>
<li>element 2
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</li>
</ul>
</li>
<li>element 3</li>
</ol>
17
Lista definicji
<dl>
<dt> wyrażenie 1</dt>
<dd> definicja 1</dd>
<dt> wyrażenie 2</dt>
<dd> definicja 2</dd>
</dl>
18
Listy – wyróżniki zawijania
tekstu <!--css-->
dl{
list-style-position: wartość;
}
inside
outside
inherit
19
Sprawdź poprawność
https://validator.w3.org/
20
<div> </div>
• Znacznik <div> może w dokumencie
obejmować blokiem grupę i pozwala nadać jej
wspólne atrybuty.
• Element ten jest kontenerem umożliwiającym
dodanie struktury do dokumentu HTML.
<!--w HTML 5 stworzono specjalne znaczniki
do tworzenia struktury-->
21
Kontener div
<body>
<div id="container"></div>
</body>
#container{
border: 1px solid
#ff0000;
}
HTML
CSS
Przeglądar
ka
22
Kontener div
<div id="container"> </div>
/*css*/
#container{
border:2px solid #ff0000;
width:400px;
height:300px;
}
23
