Como criar css

Uma folha de estilo em cascata (CSS) é um sistema para codificação do site que permite que os designers manipulem vários recursos ao mesmo tempo, atribuindo certos elementos a grupos. Por exemplo, usando um código para o fundo do site, os designers podem alterar a cor do plano de fundo ou a imagem em todas as páginas do site com uma alteração para o arquivo CSS. Veja como criar CSS para um site básico.

Passos

Parte 1 de 4:
Escrevendo css inline
  1. Criar CSS Passo 1
1. Certifique-se de ter uma compreensão básica de tags html. Você deve saber como as etiquetas funcionam e do src e href atributos.
  • Criar CSS Passo 2
    2. Aprenda um pouco do Propriedades básicas CSS. Você vai descobrir que há muitas propriedades. No entanto, não é necessário aprender todos eles.
  • Algumas boas propriedades CSS básicas para saber são cor e família de fontes.
  • Criar CSS Passo 3
    3. Aprenda sobre valores para cada propriedade respectiva. Todas as propriedades precisam de um valor. Para o cor propriedade, por exemplo, você pode colocar o vermelho valor.
  • Criar CSS Passo 4
    4. Aprenda sobre o estilo Atributo html. É usado dentro de um elemento como href ou src. Para usá-lo, dentro das aspas após o sinal de igual, coloque o atributo CSS, um cólon e, em seguida, o valor da propriedade. Isso é conhecido como uma regra de CSS.
  • Criar CSS Passo 5
    5. Entender que o INLINE CSS não é geralmente usado para sites por desenvolvedores profissionais da Web. O css inline pode adicionar desordem desnecessária a um documento HTML. No entanto, é uma ótima maneira de ser introduzido como o CSS funciona.
    • Parte 2 de 4:
    Escrevendo CSS básicos
    1. Criar CSS Passo 6
    1. Lançar o programa que você deseja usar. Deve permitir que você crie arquivos HTML e CSS.
    • Se você não tiver um programa especial instalado, poderá usar o bloco de notas ou outro editor de texto. Basta salvar seu arquivo como um arquivo de texto e um arquivo CSS.
  • Criar CSS Passo 7
    2. Abra o arquivo HTML para o seu site. Você deve abrir isso com um editor HTML também, se você tiver um instalado.
  • Os editores HTML permitem que você edite HTML e CSS ao mesmo tempo.
  • Criar CSS Passo 8
    3. Crie uma tag dentro da sua cabeça HTML. Isso permitirá que você escreva CSS sem a necessidade de um arquivo separado.
  • Criar CSS Passo 9
    4. Escolha um elemento que você deseja adicionar styling e digite o nome do elemento seguido por um conjunto de chaves ({ }). Para tornar seu código mais legível, coloque sempre a segunda cinta curly em sua própria linha.
  • Criar CSS Passo 10
    5. Entre as chaves, digite suas regras CSS como você usaria o estilo atributo. Cada linha devo terminar com um ponto e vírgula (-). Para tornar seu código legível, cada regra deve começar em sua própria linha e cada linha deve ser recuada.
  • É muito importante notar que este estilo afetará tudo elementos do tipo selecionado na página. Estilo mais específico será coberto na próxima seção.
    • Parte 3 de 4:
    CSS mais avançado


    1. Criar CSS Passo 11
    1. Crie um arquivo CSS, não um arquivo HTML e salve-o usando o .css extensão. Abra seu arquivo HTML também.
  • Criar CSS Passo 12
    2. Criar uma tag na sua cabeça html. Isso permitirá que você vincula um arquivo CSS separado ao seu documento HTML. Sua tag de link precisa de três atributos: rel, modelo, e href.
  • rel meios "relação" e diz ao navegador qual é o relacionamento para o documento HTML. Aqui deve ter um valor de "Stylesheet".
  • modelo Dizer que tipo de mídia está vinculado a. Aqui deve ter um valor de "Texto / CSS"
  • href Aqui é usado de maneira semelhante a como é usado em um elemento, mas aqui ele deve vincular a um arquivo CSS. Se o arquivo CSS estiver localizado na mesma pasta que o arquivo HTML, somente o nome do arquivo precisa ser escrito dentro das aspas.
  • Criar CSS Passo 13
    3. Selecione elementos de diferentes tipos que você deseja adicionar o mesmo estilo para. Adicionar A aula atributo a esses elementos e configurá-los iguais a um nome de classe de sua escolha. Isso dará aos seus elementos o mesmo estilo.
  • Imagem intitulada Criar CSS Passo 14
    4. Atribuir que estilo uma classe receberá. Digite o nome da classe no seu arquivo CSS com um período (.) Precedendo (eu.E. .aula).
  • Criar CSS Passo 15
    5. Selecione elementos únicos que você deseja adicionar styling especial e adicionar um eu ia atributo. IDs são criados em CSS usando um símbolo de libra (Miserável) em vez de um período.
  • IDs são mais específicos que as aulas, então um ID irá substituir qualquer estilo de classe se ele tiver um atributo com um valor diferente da classe.
    • Parte 4 de 4:
    Aprendendo mais
    1. Criar CSS Passo 16
    1
    Visite as escolas W3. É um site oficial destinado a ensinar habilidades de desenvolvimento da Web. O W3 tem muitas referências listadas para HTML e CSS, bem como outros idiomas da web.
  • Criar CSS Passo 17
    2. Encontre outros sites especificamente destinados a aprender e ensinar HTML e CSS. Sites como Truques de css.com especificamente destinam-se a ensinar CSS e habilidades de design web. Encontrar fontes respeitáveis ​​irá ajudá-lo em sua jornada de aprendizado.
  • Criar CSS Passo 18
    3. Entre em contato com web designers e desenvolvedores. Sua experiência e know-how pode ensinar conhecimento valioso e habilidades.
  • Criar CSS Passo 19
    4. Veja o código-fonte dos sites que você encontra. Visualizando o CSS de sites bem desenvolvidos pode mostrar maneiras de projetar partes de sites. Copiando-o para baixo como prática e mexer com o código pode ajudá-lo a aprender a usar diferentes atributos CSS.

    • Vídeo

    Ao usar este serviço, algumas informações podem ser compartilhadas com o YouTube.

    Pontas

    Existem muitas propriedades diferentes que você pode manipular com CSS. Encontre um site com um estilo que você gosta e visualize o arquivo de origem. Se houver um nome de arquivo CSS vinculado na parte superior dentro das tags da cabeça, você pode clicar nele para ver as diferentes propriedades e valores atribuídos aos elementos.

    Avisos

    Copiando diretamente HTML e CSS Coding pode ajudá-lo a aprender, mas você deve usar suas próprias idéias de design. Tomando o design de outra pessoa é roubo e plágio.
    Compartilhe na rede social:
    Semelhante