28112 sujets

CSS et mise en forme, CSS3

Intégrer du texte en dur

Bonjour,
je souhaiterai savoir si c'est possible d'intégrer du texte en dur dans le css et éviter de le mettre dans le html

exemple dans mon fichier.html
j'ai mis ceci :
<aside class="histoire">
		<h1>HISTOIRE</h1>
	</aside>

dans mon fichier.css
j'ai mis ceci :
.histoire{
	grid-area: histoire;/*on attribue le nom qui sera reconnu plus haut dans "grid-template-areas"*/
	

	/*forme et habillage du bloc*/
	opacity: 1;
	background-color: #fff;
	color: white;
	border: 2px solid #9fd034;
	border-radius: 4px;
	margin: 6px;
	padding: 13px;
	text-align: center;
	color: #9fd034; /*le texte sera en noir*/
	width: 100%%;
	height: 100%%;
	/*box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);*/
	cursor: pointer;
}


Peut-on mettre dans ce css mon texte HISTOIRE (pour éviter que quelqu'un puisse le modifier dans le html par la suite, Merci pour vos conseils.

Je débute en css.
Modifié par _laurent (15 Feb 2022 - 10:42)
Modérateur
Et l'eau,

Je t'invite à regarder du côté des pseudo class :before et :after. Via cette technique, tu peux même intégrer un compteur ou même la valeur d'un attribut.

Pour finir, je te remercie de rééditer ton sujet et de le mettre en forme via les boutons de mise en forme que te propose le forum.
Ce n'est pas du tout conseillé de placer du texte dans la feuille de styles CSS. Il faut distinguer la CSS de la page HTML. Cette dernière sert à structurer le contenu tandis que la CSS sert à le mettre en forme.

Tu cherches à placer le texte dans la CSS pour qu'on ne puisse pas le modifier dans le HTML mais il est également possible d'accéder à la feuille de styles CSS d'un site web et d'en modifier le contenu. Donc, ton objectif ne sert à rien.

Par contre, il est possible de verrouiller les textes dans une page HTML de sorte qu'on ne puisse pas le récupérer par copier/coller.

Code HTML :

<!DOCTYPE html>
<html>
<head>
	<style>
		.non_selectionnable {
			-webkit-user-select: none; <!-- pour les navigateurs Chrome et Opéra -->
			-webkit-touch-callout: none; <!-- pour le navigateur Safari -->
			-moz-user-select: none; <!-- pour le navigateur Firefox -->
			-ms-user-select: none; <!-- pour les navigateurs Edge et Internet Explorer -->
	</style>
</head>
<body>
	<p>Texte sélectionnable.</p>
	<p class="non_selectionnable">Texte non sélectionnable, essayez de me sélectionner !</p>
</html>

Modifié par ObiJuanKenobi (14 Feb 2022 - 09:21)
et l'eau Niuxe,
je me suis trompé dans l’appellation dans mon css, ce n'est pas bouton, mais c'est un bloc (j'ai fait la correction), je viens d'essayer ton code avec before content, ça marche, sauf que ça ne garde pas l'habillage que j'ai fait, j'ai remplacer <h1>HISTOIRE</h1> par <div class="bloctitre2"></div>, j'ai certainement fait une erreur, mais je ne vois pas où, pourrais-tu m'aider ?
Je te joins 2 images, la première avec le h1 et la seconde quand j'ai remplacé par la div.
Merci pour ton aide précieuse.

voici le code en css :

/*le titre à l'intérieur de mon cadre*/
.cadre-titre{
	background: #754343; /*couleur marron à l'intérieur du cadre*/
	padding: 1px 1px; /*attribution d'un marge intérieur dans le cadre en haut et en bas de 1px et à gauche et à droite de 1px*/
}
	/*attribution de la couleur blanche uniquement au titre dans le cadre et de sa police, en utilisant une classe "bloctitre2" pour le h1*/
	.cadre-titre .bloctitre2{
	color:  white; /*attribution de la couleur blanche au titre dans le cadre*/
	font-family: "arial"; /*attribution de la police de caractère au titre dans le cadre*/
	text-align: center; /*centrage du texte dans le "cadre-titre"*/
}
.bloctitre2::before {
  content: "HISTOIRE";
}


code html :

<aside class="histoire">
		<div class="cadre-titre">
			[b]<div class="bloctitre2"></div>[/b]
		</div>

		<p>Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire...</p>
	</div>
	</aside>


upload/1644834579-84198-capturedancran2022-02-1410482.png
upload/1644834600-84198-capturedancran2022-02-1411141.png
Modifié par _laurent (15 Feb 2022 - 10:44)
Modérateur
kinouplay,

Alsacreations a écrit :

Conventions d'écriture
...
Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Utilisez les boutons de mise en forme (gras, italique, code source, etc.). N'hésitez pas à fournir une image explicative et une adresse où les membres auront un aperçu de votre situation. Il faut toujours donner un maximum de détails pour que les autres membres puissent vous comprendre et vous aider.


Ton problème est tout autre. Mais d'abords :
Comme je te l'ai demandé, utilise le bb code qu'offre l'édition d'un message sur le forum. Pourquoi ? Ça permet de mieux lire et ainsi aider.

ps : aide du forum
Ah ok, je n'avais pas compris.
Je remets mon message.

Le code que j'ai fait, je l'ai fait en local, il n'y a pas de site internet pour voir directement le code.

Mon précédent message :

je me suis trompé dans l’appellation dans mon css, ce n'est pas bouton, mais c'est un bloc (j'ai fait la correction), je viens d'essayer ton code avec before content, ça marche, sauf que ça ne garde pas l'habillage que j'ai fait, j'ai remplacer <h1>HISTOIRE</h1> par <div class="bloctitre2"></div>, j'ai certainement fait une erreur, mais je ne vois pas où, pourrais-tu m'aider ?
Je te joins 2 images, la première avec le h1 et la seconde quand j'ai remplacé par la div.
Merci pour ton aide précieuse.
/*le titre à l'intérieur de mon cadre*/
.cadre-titre{
background: #754343; /*couleur marron à l'intérieur du cadre*/
padding: 1px 1px; /*attribution d'un marge intérieur dans le cadre en haut et en bas de 1px et à gauche et à droite de 1px*/
}
/*attribution de la couleur blanche uniquement au titre dans le cadre et de sa police, en utilisant une classe "bloctitre2" pour le h1*/
.cadre-titre .bloctitre2{
color: white; /*attribution de la couleur blanche au titre dans le cadre*/
font-family: "arial"; /*attribution de la police de caractère au titre dans le cadre*/
text-align: center; /*centrage du texte dans le "cadre-titre"*/
}
.bloctitre2::before {
content: "HISTOIRE";
}


<aside class="histoire">
<div class="cadre-titre">
<div class="bloctitre2"></div>
</div>

<p>Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire...</p>
</div>
</aside>


upload/1644844946-84198-capturedancran2022-02-1410482.png upload/1644844962-84198-capturedancran2022-02-1411141.png
Modifié par kinouplay (14 Feb 2022 - 14:22)
Modérateur
Bonjour,

Je me demande comment quelqu'un pourrait "modifier" le html tout en ne pouvant pas "modifier" le css ?

Amicalement,
J'ai mis en place un formulaire dans lequel on rentre des données, et ce formulaire génère une fiche avec une mise en forme faite en css et html (que j'ai fait). J'aimerai donner accès à celui qui a saisie la fiche, pour seulement qu'il puisse modifier ses données, mais j'ai constaté qu'on pouvait accéder au html, du coup je voulais savoir s'il y avait possibilité de bloquer l'accès au html mais laisser l'accès aux données saisies.
Modérateur
Bonjour,

Il n'y a pas de raisons qu'on puisse "modifier tout le html" (de quel html s'agit-il ?) via un formulaire si le traitement de ce formulaire est fait correctement.

En l'absence de détails techniques, on peut tout supposer.

Amicalement,
Modifié par parsimonhi (14 Feb 2022 - 20:25)
Modérateur
Bonjour,

kinouplay a écrit :
le html de la fiche.

Oui, bien sûr. Mais est-ce une page entière ? une partie de page ? et si c'est une partie de page, pourquoi le titre serait dans la partie de page que l'utilisateur a le droit de modifier ? Et d'ailleurs, une fois que l'utilisateur a rempli son formulaire, ça se passe comment ensuite ? Tu envoies le formulaire au serveur ? T'as du php pour traité le formulaire ? Tu fais de l'AJAX ou du fetch() ?

Les possibilités sont tellement nombreuses qu'on ne peut pas savoir où tu as un problème. Il faudrait des détails.

Amicalement,
Sujet clos
Aller à