Difference between revisions of "CSS"
From Ilianko
| (11 intermediate revisions by the same user not shown) | |||
| Line 106: | Line 106: | ||
<head> | <head> | ||
<title>Заглавие на страницата</title> | <title>Заглавие на страницата</title> | ||
| − | < | + | <style> |
p | p | ||
{ | { | ||
| Line 113: | Line 113: | ||
color: #ff0000 | color: #ff0000 | ||
} | } | ||
| − | </ | + | </style> |
</head> | </head> | ||
| Line 140: | Line 140: | ||
==Прилагане на стил == | ==Прилагане на стил == | ||
| − | === Върху | + | === Върху html таг=== |
=== Група от тагове === | === Група от тагове === | ||
<pre> | <pre> | ||
<p class = "cherven" >Специален текст</p> | <p class = "cherven" >Специален текст</p> | ||
| − | |||
| − | |||
</pre> | </pre> | ||
| − | |||
<pre> | <pre> | ||
.cherven | .cherven | ||
| Line 157: | Line 154: | ||
color: #ff0000 | color: #ff0000 | ||
} | } | ||
| + | </pre> | ||
=== Върху определен таг=== | === Върху определен таг=== | ||
| + | <code><pre> | ||
| + | <p id = "cherven" >Точно този текст</p> | ||
| + | </pre></code> | ||
| + | <code><pre> | ||
#cherven | #cherven | ||
{ | { | ||
| Line 165: | Line 167: | ||
color: #ff0000 | color: #ff0000 | ||
} | } | ||
| + | </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
}
Създаване на меню
дасда дадад дадада
Създаване на таблица
- с обли ръбове
- с различни редове
