Feat: crée les documents à reproduire pour le CSS
@ -31,7 +31,7 @@
|
|||||||
\end{exercise}
|
\end{exercise}
|
||||||
|
|
||||||
% ---- CSS
|
% ---- 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}
|
\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 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}.
|
\item Trouver la ligne de la page HTML qui permet d'importer le fichier \texttt{style.css}.
|
||||||
@ -39,11 +39,20 @@
|
|||||||
\end{enumerate}
|
\end{enumerate}
|
||||||
\end{exercise}
|
\end{exercise}
|
||||||
|
|
||||||
\begin{exercise}[subtitle={}, step={2}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }]
|
\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}.
|
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}
|
\begin{enumerate}
|
||||||
\item Sélection par balises
|
\item \texttt{page\_style\_balise}: utiliser les propriétés \texttt{background-color}, \texttt{text-align} et \texttt{width} aux balises.
|
||||||
\item Sélection par les sélecteurs
|
\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 Mise en page
|
\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{enumerate}
|
||||||
\end{exercise}
|
\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 |
BIN
1NSI/01_Web_HTML_CSS/reproductions_css/page_style_balise.pdf
Normal file
BIN
1NSI/01_Web_HTML_CSS/reproductions_css/page_style_selecteurs.pdf
Normal file
|
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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="Author" content="">
|
<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>
|
<title>Une belle page</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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;
|
||||||
|
}
|
||||||