Difference between revisions of "CSS"
From Ilianko
| Line 23: | Line 23: | ||
} | } | ||
</pre> | </pre> | ||
| − | + | ||
| + | |||
| + | == Йерархия == | ||
| + | |||
| + | === Стил по подразбиране === | ||
| + | Ако няма определени стилове браузърът ползва стилове по подразбиране вградени в самия браузър. Стиловете по подразбиране са различни за всеки браузър. | ||
| + | |||
| + | *Да се тества <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 | ||
<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 | ||
| + | |||
| + | p | ||
| + | { | ||
| + | font-family: arial, sans-serif, helvetica; | ||
| + | font-size: 12px; | ||
| + | color: #ff0000 | ||
| + | } | ||
| + | |||
| − | Вграждане на CSS: | + | Вграждане на CSS: internernal, inline, |
==Internal== | ==Internal== | ||
<pre> | <pre> | ||
Revision as of 15:57, 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
}
Contents
Йерархия
Стил по подразбиране
Ако няма определени стилове браузърът ползва стилове по подразбиране вградени в самия браузър. Стиловете по подразбиране са различни за всеки браузър.
- Да се тества
в различни браузъри
Унаследени стилове
- Някои атрибути на стиловете се унаследяват
Стиловете приложени върху външен таг се унаследяват:
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 }
Вграждане на CSS: internernal, inline,Internal
<head> <title>Заглавие на страницата</title> <styles> p { font-family: arial, sans-serif, helvetica; font-size: 12px; color: #ff0000 } </styles> </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> Конкретен таг <p id = "cherven" >Точно този текст</p>
css
.cherven { font-family: arial, sans-serif, helvetica; font-size: 12px; color: #ff0000 } #cherven { font-family: arial, sans-serif, helvetica; font-size: 12px; color: #ff0000 } /* Comment here */ @import "newstyles.css";
