Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Каскада от стилови
дефиниции
Cascading Style
Sheets (CSS)
доц. М. Иванова
1
Свързването на стилови формати с HTML документ
може да се приложи по три начина:
 независим файл (.css) с описание на сти...
Три начина за прилагане на
каскадни стилови дефиниции
 Чрез отделен CSS файл
<link rel=”stylesheet” href=”name.css” type=...
CSS дефиниции
 Дефиницията се представя чрез селектор, чийто стил се определя
чрез свойства и стойности
 Селекторът свър...
CSS дефиниции
 Връзката между елемент от уеб документ и стил се
извършва явно или неявно
 Връзката е неявна, когато стил...
Модел на кутията в CSS
 Margin – Освобождава място около border, което място няма фонов
цвят, прозрачно е
 Border – Мяст...
Модел на кутията в CSS
 Общата ширина width на даден HTML елемент
се изчислява по следния начин:
Обща ширина width = widt...
Модел на кутията в CSS
 Пример - общата ширина width на даден елемент
е зададена да бъде 400px (350px width + 20px отляво...
Модел на кутията в CSS
 Пример за задаване на margin отгоре, отдясно,
отляво и отдолу (top, right, bottom, left) чрез отд...
Модел на кутията в CSS
 Задаване на margin чрез стенографско свойство т.е всички
margin-и са определени само чрез едно св...
<!DOCTYPE html>
<head>
<title>
Изучаване на HTML
</title>
<link rel=”stylesheet”
href=”primer1.css”
type=”text/css”>
</hea...
<!DOCTYPE html>
<head>
<title>
Изучаване на HTML
</title>
<link rel=”stylesheet” href=”primer2.css”
type=”text/css”>
</hea...
<!DOCTYPE html>
<head>
<title>
Изучаване на HTML
</title>
<style type="text/css">
body {background-color: silver}
.starp {...
<!DOCTYPE html>
<head>
<title>
Изучаване на HTML
</title>
<link rel="stylesheet" href="primer3.css"
type="text/css">
</hea...
<!DOCTYPE html>
<head>
<title>
Изучаване на HTML
</title>
<link rel="stylesheet"
href="primer4.css"
type="text/css">
</hea...
Форматиране на текст –
задаване на шрифт
 h1 {font-family: Arial, Verdana, sans-serif;}
16
<font face=“Arial”> 
<h1>Загла...
Цвят на текст
 p { color:red;}
17
<font color=“red”> 
<p>Текст, оцветен в 
червен цвят
</p>
</font>
<p>Текст, 
оцветен в ...
Размер на текст
 p {font-size: 14pt;}
18
<font size=“3”> 
<p>Параграф
</p>
</font>
<p>
Параграф с 
приложено свойство 
за...
Почерняне на текст
 p.pochernen {font-weight: 700;}
 p.lpochernen {font-weight: 500;}
19
<b>
<p>
Почернен
параграф
</p>
...
Курсивен шрифт
 p {font-style:italic;}
20
<i>
<p>
Курсивен текст
</p>
</i>
<p>
Курсивен текст
</p>
Подчертан текст
 p {text-decoration:underline;}
21
<u>
<p>
Подчертан текст
</p>
</u>
<p>
Подчертан
текст
</p>
Задаване стойности на
няколко параметъра
 p {font: bold italic 14pt Verdana;}
22
<b>
<i>
<font size=“3”
face=“Verdana”>
<...
Отстъп
 p {text-indent: 15mm;}
23
<p>
Текст,
форматиран
чрез
свойството за
отстъп.
</p>
Подравняване на текст
 p {text-align: right;}
 h1 {text-align: center;}
24
<h1 align=“center”>
Заглавие
</h1>
<p align=“...
Фон на страница
body {background-color:pink;}
<body bgcolor=“pink”>
</body>
<body>
</body>
Фоново изображение
 body {background-image:url("pic.jpg");}
26
<body>
</body>
<body background=“pic.jpg”>
</body>
Размножаване на
фоновото изображение
 body{background-image:url("pic1.jpg"); background-repeat:
repeat-y;}
27
<body>
</bo...
Форматиране на таблица
 table {width:100%; height:200px;}
28
<table width=“100%”
height=“200”>
…
</table>
<table>
…
</tab...
Рамка на таблица
 table, td {border: 1px solid blue;}
29
Цвят на текст и цвят на фон
в клетките на таблицата
 table {background-color:lightgrey; color:blue;}
 th {background-col...
Форматиране на списъци
 ol {list-style-type: upper-latin;}
 ul {list-style-type: circle;}
 Номериран списък
 decimal –...
Хипервръзки
 a:link {color:red;}
 a:visited {color:pink;}
 a:hover {color:brown;}
 a:active {color:green;}
32
Премахване подчертаването
на хипервръзка
 a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
33
Фон на хипервръзка
 a:link {background-color:yellow;}
 a:visited {background-color:pink;}
 a:hover {background-color:re...
Позициониране на обекти
 p.fixpos {position:fixed; top:90px; right:30px; background-
color:magenta; }
35
<p class=“fixpos...
Относително
позициониране
 p.leftpos {position:relative; left:-20px;}
 
 p.rightpos {position:relative; left:20px; backg...
Абсолютно
позициониране
 p {position:absolute; background-color:magenta; top:100px;
left:30px; width:120px; height:150px;...
Ред на припокриване
 p.otgore {position:absolute; left:10px; top:20px; width:100px; z-
index:+1; background-color:magenta...
<!DOCTYPE html>
<head>
<title>
Уеб дизайн
</title>
<link rel="stylesheet" href="pr.css"
type="text/css">
</head>
<body>
<d...
40
 <LINK REL=STYLESHEET HREF="http://www.tu-
sofia.bg/sheets.css" TYPE="text/css">
41
Пример<!DOCTYPE html>
<head>
<title>Глобални CSS формати</title>
<style type="text/css">
BODY {background-color: silver}
H...
<!DOCTYPE html>
<head>
<title>Пример за стилови
атрибути</title>
</head>
<body>
<div style="color: green">
<h1 align=“cent...
 em - процент спрямо размера на шрифта (0.5em);
 ex - процент спрямо размера на буквата х (1ex);
 px - процент спрямо р...
Наименование Описание Дефиниция Пример
font-family Име и фамилия на
шрифта
[[<name> | <family>],*] P {font-family: courier...
Пример
 Код в HTML страницата:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="proba1.css" type="text/css">
</head>
<...
Пример
 Код в .css файла
h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em;
text-align: cente...
h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em;
text-align: center}
h2 {color : red; font-f...
h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em;
text-align: center}
h2 {color : red; font-f...
Цвят на фон на заглавията и на
целия прозорец
h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2e...
По-голяма първата буква в
параграфа
h1, h2, h3 { color : #003278;font-family : Arial,
Helvetica, sans-serif; font-weight :...
Първият ред от параграфа
в болд
h1, h2, h3 { color : #003278;font-family : Arial,Helvetica, sans-serif; font-weight
: bold...
изображение за фон
h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em;
text-align: center;}
h2 ...
Разполагане на изображение,
което да се повтаря
многонкратно
h1 {color : green; font-family : Arial, Helvetica, sans-serif...
Неподреден списък
<!DOCTYPE html>
<head>
<title>book</title>
<link rel="stylesheet"
href="proba10.css"
type="text/css">
</...
Позиция на текст и
изображение
 HTML файл
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="proba41.css"
type="text/css...
 img { float: left }
57
 Каскада от стилови формати за позициониране
на HTML елементи (Cascading Style Sheets-
Positioning - CSS-P)
58
 position: absolute|relative; - абсолютно или относително
позициониране на слоя в документа. Абсолютното
позициониране се...
 padding: N%; - определя в проценти празен контур във
вътрешната част на слоя
 width: Npx|N%; - определя в пиксели или в...
 z-index: N; - задава поредния номер (N) на слоя в
стека. Използва се при управление на
превключването между различни сло...
Пример
 Поставете този код в HTML файл:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charse...
 Поставете този код в CSS файл:
#lr1 { position:absolute; background-color:magenta; top:200px;
left:70px; width:200px; he...
 Напишете този код в HTML файл:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=window...
#lr1 { position:absolute; background-color:magenta; top:200px;
left:70px; width:200px; height:250px; border-width:2px; }
#...
66
67
<!DOCTYPE html>
<html>
<head>
<title>
Уеб дизайн
</title>
<link rel="stylesheet" href="pr1.css"
type="text/css">
</head...
68
body{background-color:violet;}
h1{color: blue; font-size: 24px;}
p{color:blue;}
#container{width:600px; margin: 0 auto;...
69
Уеб сайт с три колони и централен план
Prochain SlideShare
Chargement dans…5
×

CSSI

512 vues

Publié le

CSS

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

CSSI

  1. 1. Каскада от стилови дефиниции Cascading Style Sheets (CSS) доц. М. Иванова 1
  2. 2. Свързването на стилови формати с HTML документ може да се приложи по три начина:  независим файл (.css) с описание на стиловите формати;  вмъкване на стиловите формати в тялото на HTML файла;  използване на елемент <style> . . . </style> в HEAD секцията 2
  3. 3. Три начина за прилагане на каскадни стилови дефиниции  Чрез отделен CSS файл <link rel=”stylesheet” href=”name.css” type=”text/css”>  Чрез използване на вътрешни каскадни стилови дефиниции <h2 style=”color:red”> Вътрешни каскадни стилови дефиниции </h2>  Използване на командата <style></style> <style type=”text/css”> h1 {color: red; text-align: center} P {color: blue} </style>
  4. 4. CSS дефиниции  Дефиницията се представя чрез селектор, чийто стил се определя чрез свойства и стойности  Селекторът свързва даден елемент от уеб документа с неговия стил  Стилът на този елемент се определя чрез списък от свойства и техните стойности  Свойството и стойността се отделят чрез двоеточие Общ вид: селектор { свойство 1: стойност; свойство 2: стойност; ... свойство n: стойност } Пример: h1 { color: red; text-align: center }
  5. 5. CSS дефиниции  Връзката между елемент от уеб документ и стил се извършва явно или неявно  Връзката е неявна, когато стил автоматично се приложи към всички елементи от даден вид в целия уеб сайт  Връзката е явна, когато програмистът укаже кой стил за кой елемент или фрагмент от уеб страницата/уеб сайтът е предназначен – прилагат се класове, всеки клас трябва да има уникално име и той представлява атрибут на даден елемент.  Явно свързване може да се осъществи и чрез именуван стил. С именувания стил се форматира само един единствен елемент, докато чрез клас могат да се форматират няколко елемента наведнъж. В HTML файла именуваният стил се задава чрез атрибута id към елемента, който ще се оформя. Стойността на атрибута id представлява уникално име на стила.
  6. 6. Модел на кутията в CSS  Margin – Освобождава място около border, което място няма фонов цвят, прозрачно е  Border – Мястото за border се оставя около padding и съдържанието на елемента. Това място приема фоновия цвят на кутията  Padding – Освобождава място около съдържанието на елемента. Това място приема фоновия цвят на кутията  Content – Съдържание на кутията, включващо текст, изображение, други елементи Margin Border Padding Content (съдържание на елемента)
  7. 7. Модел на кутията в CSS  Общата ширина width на даден HTML елемент се изчислява по следния начин: Обща ширина width = width + padding отляво+ padding отдясно + border отляво + border отдясно + margin отляво + margin отдясно  Общата височина height на даден HTML елемент се изчислява по следния начин: Обща височина height = height + отгоре padding + отдолу padding + отгоре border + отдолу border + отгоре margin + отдолу margin
  8. 8. Модел на кутията в CSS  Пример - общата ширина width на даден елемент е зададена да бъде 400px (350px width + 20px отляво и отдясно padding + 10px отляво и отдясно border + 20px отляво и отдясно margin = 400px): width:350px; padding:10px; border:5px; margin:10px;
  9. 9. Модел на кутията в CSS  Пример за задаване на margin отгоре, отдясно, отляво и отдолу (top, right, bottom, left) чрез отделни свойства: margin-top:75px; margin-bottom:90px; margin-right:25px; margin-left:25px;
  10. 10. Модел на кутията в CSS  Задаване на margin чрез стенографско свойство т.е всички margin-и са определени само чрез едно свойство margin  Ако задаваме margin чрез четири стойности - 25px отгоре, 50px отдясно, 75px отдолу, 100px отляво, то свойството ще има следния вид: margin:25px 50px 75px 100px;  Margin-ът може да се задава и чрез три стойности - 25px отгоре, 50px отдясно и отляво, 75px отдолу:  margin:25px 50px 75px;  Задаване на margin чрез две стойности - 25px отгоре и отдолу, 50px отдясно и отляво: margin:25px 50px;  Margin зададен чрез една стойност – всички стойности отгоре, отдолу, одясно и отляво са 25px : margin:25px;
  11. 11. <!DOCTYPE html> <head> <title> Изучаване на HTML </title> <link rel=”stylesheet” href=”primer1.css” type=”text/css”> </head> <body> <p class=”starp”> Към този параграф е приложена стилова дефиниция със свойство цвят и стойност червен. </p> <p class=”novp”> Нов параграф с приложена стилова дефиниция със свойство цвят и стойност зелен. </p> </body> </html> 11   .starp {color:red;} .novp {color:green;}    
  12. 12. <!DOCTYPE html> <head> <title> Изучаване на HTML </title> <link rel=”stylesheet” href=”primer2.css” type=”text/css”> </head> <body> <p class=”starp”> Към този параграф е приложена стилова дефиниция със свойство цвят и стойност червен. </p> <p id=”ustil”> Нов параграф с уникален стил. </p> <p class=”starp”> Към този параграф е приложена стилова дефиниция със свойство цвят и стойност червен. </p> </body> </html> 12 .starp {color:red;} #ustil {color:brown; font-weight:bold;}
  13. 13. <!DOCTYPE html> <head> <title> Изучаване на HTML </title> <style type="text/css"> body {background-color: silver} .starp {color: navy; font-size: 14pt} #ustil {font-weight: bold; color: brown} </style> </head> <body> <p class=”starp”> Към този параграф е приложена стилова дефиниция със свойство цвят и стойност червен. </p> <p id=”ustil”> Нов параграф с уникален стил. </p> <p class=”starp”> Към този параграф е приложена стилова дефиниция със свойство цвят и стойност червен. </p> </body> </html> 13
  14. 14. <!DOCTYPE html> <head> <title> Изучаване на HTML </title> <link rel="stylesheet" href="primer3.css" type="text/css"> </head> <body> <p class="starp"> Към този параграф е приложена стилова дефиниция със свойство цвят и стойност червен. </p> <p> Нов параграф без стил. </p> </body> </html> 14 p.starp {color:red;}
  15. 15. <!DOCTYPE html> <head> <title> Изучаване на HTML </title> <link rel="stylesheet" href="primer4.css" type="text/css"> </head> <body> <h1 class="starp"> Заглавие </h1> <p class="starp"> Към този параграф е приложена стилова дефиниция със свойство цвят и стойност червен. </p> </body> </html> 15 p.starp, h1.starp {color:red;}
  16. 16. Форматиране на текст – задаване на шрифт  h1 {font-family: Arial, Verdana, sans-serif;} 16 <font face=“Arial”>  <h1>Заглавие</h1> </font> <h1>Заглавие</h1>
  17. 17. Цвят на текст  p { color:red;} 17 <font color=“red”>  <p>Текст, оцветен в  червен цвят </p> </font> <p>Текст,  оцветен в  червен цвят </p>
  18. 18. Размер на текст  p {font-size: 14pt;} 18 <font size=“3”>  <p>Параграф </p> </font> <p> Параграф с  приложено свойство  за размер на текста. </p>
  19. 19. Почерняне на текст  p.pochernen {font-weight: 700;}  p.lpochernen {font-weight: 500;} 19 <b> <p> Почернен параграф </p> </b> <p class=“pochernen”> Почернен параграф </p> <p class=“lpochernen”> По-малко почернен параграф </p>
  20. 20. Курсивен шрифт  p {font-style:italic;} 20 <i> <p> Курсивен текст </p> </i> <p> Курсивен текст </p>
  21. 21. Подчертан текст  p {text-decoration:underline;} 21 <u> <p> Подчертан текст </p> </u> <p> Подчертан текст </p>
  22. 22. Задаване стойности на няколко параметъра  p {font: bold italic 14pt Verdana;} 22 <b> <i> <font size=“3” face=“Verdana”> <p> Текст, форматиран чрез няколко параметъра. </p> </font> </i> </b> <p> Текст, форматиран чрез няколко параметъра. </p>
  23. 23. Отстъп  p {text-indent: 15mm;} 23 <p> Текст, форматиран чрез свойството за отстъп. </p>
  24. 24. Подравняване на текст  p {text-align: right;}  h1 {text-align: center;} 24 <h1 align=“center”> Заглавие </h1> <p align=“right”> Текст, подравнен в дясно. </p> <h1> Заглавие </h1> <p> Текст, подравнен в дясно. </p>
  25. 25. Фон на страница body {background-color:pink;} <body bgcolor=“pink”> </body> <body> </body>
  26. 26. Фоново изображение  body {background-image:url("pic.jpg");} 26 <body> </body> <body background=“pic.jpg”> </body>
  27. 27. Размножаване на фоновото изображение  body{background-image:url("pic1.jpg"); background-repeat: repeat-y;} 27 <body> </body>
  28. 28. Форматиране на таблица  table {width:100%; height:200px;} 28 <table width=“100%” height=“200”> … </table> <table> … </table>
  29. 29. Рамка на таблица  table, td {border: 1px solid blue;} 29
  30. 30. Цвят на текст и цвят на фон в клетките на таблицата  table {background-color:lightgrey; color:blue;}  th {background-color:red; color:yellow;} 30
  31. 31. Форматиране на списъци  ol {list-style-type: upper-latin;}  ul {list-style-type: circle;}  Номериран списък  decimal – арабски цифри;  decimal-leading-zero – арабски цифри, пред които е поставена нула;  lower-roman – малки римски цифри;  upper-roman – големи римски цифри;  lower-latin – малки латински букви;  upper-latin – големи латински букви;  lower-greek – малки гръцки букви;  none – без маркер.  Неномериран  disc – маркер във вид на черно кръгче;  square – маркер във вид на квадратче;  circle – маркер във вид на окръжност 31
  32. 32. Хипервръзки  a:link {color:red;}  a:visited {color:pink;}  a:hover {color:brown;}  a:active {color:green;} 32
  33. 33. Премахване подчертаването на хипервръзка  a:link {text-decoration:none;}  a:visited {text-decoration:none;} 33
  34. 34. Фон на хипервръзка  a:link {background-color:yellow;}  a:visited {background-color:pink;}  a:hover {background-color:red;}  a:active {background-color:violet;} 34
  35. 35. Позициониране на обекти  p.fixpos {position:fixed; top:90px; right:30px; background- color:magenta; } 35 <p class=“fixpos”> Зададена фиксирана позиция за този параграф. </p>
  36. 36. Относително позициониране  p.leftpos {position:relative; left:-20px;}    p.rightpos {position:relative; left:20px; background- color:magenta;} 36
  37. 37. Абсолютно позициониране  p {position:absolute; background-color:magenta; top:100px; left:30px; width:120px; height:150px;} 37
  38. 38. Ред на припокриване  p.otgore {position:absolute; left:10px; top:20px; width:100px; z- index:+1; background-color:magenta;}  p.otdolu {position:absolute; left:100px; top:35px; background- color:yellow;} 38
  39. 39. <!DOCTYPE html> <head> <title> Уеб дизайн </title> <link rel="stylesheet" href="pr.css" type="text/css"> </head> <body> <div id="top"> <h1>Заглавие</h1> </div> <div id="left"> <ul> <li> <a href="page1.html"> описание </a> </li> <li> <a href="page2.html"> за контакти </a> </li> </ul> </div> 39 <div id="main"> Съдържание </div> <div id="bottom"> Изработил </div> </body> </html> #top{width:100%; background-color:pink;} #left{width:20%; height:70%; float:left; background- color:lightgray;} #main{width:80%; height:70%; float:left; background-color:lightblue;} #bottom{width:100%; clear:both; background- color:brown;}
  40. 40. 40
  41. 41.  <LINK REL=STYLESHEET HREF="http://www.tu- sofia.bg/sheets.css" TYPE="text/css"> 41
  42. 42. Пример<!DOCTYPE html> <head> <title>Глобални CSS формати</title> <style type="text/css"> BODY {background-color: silver} H1 {color: brown} P.bigblue {color: navy; font-size: 14pt} .price {font-style: italic; color: green} #SDC {font-weight: bold; color: red} </style> </head> <body> <center><h1>Приложение на елемент STYLE</h1></center> <br> <p class="bigblue">Параграф със стилова дефиниция елемент от клас, изведен в син цвят и размер на буквите 14 пункта на сив фон. Следващият фрагмент от текст е &nbsp;<span id="SDC">изведен като получер в червено</span> при необходимост от акцент за конкретен факт или дата, например:&nbsp;<span class="price">6 март 2005</span>, различна от основния текст в курсив и зелен цвят. </body> </html> 42
  43. 43. <!DOCTYPE html> <head> <title>Пример за стилови атрибути</title> </head> <body> <div style="color: green"> <h1 align=“center”>Заглавен ред</h1> <p>Текстов параграф със зелен цвят на буквите.</p> </div> <p>В този текстов параграф <span style="color: blue">две думи </span> са в син цвят.</p> </body> </html> 43
  44. 44.  em - процент спрямо размера на шрифта (0.5em);  ex - процент спрямо размера на буквата х (1ex);  px - процент спрямо разделителната способност на изображение в пиксели (12px);  % - процент спрямо общото пространство (50%);  pt - размер на шрифт в пунктове (12pt);  in - размер за разстояния в инчове (1in = 2.54cm);  cm - размер за разстояния в сантиметри (1cm);  mm - размер за разстояния в милиметри (10mm);  pc - размер за шрифт в picas (1 пика=12 pt) 44
  45. 45. Наименование Описание Дефиниция Пример font-family Име и фамилия на шрифта [[<name> | <family>],*] P {font-family: courier, helvetica, sans-serif } font-style Стилов формат на шрифта normal | italic | oblique H1, H2, H3{font-style: italic } font-variant Големина на шрифта normal | small-caps H3 { font-variant: small- caps } font-weight Дебелина на шрифта normal | bold |bolder | lighter | 100 | 200 |300| 400 | 500 | 600 | 700 | 800 | 900 EM{font-weight:bolder } font-size Размер на шрифта < xx-small | x-small |small | medium | large |x-large | xx-large> | < larger | smaller> |<процент%> P { font-size: 12pt; } font Шрифт и неговите свойства [ <font-style> || <font-variant> ||<font-weight>I<font-size> [<line height> ]<font-family> P { font: 12pt/14pt sans- serif } P { font: normal small- caps 120%/120% fantasy } color Цвят на текста aqua | black | blue | fuchsia | gray | green | lime | maroon | navy| olive| purple| red | silver | teal | white | yellow P { color: red } 45
  46. 46. Пример  Код в HTML страницата: <!DOCTYPE html> <head> <link rel="stylesheet" href="proba1.css" type="text/css"> </head> <body> <h1>Въведение в Интернет</h1> <h2 >Протоколи за обмен на информацията</h2> <p>В основата на протокола TCP/IP стой идеята за пакетното предаване на данни с цел предпазване от загуби на важни данни. Компютрите предават по между си малки пакети от данни, получени чрез раздробяването на големи масиви от данни. Тези пакети трябва да могат да бъдат изпращани по мрежа от телефонни линии. </body> </html> 46
  47. 47. Пример  Код в .css файла h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em; text-align: center} h2 {color : red; font-family : Times New Roman, Helvetica, sans-serif ; font-size:1em; text-align: center} body {color:blue; font-family : Arial, Helvetica, sans-serif;} 47
  48. 48. h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em; text-align: center} h2 {color : red; font-family : Times New Roman, Helvetica, sans-serif ; font-size:1em; text-align: center} body {color:blue; font-family : Arial, Helvetica, sans-serif;} P { text-indent: 3em } 48
  49. 49. h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em; text-align: center} h2 {color : red; font-family : Times New Roman, Helvetica, sans-serif ; font-size:1em; text-align: center} body {color:blue; font-family : Arial, Helvetica, sans-serif;} P { text-indent: 3em; text-align: center; } 49
  50. 50. Цвят на фон на заглавията и на целия прозорец h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em; text- align: center} h2 {color : red; font-family : Times New Roman, Helvetica, sans-serif ; font- size:1em; text-align: center} body {color:blue; font-family : Arial, Helvetica, sans-serif;} h1 { background-color:yellow } h2 { background-color:silver } body { background-color:#000080 } 50
  51. 51. По-голяма първата буква в параграфа h1, h2, h3 { color : #003278;font-family : Arial, Helvetica, sans-serif; font-weight : bold; text-align:center;} h1{font-size: 20pt; border-style:double; border-color:blue;margin: 1em 2em 3em} h2{font-size: 16pt;border-style:ridge; border-color:yellow;margin: 2em 2em 1em} h3{border-style: solid dotted; border-color:red;margin: 1em 20em 1em} p {color : green; font-family : Arial, Helvetica, sans-serif; font-size : 11pt;} p:first-letter { font-size: 300%; } 51
  52. 52. Първият ред от параграфа в болд h1, h2, h3 { color : #003278;font-family : Arial,Helvetica, sans-serif; font-weight : bold; text-align:center;} h1{font-size: 20pt; border-style:double; border-color:blue;margin: 1em 2em 3em} h2{font-size: 16pt;border-style:ridge; border-color:yellow;margin: 2em 2em 1em} h3{border-style: solid dotted; border-color:red;margin: 1em 20em 1em} p {color : green; font-family : Arial, Helvetica, sans-serif; font-size : 11pt;} p:first-letter { font-size: 300%;} p:first-line { font-variant: small-caps; font-weight:bold; } 52
  53. 53. изображение за фон h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em; text-align: center;} h2 {color : red; font-family : Times New Roman, Helvetica, sans-serif ; font-size:1em; text-align: center;} body {color:blue; font-family : Arial, Helvetica, sans-serif;} body { background-image:url(peace.jpg) } 53
  54. 54. Разполагане на изображение, което да се повтаря многонкратно h1 {color : green; font-family : Arial, Helvetica, sans-serif ; font-size:2em; text- align: center} h2 {color : red; font-family : Times New Roman, Helvetica, sans-serif ; font- size:1em; text-align: center} body {color:blue; font-family : Arial, Helvetica, sans-serif;} BODY { background-image: url(peace1.jpg); background-repeat: repeat-y; } 54
  55. 55. Неподреден списък <!DOCTYPE html> <head> <title>book</title> <link rel="stylesheet" href="proba10.css" type="text/css"> </head> <body> <ul > <li> Първи елемент</li> <li> Втори елемент</li> <li> Трети елемент</li> </ul> </body> </html> 55 .css файла има следния код: ul { list-style-image: url(anetbul1.gif) }
  56. 56. Позиция на текст и изображение  HTML файл <!DOCTYPE html> <head> <link rel="stylesheet" href="proba41.css" type="text/css"> </head> <body> <h1>Въведение в Интернет</h1> <h2>протоколи за обмен на информацията</h2> <h3>TCP/IP</h3> <img src="clientserver.gif"> <p>В основата на протокола TCP/IP стой идеята за пакетното предаване на данни с цел предпазване от загуби на важни данни. Компютрите предават по между си малки пакети от данни, получени чрез раздробяването на големи масиви от данни. Тези пакети трябва да могат да бъдат изпращани по мрежа от телефонни линии. <br> </body> </html> 56 CSS файл img { float: right }
  57. 57.  img { float: left } 57
  58. 58.  Каскада от стилови формати за позициониране на HTML елементи (Cascading Style Sheets- Positioning - CSS-P) 58
  59. 59.  position: absolute|relative; - абсолютно или относително позициониране на слоя в документа. Абсолютното позициониране се определя спрямо указани абсолютни координати. Относителното позициониране се определя спрямо текущата позиция в документа  top: Ypx; left: Xpx; - задава отместването на слоя в брой пиксели (px) спрямо горния ляв ъгъл на екрана при абсолютно позициониране или спрямо текущата позиция в документа при относително позициониране  color: color-name; - задава наименованието на цвета за текста, изобразен в полето на слоя  background-color: color-name; - определя цвета на фона на слоя по неговото наименование  border-width: Npx; - широчина на рамката около слоя, зададен в пиксели (px)  border-color: color-name; - цвят на рамката, зададен чрез неговото наименование  border-style: style-name; - определя стиловото оформяне на рамката около слоя ( none | dotted | dashed | solid | double | groove | ridge | inset | outset ) 59
  60. 60.  padding: N%; - определя в проценти празен контур във вътрешната част на слоя  width: Npx|N%; - определя в пиксели или в проценти от размера на слоя широчината на полето, в което се разполага съдържанието. Изобразяването на графични елементи не се влияе от този размер ако широчината на изображението надвишава указаната стойност. Ако параметърът е изпуснат съдържанието се разполага до границите на слоя  height: Npx|N%; - определя в пиксели или в проценти от размера на слоя началната височина на отрязана част от слоя. Съдържанието на слоя се разполага независимо от този размер, който има значение при управлението на дъщерни слоеве  clip: rect (left, top, right, bottom); - определя размерите на правоъгълна видима част от слоя. Размерите се задават в пиксели спрямо горния ляв ъгъл на слоя. Ако този параметър не е зададен, се приемат стойностите указани в width и height. Ако и те са изпуснати, горният ляв ъгъл на слоя се определя от неговата дефиниция, а размера от обема на съдържанието 60
  61. 61.  z-index: N; - задава поредния номер (N) на слоя в стека. Използва се при управление на превключването между различни слоеве  visibility: show|hide|inherit; - атрибут за управление на видимостта на слоя. Слоят е видим при указано за параметъра значение show и невидим при hide. Унаследяване на атрибутите от родителския слой се установява чрез inherit  background-image: url("URL"); - задава URL адрес (абсолютен или относителен) на графичен файл, който ще послужи за фон на слоя 61
  62. 62. Пример  Поставете този код в HTML файл: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows- 1251"> <title>Позициониране</title> <link rel="stylesheet" href="11a.css" type="text/css"> </head> <body> <p>Текстът в този параграф е изведен с нормално позициониране.</p> <p style="position:relative; left:30px;">Текстът в този параграф е изведен с относително позициониране 30 пиксела в дясно спрямо нормалното позициониране.</p> <div id=“lr1”> <p>Текстов параграф в обособен слой и абсолютно позициониране 200 пиксела надолу и 70 пиксела в дясно.</p> <p>Размерите на карето са 250 пиксела височина и 200 пиксела широчина. Цветът на основата е магента с дебелина на рамката 2 пиксела.</p> </div> </body> </html> 62
  63. 63.  Поставете този код в CSS файл: #lr1 { position:absolute; background-color:magenta; top:200px; left:70px; width:200px; height:250px; border-width:2px; border- color:silver; border-style:ridge; } 63
  64. 64.  Напишете този код в HTML файл: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Позициониране</title> <link rel="stylesheet" href="11b.css" type="text/css"> </head> <body> <p>Текстът в този параграф е изведен с нормално позициониране.</p> <p style="position:relative; left:30px;">Текстът в този параграф е изведен с относително позициониране 30 пиксела в дясно спрямо нормалното позициониране.</p> <div id=“lr1”> <p>Текстов параграф в обособен слой и абсолютно позициониране 200 пиксела надолу и 70 пиксела в дясно.</p> <p>Размерите на карето са 250 пиксела височина и 200 пиксела широчина. Цветът на основата е магента с дебелина на рамката 2 пиксела.</p> </div> <div id=“lr2”> <p>Текстов параграф в обособен слой и абсолютно позициониране. Тримерен стил на рамката с дебелина 10 пиксела.</p> </div> </body> </html> 64
  65. 65. #lr1 { position:absolute; background-color:magenta; top:200px; left:70px; width:200px; height:250px; border-width:2px; } #lr2 { position:absolute; background-color:teal; top:280px; left:250px; width:350px; height:50px; border-width:10px; border-color:silver; border-style:ridge; } 65
  66. 66. 66
  67. 67. 67 <!DOCTYPE html> <html> <head> <title> Уеб дизайн </title> <link rel="stylesheet" href="pr1.css" type="text/css"> </head> <body> <div id="container"> <div id="top"> <img src="pica.jpg" width="600" height="50"> <h1>Моят уеб сайт</h1> </div> <div id="left"> Първа колона - отляво </div> <div id="right"> Трета колона - отдясно </div> <div id="main"> Втора колона <br> Втора колона <br> Втора колона <br> Втора колона <br> Втора колона <br> Втора колона </div> <div id="bottom"> <p> Допълнителна информация <br> Copyright &copy; 2013 М. Иванова </p> </div> </div> </body> </html>
  68. 68. 68 body{background-color:violet;} h1{color: blue; font-size: 24px;} p{color:blue;} #container{width:600px; margin: 0 auto; background-color:white;} #top{background-color:pink;} #left{width:120px; float:left; background- color:white;} #right{width:120px; float:right; background- color:white;} #main{ margin: 0 120px; background- color:lightblue;} #bottom{clear:both;background-color:pink;text- align:center;}
  69. 69. 69 Уеб сайт с три колони и централен план

×