 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:49 Titlul subiectului: Css 3 text si font |
|
|
| Citat: |
Setarea proprietatilor textului
1. Setarea culorilor textului
<html
<head>
<style>
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
2.Setarea culorii de background pentru un text (paragraph)
<html>
<head>
<style>
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span>This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span>This is a text.</span>
</p>
</body>
</html>
3. Distanta dintre litere
<html>
<head>
<style>
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>
4. Distanta dintre liniile paragrafului
<html>
<head>
<style>
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p>
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
5.Alinierea textului
<html>
<head>
<style>
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
</body>
</html>
6. Decorarea textului
<html>
<head>
<style>
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<p><a href="http://www.w3schools.com/default.asp"> This is a link</a></p>
</body>
</html>
Fonturi
1. Setarea fontului pentru text(font-family)
<html>
<head>
<style>
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>
<body>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
2. Setarea dimensiunii font-ului(font-size)
<html>
<head>
<style>
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
3. Setarea stilului (font-style:italic, bold , normal)
<html>
<head>
<style>
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
4.Grosimea fontului (font-weight:bold)
<html>
<head>
<style>
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>
<body>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
5. Font variant
<html>
<head>
<style>
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
6. Toate proprietatile fontului intr-o singura declaratie
<html>
<head>
<style>
p
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body> |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
