border

Bordure 1.

Compléter le code css (entre les balises style) ci-dessous pour que :

L'article soit encadré d'une bordure en pointillés noirs d'épaisseur 1 pixel.
Le titre h3 se présente sous la forme suivante :

le code à compléter

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> bordures </title>
	<style>
		
	</style>
</head>

<body>
	
<article>
	<h3> Un titre </h3>
	<p>
		<q>Une fois qu'on a donné son opinion, il serait logique qu'on ne l'ait plus.</q>
	</p>
	<p>
		La balise   q  sert à baliser une citation courte dans la ligne.
	</p>
</article> 

</body>
    
    
</html>

Une aide

Pour décaler le titre vers la droite, on peut placer une marge à sa gauche.

Une solution

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> Bordures </title>
	<style>
	article{
		border : 1px dotted black;
		width : 50%;
		/* centrage horizontal : */
		margin: 0 auto; 
	}
	h3{
		border-width : 0 0 5px 5px;
		border-style : ridge;
		padding-left: 1em;
		color : grey;
		margin-left : 20%;
	 }
	</style>
</head>

<body>
	
<article>
	
	<h3> Un titre </h3>
	
	<p>
		<q>Une fois qu'on a donné son opinion, il serait logique qu'on ne l'ait plus.</q>
	</p>
	
	<p>
		La balise <code> q </code> sert à baliser une citation courte dans la ligne.
	</p>
	
</article>
	
</body>

</html>

Bordure 2.

Bordez un paragraphe avec des épaisseurs (border-width) de bordure non nulles uniquement sur le bas (bottom) et la gauche (left), comme pour le titre de l'exercice précédent.
Redéfinir maintenant cette bordure en donnant également une épaisseur à la bordure haute (top) mais avec la couleur 'transparent'. Observez l'effet (augmentez éventuellement les épaisseurs).
En déduire un code css permettant de donner à un paragraphe une forme de triangle (de fond rouge par exemple).

Le code à compléter

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> bordures </title>
	<style>
		
	</style>
</head>
    
<body>
	<p>
		Ce paragraphe a une bordure basse et une bordure gauche visibles. 
		Les autres bordures sont d'épaisseur 0. 
	</p>

	<p>
		Pour ce paragraphe, bordures basse et gauche sont les mêmes que précédemment.
		La bordure haute est invisible mais son effet sur la bordure gauche est visible.
	</p>

	<p>
		Celui qui lit ça a un navigateur fatigué car ce paragraphe ne doit être qu'un triangle sur fond rouge.
	</p>
</body>

</html>

Une solution

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> Bordures </title>
	<style>
	 p:nth-of-type(1){ /* style ne concernant que le premier paragraphe */
		border-width : 0px 0 10px 10px;
		border-style : ridge;
		color : rgb(250,150, 200);
		width : 500px;
	 }
 
	 p:nth-of-type(2){ /* style ne concernant que le second paragraphe */
		border-width : 10px 0 10px 10px;
		border-style : ridge;
		color : rgb(250,150, 200);
		width : 500px;
		border-top-color: transparent;
	 }
	 
	 
	 p:nth-of-type(3){ /* style ne concernant que le troisième paragraphe */
		font-size: 0px; 
		line-height: 0; 
		width: 0;
		border-top: 50px solid transparent; 
		border-left: 100px solid rgb(255,0, 0);
		border-bottom: 50px solid transparent; 
	 }
	</style>
</head>

<body>
	<p>
		Ce paragraphe a une bordure basse et une bordure gauche visibles. Les autres bordures sont d'épaisseur 0. 
	</p>

	<p>
		Pour ce paragraphe, bordures basse et gauche sont les mêmes que précédemment.
		La bordure haute est invisible mais son effet sur la bordure gauche est visible.
	</p>

	<p>
		Celui qui lit ça a un navigateur fatigué car ce paragraphe ne doit être qu'un triangle sur fond rouge.
	</p>
	
</body>

</html>

Bordure 3.

Modifiez le css pour que le paragraphe apparaisse comme ci-dessous :
bordure

le code à modifier

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> bordures </title>
        <style>
            p{ width : 200px; height: 100px;
               background-color: rgb(240,240,240);}
        </style>
    </head>
    
    <body>
          <p> </p>  
    </body>
</html>

