Difference between revisions of "CSS"

From Ilianko
 
(7 intermediate revisions by the same user not shown)
Line 106: Line 106:
 
<head>
 
<head>
 
<title>Заглавие на страницата</title>
 
<title>Заглавие на страницата</title>
<styles>
+
<style>
 
p
 
p
 
{
 
{
Line 113: Line 113:
 
color: #ff0000
 
color: #ff0000
 
}
 
}
</styles>
+
</style>
 
</head>
 
</head>
  
Line 168: Line 168:
 
}
 
}
 
</pre></code>
 
</pre></code>
 +
=== Върху вътрешен таг===
 +
<code><pre>
 +
<a href="#"> връзка </a>
 +
<p id = "cherven" >Точно този текст  <a href="#"> връзка </a></p>
 +
</pre></code>
 +
 +
<code><pre>
 +
#cherven a{
 +
font-family: arial, sans-serif, helvetica;
 +
font-size: 12px;
 +
color: #ff0000
 +
}
 +
</pre></code>
 +
 +
=== Върху състояние на таг===
 +
<code><pre>
 +
#cherven a:hover{
 +
font-family: arial, sans-serif, helvetica;
 +
font-size: 12px;
 +
color: #ff0000
 +
}
 +
</pre></code>
 +
 +
 +
=== Върху пореден таг===
 +
<code><pre>
 +
#cherven a:nth-child(odd){
 +
font-family: arial, sans-serif, helvetica;
 +
font-size: 12px;
 +
color: #ff0000
 +
}
 +
</pre></code>
 +
 +
 +
==Създаване на меню==
 +
дасда дадад дадада
 +
 +
==Създаване на таблица==
 +
*с обли ръбове
 +
*с различни редове

Latest revision as of 17:05, 4 November 2014

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>

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

Върху 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
}


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

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

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

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