DSI CSS

DSI CSS

1. O CSS pode ser definido tanto num arquivo externo ao HTML como no proprio HTML

   • Caso seja em um arquivo externo, a devida referencia a esse arquivo deve ser feita no cabeçalho do HTML com a tag "link"
   • Caso seja definido no proprio arquivo HTML deve ser definido no cabeçalho, entre as tags "style"

2. Seletores

   • Os seletores são usados dentro do CSS para determinar uma "classe" de estilização, as quais devem ser referenciadas no arquivo HTML a depender do tipo de seletor
   • Seletor por ID
     • No CSS identificado por #
     • No HTML identificado por id=""
   • Seletor por classe
     • No CSS identificado por .
     • No HTML identificado por class=""
   • Pseudoseletor
     • Um pseudosseletor funciona alterando uma regra existente para estar ativa, sendo que apenas em um cenário determinado, que no caso de estar em semelhança, é quando o usuário passa o mouse sobre o elemento em questão
     • No CSS identificado por :hover
     • No HTML sera identificado de acordo com o seletor usado
   • Seletor direto
     • É utilizado para selecionar de maneira direta uma tag especifica, depois que esse item é adicionado a uma folha de estilos (CSS), qualquer item na marcação HTML do documento que ter essa tag será apresendado conforme o estilo estabelecido, independentemente de sua classe, ID ou qualquer outra situação
     • No CSS identificado pela tag desejada
     • No HTML é apenas necessario usar a tag
   • Seletor Universal
     • Como o nome indica tem como objetivo localizar tudo o que pode no espaço em que está operando, estilizando todos os elementos como um todo. É muito utilizado para a definição de um modelo CSS inteiro de uma página para um conjunto conhecido de padrões, por exemplo, como margens de 0 pixel e sem bordas
       • O seletor universal deverá ser utilizado com muita moderação, visto que sua esfera de influência deve ser a menor possível, para não onerar de forma drástica o desempenho de nossas páginas web
     • No CSS identificado por *
     • No HTML tudo será afetado
   • Seletor Adjacente
     • O seletor adjacente proporciona uma seleção dos elementos imediatamente próximos um do outro e funciona apenas uma vez para cada ocorrência
     • No CSS identificado por tags separadas por +
     • No HTML identificado por tags dispostas como o especificado
     • Resultado
       • Somente o elemento p próximo ao elemento h1 seria alterado para uma cor vermelha, ou seja, a segunda linha de texto (e quaisquer outras que possam seguir) permaneceriam inalteradas, assim como os próprios elementos h1
   • Para saber mais sobre os seletores, acesse: https://www.w3schools.com/css/css_selectors.asp
   • Seletor de Atributos
     • O seletor de atributos é usado para selecionar tags com um atributo e valor especificados, A principal vantagem é que a manutenção do documento se torna muito mais fácil, ágil e menos propensa a erros, visto que não é necessario alterar as classes do HTML e sim apenas o CSS referendo-se as tags pelos atributos
     • No CSS identificado por tag[atributo]
     • No HTML as tags com o atributo especificado e/ou valor do atributo
     • No HTML5 há um novo conceito de atributo chamado atributo de dados, que assume a forma de dados seguida praticamente por um nome personalizado, que é ideal para usar no seletor de atributos, visto que o nomes e valores do atributo são personalizáveis
       • No exemplo acima "data-" é predefinido, porém, tanto "username" como "vamos" foi definido por mim
   • Seletores em Formularios
     • Seletor de Foco
       • Isso geralmente é utilizado em formulários para destacar um campo ativo aguardando o seu preenchimento, é Importante ressaltar que consideramos foco quando o cursor está piscando no input selecionado
       • No CSS identificado por :focus
       • No HTML qualquer input que receba foco, como o type text
       • Resultado:
     • Seletor ativado ou desativado
       • Usado para estilizar inputs, diferenciando-os se estão desativados ou ativados. Seu uso se torna mais interessante quando alteramos essa ativação do input nos scripts, pois caso passe de desativado para ativado, seu estilo também mudará
       • No CSS identificado por input:disabled|enabled
       • No HTML identificado nos inputs desativados|ativados
         • Obs: um input é considerado ativado quando em seu estado padrão, sem possuir o atributo disabled
       • Resultado
     • Seletor válido ou inválido
       • Usado para estilizar inputs, diferenciando-os se são validos ou inválidos, caso passe de valido para inválido, seja no script ou pela propria validação, seu estilo também mudará
         • OBS: Utilizar válido e inválido é uma excelente maneira de fornecer feedback ao usuário, mas vê-los imediatamente assim que o formulário é apresentado geralmente não é considerada uma boa prática. Sendo assim, por esse motivo, normalmente não os utilizamos diretamente aos elementos de entrada, de forma geral anexamos a um nome de classe/ID e, em consequência, verificamos, aplicamos e utilizamos JavaScript quando o formulário é enviado
       • No CSS identificado por input:valid|invalid
       • No HTML identificado nos inputs que possui alguma validação, por exemplo de email, ou inputs obrigatorios
         • inputs sem nenhuma validação são automaticamente considerados válidos
       • Resultado
         • O nome do usuário aparece imediatamente vermelho, porque é obrigatório, portanto, até ser preenchido, será classificado como inválido.
           • O e-mail é válido pois apenas apresentamos que ele deve ter sua entrada validada como um endereço de e-mail, não que é obrigatorio, portanto, ter um e-mail em branco pode ser considerado válido. No entanto, se iniciarmos a nossa digitação, ele mudará para vermelho e voltará a verde até que a entrada seja sinalizada corretamente ou removida por completo
     • Seletor Marcado
       • é utilizado ao atuar com elementos de caixa de seleção e rádio, sendo que se o elemento estiver marcado ou selecionado, essa regra será aplicada; caso contrário, não será
       • No CSS identificado por input[type="checkbox"]:checked | input[type="radio"]:checked
       • No HTML identificado por <input type="checkbox|radio">
       • Nos input[type] temos a estilização dos não marcados e nos input[type]:checked a estilização dos marcados
         • Como as caixas de seleção e os botões de opção não alteram a cor, iremos alterar o tamanho dos controles
       • Resultado

