lafrite/2022-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: ajoute le cours sur le CSS

Browse Source
This commit is contained in:
Bertrand Benjamin 2022-07-30 18:46:05 +02:00
parent 1487db0e2a
commit d50490e361
6 changed files with 83 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
1NSI/01_Web_HTML_CSS/1B_HTML.pdf
View File

Binary file not shown.

2
1NSI/01_Web_HTML_CSS/1B_HTML.tex
View File

@ -99,7 +99,7 @@ Les balises doivent être bien imbriquée. C'est à dire qu'il faut fermer la de
Même si le rendu d'une page web peut sembler correcte, cela ne signifie pas que le code respecte les normes du HTML. En effet, les navigateurs sont en général très permissifs sur la qualité du code qui leur est fourni.
Ces normes sont définis pas le W3C. Cet organisme propose un validateur:
Ces normes sont définis pas le W3C (World Wide Web Consortium). Cet organisme propose un validateur:
\begin{center}
\url{https://validator.w3.org/#validate_by_upload}
\end{center}

BIN
1NSI/01_Web_HTML_CSS/2B_CSS.pdf Normal file
View File

Binary file not shown.

72
1NSI/01_Web_HTML_CSS/2B_CSS.tex Executable file
View File

@ -0,0 +1,72 @@
\documentclass[a4paper,10pt]{article}
\usepackage{myXsim}
\author{Benjamin Bertrand}
\title{Web HTML CSS - Cours}
\date{Septembre 2022}
\pagestyle{empty}
\begin{document}
\maketitle
\setcounter{section}{2}
\section{CSS}
\begin{definition}[CSS]
Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
\flushright{Source: Wikipedia}
\end{definition}
\subsection*{Structure}
Le language CSS consiste à appliquer un style à un ensemble d'élément HTML séléctionné.
\begin{center}
\includegraphics[scale=1]{./fig/syntaxe_css}
\end{center}
\subsection*{Appliquer un style}
Il y a trois façons d'appliquer une feuille de style à une balise:
\begin{itemize}
\item \textbf{Attribut style} d'une balise
\begin{center}
\begin{lstlisting}
<p style="color: red;">\end{lstlisting}
\end{center}
\item \textbf{La balise} \texttt{<style>}
\begin{center}
\begin{lstlisting}
<style>
p {
color: red;
}
</style>\end{lstlisting}
\end{center}
\item \textbf{Fichier CSS} importé dans la balise \texttt{<head>} par la balise \texttt{<link>}:
\begin{center}
\begin{lstlisting}
<link href="style.css" rel="stylesheet" type="text/css" />\end{lstlisting}
\end{center}
Où le fichier \texttt{style.css} contient
\begin{center}
\begin{lstlisting}
p {
color: red;
}\end{lstlisting}
\end{center}
\end{itemize}
\subsection*{Selecteur}
Il y a trois types de sélécteurs que l'on peut combiner
\begin{itemize}
\item \textbf{Une balise HTML} (\texttt{<p>} ou \texttt{<body>} dans les exemples précédents)
\item \textbf{Un identifiant} avec le préfixe \texttt{\#}. Pour donner un identifiant à un élément, il faut lui ajouter l'attribut \texttt{id="..."}.
\item \textbf{Une classe} avec le préfixe \texttt{.}. Pour donner une classe à un élément, il faut lui ajouter l'attribut \texttt{class="..."}.
\end{itemize}
\end{document}

BIN
1NSI/01_Web_HTML_CSS/fig/syntaxe_css.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

12
1NSI/01_Web_HTML_CSS/index.rst
View File

@ -22,6 +22,11 @@ Déroulement
Bilan:
.. image:: ./1B_HTML.pdf
:height: 200px
:alt: Bilan sur le web et le HTML
- Le web, son origine, la principe de client serveur et le partage des responsabilités dans les techno web (HTML, CSS, JS)
- HTML: notion de balise (avec attributs), page blanche de base et zoologie des balises
@ -43,9 +48,12 @@ Balises à travailler:
Bilan:
.. image:: ./2B_CSS.pdf
:height: 200px
:alt: Bilan sur le CSS
- Différentes façon d'appliquer des règles CSS
- Sélecteur
- Quelques propriétés
- Sélecteurs
Étape 3: hébergement, URL, protocole http(s)
--------------------------------------------