Negrito:
<b> Negrito </b>
Italico:
<i> Itálico </i>
Sublinhado:
<u> Sublinhado </u>
Riscado:
<s> Riscado </s>
Texto no centro:
<center> Texto </center>
Imagens:
<img src="Url da imagem">
Height: Altura da imagem
Width: Largura da imagem
Border/Borda: Borda da imagem
<img src="url da imagem" class="sua class da borda" width="largura da imagem" height="altura da imagem">
Links:
<a href="Link aqui">Nome aqui</a>
Imagem com link:
<a href="Link aqui"><img src="Link da imagem"></a>
Texto/fotos ou conteúdo andando por um lado:
<marquee> Texto aqui </marquee>
<marquee> <img src="Link da imagem aqui"> </marquee>
Mudando as cores:
Procure por #seis numeros e letras aqui (Esses seis numeros e letras é o codigo da cor, abra uma tabela de cores e coloque o codigo da cor que você quiser)
Mudando background total (tambem chamado de Bg):
Procure por .body .Vai ter background-image: url(URL DA IMAGEM) {Se for uma imagem} ou background: #CODIGO DA COR (Para mudar a cor é só trocar o codigo da cor como ensinei acima)
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
Continuação (créditos belo-sonho.blogspot.com)
Criando uma caixinha (box) de conteúdo:
[prévia por imagem aqui: http://zip.net/bwpZXY]
-> Você terá de dar um background
-> Terá de dar um espaçamento entre as bordas para o conteúdo e o texto ficar organizado
-> Terá de colocar 1 cor específica em hexadecimal para essa borda e dar um estilo a ela
-> Colocar a font e a cor da font utilizada (essa font tem que estar instalada no seu blog).
Código:
<div style="background:#f9f9f9; padding:8px; border:1px dashed #ff0068; font-family:arial; color:#000;">
Aqui tem o conteúdo ou algo esscrito.
</div>
Background - é a cor do fundo da caixa
padding - Espaçamento das bordas
Border - é a borda definida em: pixels, o estilo da borda e a cor hexadecimal dela
Font-family - Uma fonte (texto) definida.
Color: cor da fonte.
Código:
Aqui tem o conteúdo ou algo esscrito.
-------------------------------------------------
No css:
O CSS é separado e estilizado através de uma div, um span ou algo definido em HTML sobre ela,exemplo:
------------------------ No html:
<div id="nome da div"> </div>
<alguma_coisa> </alguma_coisa>
------------------------ No CSS:
alguma_coisa{
Estilização do CSS aqui
}
#nome da div {
Estilização do CSS aqui
}
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
No post anterior sobre criar um layout (o segundo post sobre isso) eu deixei alguns tipos de estilização css que vocês podem conhecer,então veja:
color | a cor do texto
opacity | opacidade (transparência de uma div)
background | background (fundo) por cores ou por imagens
background-color | background só de cores
background-image | background so de imagem
border | aplica uma borda a uma div ou background
border-image | borda em imagem
box-shadow | aplica sombra em uma caixa/bg
display | retira algo com 'none' e poe em blocos com 'block'
height | altura (por pixels = x px)
width | largura (por pixels = x px)
left | esquerda
top | topo
bottom | em baixo
right | direita
overflow | transbordamento ou barra de rolagem
padding | acolchoamento ou espaço em um bg
margin | cria uma margem transparente,separando de outra div
max-height | maximo de altura que pode ser utilizado
max-width | maximo de largura que pode ser utilizado
min-width | minimo de largura que pode ser utilizado
min-height | minimo de altura que pode ser utilizado
letter-spacing | espaços de letras
line-height | altura da linha de texto
text-align | alinhar o texto no centro,direita e esquerda
text-transform | transformar o texto em maiusculo,minusculo primeira letra maiusculo etc
text-decoration | colocar underline no texto,overline..
text-shadow | sombra do texto
font-family | tipo de fonte
font-size | tamanho da fonte
font-weight | texto normal,itálico,negrito,etc
transition | transiçao do :hover
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
a {
(o a significa link,você pode estiliza-lo.)
}
a:hover {
(o a significa link ao passar o mouse,você pode estiliza-lo.)
}
a:visited {
(o a significa link depois de visitado,você pode estiliza-lo.)
}
0 comentários:
Postar um comentário