3. Margens e Preenchimento

   • Margin
     • A propriedade margin simplesmente adiciona uma margem ao elemento. Podemos utilizar qualquer medida Css (px, pt, em, %…) como tamanho da propriedade margin, além disso conseguimos atribuir valores negativos
   • Padding
     • O padding tem um funcionamento muito similar ao do margin, porém, em vez de dar um espaçamento externo, ele realiza o espaçamento interno da página
       • Deve-se ter cuidado ao utilizar o padding, pois ele aumenta a largura do elemento. Caso seu elemento tenha um width de 200px e utilizarmos um padding-left de 50px, ele vai passar a ter uma largura de 250px. Então, sempre que necessário, deve-se compensar o padding do elemento reduzindo o width ou o height.

4. BootStrap

   • O bootstrap fornece um servidor que hospeda um arquivo Javascript e CSS prontos, o qual auxilia na estilização das paginas
     • Para acessa-lo coloque o que está ao lado no cabeçalho do HTML
       • Um tutorial e diversos templates e exemplos Podem ser acessados pelo link: https://www.w3schools.com/bootstrap5/index.php
       • <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

5. No Livro-Texto de Desenvolvimento de Software para a Internet, Unidade III possui algumas informações interessantes sobre o uso de cores e fontes, não convém tentar mostrar aqui porque lá será melhor visualizado

   • Um pequeno tutorial das fontes
     • Baixe a fonte desejada no https://www.dafont.com/pt/
       • Passe para o https://www.fontsquirrel.com/tools/webfont-generator e realize o dowload. A fonte também pode ser baixada direto aqui sem ir no 1º site
         • Apos o dowload descompacte a pasta e passe os arquivos necessarios para uma nova pasta onde estão os arquivos HTML e CSS. Dica: Chame a pasta de Fontes
           • Entre no arquivo CSS da fonte e copie e cole para o CSS do seu site. Faça as devidas alterações de URL indicando que está na pasta Fonte. Ex: "Fonte/resto_da_URL"
             • No CSS do seu site indique onde essa nova fonte será usada atraves dos seletores, usando o Font-Family: nome da fonte
               • O tutorial acima Pode ajudar
                 • https://www.youtube.com/watch?v=n58nd6484L8&ab_channel=Jo%C3%ABlTougas

Imágenes y archivos del mapa