CSS presentation

CSS

Page 2

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 14

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


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

Page 21

Floating

Page 22

Floating

Page 23

Floating

Page 24

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>

Internet

CSS presentation