73 lines
2.2 KiB
TeX
Executable File
73 lines
2.2 KiB
TeX
Executable File
\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}
|