CSS presentation

CSS (Cascading Style Sheets — каскадныя табліцы стыляў)
выкарыстоўваецца для задання колераў, шрыфтоў, размяшчэння і
іншых аспектаў прадстаўлення дакумента
забяспечвае падзел зместу (напісанага на HTML) і прадстаўлення
дакумента (напісанага на CSS)
павялічвае даступнасць дакумента
дае вялікую гнуткасць і магчымасць кіравання яго прадстаўленнем
памяншае складанасць і паўтаральнасць у структурным змесце
дазваляе прадстаўляць адзін і той жа дакумент у розных стылях або
метадах вываду, такіх як экраннае ўяўленне, друк, чытанне голасам
CSS: што гэта такое?

Падключэнне стыляў: крыніцы
Аўтарскія стылі (інфармацыя стыляў, якая прадстаўляецца аўтарам
старонкі) у выглядзе:
Знешніх табліц стыляў — асобнага файла .css, на які робіцца
спасылка ў дакуменце.
Убудаваных стыляў — блокаў CSS унутры самога HTML-
дакумента.
Inline-стыляў, калі ў HTML-дакуменце інфармацыя стылю для
аднаго элемента паказваецца ў яго атрыбуце style.
Карыстальніцкія стылі
Лакальны CSS-файл, паказаны карыстальнікам у настройках
браўзэра, які перавызначае аўтарскія стылі і ўжываецца да ўсіх
дакументаў.
Стыль браўзэра
Стандартны стыль, які выкарыстоўваецца браўзэрам па
змаўчанні для прадстаўлення элементаў.
Page 3
.
.
.
.

Падключэнне стыляў: каскаднае ўключэнне
Стылі карыстальніка з паметкай !important
Стылі аўтара з паметкай !іmportant
Аўтарскія стылі
Карыстальніцкія стылі
Стылі, якія прымяняюцца па змаўчанні
браўзэрам
Page 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css"> //імпарціраванне
@import url("css/main.css");
</style>
<link href="css/home.css" rel="stylesheet" /> //выкарыстанне знешніх стыляў
<style type="text/css"> // убудаванне
h1 {font-size:60%; color:#FF0000; }
p {margin-bottom:10px;}
</style>
</head>
<body>
<h1 style="font-size:70%;">Мая роля ў спектаклі</h1> //падстаноўка
<p>У попа была собака...</p>
</body>
</html>
Page 5
Падключэнне стыляў: каскаднае ўключэнне

Альтэрнатыўныя табліцы стыляў
<link href="home.css" rel="stylesheet" media="screen" />
All – любая прылада
Aural – акустычная прылада
Braile – такцільная прылада
Embossed – надрукаванае па сістэме Брайля
Handheld – экраны партатыўных камп’ютараў
Print – прылада друку
Projection – дэманстрацыйная прылада, праектар
Screen – камп’ютарныя маніторы
Tty – тэлетайп
Tv – тэлевізійныя маніторы
Page 6

div і span: што выбраць?
<div>
<h2>Where’s Durstan?</h2>
<p>Published on <span class="date">March 22nd, 2005</span>
by <span class="author">Andy Budd</span></p>
</div>
Page 7

Class і ID: што выбраць?
#item {
list-style-type:circle;
font-size:60%;
}
<ul id="item">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
.item {
list-style-type:circle;
font-size:60%;
}
<ul class="item">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
Page 8

Селектары
p {color:#000000;}
a {text-decoration:underline;}
h1 {font-weight:bold;}
li a {text-decoration:underline;}
li li a {text-decoration:underline;}
Page 9

Селектары
#mainContent h1 {font-size:0.9em;}
.secondaryContent h1 a {color:red;}
<div id="mainContent">
<h1>Header1</h1>
<p>…</p>
</div>
<div class="secondaryContent">
<h1>Header2</h1>
<p>…</p>
</div>
Page 10

Псеўда-класы
/*усе ненаведаныя спасылкі сінія*/
a:link {color:#0000FF;}
/*усе наведаныя спасылкі зялёныя*/
a:visited{color:#00CC33;}
/*па навядзенні і па кліку спасылкі становяцца чырвонымі*/
a:hover, a:active{color:#00CC00;}
/*радок слупка па навядзенні становіцца чырвоным*/
tr:hover{background-color:#FF0000;}
/*элемент формы становіцца жоўтым у фокусе*/
.input:focus{background-color:#FFFF00;}
Page 11

Універсальны селектар
* {
margin:0;
padding:0;
}
* html { //а вось гэта працуе толькі ў IE 
margin:0;
padding:0;
}
Page 12

Cелектары і іх сінтаксіс
Тып
селектару
Сінтаксіс Прыклад
Generic p p{font-weight:bold}
Descendant a b c div p{font-weight:bold}
Universal * * {color:green;}
Child a > b div>p {font-weight:bold;}
Adjacent-Sibling a +b h1 + p {font-weight:bold;}
Attribute a[attr=“value”] a[link=“…”]{color:blue;}
Class .class .summary {padding:10px;}
ID #id p#header{color:green;}
Page 13

Блокавая мадэль дакумента

Page 15

Page 16

Звычайнае пазіцыяванне
Page 17

Адноснае пазіцыяванне
#myBox {
position: relative;
left: 20px;
top: 20px;
}
Page 18

Абсалютнае пазіцыяванне
#myBox {
position: absolute;
left: 20px;
top: 20px;
}
Page 19

Floating
.box1 {float:right;}
Page 20

Floating
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>Some text</p>
<div class="clear"></div>
</div> Page 25

Floating
<div class="news clear">
<img src="news-pic.jpg" />
<p Some text</p>
</div>
.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
} Page 26

Размер шрыфта залежыць ад настроек
карыстальніка
Page 27

Шрыфты
body{
font-size:60%;
line-height:1em;
font-family:Arial, Helvetica,
sans-serif;
}
.header{
font-size:1.3em;
color:#CF0000;
}
body{
font-size:11px;
line-height:16px;
font-family:Arial, Helvetica,
sans-serif;
}
.header{
font-size:14px;
color:#CF0000;
}
Page 28

Знайдзіце ў элементаў агульнае !!!
.box {
width:200px;
height:200px;
padding:10px;
}
Page 29
.box-green {
backgroundcolor:green;
}
.box-blue {
backgroundcolor:blue;
}
<div class=“box box-blue”>
…
</div>

CSS presentation

More Related Content

Featured

CSS presentation