MySQL et CSS- P12

MySQL et CSS- P12: Dans la première partie, lancez-vous dans la création de votre premier site web dynamique en PHP. Au travers d’exemples simples et concrets, apprenez à votre rythme à développer un site web complet, relié à une base de données MySQL
Nội dung trích xuất từ tài liệu:
MySQL et CSS- P12 Relooker des formulairesLa pseudo-classe :langLa pseudo-classe :lang permet de couvrir les besoins liés à la typogra-phie et à la syntaxe de chaque langue.:lang(fr-CH) > Q { quotes: ’« ’ ’ »’ ’’} /*4 arguments*/Les deux premières données concernent les guillemets et les deuxdernières désignent les guillemets à l’intérieur d’autres guillemets. Lecode se rpésente avec quatre arguments ou les deux premiers seulement..En français de Suisse on utilise un double chevron – et un simple chevronà l’intérieur des guillemets. Pour connaître les caractères de guillemets,allez sur www.mus.ulaval.ca/roberge/gdrm/08-codes.htm.m Figure 4.29 : Langues et caractères Double Poche CSS • 5514 La réalisation du sitem Figure 4.30 : Liens et languesLes pseudo-élémentsLe pseudo-élément :first-lineLe pseudo-élément :first−line s’applique à la première ligne affichéedans un paragraphe. Cette ligne est celle qui s’affiche vraiment dans lenavigateur et sera donc différente selon le navigateur, la largeur affichée,la taille de la police, l’interlettrage, etc. Ce pseudo-élément ne correspondà aucune balise HTML. Pour des articles où l’auteur prévoit un chapeausans créer une nouvelle boîte spécifique, il est possible d’utiliser cepseudo-élément pour créer une première ligne en gras. La longueur de lapremière ligne dépend de l’affichage du navigateur, de la taille de lapolice, etc.m Figure 4.31 : Première ligne en grasPour la désigner précisément, il suffit de mettre un passage à la ligne justeà la fin du chapeau avec un et d’insérer dans la feuille de style :552 • Double Poche CSS Relooker des formulairesp:first-line { text-weight: bold }Dans ce pseudo-élément, il est possible de mettre toutes les propriétés defont, d’arrière-plan et toutes les propriétés concernant l’espacement de laligne, l’interlettrage, etc. Ce procédé risque d’être envahissant, vu qu’ils’applique à tous les paragraphes.Le pseudo-élément :first-letterCet élément spécifie les caractéristiques des lettrines. Il s’agit despremières lettres d’un paragraphe d’un corps supérieur à ce dernier et quise tiennent sur deux, parfois trois lignes. En typographie française, leslettres suivantes sont en petites capitales. Si la lettrine commence unecitation, les guillemets ouvrants viennent dans le corps du paragraphe etnon dans celui de la lettrine. L’utilité de la lettrine dans une page estl’ornementation ; elle permet en outre de désigner le commencement dutexte.Sur le Web, la création d’une lettrine est un casse-tête.p:first-letter { font-weight: bold; text-transform: uppercase;font-size: 200%}La première lettre des paragraphes est plus grande, plus grosse et encapitales, mais elle ne descend pas sur deux lignes, comme le fait unelettrine.La solution est donc de mettre la lettre dans une boîte flottante..lettrine {float: left;font-weight: bold;text-transform: uppercase;font-size: 210%;margin-right: 10px;}Il reste à mettre les lettres restantes du mot en petites capitales.font-variant: small-caps; Double Poche CSS • 5534 La réalisation du siteLe résultat est peu harmonieux et approximatif pour beaucoup d’opéra-tions. Si vous voulez absolument mettre des lettrines, insérez plutôt desimages dans une boîte flottante.m Figure 4.32 : LettrineLes pseudo-éléments :before et :afterLes pseudo-éléments :before et :after servent à insérer un objet avantou après le contenu d’un élément. L’objet peut être un mot, uneimage, etc. mais pas du code HTML.Voici des pseudo-éléments très pratiques pour créer une FAQ (foire auxquestions). Ces pages sont faites de questions-réponses et ici la questionest surlignée en jaune avec des caractères bleus. Le problème est queInternet Explorer n’accepte pas la génération de contenu avec la propriétécontent.p.QR{ background-color: FFEDA6; color: 003D6C; font-family: Arial;}p.QR::before{ content: Question: ; font-family: Arial; font-size: 1.1em;}p.QR::after{ content: ?; font-family: Arial; font-size: 1.1em;}554 • Double Poche CSS Relooker des formulairesVu le problème avec Internet Explorer, il est peut-être plus judicieux deplacer le point d’interrogation avec son espace à la main.m Figure 4.33 : FAQ www.jardinauxpapillons.comLes filtresPlusieurs filtres sont à la disposition du développeur pour créer des effetssur des images ou des textes. Ils sont reconnus uniquement par InternetExplorer 4 et les versions supérieures. Ils ne peuvent donc être utilisés ques’ils ne sont pas essentiels. Ils peuvent sembler des gadgets mais certainssont intéressants pour donner un style aux images d’un site. La propriéténe fonctionne que dans une balise en ligne. Sinon, le conseil est de créerces effets directement sur l’image avec un logiciel graphique. Double Poche CSS • 5554 La réalisation du sitealphaLe filtre alpha crée dans l’image une transparence. Le paramètreopacity, qui contrôle l’opacité, est obligatoire : 0 correspond à latransparence maximale, et 100 à l’opacité maximale.style permet de choisir les types de dégradés : 0 pour uniforme, 1 pourlinéaire et 2 pour radial.Avec style=1, pour intégrer un dégradé, il faut nécessairement indiquerune valeur de départ (startx et starty) et de fin (finishx et finishy)en pixels ou en pourcentage.m Figure 4.34 : alphashadowCe filtre comporte deux paramètres : la couleur en code hexadécimal et ladirection en degrés. L’ombre, contrairement à l’ombre portée de drops-hadow, est diffuse.filter: shadow (color=#CACACA, direction=45);dropshadowCe filtre crée une o ...