How to use the same text in multiple HTML so that I can edit them by CSS?

Question

How to use the same text in multiple HTML so that I can edit them by CSS?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have several HTML (more than 500 HTML) that will use the same title for all, for example: "Projects for 2017" will be the title in the 500 files

Then I'll need to change the title for "2018 Projects"

But I do not want to have the job of opening all 500 html and just changing one word in each

What I wanted was to change the title in just one file and thus change in all the other 500 at one time

How can I do this using CSS through <link href="*.css" type="text/css" /> ???

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
.title div:after {
    content: "Andrei webmaster";    
}
.titlecenter {
    text-align: center;
    color: #F00;
    font-weight: bold;
}
</style>
</head>

<body>
<div class="title">
  <div class="titlecenter"></div>
</div>
</body>
</html>

html css

asked by anonymous 16.02.2017 / 17:35

3 answers

Return Javascript before finalizing processing String.Content how to do not be case sensitive [duplicate]

score 1 · Answer 1

With pure css , you can do some gambiarras, but you have to adapt in the layout, example:

<h1>Projetos de 2017</h1>
<style>
h1{visibility: hidden;}
h1:before{content:"Projetos 2018";visibility: visible;}
</style>

For your code it would look like this, you forgot to hide the first content with visibility:hidden and depending on the structure before drops better than after .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
.title div{visibility: hidden;}
.title div:after {
    display:block;
    width:250px;
    margin:0 auto;
    content: "Andrei webmaster";
    visibility: visible;
    color: #F00;
    font-weight: bold;
}
.titlecenter {
    text-align:center;
    color: #F00;
    font-weight: bold;
}
</style>
</head>

<body>
<div class="title">
  <div class="titlecenter">Andrew Stuart Tanenbaum</div>
</div>
</body>
</html>

score 1 · Answer 2

Now that I have a greater understanding of your problem. I can also recommend a workaround. You can use ctrl + f of Notepad ++ and simply swap all occurrences at once in all files in a folder, in the third option (Find in files). I think as your problem is simply laziness, this should be the most practical way! : D

score 0 · Answer 3

The ideal for this type of task is to use PHP. It's very simple: just copy all the code you want to change later into a separate file. EX:

site
├ index.php
└ page_elements
  └ header.php

<?php require 'page_elements/header.php';?>

You can also do this with JavaScript:

window.onload = function(){
  var titulo = document.getElementById("title");
  titulo.innerHTML = "<h1>Novo título</h1>";
}

<div id="title">
  <h1>Título inicial</h1>
</div>

A game in CSS that is not recommended at all:

h1{color: transparent}
h1:before{
  display: block;
  content: "Título que gostei";
  font-size: 1em;
  color: #222;
}

<h1>Título que não gostei, mas sempre estará lá, caso não use uma linguagem de programação.</h1>