Курс по уеб програмиране (2014), занятие №2 - CSS

2014Copyright © 2014 DAVID Holding Company

Курс по уеб програмиране

Занятие №2CSS

Copyright © 2014 DAVID Holding Company

Съдържание

• Въведение в CSS• Селектор, свойство, стойност• Идентификация и групиране на селектори• Цветове и фон• Форматиране на текст, списъци, таблици• CSS Box Model• Border, margin, padding• Позициониране на елементи• Псевдокласове и псевдоелементи


Въведение в CSS

• Cascading Style Sheets• Език, който съдържа множество инструменти за стилизиране

(инструктира как да се покаже) на HTML• Разделя съдържанието на страницата от нейната презентация• Дефинира шрифт, размер, широчина, фон....• Подобрява потребителското изживяване в сайта• Може да определя различна презентация за различен тип медиа –

screen, print, tv... дори braille• Всеки браузър има свой-собствен, зададен по подразбиране

стилов лист



• Използване на едно и също съдържание с различни стилове за различни цели

• Външните стилови полета спестяват много работа• Значително намаля количеството код в страницата• Каскадни, защото децата наследяват родителите• Връзката между HTML и CSS става по 3 основни начина

– Вградени в <head> елемента на HTML<head><style>h1 {

text-align: center;color: red;

} </style></head>



• Връзката между HTML и CSS става по 3 основни начина– Inline – Стил в самия HTML елемент

<h1 style="font-size:18px">Page title</h1>

– Външни – различни страници използват един и същ стил• link

<link href=“mycss.css" rel="stylesheet" type="text/css"/>

• Import - <style type="text/css"> @import "styles.css"; </style>– Някои по-стари браузъри не разпознават import– Проблеми с Internet Explorer



• IE 6-9– A sheet may contain up to 4095 rules– A sheet may @import up to 31 sheets– @import nesting supports up to 4 levels deep

• IE 10– A sheet may contain up to 65534 rules– A document may use up to 4095 stylesheets– @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)


Селектор, свойство, стойност

• Селекторът е връзката между HTML документа и стиловия лист и всички типове елементи в HTML са възможни селектори – p, div, nav, span, input…селектори {

свойство: стойност;свойство: стойност;свойство: стойност;

}



• CSS селекторите се използват да намерят HTML елементите базирани на тяхно id, classes, тип, атрибут, стойност и тн..

• Element селектор– прилага стил на HTML елемент/иstrong {

color: blue;}

• Class селектор – прилага стил на елемент/и в HTML със специфичен class атрибут

.myclass {color: blue;

}

<h1 class="myclass">Заглавие</h1>



• ID селектор– прилага стил на HTML елемент/и със специфичен ID атрибут

#myid { color: blue;}

<h1 id="myid">Заглавие</h1>


Идентификация и групиране на селектори

• Възможно е да има много елементи с един с един и същ стил

• Групирането на елементи намалява кода и значително подобрява поддръжката от страна на разработчиците

h1 {text-align: center;color: red;

}h2 {


}p {


}



• Възможно е да има много елементи с един с един и същ стил

• Групирането на елементи намалява кода и значително подобрява поддръжката от страна на разработчиците.

h1, h2, p {text-align: center;color: red;

}



• Комбиниране

#navigation p strong {color: red;

}

<div id="navigation"><h1 style="font-size:18px">Page title</h1><p>

Lorem Ipsum is <strong>simply dummy text</strong> of the prin

</p></div>



• Вложени селектори

nav p strong {color: red;

}

<nav><h1 style="font-size:18px">Page title</h1><p>

Lorem Ipsum is <strong>simply dummy text</strong> of the prin

</p></nav>



• Атрибутни селектори– Избира/селектира елементи по техните атрибути

a[title] {color: red;text-decoration: none;

}

<p>Lorem Ipsum is <a href="#" title="page title">simply dummy text</a> of the print</p>

<p>Lorem Ipsum is <a href="#">simply dummy text</a> of the print</p>



• Атрибутни селектори– Избира/селектира елементи по стойността на техните

атрибути

input[type=text] {color: red;text-decoration: none;

}

<p>Lorem Ipsum is <a href="#" title="page title">simply dummy text</a> of the print</p>

<p>Lorem Ipsum is <a href="#">simply dummy text</a> of the print</p>



• Атрибутни селектори– Избира/селектира елементи, чиито атрибутни стойности

съдържат определена дума

a[title*=someword] {color: gray;

}

<p>Lorem Ipsum is <a href="#" title="someword in title">simply dummy text</a> of the print</p>

<p>Lorem Ipsum is <a href="#" title="other title">simply dummy text</a> of the print</p>



• Избиране/селектиране на всички елементи в даден елементbody * {

font-size: 10px;}

