osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

> Liste de tutoriels CSS, dernière MAJ : 10/04/2005
mosaic
posté 22 Feb 2005, 20:22
Message #1


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



A la manière de Corbin, je me propose de tenir une liste de tutoriels CSS :

Peu à peu, ce post évoluera en fonction des tutoriaux intéressants et je m'efforcerai de les classer afin de mieux s'y retrouver :

On parle de css sur le forum francophone :
http://www.oscommerce-fr.info/forum/index....topic=18752&hl=


La version Osc entraide Projet de développement d'une solution Osc respectant les standards


Sommaire :

1 - Quelques définitions
2 - Liste des propriétés CSS
3 - Liste des sites traitant de CSS
4 - Quelques éditeurs CSS
5 - Quelques validateur d'accessibilité

Articles complémentaires :

Le sélecteur universel
Les 16 couleurs au nom prédéfini
Les polices de caractères
Majuscule et minuscule
Décorez vos titres
Différenciation des hyperliens internes et externes

Un bon nombre de sujets traités ici proviennent de l'excellent site d'alsacréations

user posted image

Méthodologie pour résoudre les problème d'affichage en css


1 - Quelques définitions :

CSS : Cascading Style Sheets ( Feuilles de style en cascade )

--------------------------------------------------------------------------------

Les feuilles de style en cascade représentent un type de langage HTML étendu qui donne un contrôle "absolu" sur l'apparence de vos pages web. Les CSS procurent une réelle rigueur typographique, un "look" et une maîtrise constante sur l'ensemble du site web. De ce fait on peut dire qu'elles donnent un pouvoir créatif à tous ceux qui n'en ont pas...Au départ du moins.

Une feuille de style en cascade est une liste de règles définies par le langage HTML.
Le terme en cascade se réfère à la manière dont les règles générales des CSS s'effacent devant les règles locales. Avec les CSS, vous pouvez définir des règles générales ou locales. Comme les règles locales l'emportent toujours sur les règles générales, on s'y réfère en tant que cascade.

Définition issue de media-box

--------------------------------------------------------------------------------

2 - Liste des propriétés CSS

Toutes les propriétés CSS et leur compatibilité avec les différents navigateurs

Vous retrouvez toutes ces propriétés sur media-box

2 - 1 ) La structure des balises

il existe deux grands groupes principaux de balises : les balises de type "bloc" et les balises de type "en-ligne" (ou "inline")

Ne vous inquiétéz pas, je traduirais prochainement les infos ci-dessous

2 - 1 - 1 ) Les balises en ligne

les "en-ligne" se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise <strong>

Constatation par l'exemple :

CODE
<strong>Bienvenue</strong> et <em>cher visiteur</em>


Ce texte va s’afficher sur une seule ligne (aucun retour à la ligne) car les balises qui le définissent sont de type "en-ligne".

* A - Anchor
* ABBR - Abbreviation
* ACRONYM - Acronym
* B - Bold text
* BASEFONT - Base font change
* BDO - BiDi override
* BIG - Large text
* BR - Line break
* CITE - Citation
* CODE - Computer code
* DFN - Defined term
* EM - Emphasis
* FONT - Font change
* I - Italic text
* IMG - Inline image
* INPUT - Form input
* KBD - Text to be input
* LABEL - Form field label
* Q - Short quotation
* S - Strike-through text
* SAMP - Sample output
* SELECT - Option selector
* SMALL - Small text
* SPAN - Generic inline container
* STRIKE - Strike-through text
* STRONG - Strong emphasis
* SUB - Subscript
* SUP - Superscript
* TEXTAREA - Multi-line text input
* TT - Teletype text
* U - Underlined text
* VAR - Variable


2 - 1 - 1 ) Les balises en bloc

les "blocs" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>) ou les éléments d’une liste (balise <li>).

Constatation par l'exemple : Un menu de navigation

CODE
<ul id="navlist">

<li><?php echo ' <a class="FooterPageLinks" href="' . tep_href_link(FILENAME_MENTIONSLEGALES) . '">' . HEADER_LINKS_MENTIONSLEGALES . '</a>';?></li>


<li ><?php echo ' <a class="FooterPageLinks" href="' . tep_href_link(FILENAME_WEBMASTER) . '">' . HEADER_LINKS_WEBMASTER . '</a>';?></li>


<li><?php echo ' <a class="FooterPageLinks" href="' . tep_href_link(FILENAME_LINKS) . '">' . HEADER_LINKS . '</a>';?></li>

<li><?php echo '<a class="FooterPageLinks" href="' . tep_href_link(FILENAME_SCOLAIRE) . '">' . HEADER_LINKS_SCOLAIRE . '</a>';?></li>

</ul>




* ADDRESS - Address
* BLOCKQUOTE - Block quotation
* CENTER - Centered block
* DIR - Directory list
* DIV - Generic block-level container
* DL - Definition list
* FIELDSET - Form control group
* FORM - Interactive form
* H1 - Level-one heading
* H2 - Level-two heading
* H3 - Level-three heading
* H4 - Level-four heading
* H5 - Level-five heading
* H6 - Level-six heading
* HR - Horizontal rule
* ISINDEX - Input prompt
* MENU - Menu list
* NOFRAMES - Frames alternate content
* NOSCRIPT - Alternate script content
* OL - Ordered list
* P - Paragraph
* PRE - Preformatted text
* TABLE - Table
* UL - Unordered list

* DD - Definition description
* DT - Definition term
* FRAMESET - Frameset
* LI - List item
* TBODY - Table body
* TD - Table data cell
* TFOOT - Table foot
* TH - Table header cell
* THEAD - Table head
* TR - Table row

