Css 6

Texto | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-6.
html
color
h1 { color: #369; }
p { color: black; }
a, span { color: #B1251E; }
div { color: rgb(71, 98, 176); }
color
color
1 de 25 30/10/2019 22:17
Texto | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-6.html
h1 { color: #777; }
<a>
/* Establece el mismo color a todos los elementos

de la página salvo los enlaces */
body { color: #777; }
/* Establece el mismo color a todos los elementos

de la página, incluyendo los enlaces */
body, a { color: #777; }
font-family
font-family
2 de 25 30/10/2019 22:17
serif
sans-serif cursive fantasy
monospace
font-family
font-family
font-family
font-family
sans-serif
font-family: Arial, Helvetica, sans-serif;

font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
3 de 25 30/10/2019 22:17
font-size
font-size
tamaño_absoluto
xx-small
x-small small medium large x-large xx-large
tamaño_relativo
larger smaller
4 de 25 30/10/2019 22:17
em
%
pt
<h1> xx-large <h2> x-large <h3> large <h4>

medium <h5> small <h6> xx-small
font-
weight
font-weight
normal
5 de 25 30/10/2019 22:17
bold normal
400 bold 700
font-weight
<em>
<strong>
font-weight
<em>
<strong>
#especial em {
font-weight: bold;
}
#especial strong {
font-weight: normal;
background-color: #FFFF66;
padding: 2px;
}
6 de 25 30/10/2019 22:17
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing el

it. Ut in
purus ac <em>libero nonummy vestibulum</em>. Nullam moles
tie, nunc id
nonummy laoreet, <strong>tortor diam mollis elit</stron
g>, quis hendrerit
libero lorem vitae nunc.</p>
<p id="especial">Lorem ipsum dolor sit amet, consectetuer

adipiscing elit.
Ut in purus ac <em>libero nonummy vestibulum</em>. Nullam
molestie, nunc id
nonummy laoreet, <strong>tortor diam mollis elit</stron
g>, quis hendrerit
libero lorem vitae nunc.</p>
font-style
font-style
font-style
italic
<em> <strong>
7 de 25 30/10/2019 22:17
<em>
<strong>
font-style
#especial em {
font-weight: bold;
font-style: normal;
}
#especial strong {
font-weight: normal;
font-style: italic;
background-color:#FFFF66;
padding: 2px;
}
font-variant
font-variant
8 de 25 30/10/2019 22:17
font-variant
font-variant
#especial {
font-variant: small-caps;
}
9 de 25 30/10/2019 22:17
font
font
font-style
font-variant font-weight
font-size
line-height
font
font: 76%/140% Verdana,Arial,Helvetica,sans-serif;

font: normal 24px/26px "Century Gothic","Trebuchet MS",Ar
ial,Helvetica,sans-serif;
font: normal .94em "Trebuchet MS",Arial,Helvetica,sans-se
rif;
font: bold 1em "Trebuchet MS",Arial,Sans-Serif;
font: normal 0.9em "Lucida Grande", Verdana, Arial, Helve
tica, sans-serif;
font: normal 1.2em/1em helvetica, arial, sans-serif;
font: 11px verdana, sans-serif;
font: normal 1.4em/1.6em "helvetica", arial, sans-serif;
font: bold 14px georgia, times, serif;
font
10 de 25 30/10/2019 22:17
caption icon menu message-box small-caption status-bar
status-bar
icon
text-align
text-align
left right
center justify
11 de 25 30/10/2019 22:17
text-align
line-
height
line-height
p { line-height: 1.2; font-size: 1em }

p { line-height: 1.2em; font-size: 1em }
12 de 25 30/10/2019 22:17
p { line-height: 120%; font-size: 1em }
text-
decoration
text-decoration
13 de 25 30/10/2019 22:17
text-decoration
underline
overline
line-through
blink
text-transform
text-transform
text-transform
uppercase
lowercase
capitalize
14 de 25 30/10/2019 22:17
<div style="text-transform: none">

<h1>Original</h1>
Lorem ipsum dolor sit amet...</div>
<div style="text-transform: capitalize">

<h1>text-transform: capitalize</h1>
Lorem ipsum dolor sit amet...
</div>
<div style="text-transform: lowercase">

<h1>text-transform: lowercase</h1>
</div>
<div style="text-transform: uppercase">

<h1>text-transform: uppercase</h1>
15 de 25 30/10/2019 22:17

</div>
vertical-align
vertical-align
vertical-align
16 de 25 30/10/2019 22:17
baseline
vertical-align
text-indent
17 de 25 30/10/2019 22:17
letter-
spacing word-
spacing
letter-spacing
word-spacing
18 de 25 30/10/2019 22:17
word-spacing
letter-spacing
.especial h1 { letter-spacing: .2em; }

.especial p { word-spacing: .5em; }
19 de 25 30/10/2019 22:17
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscin
g elit. Vestibulum
dictum. Class aptent taciti sociosqu ad litora torque
nt per conubia nostra,
per inceptos hymenaeos. Etiam pharetra blandit puru
s.</p>
...
</div>
<div class="especial">
<h1>Lorem ipsum dolor sit amet</h1>
g elit. Vestibulum
nt per conubia nostra,
per inceptos hymenaeos. Etiam pharetra blandit puru
s.</p>
...
</div>
letter-spacing
word-spacing
<br/>
<pre>
white-space
20 de 25 30/10/2019 22:17
white-space
normal
pre
<pre>
nowrap
pre-wrap
pre-line
normal
pre
nowrap
pre-
wrap
pre-
21 de 25 30/10/2019 22:17
line
white-space
:first-line
22 de 25 30/10/2019 22:17
p:first-line {
text-transform: uppercase;
}
:first-letter
:first-letter
23 de 25 30/10/2019 22:17
#normal p:first-letter {
font-size: 2em;
}
#avanzado p:first-letter {
font-size: 2.5em;
font-weight: bold;
line-height: .9em;
float: left;
margin: .1em;
}
#avanzado p:first-line {
font-weight: bold;
}
<div id="normal">
g elit. Vestibulum
nt per conubia
nostra,per inceptos hymenaeos. Etiam pharetra blandit
purus.</p>
</div>
24 de 25 30/10/2019 22:17
<div id="avanzado">
g elit. Vestibulum
nt per conubia
nostra, per inceptos hymenaeos. Etiam pharetra blandi
t purus.</p>
</div>
25 de 25 30/10/2019 22:17

Css 6

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css 6

Caricato da

Copyright:

Formati disponibili

Texto | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-6.

/* Establece el mismo color a todos los elementos

/* Establece el mismo color a todos los elementos

font-family: Arial, Helvetica, sans-serif;

<h1> xx-large <h2> x-large <h3> large <h4>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing el

<p id="especial">Lorem ipsum dolor sit amet, consectetuer

font: 76%/140% Verdana,Arial,Helvetica,sans-serif;

caption icon menu message-box small-caption status-bar

p { line-height: 1.2; font-size: 1em }

p { line-height: 120%; font-size: 1em }

<div style="text-transform: none">

<div style="text-transform: capitalize">

<div style="text-transform: lowercase">

<div style="text-transform: uppercase">

Lorem ipsum dolor sit amet...

.especial h1 { letter-spacing: .2em; }

Potrebbero piacerti anche