Accueil > Programmation > Html Css Javascript... > Cours0 css

Cours0 css

Publié le 9 février 2016, dernière mise-à-jour le 15 août 2023, 6 visites, visites totales.

HTML

Un fichier html utilise cette structure de blocs : <machin args='arg1'...>truc</machin> parfois simplement <machin args='arg1'...>
Un fichier html5 suit ces structures minimales :

<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>

Un bloc peut avoir un nom name, une identité id,une classe :
<machin name='nom' id='ide' class='classe'>truc</machin>

De nombreux blocs sont prédéfinis, les plus importants/courants étant html,body,div,a,img,meta,link

CSS

rajouter dans le head du html permet d’accéder au fichier CSSs/global.css

Le fichier css a cette structure :

machin { argument:arg;}
machin1[,machin2]* { argument1:arg1; [argument:arg;]*}
machin1:argu1[,machin2:argu2]* { argument1:arg1; [argument:arg;]*}

Les arguments les plus courants sont width,height,position,color,top,left

exemples :

a {color:#C7D23F;} : tout lien sera de la couleur C7D23F
html:hover,html:hover body {background-color:#000000;} : lorsque la souris est dans la balise html ou dans la balise body de la balise html, la couleur de fond devient noire ( 000000 )
#thumbs {float:left; width:482px; height:482px;} : le machin dont l’identité est thumbs a une longueur et une hauteur de 482 px.

#zoom:not(.ie) img {position:absolute; : les images dans le machin dont l’identité est thumbs ont une position absolue

EXEMPLE

Le fichier html fonctionne avec un fichier global.css dans le répertoire CSSs et un répertoire Images/

Visible Ici

images du répertoire Images/

art1.jpg art2_thumb.jpg art4.jpg art5_thumb.jpg art7.jpg art8_thumb.jpg fleche.png
art1_thumb.jpg art3.jpg art4_thumb.jpg art6.jpg art7_thumb.jpg art9.jpg
art2.jpg art3_thumb.jpg art5.jpg art6_thumb.jpg art8.jpg art9_thumb.jpg

fichier css

body,html {font-family:"Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;
  background-color:#262016;
  -moz-transition: background-color 500ms ease-in-out;
  -webkit-transition: background-color 500ms ease-in-out;
  -o-transition: background-color 500ms ease-in-out;
  transition: background-color 500ms ease-in-out;}

html:hover,html:hover body {background-color:#000000;}

p {text-align:center; clear:both;}

a {color:#C7D23F;}

a:hover {text-decoration:none;}

h1 {text-align:center;
  color:#C7D23F;}

div {width:934px;
  margin:1em auto;}

ul {list-style:none;
  margin:0;
  padding:0;}

body #zoom {background:transparent url(../Images/fleche.png) no-repeat 50% 50%;}

   body:hover #zoom {background-image:none;}

#zoom {margin-top:14px;
  float:right;
  height:452px;
  width:452px;
  overflow:hidden;}

#thumbs {float:left;
  width:482px;
  height:482px;}

#zoom:not(.ie) {overflow:visible;
  position:relative;
  z-index:2;}

#zoom:not(.ie) img {position:absolute;
  opacity:1;
  z-index:2;
  height:144px;
  width:144px;
  -moz-transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg);
  -o-transform:rotate(-360deg);
  transform:rotate(-360deg);
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  z-index:1;}

img#art1,
img#art4,
img#art7 {left:-468px;}

img#art2,
img#art5,
img#art8 {left:-314px;}

img#art3,
img#art6,
img#art9 {left:-160px;}

img#art4,
img#art5,
img#art6 {top:153px;}

img#art7,
img#art8,
img#art9 {top:308px;}

