CSS

Get Started. It's Free
or sign up with your email address
Rocket clouds
CSS by Mind Map: CSS

1. Font Properties

1.1. Estilo da Fonte

1.1.1. Normal

1.1.1.1. p.normal {font-style:normal;}

1.1.2. itálico

1.1.2.1. p.italic {font-style:italic;}

1.1.3. oblíquo

1.1.3.1. p.oblique {font-style:oblique;}

1.2. Tamanho da Fonte

1.2.1. A propriedade font-size define o tamanho do texto.

1.2.1.1. <h1> - <h6>

1.3. Definir Tamanho da Fonte Com Pixels

1.3.1. Definir o tamanho do texto com pixels lhe dá controle total sobre o tamanho do texto:

1.3.1.1. h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}

1.4. Formas de declaração

1.4.1. h1 {color: #FF0000;}

1.4.2. h2 {color: #00FF00;}

1.4.3. p {color: rgb(0,0,255);}

1.4.4. p { font: italic small-caps bold 14px "Comic Sans MS", sans-serif;}

2. Background Properties

2.1. background-color

2.1.1. A propriedade background-color define a cor de fundo de um elemento.

2.1.1.1. background-color:yellow;

2.2. background-position

2.2.1. A propriedade background-position define a posição inicial de uma imagem de fundo.

2.2.1.1. background-position:center center;

2.3. background-size

2.3.1. A propriedade background-size especifica o tamanho das imagens de fundo.

2.3.1.1. background-size:80px 60px;

2.4. background-repeat

2.4.1. A propriedade background-repeat define se / como uma imagem de fundo será repetida.

2.4.1.1. background-repeat:repeat-y;

2.5. background-image

2.5.1. A propriedade background-image define uma ou mais imagens de fundo para um elemento

2.5.1.1. background-image:url('paper.gif');

2.6. Formas de declaração

2.6.1. body { background-image: url("/images/css.gif"); background-repeat: no-repeat; background-attachment: fixed; } body { background: #00FF00 url("css.gif") no-repeat fixed 200px 70px; }

3. Valores

3.1. list-style-image:

3.1.1. none

3.1.2. URL: url(caminho/marcador.gif)

3.2. list-style-position:

3.2.1. outside: marcador fora do alinhamento do texto

3.2.2. inside: marcador alinhado com texto

3.3. list-style-type:

3.3.1. none: sem marcador

3.3.2. disc: círculo (bolinha cheia)

3.3.3. circle: circunferência (bolinha vazia)

3.3.4. square: quadrado cheio

3.3.5. decimal: números 1, 2, 3, 4, ...

3.3.6. decimal-leading-zero

3.3.7. lower-roman: romano minúsculo i, ii, iii, iv,

3.3.8. upper-roman: romano maiúsculo I, II, III, IV,

3.3.9. lower-alpha: letra minúscula a, b, c, d,

3.3.10. upper-alpha: letra maiúscula A, B, C, D,

3.4. Formas de declaração

3.4.1. ul { list-style: inside url("seta.gif"); } Ou ul { list-style-image: url("seta.gif"); list-style-position: inside; }

4. Seletores CSS

4.1. Em CSS, seletores são padrões usados ​​para selecionar o elemento (s) que deseja estilo.

4.1.1. .intro { background-color:yellow; }

4.1.1.1. <style> .intro { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div class="intro"> <p>My name is Donald.</p> <p>I live in Duckburg.</p> </div>