Maktub TI... Em busca do código?

sábado, 28 de março de 2015

HTML5 CSS3: Aula 24, posicionando elementos utilizando clear e float

HTML5 CSS3: Aula 24, posicionando elementos utilizando clear e float.

Dando sequencia a vídeo aula anterior, estamos posicionando os elementos da aba sobre do nosso projeto (site). Agora utilizando as propriedades float e clear.

Com a propriedade float você indica onde deve se posicionar o elemento em em questão, como por exemplo, a direita da página ou a esquerda (right ou left respectivamente).

Já a propriedade clear, serve para dizer que nenhum elemento estará "flutuando" ao lado do elemento em questão. Por exemplo, no exemplo abaixo eu estou dizendo que nenhum outro elemento estará ao lado direito da classe "exemplo".

.exemplo {

float: right;

clear: right;

}

Posicionando assim o elemento em questão, utilizando as propriedades float e clear juntas (igual no exemplo acima) é certeza que o elemento em questão, que pode ser o menu lateral de um blog, sempre estará a direita. Já no exemplo abaixo, eu digo que o elemento estará posicionado no lado esquerdo e, a sua esquerda, não poderá flutuar nenhum elemento a esquerda, assim como o menu de algumas lojas.

.exemplo {

float: left;

clear: left;

}

Código fonte CSS (dessa aula) sobre.css:

.paragrafos {

text-align: justify;

font-size: 10px;

font-weight: bold;

}

.transform {

float: right;

}

.decoration {

float: right;

clear: right;

}

Código fonte CSS (dessa aula) roca.css:

#rodape {

[...]

clear: both;

}

A propriedade clear, quando acompanhada do valor both, impede que elementos flutuem de ambos os lados.

quinta-feira, 26 de março de 2015

HTML5 CSS3: Aula 23, position (relative, absolute, fixed e static)

Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.

O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visível do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemento pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.

Código fonte HTML (dessa vídeo aula):

<section class="paragrafos">
<p>Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.</p>
<p>O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visivel do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemnto pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.</p>
</section>

Código fonte CSS (sobre.css):

.paragrafos {
    text-align: justify;
    font-size: 10px;
    width: 1000px;
    font-weight: bold;
}
.transform {
    position: absolute;
    top: 50px;
    right: 30px;
}
.decoration {
    position: absolute;
    top: 130px;
    right: 30px;
}

<! Código fonte exclusivo do documento padrao.css>

[...]

word-spacing: 2px; /*espaço entre palavras*/

[...]

terça-feira, 24 de março de 2015

HTML5 CSS3: Aula 22, div, classes (class) width height na pratica

HTML5 CSS3: Aula 22, div, classes (class,) width e height na pratica.

Como dito a alguns vídeos antes, agora coloco em pratica no projeto o conhecimento adquirido fora dele.
Como já vimos temos duas section em nossa aba sobre, cada uma recebeu uma div com uma classe e assim podemos começar a padronizar nossa aba sobre.

Código fonte HTML (dessa aula).

        <section>
            <div class="transform">
                [...]
            </div>
        </section>
        <section>
            <div class="decoration">
                [...]
            </div>
        </section>

Código fonte CSS (dessa aula):
div, .transform, .decoration {
    width : 150px;
    height: 60px;
    border: 1px double #777;
    text-align: center;
}

segunda-feira, 23 de março de 2015

Elementos em cascata (div e inherit). HTML5 e CSS3 aula 21

HTML5 CSS3: Aula 21, cascata (div e inherit)

Nesse vídeo vemos exemplos de tags que recebem o valor da tags pai e de tags que não recebem o valor da tag pai. E o exemplo de quando a tag não recebe o valor da tag pai é feito por uma imagem, para podermos ver a diferença.
E fica uma pergunta no meio do vídeo.

Código fonte HTML:

<!DOCTYPE html>

<html>
    <head>
        <title>cascata</title>
        <link rel="stylesheet" href="css/cascatacss.css">
    </head>
    <body>
        <dl>
        <dt>cascata</dt>
            <dd>h1, p1, h2...</dd>
        <dt>Não são em cascata</dt>
            <dd>width, height, margin, padding, img</dd>
        </dl>

        <div>
            <img src="css/imgcss/0389.png">
        </div>
    </body>
</html>

Código fonte CSS:

div {
    border: 1px double blue;
    width: 50px;
    height: 50px;
}
div img {
    widht: inherit;
    height: inherit;
}

domingo, 22 de março de 2015

HTML5 CSS3: Aula 20, espaçamento de texto

HTML5 CSS3: Aula 20, configurando o espaçamento de texto.

Nesse caso eu configurei a section, mas é indicado você criar uma configuração para todo o body (corpo do seu site).

Código fonte CSS:
section {
    margin: 10px;
    letter-spacing: 2px; /*espaço entre letras*/
    line-height: 20px; /*altura da linha*/
    word-spacing: 5px; /*espaço entre palavras*/
    text-indent:10px; /*margem da 1ª palavra*/
}

sexta-feira, 13 de março de 2015

Aula 08, negrito, itálico e sublinhado (no HTML e no CSS)

HTML5 e CSS3: Aula 08, negrito, itálico e sublinhado (no HTML e no CSS).

Nesse vídeo vemos como inserir sublinhado, itálico ou/e negrito via HTML e via CSS.

Código fonte HTML:

<!DOCTYPE html>

<html>
   <head>
       <title>Aula 8</title>
       <link rel="stylesheet" href="css/nis.css">
</head>
<body>

<p>Texto em negrito: <b>Texto em negrito</b></p>
    <p>Texto em italico: <i>Texto em italico</i></p>
    <p>Texto sublinhado: <u>Texto sublinhado</u> </p>
<p id="negrito">Texto em negrito</p>
    <p id="italico">Texto em italico</p>
<p id="sublinhado">Texto sublinhado</p>

</body>
</html>

Código fonte CSS:

#negrito {
    font-weight: bold;
}
#italico {
    font-style: italic;
}
#sublinhado {
    text-decoration: underline;
}