<p>Lorem Ipsum is <a href="#" title="someword in title">simply dummy text</a> of the print</p><p>Lorem Ipsum is <a href="#" title="other title">simply dummy text</a> of the print</p>



• Селектиране на всички елементи с определен клас в даден елемент

p > .otherclass {color: green;

}


Форматиране

• Мерни единици% percentage

in inch

cm centimeter

mm millimeter

em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

ex one ex is the x-height of a font (x-height is usually about half the font-size)

pt point (1 pt is the same as 1/72 inch)

pc pica (1 pc is the same as 12 points)

px pixels (a dot on the computer screen)



• ЦветовеHex стойностите представляват три двойки двуцифрени шестнадесетични числа започващи със символа ‘#’.

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)



• Добавяне на фон

Property Description

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

http://www.w3schools.com/cssref/css3_pr_background.asp

http://www.w3schools.com/cssref/pr_background-attachment.asp

http://www.w3schools.com/cssref/pr_background-color.asp

http://www.w3schools.com/cssref/pr_background-image.asp

http://www.w3schools.com/cssref/pr_background-position.asp

http://www.w3schools.com/cssref/pr_background-repeat.asp



• Добавяне на фон

body {background-image: url('css/red001.jpg');background-color: #f4f4f4;background-repeat: no-repeat;background-position: center bottom;background-attachment: scroll;background-size: cover;

}


Форматиране на текст

• Поддържа правила за стилизиране на:– Шрифт

font-family: Verdana, Geneva, sans-serif;font-size: 10px;font-style: italic;

– Цвятcolor: #930;opacity: 0.6;

– Оформлениеtext-decoration: line-through;text-transform: uppercase;letter-spacing: 20px;text-align: center;

– http://www.w3schools.com/cssref/default.asp

http://www.w3schools.com/cssref/default.asp

http://www.w3schools.com/cssref/default.asp


Форматиране на списъци

<ul class="a"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges

<ul class="b"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges

<ul class="c"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>

</ul></li>

</ul></li>

</ul>


Форматиране на списъциul.a {

list-style-type: circle;list-style-image: url(css/sqpurple.gif);

}

ul.b {list-style-type: square;

}

ul.c {list-style-type: square;list-style-image: none;

}

ul .b li {background-image: url(css/sqpurple.gif);background-repeat: no-repeat;background-position: 10px 5px;padding-left: 14px;text-indent:20px;

}


Форматиране на таблици

• Форматиране на таблицаtable {

width: 500px;border-collapse: collapse;

}

• Атрибутът border-collapse определя вида на рамкатаtable, td, th {

border: 1px solid green;}

th {background-color: green;color: white;

}


CSS Box Model

• CSS box model представя всеки елемент като съвкупност от четири вложени полета


CSS Box Model

• Описание на различните полета:– Margin - Изчиства полето около border. Margin няма цвят

на фона и е прозрачен– Border - Поле, което обикаля около padding и

съдържание. – Padding - Изчиства полето около съдържанието. Padding

се влияе от фона на кутията.– Съдържание - съдържанието на кутията, където се

показва текст и картинки


CSS Box Model

• За да задавате правилни ширина и височина на елементите, трябва да знаете как работи box моделът

.math {width: 250px;padding: 10px;border: 5px solid gray;margin: 10px;

}

• Калкулиране на ширината и височината на елементите в CSS Box ModelОбща ширина = ширина на съдържанието + ляв padding + десен padding + ляв border + десен border + ляв margin + десен marginОбща височина = височината на съдържанието + горен padding + долен padding + горен border + долен border + горен margin + долен margin250px (width) + 20px (left + right padding) + 10px (left + right border)

+ 20px (left + right margin) = 300px


Border, margin, padding

• Border - рамкаProperty Descriptionborder Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

http://www.w3schools.com/cssref/pr_border.asp

http://www.w3schools.com/cssref/pr_border-bottom.asp

http://www.w3schools.com/cssref/pr_border-bottom_color.asp

http://www.w3schools.com/cssref/pr_border-bottom_style.asp

http://www.w3schools.com/cssref/pr_border-bottom_width.asp

http://www.w3schools.com/cssref/pr_border-color.asp

http://www.w3schools.com/cssref/pr_border-left.asp

http://www.w3schools.com/cssref/pr_border-left_color.asp

http://www.w3schools.com/cssref/pr_border-left_style.asp

http://www.w3schools.com/cssref/pr_border-left_width.asp

http://www.w3schools.com/cssref/pr_border-right.asp

http://www.w3schools.com/cssref/pr_border-right_color.asp

http://www.w3schools.com/cssref/pr_border-right_style.asp

http://www.w3schools.com/cssref/pr_border-right_width.asp

http://www.w3schools.com/cssref/pr_border-style.asp

http://www.w3schools.com/cssref/pr_border-top.asp

