Archive pour le «CSS» Catégorie
Comment Précharger les images avec CSS
C'est un moyen simple de précontrainte quelques images en utilisant le CSS uniquement.
# (ImagePreload display: inline; hauteur: 0px; largeur: 0px; background-image: url (imagePath1.extension); background-image: url (imagePath2.extension); background-image: url (imagePath3.extension); background-image: url (imagePath4.extension); background-image: url (); )
Créer SEO Friendly URLs
Si vous êtes comme moi, vous êtes fatigués de voir les chaînes de requête laide viré sur votre site Web. Le très beau (et facile) solution pour cela est d'utiliser mod_rewrite Apache. En général, cela nécessite seulement l'ajout de quelques lignes à votre fichier. Htaccess. Quand j'ai commencé à essayer de créer mon premier SEO URL conviviale, je ne pourrais pas obtenir mon site web de reconnaître l'un des code dans mon fichier. Htaccess. Évidemment, c'est très frustrant. Après quelques semaines de recherches sur internet et je me demandais pourquoi ma "parfait" code ne fonctionnait pas, j'ai réalisé que mon compte d'hébergement GoDaddy PHP était hébergé sur un serveur exécutant Windows IIS7. La réponse à mes problèmes m'a frappé comme une tonne de briques! Windows ne supporte pas l'utilisation ou les fichiers. Htaccess! Une fois je suis passé à un serveur Linux mon. Htaccess code fonctionnait parfaitement.
Le code ci-dessous http://www.yoururl.com/location/texas/dallas interne rediriger vers http://www.yoururl.com/index.php?state=texas&city=dallas. Le SEO friendly URL sera affichée, mais la page sera exécuté que si le complète, url chaîne de requête en charge a été utilisé.
Le [L] à la fin de chaque ligne indique le serveur de cesser d'exécuter le code htaccess. Si la ligne précédente a été couronnée de succès.
-
Options FollowSymLinks +
Options-MultiViews
RewriteEngine on
RewriteRule ^ / localisation ([a-zA-Z0-9_-]+)/([ a +-zA-Z0-9_-]) $ index.php? State = 1 $ et la ville = $ 2 [L]
RewriteRule ^ / localisation ([a-zA-Z0-9_-] +) index.php? State = $ 1 [L]
-
Pour plus de règles mod_rewrite Apache, consultez le Apache Rewrite Cheatsheet .
Comment utiliser les CSS pour les éléments de style d'entrée HTML séparément
Un jour, il ya quelques, je faisais un peu de style CSS et couru à travers quelque chose que je pensais serait utile.
Si jamais vous voulez style de multiples éléments d'entrée HTML séparément en utilisant CSS, il vous suffit d'accéder à l'attribut type.
Par exemple, si je veux mettre de la couleur du texte de mon champ de texte à blanc, mais je veux la couleur du texte de mon bouton "soumettre" d'être noir, je voudrais utiliser le code suivant:
entrée de type [= "text"] (color: # FFFFFF;)
entrée de type [= "button"] (color: # 000000;)
C'est vraiment aussi simple que cela!
PS ... désolé pour le long délai entre les poteaux ... ma femme et moi avons notre deuxième enfant le chemin pour les choses sont devenues très fou pour nous!
Style Set dynamiquement avec JavaScript
Changer le style d'un objet est aussi simple que de trouver l'objet sur la page, puis en définissant la valeur de nouveaux atours. Utilisez le code ci-dessous à titre d'exemple.
/ / Trouver le div que vous souhaitez mettre à jour divArray var = document.getElementById ('myDiv'); / / Définit le style de largeur divArray.style.width = '300px;
CSS noms d'attribut sont légèrement différents lorsqu'ils sont utilisés en JavaScript, donc vous aurez besoin pour faire référence à la liste ci-dessous avant de vous frustrés et tirez vos cheveux.
| CSS attribut à JavaScript de référence | |
| CSS propriété | JavaScript référence |
| fond | fond |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | BackgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| frontière | frontière |
| border-bottom | borderBottom |
| border-bottom-color | borderBottomColor |
| border-bottom-style | borderBottomStyle |
| border-bottom-width | borderBottomWidth |
| border-color | borderColor |
| border-left | borderLeft |
| border-left-color | borderLeftColor |
| border-left-style | borderLeftStyle |
| border-left-width | borderLeftWidth |
| border-right | borderRight |
| border-right-color | borderRightColor |
| border-right-style | borderRightStyle |
| border-right-width | borderRightWidth |
| border-style | borderStyle |
| border-top | borderTop |
| border-top-color | borderTopColor |
| border-top-style | borderTopStyle |
| border-top-width | borderTopWidth |
| border-width | borderWidth |
| claire | claire |
| agrafe | agrafe |
| couleur | couleur |
| curseur | curseur |
| afficher | afficher |
| filtre | filtre |
| fonte | fonte |
| font-family | fontFamily |
| font-size | fontSize |
| font-variant | fontVariant |
| font-weight | fontWeight |
| hauteur | hauteur |
| à gauche | à gauche |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style | ListStyle |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style-type | listStyleType |
| marge | marge |
| margin-bottom | marginBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| débordement | débordement |
| rembourrage | rembourrage |
| padding-bottom | paddingBottom |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| page-break-after | pageBreakAfter |
| page-break-before | pageBreakBefore |
| position | position |
| flotteur | styleFloat |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-decoration: blink | textDecorationBlink |
| text-decoration: line-through | textDecorationLineThrough |
| text-decoration: none | textDecorationNone |
| text-decoration: overline | textDecorationOverline |
| text-decoration: underline | textDecorationUnderline |
| text-indent | textIndent |
| text-transform | textTransform |
| haut | haut |
| vertical-align | verticalAlign |
| visibilité | visibilité |
| largeur | largeur |
| z-index | zIndex |
Banque de la Croix-CSS min-height
Il est un attribut min-height en CSS. Il est utile, mais pas bien pris en charge par IE 6. Ce qui suit est la meilleure façon de mettre une hauteur minimale sur une div qui est cross-browser compatible.
min-height: 200px; height: auto! important; Hauteur: 200px;
