Theme19_css

CSS. Текст
Колір:
h1 {
color: green;
}
Вирівнювання:
h1 {
text-align: center;
}
Допускаються: left, center, right,
justify

Оформлення тексту:
a {
text-decoration: none;
}
Допускаються: none, underline,
overline, line-through, inherit.
Трансформація тексту:
p.uppercase {
text-transform: uppercase;
}
Допускаються: capitalize,
lowercase, uppercase, none

Висота рядків:
p.small {
line-height: 0.8;
}
Допускаються: <множник> | <розмір>
| <відсотки> | normal.
Абзацний відступ:
p {
text-indent: 50px;
}
Допускаються: розміри і відсотки.

Задача 78
Відтворіть оформлення тексту:
Lorem ipsum dolor sit amet, dicit percipit
scripserit ei nam.
Est eu nisl debet cetero, sumo petentium
dissentiunt eum ut.
Mel Erat Mucius Tibique In, Nam Altera
Postea Vituperata Id, Ad Feugait Ocurreret
Scriptorem Vel.
Iuvaret reprimique cu sed, no mel hinc
omnesque.

Font Family:
p {
font-family: "Times New
Roman", Times, serif;
}
Font Style:
p.italic {
font-style: italic;
}
Допускаються: normal | italic |
oblique.

Font Size:
h1 {
font-size: 2.5em;
}
h2 {
font-size: 30px;
}
Допускаються:
абсолютні розміри: xx-small, x-small, small,
medium, large, x-large, xx-large
відносні розміри: larger і smaller
А також: em, ex, pt, px, %...

Задача 79
Встановіть для першого абзацу з
попередньої задачі шрифт "Lucida Console“.
Розмір шрифту з другого абзацу зробіть
20px, а з третього 3em.

Позиціонування
div.static {
position: static;
}
Допускаються: absolute | fixed |
relative | static | sticky
static - елементи позиціонуються по
замовчуванню, в “потоці” сторінки. left,
right, top, bottom не діють.

relative – позиціонування відносно вихідного місця. left,
top, right, bottom дозволяють змістити відносно нього.
Приклад:
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>Текст перед DIV з position: relative; </p>
<div class="relative">
Елемент зі стилем position: relative;
</div>

fixed – елемент фіксується в точці, заданій параметрами
left, top, right, bottom. При прокрутці сторінки не міняє
положення. Місця під елемент на сторінці не лишається.
Приклад:
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<div class="fixed">
Елемент з position: fixed;
</div>

absolute – схоже на fixed, але положення відраховується
відносно батьківського елемента, якщо для нього встановлено
position: relative. Якщо ні – відносно сторінки.
Приклад:
<style>
div.relative {
position: relative;
width: 400px; height: 200px;
}
div.absolute {
position: absolute;
top: 80px; right: 0;
}
</style></head>
<body>
<h2>position: absolute;</h2>
<div class="relative">Елемент з position: relative;
<div class="absolute"> Елемент з position:
absolute;</div>
</div>

sticky – елемент позиціонується відносно, поки не досягає
певного порогу, після чого поводиться як fixed. Можна
використовувати для фіксації заголовка.
Приклад:
<style>
#one {
background-color: #f3f5f6;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<h1 id="one">Заголовок</h1>
Багато тексту... <br>
Багато тексту... <br>

z-index. Для елементів з absolute, fixed або relative
z-index дозволяє задавати положення шару, як для прозорих
плівок, складених одна на одну. Значення z-index – ціле
число (можна і <0). Чим більше число, тим вище шар.
Приклад:
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>z-index</h1>
<img src="images/grass_bg.jpg">
<p>z-index картинки = -1, тому вона розташована за
текстом.</p>
</body>

Задача 80.0
Створіть документ з заголовком H1 і двома
абзацами.
Розмістіть H1 відносно вікна браузера, за
50px від верху і 100px від правого краю.

Розв’язок
<style>
H1 {
position: fixed;
top: 50px;
right: 100px;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Перший абзац.</p>
<p>Другий абзац.</p>
</body>

Задача 80.1
Змініть розташування загаловка на 20px
ліворуч і 30px вниз відносно нормального
розташування.

Розв’язок
<style>
h1 {
position: relative;
top: 30px;
left: -20px;
}
</style>

Задача 80.2
Розташуйте загаловок на 50px ліворуч і
на 100px взерху відносно HTML сторінки.

Розв’язок
<style>
h1 {
position: absolute;
top: 100px;
left: 50px;
}
</style>

Задача 80.3
Розмістіть будь-яке зображення за
текстом.

Розв’язок
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<img src="image.gif" width="100" height="140">

overflow
Ця властивість визначає параметри відображення
вмісту блочного елемента, якщо він не поміщається
в задані розміри.
overflow: auto | hidden | scroll | visible
visible відображається весь вміст, навіть
якщо він перевищує розміри.
hidden тільки область всередині елемента,
решта ховається.
scroll завжди додаються смуги прокрутки.
auto смуги прокрутки з’являються тільки при
необхідності.

Приклад:
<style>
div {
}
.auto {
overflow: auto;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.visible {
overflow: visible;
}
</style></head>
<body>
<div class="auto">Lorem ipsum dolor sit amet, ne mei diam democritum
voluptatibus.</div>
<div class="hidden">Lorem ipsum dolor sit amet, ne mei diam democritum
voluptatibus.</div>
<div class="scroll">Lorem ipsum dolor sit amet, ne mei diam democritum
voluptatibus.</div>
<div class="visible">Lorem ipsum dolor sit amet, ne mei diam
democritum voluptatibus.</div>

overflow-x і overflow-y –
аналогічно, але стосовно горизонтального
і вертикального розмірів відповідно.
Задача 81
Розмістіть картинку розміром 800х600px у
DIV розміром 400х300px. Нехай
відображається тільки горизонтальна
лінійка прокрутки, а вертикальна – ні.

Розв’язок
<style>
div {
width: 600px;
height: 400px;
overflow-x: scroll;
overflow-y: hidden;
}
</style>
</head>
<body>
<div id=container>
<img src="images/lake.jpg">
</div>

display
Ця властивість визначає чи буде елемент
відображатись і як саме.
Основні значення:
display: none; - елемент ховається і місце під
нього не резервується.
(visibility: hidden; - елемент ховається,
але під нього резервується місце)
display: inline; - елемент відображається як
рядковий.
display: block; - відображається як блочний.

Задача 82
Створіть сторінку з лінками на сторінки
Facebook, Twitter, Youtube і зі списком
• Аудиторія
• Рік заснування
• Особливості
Зробіть лінки блочними елементами
(block), а пункти списку – рядковими
(inline).

Розв’язок
<style>
a {
display: block;
}
li {
display: inline;
}
</style>
</head>
<body>
<a href="https://www.facebook.com/">Facebook</a> <a
href="https://twitter.com/">Twitter</a> <a
href="https://www.youtube.com/">Youtube</a>
<ul>
<li>Аудиторія</li>
<li>Рік заснування</li>
<li>Особливості</li>
</ul>

На самостійне опрацювання
Opacity / Transparency
Float
Align
Псевдокласи

Theme19_css

Recommended

Recommended

More Related Content

More from Олег Вілігурський

More from Олег Вілігурський (20)

Recently uploaded

Recently uploaded (17)

Theme19_css