CSS

Cascading Style Sheets (CSS) - служи за представяне на форматирането и външния вид на документи написани с markup language

Основната цел, с която е проектиран е отделянето на съдържанието на документа от неговия външен вид - шрифтове, фонове, цветове и т.н.

Пример:

Преди css

 <p>
   <font face="arial, helvetica, sans-serif" size="-1" color="#ff0000">някакъв текст</font>
 </p>

След css

 <p>някакъв текст</p>
  +
 p
 {
  font-family: arial, sans-serif, helvetica;
  font-size: 12px;
  color: #ff0000
 }

Йерархия

Стил по подразбиране

Ако няма определени стилове браузърът ползва стилове по подразбиране вградени в самия браузър. Стиловете по подразбиране са различни за всеки браузър.

• Да се тества <h1> в различни браузъри

Унаследени стилове

• Някои атрибути на стиловете се унаследяват

Стиловете приложени върху външен таг се унаследяват:

   border-collapse
   border-spacing
   caption-side
   color
   cursor
   direction
   empty-cells
   font-family
   font-size
   font-weight
   font-style
   font-variant
   font
   letter-spacing
   list-style-type
   list-style-position
   list-style-image
   list-style
   line-height
   orphans
   page-break-inside
   quotes
   text-align
   text-indent
   text-transform
   visibility
   white-space
   widows
   word-spacing

С задаване на стойност inherit на даден атрибут могат да се унаследи произволен атрибут:

div {

border: solid 2px hotpink;

}

p {
	border: inherit;
}

Стилове съхранени в отделен документ (external)

• index.html

<head>
<title>Заглавие на страницата</title>
<link rel=stylesheet type="text/css" href="styles.css" />
</head>
<body>
<p>Някакъв текст</p>
</body>
</html>

...

• styles.css

p
{
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #ff0000
}

/* Comment here */
@import "newstyles.css"; /* включване на друг файл */

Internal

<head>
<title>Заглавие на страницата</title>
<style>
p
{
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #ff0000
}
</style>
</head>

<body>

<p>Някакъв текст</p>

</body>
</html>

Inline

<head>
<title>Заглавие на страницата</title>
</head>

<body>

<p style="font-family: arial, sans-serif, helvetica; font-size: 12px; color: #ff0000">Някакъв текст</p>

</body>
</html>

Прилагане на стил

Група от тагове

 <p class = "cherven" >Специален текст</p>

.cherven
{
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #ff0000
}

Върху определен таг

<p id = "cherven" >Точно този текст</p>

#cherven
{
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #ff0000
}

Върху вътрешен таг

 <a href="#"> връзка </a>
<p id = "cherven" >Точно този текст  <a href="#"> връзка </a></p>

#cherven a{
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #ff0000
}

Върху състояние на таг

#cherven a:hover{
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #ff0000
}

Върху пореден таг

#cherven a:nth-child(odd){
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #ff0000
}

Създаване на меню

дасда дадад дадада

Създаване на таблица

• с обли ръбове
• с различни редове