Feat: crée les documents à reproduire pour le CSS
|
|
@ -31,7 +31,7 @@
|
|||
\end{exercise}
|
||||
|
||||
% ---- CSS
|
||||
\begin{exercise}[subtitle={Modifier une feuille de style CSS}, step={2}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }]
|
||||
\begin{exercise}[subtitle={Modifier une feuille de style CSS}, step={2}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
|
||||
\begin{enumerate}
|
||||
\item Copier tous les fichiers du dossier \texttt{page\_CSS} puis modifier uniquement le fichier \texttt{style.css} pour que la page ressemble au rendu du pdf.
|
||||
\item Trouver la ligne de la page HTML qui permet d'importer le fichier \texttt{style.css}.
|
||||
|
|
@ -39,11 +39,20 @@
|
|||
\end{enumerate}
|
||||
\end{exercise}
|
||||
|
||||
\begin{exercise}[subtitle={}, step={2}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }]
|
||||
En vous basant sur les documents pdf, reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_style.html}.
|
||||
\begin{exercise}[subtitle={Reproduire des exemples}, step={2}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
|
||||
En vous basant sur les documents pdf, reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_style.html} et en appliquant une feuille de style adaptée.
|
||||
\begin{enumerate}
|
||||
\item Sélection par balises
|
||||
\item Sélection par les sélecteurs
|
||||
\item Mise en page
|
||||
\item \texttt{page\_style\_balise}: utiliser les propriétés \texttt{background-color}, \texttt{text-align} et \texttt{width} aux balises.
|
||||
\item \texttt{page\_style\_selecteurs}: utiliser les propriétés \texttt{color}, \texttt{backgroud-color}, \texttt{text-align} et \texttt{height} aux classes, identifiants et balises.
|
||||
\item \texttt{page\_style\_margin\_padding}: utiliser les propriétés \texttt{backgroud-color}, \texttt{border}, \texttt{width}, \texttt{padding} et \texttt{margin} aux balises.
|
||||
\end{enumerate}
|
||||
\end{exercise}
|
||||
|
||||
\begin{exercise}[subtitle={Pour aller plus loin}, step={2}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
|
||||
Quelques jeux pour apprendre à maitriser quelques propriétés CSS:
|
||||
\begin{itemize}
|
||||
\item Selection d'élément (anglais): \url{https://flukeout.github.oi/}
|
||||
\item Organiser spatialement les éléments - flexbox: \url{https://flexboxfroggy.com/#fr}
|
||||
\item Organiser spatialement les éléments - grid \url{https://cssgridgarden.com/#fr}
|
||||
\end{itemize}
|
||||
\end{exercise}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="Author" content="">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="style_margin_padding.css">
|
||||
<title>Une belle page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
header {
|
||||
background-color: magenta;
|
||||
border: 3px solid darkorchid;
|
||||
margin: 50px;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: olive;
|
||||
border: 3px solid olivedrab;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: red;
|
||||
border: 3px solid darkorange;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: cornsilk;
|
||||
border: 3px solid chocolate;
|
||||
margin-top: 40px;
|
||||
margin-left: 30%;
|
||||
margin-right: 30%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
}
|
||||