Difference between revisions of "CSS"

From Ilianko
 
(15 intermediate revisions by the same user not shown)
Line 23: Line 23:
 
  }
 
  }
 
</pre>
 
</pre>
−
styles.css
+
 
 +
 
 +
== Йерархия ==
 +
 
 +
=== Стил по подразбиране ===
 +
Ако няма определени стилове браузърът ползва стилове по подразбиране вградени в самия браузър. Стиловете по подразбиране са различни за всеки браузър.
 +
 
 +
*Да се тества &lt;h1&gt; в различни браузъри
 +
 
 +
=== Унаследени стилове ===
 +
 
 +
*Някои атрибути на стиловете се унаследяват
 +
Стиловете приложени върху външен таг се унаследяват:
 +
    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
 
<pre>
 
<pre>
 
<head>
 
<head>
Line 29: Line 82:
 
<link rel=stylesheet type="text/css" href="styles.css" />
 
<link rel=stylesheet type="text/css" href="styles.css" />
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
 
 
<p>Някакъв текст</p>
 
<p>Някакъв текст</p>
−
 
 
</body>
 
</body>
 
</html>
 
</html>
 
</pre>
 
</pre>
 
...
 
...
 +
*styles.css
  
−
Вграждане на CSS: external, internernal, inline,
+
<code><pre>
−
==Internal==
+
p
 +
{
 +
font-family: arial, sans-serif, helvetica;
 +
font-size: 12px;
 +
color: #ff0000
 +
}
 +
 
 +
/* Comment here */
 +
@import "newstyles.css"; /* включване на друг файл */
 +
</pre></code>
 +
 
 +
===Internal===
 
<pre>
 
<pre>
 
<head>
 
<head>
 
<title>Заглавие на страницата</title>
 
<title>Заглавие на страницата</title>
−
<styles>
+
<style>
 
p
 
p
 
{
 
{
Line 51: Line 113:
 
color: #ff0000
 
color: #ff0000
 
}
 
}
−
</styles>
+
</style>
 
</head>
 
</head>
  
Line 62: Line 124:
 
</pre>
 
</pre>
  
−
== Inline ==
+
=== Inline ===
 
<pre>
 
<pre>
 
<head>
 
<head>
Line 76: Line 138:
 
</pre>
 
</pre>
  
−
== Група от тагове ==
+
==Прилагане на стил ==
 +
 
 +
=== Върху html таг===
 +
 
 +
=== Група от тагове ===
 
<pre>
 
<pre>
 
  <p class = "cherven" >Специален текст</p>
 
  <p class = "cherven" >Специален текст</p>
−
  Конкретен таг
 
−
<p id = "cherven" >Точно този текст</p>
 
 
</pre>
 
</pre>
 
   
 
   
−
css
 
 
<pre>
 
<pre>
 
.cherven
 
.cherven
Line 91: Line 154:
 
color: #ff0000
 
color: #ff0000
 
}
 
}
 +
</pre>
  
 +
=== Върху определен таг===
 +
<code><pre>
 +
<p id = "cherven" >Точно този текст</p>
 +
</pre></code>
 +
<code><pre>
 
#cherven
 
#cherven
 
{
 
{
Line 98: Line 167:
 
color: #ff0000
 
color: #ff0000
 
}
 
}
 +
</pre></code>
 +
=== Върху вътрешен таг===
 +
<code><pre>
 +
<a href="#"> връзка </a>
 +
<p id = "cherven" >Точно този текст  <a href="#"> връзка </a></p>
 +
</pre></code>
  
−
/* Comment here */
+
<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>
 +
 
 +
 
 +
==Създаване на меню==
 +
дасда дадад дадада
  
−
@import "newstyles.css";
+
==Създаване на таблица==
−
</pre>
+
*с обли ръбове
 +
*с различни редове

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
}


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

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

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

  • с обли ръбове
  • с различни редове
Retrieved from "https://ilianko.com/index.php?title=CSS&oldid=5315"