Obramowania

Transkrypt

Obramowania
12. Obramowania, listy wypunktowane i numerowane
Obramowania
Właściwość/wartość
border:
•
•
•
•
•
solid
double
groove
dotted
dashed
border
Opis
Przykład
linia ramki:
•
ciągła
•
podwójna ciągła
•
wypukła
•
kropki
•
kreski
p
{
grubość obramowania
p
{
border: dashed;
}
border: dashed 1pt;
}
•
•
•
•
border-top
border-bottom
border-left
border-right
krawędzie ramki:
•
górna
•
dolna
•
lewa
•
prawa
p
{
border-top: double;
border-bottom: double;
}
przykład
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
Informatyka jest obszerną i podstawową dziedziną o zasadniczym znaczeniu dla społeczeństwa w dobie
rewolucji informacyjnej. Jej głównym celem jest badanie praw i ich zasięgu, praw rządzących
procesami informacyjnymi i ich realizacjami. Dodatkowym celem informatyki jest opracowywanie nowych
i skutecznych narzędzi intelektualnych, niezbędnych do rozwiązywania problemów przetwarzania
informacji we wszystkich dziedzinach aktywności ludzkiej. Informatyka już teraz ma znaczący wpływ na
rozwój innych nauk, na przemysł i nowoczesną technologię, na rolnictwo, ekonomię, kształcenie, a
także na poszerzanie granic pojmowania wszechświata.
</p>
</body>
</html>
Zawartość pliku o nazwie style.css
p
{
border-top: double;
border-bottom: double;
text-align: justify;
border-color: gray;
}
wynik w przeglądarce internetowej
opracował: Aleksander Piętowski
1/3
12. Obramowania, listy wypunktowane i numerowane
Lista wypunktowana
Właściwość/wartość
Opis
list-style-type:
•
disc
•
circle
•
square
•
none
typ listy:
•
koło
•
okrąg
•
kwadrat
•
żaden
Przykład
ul
{
list-style-type: square;
}
przykład
Cztery działania arytmetyczne:
<ul>
<li>dodawanie
<li>odejmowanie
<li>mnożenie
<li>dzielenie
</ul>
Zawartość pliku o nazwie style.css
ul
{
list-style-type: square;
}
Lista numerowana
Właściwość/wartość
list-style-type:
•
decimal
•
lower-roman
•
upper-roman
•
lower-alpha
•
upper-alpha
•
none
Opis
typ listy:
•
liczebniki arabskie
•
małe liczebniki rzymskie
•
duże liczebniki rzymskie
•
małe litery alfabetu
•
duże litery alfabetu
•
żaden
Przykład
ol
{
list-style-type: decimal;
}
przykład
Cztery działania arytmetyczne:
<ol>
<li>dodawanie
<li>odejmowanie
<li>mnożenie
<li>dzielenie
</ol>
Zawartość pliku o nazwie style.css
ol
{
list-style-type: lower-alpha;
}
opracował: Aleksander Piętowski
2/3
12. Obramowania, listy wypunktowane i numerowane
Położenie tekstu listy wypunktowanej i numerowanej
•
wewnątrz – inside
•
na zewnątrz – outside
przykład
<ol>
<li>przykład pierwszej pozycji listy przykład pierwszej pozycji listy przykład pierwszej pozycji
listy przykład pierwszej pozycji listy przykład pierwszej pozycji listy
<li>przykład drugiej pozycji listy przykład drugiej pozycji listy przykład drugiej pozycji listy
przykład drugiej pozycji listy przykład drugiej pozycji listy przykład drugiej pozycji listy
</ol>
Zawartość pliku o nazwie style.css
ol
{
list-style-type: decimal;
list-style-position: inside;
}
Obraz znaku punktora listy
przykład
<ol>
Cztery działania arytmetyczne:
<li>dodawanie
<li>odejmowanie
<li>mnożenie
<li>dzielenie
</ol>
Zawartość pliku o nazwie style.css
ol
{
list-style-image: url(spinacz.gif);
}
opracował: Aleksander Piętowski
3/3

Podobne dokumenty