CSS URL
Exemplo 1:
Começaremos com nosso primeiro exemplo, abrindo um novo arquivo no software, que é o código do Visual Studio. Quando criamos um novo arquivo no Código do Visual Studio, temos a opção de escolher o idioma e escolhemos HTML. Em seguida, devemos construir o código HTML. Digitando "!”E depois pressionar“ Enter ”, o código do Visual Studio nos dá a capacidade de adquirir as tags básicas automaticamente. Damos o link para o arquivo CSS na tag html, para que usaremos a função URL () no CSS. No corpo, temos um título e um parágrafo simples. Depois disso, colocamos um recipiente "div". Salvamos este arquivo e depois estamos nos movendo em direção ao arquivo CSS. Agora, veja o código CSS abaixo.
Definimos o "div" neste código e adicionamos a propriedade "Imagem de fundo". Agora, temos que definir a imagem para o fundo. Para adicionar uma imagem, devemos usar a função "url ()" e dar o caminho da imagem que queremos adicionar como o parâmetro da função "url ()". Usamos a propriedade "Text-Align" e a configuramos como "Centro". Em seguida, defina a "largura" como "500px". A "altura" é "260px". Também estilizamos o cabeçalho para tornar a saída mais atraente. Definimos a "cor" que define a cor do texto do cabeçalho e definimos "vermelho" para esta propriedade. A “família-família” para o texto do cabeçalho é “argelino”.
Também temos um parágrafo no arquivo html, por isso também aplicamos algumas propriedades a este parágrafo. Definimos o tamanho do texto do parágrafo, utilizando a propriedade CSS “Size” e o definimos como “18px”. Agora, novamente, usamos a propriedade "cor" para o texto do parágrafo e usamos "azul".
Obtemos essa saída pressionando "Alt+B" no arquivo HTML ou você pode pressionar o botão direito do mouse e selecionar o "Abra no navegador padrão" para obter a saída. Na saída, você pode ver que há a imagem abaixo do cabeçalho e do texto. Adicionamos esta imagem colocando o caminho desta imagem no parâmetro url ().
Exemplo # 2:
Adicionamos novamente o cabeçalho "H2" e o parágrafo "P" neste exemplo. Então, coloque o "div" abaixo disso. Adicionaremos o url () da imagem na propriedade de imagem de fundo para esta div. Você verá isso no arquivo CSS, como adicionamos o caminho na função "url ()".
Estamos apenas adicionando a "imagem de fundo" na "div" e colocando a função "url ()". Estamos fornecendo o caminho da imagem como o “MyHouse.png ”. Você deve colocar o caminho correto neste parâmetro "url ()". A "largura" desta imagem é "400px" e a "altura" é "350px". O título "cor" que estamos usando é "roxo". A “família-família” do cabeçalho é “Times New Roman”. O parágrafo "tamanho da fonte" é "20px" e "cor" é "verde".
A saída mostra que há uma imagem após o título e o parágrafo. O outro cabeçalho aparece na imagem como definido no arquivo CSS.
Exemplo # 3:
O código HTML para este exemplo é o mesmo que construímos no primeiro exemplo em que temos um parágrafo, um título e um contêiner DIV vazio, mas usaremos os diferentes parâmetros da função URL () no código CSS.
A "altura" para o "div" é "700px" e "500px" em sua "largura". Agora, estamos usando “imagem de fundo” e estamos colocando dois URLs diferentes, onde estamos dando um caminho para imagens diferentes. Colocamos o primeiro "URL" e dentro do parâmetro. Nós colocamos “Smily.jpeg ”como o caminho da imagem e depois coloque outro“ URL ”separando os dois URLs com“, ”.
Nós colocamos “Smily.jpeg ”como o parâmetro do segundo URL. Em seguida, temos a propriedade "Repetir-repetição", que é usada para definir como as imagens de fundo são repetidas. Nós o definimos como "sem repetição" para ambas as imagens. Também definimos a “posição de fundo”, que define as posições de ambas as imagens. Colocamos "certo" para a primeira imagem e "esquerda" para a segunda imagem. Para "H2", temos "marron" para a "cor" do cabeçalho. O "font-família" do cabeçalho é "Times New Roman" e está alinhado no "centro". O "30px" que estamos utilizando para o "tamanho da fonte" e muda a "família da fonte" para "argelino". Também utilizamos a propriedade "do tamanho da fonte" para o "P" e é "25px". Definimos a "cor" do parágrafo como "RGB (37, 35, 35)", que aparece como "cinza". Também alinhamos isso como o cabeçalho, no "centro".
Você pode ver duas imagens onde a primeira imagem é colocada no lado esquerdo e a segunda imagem é colocada no lado direito da tela de saída. Colocamos o caminho de ambas as imagens no URL como o parâmetro. Então, ambas as imagens aparecem na saída.
Exemplo # 4:
O arquivo html que estamos usando é o mesmo que acima e mudaremos a família de fontes colocando o URL e colocando a imagem usando a outra função de URL no CSS.
Neste arquivo CSS, a “font-face” é usada para especificar a fonte personalizada. Ele nos oferece a oportunidade de selecionar de uma ampla gama de fontes. Definimos "font-família" como "slans aberto". No "SRC", a função "local" é para obter a fonte do sistema local do usuário. Se não for encontrado no "Open Sans", verificará a próxima opção onde colocamos o "URL". E verifica o formato "woff2", se disponível. Então, ele aplicará isso, mas se não estiver disponível, ele passará para o próximo "URL". Se não estiver disponível em nenhuma opção, selecionará a "família da fonte" que descrevemos abaixo, que é "sem serif".
Fazemos tudo isso colocando o "url". Em seguida, todas as imagens do contêiner div usando o mesmo método, como discutimos, colocando o caminho na função "URL" e nas configurações "largura" e "altura".
A saída mostra que a família de fontes do cabeçalho e o parágrafo muda e também há uma imagem abaixo para todos esses.
Conclusão
Apresentamos este tutorial para guiá -lo sobre a função CSS URL (). Passamos por esse tópico em profundidade profunda e exploramos diferentes exemplos em que utilizamos essa função "url ()" no código CSS. Explicamos que usamos esta função URL () para vincular um recurso: imagem, família-família, etc. Neste tutorial, também discutimos como adicionar o caminho como o parâmetro nesta função "url ()". Preparamos um tutorial completo para você, no qual fornecemos o código e explicamos esse código em detalhes junto com a saída.