* APPLET - Java applet
* BUTTON - Button
* DEL - Deleted text
* IFRAME - Inline frame
* INS - Inserted text
* MAP - Image map
* OBJECT - Object
* SCRIPT - Client-side script

--------------------------------------------------------------------------------


3 - Liste de sites traitant des CSS

Tutoriels Alsacréations :

Vous pouvez y retrouvez de nombreux tutoriels de mise en page, de création de menus et pleins d'infos sur les CSS.
A noter que ce site possède aussi un forum avec une communauté très active

Les articles CSS sur le blog d'elmoustiko :

Un roll over en CSS avec une seule image : "Ce petit tutoriel simple vous explique comment réaliser un menu codé en xhtml et mis en forme grâce aux css, le menu réagit au passage de la souris pour laisser apparaître une nouvelle image de fond. L'avantage de la méthode utilisée ici, est de n'utiliser qu'une seule image contenant l'état normal et l'état survolé. Ceci permet de découvrir l'image instantanément après le passage de la souris, l'image étant chargée une bonne fois pour toute dès l'affichage de la page".

Les tutos CSS de Mammouthland :

Pour les débutants, avec notamment un excellent générateur de Feuille de style

Les articles d'Openweb :
Pour se perfectionner dans les CSS

Liste des traductions françaises disponibles des documents W3C : Pour les pros qui n'ont pas peur de la lecture...

mandarindesign

Css drive
De nombreux exemples de sites utilisant les css

Cutting Edge Css
pleins de menus différents valides css

aleto.ch
En anglais, mais super intéressant. A noter que ce site propose aussi d'autres techniques
--------------------------------------------------------------------------------

4 - Quelques éditeurs CSS

TopStyle Lite 3.10

un logiciel freeware plutôt sympa
( proposé par kilix le 22/02/2005 )

--------------------------------------------------------

5 - Quelques validateurs d'accessibilité

Validateur d'accessibilité sur le site acces-pour-tous

Validateur CSS


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
 
Start new topic
Réponse(s)
PAT.K
posté 19 Apr 2007, 15:32
Message #2


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 1
Inscrit : 19-April 07
Membre no 16698



/* **********************************/
/* les differents selecteurs */
/* **********************************/
/* 1. s'applique à toutes les balises p */
p {
font:Arial, Helvetica, sans-serif small bold ;
color:blue;
}
/* **********************************/
/* 2. s'applique à toutes les balises div ayant comme classe "jaune" */
div.fd_jaune {
font:Arial, Helvetica, sans-serif small bold ;
font-variant: normal;
background-color: #FFCC00;
}
/* **********************************/
/* 3. s'applique à toutes les balises ayant comme classe "rouge" */
.rouge {
/* la propriété inherit indique la classe ici definie herite de la classe du parent */
font-variant: inherit;
font-weight: bold;
color: #CC0000;
}
/* **********************************/
/* selecteur universel */
* {
background-color:#cccccc;

}
/* **********************************/
/* selecteurs d'identifiant id */
#menu_bleu {
background-color:#0099FF;
color:#CCC;
}

/* **********************************/
/* selecteurs d'attributs */
/* igorés par IE */
/* concerne toutes les balises acronym ayant pour atribut tittle */
acronym[title] {
background-color:green;
}
*[title]{
letter-spacing:10px;
}
/* concerne toutes les balises h1 ayant pour atribut tittle et id */
h1[title][id] {
color:#000000;
background-color:#FFFFFF;
}
h1[title="titre 1"] {
text-align:center;
}

/* **********************************/
/* sélecteurs parent descendants */
/* igorés par IE */
div h2 {
border: double;
}
ul li {
background-color:black;
}
ul li ol li {
background-color:red;
}
/* **********************************/
/* sélecteurs d'elements adjacents */
/* s'applique au deuxieme élément ayant un lien de fratie */
/* s'il suit immediatement le premier */
div+h3{
font-size:large;
color:green;
}


/* *************************************/
/* les pseudo-classes
/* ************************************/

/* les liens */
/* link permet d'igorer les ancres nommées */
a:link {
color:#FF6600;
}
a:visited {
color:#000099;
}
a:hover {
background-color:#660000;

}
/* lors du clic */
a:active {
background-color:#FFFFFF;
}
/*******************************/
/* igorés par IE */
input:focus {
background-color:#0099FF;
color:#FFFFFF;
}
/* s'applique à la balise p uniquement si elle est le premier enfant */
p:first-child {
background-color:#FFFFFF;
}
/* si on veut appliquer un style suivant une langue : <p lang="fr">pseudo-classe lang</p>*/
p:lang(fr) {
background-color:#FFFF00;
color:#000000;
}

/* *************************************/
/* les pseudo elements
/* ************************************/
#pseudo_element {
color:#000000;
}
#pseudo_element:first-letter {
font-size:300%;
}
#pseudo_element:first-line {
color:#FF0000;
}

/* ajoute au debut ou à la fin les caractères définis dans le content */
/* igorés par IE */
#pseudo_element_2:before {
content:"<<";
font-weight:bold;
color:#000000
}
#pseudo_element_2:after {
content:">>";
font-weight:bold;
color:#000000;
}
/* !important */
/* s'il ya conflit entre 2 propriété !important prend la priorité */
/* la classe ci-dessous forcera tous les fonds en bleu */
/*///////////////////////////
* {
background-color:#CCCCFF !important;
}
//////////////////////////////*/
Go to the top of the page
 

Les messages de ce sujet


Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 28th March 2024 - 12:34
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)