#zoom img:target {-moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);
  z-index:3;
  opacity:1;
  top:0;
  left:0;
  width:452px;
  height:452px;}

  
  #thumbs li img {height:144px;
    width:144px;}

  
  #thumbs li a:active {outline:none;}

  
  #thumbs:not(.ie) li img {height:180px;
    width:180px;}

  #thumbs li {position:relative;
    z-index:2;
    float:left;
    display:inline;
    cursor:pointer;
    opacity:1;
    margin-right:10px;
    margin-bottom:10px;
    height:144px;
    width:144px;
	-moz-transform:scale(0.8);
	-webkit-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform:scale(0.8);
	-moz-transition:all 250ms ease-in-out;
	-webkit-transition:all 250ms ease-in-out;
	-o-transition:all 250ms ease-in-out;
	transition:all 250ms ease-in-out;}

  
  #thumbs:hover li {opacity:0.3;}

  #thumbs:hover li:hover {opacity:1;
    position:relative;
    z-index:5;
	-moz-transform:translate(-10px, 0);
	-webkit-transform:translate(-10px, 0);
	-o-transform:translate(-10px, 0);
	transform:translate(-10px, 0)}

  
    #thumbs li img {border:none;
      -moz-box-shadow:0 0 0 rgba(255,255,255,0.5);
      -webkit-box-shadow:0 0 0 rgba(255,255,255,0.5);
      -moz-transition: all 250ms ease-in-out;
      -webkit-transition: all 250ms ease-in-out;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;}

    
    #thumbs:hover li:hover img {-moz-box-shadow:0 0 30px rgba(255,255,255,0.5);
      -webkit-box-shadow:0 0 30px rgba(255,255,255,0.5);}

fichier html

<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>CSS3 Highlight</title>
  <link rel="stylesheet" href="CSSs/global.css" media="all">
  <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
	<header>
		<h1>CSS3 Gallery Highlight</h1>
	</header>
	<section id="gallery">
		<div>
			<ul id="zoom">
				<li>
					<img id="art1" src="Images/art4.jpg" alt="Art1" width="452" height="452">
					</li>
				<li>
					<img id="art2" src="Images/art2.jpg" alt="Art2" width="452" height="452">
					</li>
				<li>
					<img id="art3" src="Images/art3.jpg" alt="Art3" width="452" height="452">
					</li>
				<li>
					<img id="art4" src="Images/art1.jpg" alt="Art4" width="452" height="452">
					</li>
				<li>
					<img id="art5" src="Images/art5.jpg" alt="Art5" width="452" height="452">
					</li>
				<li>
					<img id="ART6" src="Images/art6.jpg" alt="Art6" width="452" height="452">
					</li>
				<li>
					<img id="art7" src="Images/art7.jpg" alt="Art7" width="452" height="452">
					</li>
				<li>
					<img id="art8" src="Images/art8.jpg" alt="Art8" width="452" height="452">
					</li>
				<li>
					<img id="art9" src="Images/art9.jpg" alt="Art9" width="452" height="452">
					</li>
			</ul>
			<ul id="thumbs">
				<li>
					<a href="#art1"><img src="Images/art1_thumb.jpg" alt="Art1" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art2"><img src="Images/art2_thumb.jpg" alt="Art2" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art3"><img src="Images/art3_thumb.jpg" alt="Art3" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art4"><img src="Images/art4_thumb.jpg" alt="Art4" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art5"><img src="Images/art5_thumb.jpg" alt="Art5" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art6"><img src="Images/art6_thumb.jpg" alt="Art6" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art7"><img src="Images/art7_thumb.jpg" alt="Art7" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art8"><img src="Images/art8_thumb.jpg" alt="Art8" width="180" height="180"></a>
					</li>
				<li>
					<a href="#art9"><img src="Images/art9_thumb.jpg" alt="Art9" width="180" height="180"></a>
					</li>
			</ul>
		</div>
	</section>
	<footer>
		<p>
			<small>
				<a href="Creer une galerie photo grâce à CSS3.html" title="Clearideaz.com, Créer une galerie photo grâce à CSS3">
					Lire l'article concernant cette démonstration
				</a>
			</small>
		</p>
	</footer>
</body>
</html>

[bruno sanchiz]

Cours0 css

HTML

CSS

EXEMPLE

images du répertoire Images/

fichier css

fichier html

Documents joints

Derniers articles modifiés

Programmation

Dans la même rubrique

Mots-clés