http://www.w3schools.com/cssref/pr_border-top_color.asp

http://www.w3schools.com/cssref/pr_border-top_style.asp

http://www.w3schools.com/cssref/pr_border-top_width.asp

http://www.w3schools.com/cssref/pr_border-width.asp



• Margin

Property Description

margin A shorthand property for setting the margin properties in one declaration

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

http://www.w3schools.com/cssref/pr_margin.asp

http://www.w3schools.com/cssref/pr_margin-bottom.asp

http://www.w3schools.com/cssref/pr_margin-left.asp

http://www.w3schools.com/cssref/pr_margin-right.asp

http://www.w3schools.com/cssref/pr_margin-top.asp



• PaddingProperty Description

padding A shorthand property for setting all the padding properties in one declaration

padding-bottom Sets the bottom padding of an element

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element

padding-top Sets the top padding of an element

http://www.w3schools.com/cssref/pr_padding.asp

http://www.w3schools.com/cssref/pr_padding-bottom.asp

http://www.w3schools.com/cssref/pr_padding-left.asp

http://www.w3schools.com/cssref/pr_padding-right.asp

http://www.w3schools.com/cssref/pr_padding-top.asp


Позициониране на елементи

• PositionValue Description

static Default value. Elements render in order, as they appear in the document flow

absolute The element is positioned relative to its first positioned (not static) ancestor element

fixed The element is positioned relative to the browser window

relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about inherit

http://www.w3schools.com/cssref/css_initial.asp

http://www.w3schools.com/cssref/css_initial.asp

http://www.w3schools.com/cssref/css_inherit.asp

http://www.w3schools.com/cssref/css_inherit.asp



• Свойството float – указва на елемент да се позиционира в ляво или в дясно, позволявайки на другите елементи да „плават“ около него

.left {float: left;color: blue;width: 300px;

}.right {

float: right;color: red;width: 300px;

}

• Изчистването на плаващите елементи става с clear– Стойности на свойството clear: both, left и right



• Свойствата display и visibility– display – определя как даден елемент да бъде представен– visibility – определя дали даден елемент да се вижда или

не– Разликата между двата е значителна!

.hidden {visibility: hidden;

}

.displayhidden {display: none;

}



• Свойството display– block – съдържа padding, border, margin– inline – игнорира height и width– inline-block – добавя height и width

• Свойството overflow– указва какво ще се случи при препълване на

съдържанието– примери: http://css-tricks.com/examples/OverflowExample/

• Свойството z-index– указва как да се подредят елементите по оста Z

http://css-tricks.com/examples/OverflowExample/




Псевдокласове и псевдоелементи

• Псевдокласове и псевдоелементи– Използват се да добавят ефект към някои от селекторите

a:hover {color: #ff00ff;

}

– Псевдокласове и CSS класовеa.blue:hover {

color: blue;}



• Псевдокласове и псевдоелементиp:first-child i {

color: blue;}

a::before {content: "-";color: green;

}

a::after{content: "-";

}



• Псевдокласове и псевдоелементиSelector Example Example description

:link a:link Selects all unvisited links

:visited a:visited Selects all visited links

:active a:active Selects the active link

:hover a:hover Selects links on mouse over

:focus input:focus Selects the input element which has focus

::first-letter p::first-letter Selects the first letter of every <p> element

::first-line p::first-line Selects the first line of every <p> element

:first-child p:first-child Selects every <p> elements that is the first child of its parent

::before p::before Insert content before every <p> element

::after p::after Insert content after every <p> element

:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"

http://www.w3schools.com/cssref/sel_link.asp

http://www.w3schools.com/cssref/sel_visited.asp

http://www.w3schools.com/cssref/sel_active.asp

http://www.w3schools.com/cssref/sel_hover.asp

http://www.w3schools.com/cssref/sel_focus.asp

http://www.w3schools.com/cssref/sel_firstletter.asp

http://www.w3schools.com/cssref/sel_firstline.asp

http://www.w3schools.com/cssref/sel_firstchild.asp

http://www.w3schools.com/cssref/sel_before.asp

http://www.w3schools.com/cssref/sel_after.asp

http://www.w3schools.com/cssref/sel_lang.asp




Въпроси?


Благодаря!

• Тодор Пашов– [email protected]– Skype: todor_pashov– https://facebook.com/tpashov

• ДАВИД академия– [email protected]– http://acad.david.bg/– @david_academy– https://facebook.com/DavidAcademy

mailto:[email protected]

skype:todor_pashov?chat

https://facebook.com/tpashov



mailto:[email protected]

http://acad.david.bg/

https://twitter.com/david_academy

https://twitter.com/david_academy

https://facebook.com/DavidAcademy

Education

Курс по уеб програмиране (2014), занятие №2 - CSS