Une solution

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> Bordures </title>
        <style>
             p{  border: 5px ridge grey;
                border-radius: 10% 50% 10% 50%;}
            p{ width : 200px; height: 100px;}  
        </style>
    </head>
    
    <body>
          <p> </p>
    </body>
</html>

Bordure 4.

Dans la page html ci-dessous, les mots "Logo Python" et le logo Python apparaissent. Définir le css pour que :

Seul les mots "Logo Python" apparaissent, dans les couleurs du logo.
Lorsqu'on survole le paragraphe, le texte "Logo Python" disparaît et est remplacé par le logo.
Le logo apparaîtra de plus entouré d'un cercle aux couleurs du logo.

le code à compléter

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> bordures </title>
        <style>
            
        </style>
    </head>
    
    <body>
        <p> 
            <span id="motlogo">Logo</span> <span id="motpython">Python  </span>
            <img id="logo" src="border_images/logo-python.png" alt="logo python" width="110" height="110">
        </p> 
    </body>
</html>

Aide : modifier au survol

Pour un affichage différent au survol d'un élément, lisez cette page w3schools sur le sélecteur :hover.

Aide : apparaître/disparaître

Pour faire disparaître ou apparaître un élément, lisez cette page w3schools sur display:none, display:block.

Une solution

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> Bordures </title>
        <style>
           #logo{
                /* dimensions de la boîte du logo : */
                width: 120px;
                height: 120px;
                /* épaisseur et couleurs du bord 
                du logo : */
                border-width: 5px;
                border-style: solid;
                border-top-color:#ffc331;
                border-left-color:#ffc331;
                border-bottom-color:#387eb8;
                border-right-color:#387eb8;
                /* courbure des coins pour avoir un cercle : */
                border-radius: 50%;
                /* le logo n'est pas dans le flux au départ : */
                display :none;                
            }
            
            p{
                width: 20%;
                margin: 0 auto;
                height: 200px;
            }
            /* Lorsque la souris survole le paragraphe,
            l'image est affichée : */
            p:hover #logo{
                display : block;
            }
            /* lorsqu'on survole le texte Logo Python,
            ce texte disparaît du flux : */
            p:hover span{
                display: none;
            }
            /* couleurs sur les mots : */
            #motlogo{color: #387eb8;font-weight:bold;}
            #motpython{color:#ffc331;font-weight:bold;}  
        </style>
    </head>
    
    <body>
        <p> 
            <span id="motlogo">Logo</span> <span id="motpython">Python  </span>
            <img id="logo" src="border_images/logo-python.png" alt="logo python" width="110" height="110">
        </p> 
    </body>
</html>

Bordure 5.

Ci-dessous, définir le CSS (sans modifier le html) pour obtenir une image telle que la suivante :
disques tricolores

le code à compléter

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> bordures </title>
        <style>
            
        </style>
    </head>
    
    <body>
        <figure id="trioDeDisques">		
		    <div id="c1">	</div>
		    <div id="c2">	</div>
		    <div id="c3">	</div>
		</figure>   
    </body>
</html>

Indication : placer un élément de façon absolue

On aura besoin de placer les div à l'aide de position:absolute;. Voir la page de w3schools.

Une solution

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> Bordures </title>
        <style>
            body{height: 100px;}
             #trioDeDisques{
	                height: 60px; 
	                width:60px;
	                padding :0;
	                position: absolute;
	                top:0; bottom:0; left:0; right:0;
	                margin:auto;
              }
              /* règle s'appliquant aux éléments ayant un attribut
               id dont le nom commence par c : */
                [id^="c"]{
	                width:40px; height:40px;
	                border-radius:50%;
	                position: absolute;
                }
                #c1{ 
                     background-color:rgba(200,0,0,0.5);
                     left:50%;
                     margin-left:-20px;
                     top:0;
                 }
                #c2{
                     background-color:rgba(0,200,0,0.5);
                     left:0;
                     bottom:0;
                 }
                #c3{
                    background-color:rgba(0,0,200,0.5); 
                    right:0;
                    bottom:0;
                } 
        </style>
    </head>
    
    <body>
        <figure id="trioDeDisques">		
		    <div id="c1">	</div>
		    <div id="c2">	</div>
		    <div id="c3">	</div>
		</figure> 
    </body>
</html>